Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fixes following threads design implementation review #7100

Merged
merged 23 commits into from
Nov 11, 2021
Merged

Fixes following threads design implementation review #7100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
cecb764
Change thread summary dimensions
Nov 8, 2021
cb2956c
Add gutter for notification dot in thread panel
Nov 8, 2021
981aa03
Update thread list spacing and summary
Nov 9, 2021
874f494
lint
Nov 9, 2021
2221d9c
Hide 'Show Threads' in room info list
Nov 9, 2021
6b0db79
Implement chevron on hover for thread summary
Nov 9, 2021
63937ea
Fix AutoHideScrollbar implementation in ThreadView
Nov 9, 2021
bb65ff6
Thread panel tile displays last reply formatted ts
Nov 9, 2021
90be9d2
Add a two line ellipsis for thread panel items
Nov 9, 2021
ce87c9c
Fix permalinkCreator on ThreadPanel
Nov 9, 2021
d5809f9
Fix thread list context menu not opening
Nov 9, 2021
d6475cd
Make thread header button close the right panel
Nov 9, 2021
4c39873
Implement context menu dropdown UI
Nov 9, 2021
a7f56ee
Implement chevron design
Nov 9, 2021
8b77fbe
Fix thread summary sizing
Nov 9, 2021
c0ab136
Make thread summary follow parent container sizing
Nov 9, 2021
030f087
Fix thread summary UI
Nov 10, 2021
0992d40
Apply correct action bar focused state
Nov 10, 2021
d709103
Fix e2ee shield position in thread list view
Nov 10, 2021
8b4ce47
Fix thread panel header UI
Nov 10, 2021
8b6fda9
Update thread copy
Nov 10, 2021
36e3bb3
Fix thread summary
Nov 10, 2021
8fd611a
design review last
Nov 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion res/css/structures/_ContextualMenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ limitations under the License.
position: absolute;
font-size: $font-14px;
z-index: 5001;
contain: content;
}

.mx_ContextualMenu_right {
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_RightPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ limitations under the License.
display: flex;
flex-direction: column;
border-radius: 8px;
padding: 4px 0;
padding: 8px 0;
box-sizing: border-box;
height: 100%;
contain: strict;
Expand Down
8 changes: 4 additions & 4 deletions res/css/views/right_panel/_BaseCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ limitations under the License.
flex: 1;

.mx_BaseCard_header {
margin: 8px 0;
margin: 4px 0;

> h2 {
margin: 0 44px;
Expand All @@ -40,13 +40,13 @@ limitations under the License.
width: 20px;
margin: 12px;
top: 0;
border-radius: 10px;
border-radius: 50%;

&::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
height: inherit;
width: inherit;
top: 0;
left: 0;
mask-repeat: no-repeat;
Expand Down
132 changes: 103 additions & 29 deletions res/css/views/right_panel/_ThreadPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,29 @@ limitations under the License.
display: flex;
flex-direction: column;

padding-right: 0;

.mx_BaseCard_header {
margin-bottom: 12px;
.mx_BaseCard_close,
.mx_BaseCard_back {
margin-top: 15px;
width: 24px;
height: 24px;
}
.mx_BaseCard_back {
left: -4px;
}
.mx_BaseCard_close {
right: -8px;
right: -4px;
}
}

.mx_ThreadPanel__header {
.mx_BaseCard_back ~ .mx_ThreadPanel__header {
width: calc(100% - 60px);
margin-left: 30px;
}

.mx_ThreadPanel__header {
width: calc(100% - 30px);
height: 24px;
display: flex;
flex: 1;
justify-content: space-between;
Expand All @@ -47,13 +55,23 @@ limitations under the License.

.mx_AccessibleButton {
font-size: 12px;
color: $primary-content;
color: $secondary-content;
}

.mx_MessageActionBar_optionsButton {
position: relative;
}

.mx_MessageActionBar_maskButton {
--size: 24px;
width: var(--size);
height: var(--size);
&::after {
mask-size: var(--size);
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
}
}

.mx_ContextualMenu_wrapper {
// It's added here due to some weird error if I pass it directly in the style, even though it's a numeric value, so it's being passed 0 instead.
// The error: react_devtools_backend.js:2526 Warning: `NaN` is an invalid value for the `top` css style property.
Expand All @@ -70,38 +88,59 @@ limitations under the License.

font-size: 12px;
color: $secondary-content;
padding-top: 10px;
padding-bottom: 10px;

border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
}

.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px;
border-bottom-color: $quinary-content;
&::after {
content: "";
border: inherit;
border-bottom-color: $background;
position: absolute;
top: 1px;
left: -8px;
}
}

.mx_ThreadPanel_Header_FilterOptionItem {
display: flex;
flex-grow: 1;
justify-content: space-between;
flex-direction: column;
overflow: visible;
width: 100%;
padding: 20px;
padding-left: 30px;
padding: 10px 20px 10px 30px;
position: relative;

&:hover {
background-color: $event-selected-color;
}
&[aria-selected="true"] {
&::before {
:first-child {
margin-left: -20px;
}
:first-child::before {
content: "";
width: 12px;
height: 12px;
grid-column: 1;
grid-row: 1;
margin-right: 8px;
mask-image: url("$(res)/img/feather-customised/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
position: absolute;
top: 22px;
left: 10px;
background-color: $primary-content;
display: inline-block;
vertical-align: middle;
}
}

:last-child {
color: $secondary-content;
}
}
}

Expand Down Expand Up @@ -131,24 +170,20 @@ limitations under the License.
}

.mx_AutoHideScrollbar {
border-radius: 8px;
}
Comment on lines 172 to -135
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about this solution? #7105
I also fiddled around with this, when I wanted to get the hidden scrollbar with rounded corners working with the TimelineCard (Chat card in the right panel). I wanted it to be based on the same solution as the threads so I played around with the threads as well.

.mx_AutoHideScrollbar {
          border-radius: 8px;
          padding-right: 0px;
          -ms-overflow-style: none;  // IE and Edge
          scrollbar-width: none;  // Firefox
          
          &::-webkit-scrollbar {
              display: none; // Chrome, Safari, Opera
          }
}

Hiding the scrollbar with the browser and not do the margin/padding trick gave good results with rounded corners.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think that hiding the scrollbar is an option. They are an important indicator to orientate yourself in the app, and I believe they serve some accessibility purpose too


.mx_RoomView_messageListWrapper {
background: #fff;
background-color: $background;
padding: 8px;
border-radius: inherit;
border-radius: 8px;
width: calc(100% - 16px);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume box-sizing is no help to remove the calc...?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It created all sort of funky regressions with the scrollbar. It's likely that a more elegant solution exists but I did not manage to figure it out yet

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as reference: #7105
(But gsouquet already found this anyways. Still wanted to link it here again.)

padding-right: 16px;
}

.mx_ScrollPanel {
.mx_RoomView_MessageList {
padding: 0;
}
.mx_RoomView_MessageList {
padding-left: 12px;
padding-right: 0;
}

.mx_EventTile, .mx_EventListSummary {
// Account for scrollbar when hovering
width: calc(100% - 3px);
margin: 0 2px;
padding-top: 0;

Expand All @@ -170,19 +205,28 @@ limitations under the License.
.mx_DateSeparator {
display: none;
}

&.mx_EventTile_clamp:hover {
cursor: pointer;
}
}

.mx_EventTile:not([data-layout=bubble]) {
.mx_EventTile_e2eIcon {
left: 8px;
}
}

.mx_MessageComposer {
background-color: $background;
border-radius: 8px;
margin-top: 8px;
width: calc(100% - 8px);
padding: 0 8px;
box-sizing: border-box;
}

.mx_ThreadPanel_dropdown {
padding: 4px 8px;
padding: 3px 8px;
border-radius: 4px;
line-height: 1.5;
user-select: none;
Expand All @@ -207,6 +251,36 @@ limitations under the License.
.mx_ThreadPanel_dropdown[aria-expanded=true]::before {
transform: rotate(180deg);
}

.mx_MessageTimestamp {
font-size: $font-12px;
}
}

.mx_ThreadPanel_replies {
margin-top: 8px;
}

.mx_ThreadPanel_repliesSummary {
&::before {
content: "";
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
display: inline-block;
height: 18px;
min-width: 18px;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
margin-right: 8px;
vertical-align: middle;
}

color: $secondary-content;
font-weight: 600;
float: left;
margin-right: 12px;
font-size: $font-12px;
}

.mx_ThreadPanel_viewInRoom::before {
Expand Down
Loading