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

Implement improved spacing for the thread list and timeline #8337

Merged
merged 41 commits into from
Apr 29, 2022
Merged
Show file tree
Hide file tree
Changes from 35 commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
b7f9296
Fix avatar size: Thread list and thread timeline
luixxiul Apr 14, 2022
54f4dfc
Thread list: Right padding
luixxiul Apr 14, 2022
05cad5e
Thread list: Padding inside each thread
luixxiul Apr 14, 2022
24d65ab
Thread list: Margin between thread and border
luixxiul Apr 14, 2022
5bcde0c
Thread list: Align the reply summary, avatar, and the content
luixxiul Apr 14, 2022
48e4db9
Thread list: Spacing with the scroll bar enabled / disabled
luixxiul Apr 15, 2022
31711f1
Thread list: Remove the magic number from the timestamp
luixxiul Apr 15, 2022
7d3ac60
Thread list: Remove !important to clarify the rule dependency
luixxiul Apr 15, 2022
0ed326f
Thread list: Spacing horizontal bar and right border
luixxiul Apr 15, 2022
8655734
Thread list: MessageActionBar
luixxiul Apr 15, 2022
fa25451
Thread list: Dedupe (profile and eventtile line padding)
luixxiul Apr 15, 2022
a93a5a8
Thread list: Background-color
luixxiul Apr 15, 2022
c4b7a3b
Normalize: Thread info icon
luixxiul Apr 15, 2022
fb8cd59
Thread Timeline: Right margin
luixxiul Apr 15, 2022
317654f
Thread list: Right margin
luixxiul Apr 15, 2022
2a366bf
Thread Timeline: Avatar left padding
luixxiul Apr 15, 2022
8ee9e71
Thread Timeline: Message left margin
luixxiul Apr 15, 2022
25b854f
Thread Timeline: Action bar position
luixxiul Apr 15, 2022
bba2bde
Thread Timeline: Message action bar position and padding inside a mes…
luixxiul Apr 15, 2022
e7988ec
Thread Timeline: Spacing between the avatar and the right border (bub…
luixxiul Apr 15, 2022
ba6d4a9
Add comments
luixxiul Apr 15, 2022
29bb381
Thread Timeline: Fix sender ID, avatar, and spacing
luixxiul Apr 15, 2022
d80cc2e
Merge branch 'develop' into Thread
luixxiul Apr 20, 2022
0661f0f
Set z-index to MessageActionBar with a variable
luixxiul Apr 26, 2022
e9ea310
8px spacing with AutoHideScrollbar
luixxiul Apr 26, 2022
b4187e4
8px spacing below mx_EventTile_line
luixxiul Apr 26, 2022
b739ebf
Add 2px to leftOffset
luixxiul Apr 26, 2022
5b867c6
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
luixxiul Apr 27, 2022
e97d112
Remove ThreadPanel_ThreadInfo
luixxiul Apr 27, 2022
3ab6c70
Vertical: 12px gap and 20px gap
luixxiul Apr 27, 2022
a413e3a
Horizontal: spacing
luixxiul Apr 27, 2022
ef33183
Vertical: spacing around 1px horizontal line
luixxiul Apr 28, 2022
addd6a7
Fix regressions: chat panel with a maximized widget
luixxiul Apr 28, 2022
afce31e
Set padding-top: 16px
luixxiul Apr 28, 2022
5fb4274
Fix regression: timestamp position inside a thread
luixxiul Apr 28, 2022
b737bef
Fix position of the message action bar
luixxiul Apr 28, 2022
1a5b503
Fix regression: line height of profile
luixxiul Apr 28, 2022
e65bb2e
Simplify the structure
luixxiul Apr 28, 2022
423a235
Revert the one line change
luixxiul Apr 28, 2022
7c06cbe
Update src/components/views/rooms/EventTile.tsx
luixxiul Apr 29, 2022
508dbb2
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
luixxiul Apr 29, 2022
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
23 changes: 23 additions & 0 deletions res/css/_common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -692,6 +692,29 @@ legend {
}
}

@define-mixin ThreadsAmount {
$threadInfoLineHeight: calc(2 * $font-12px);

color: $secondary-content;
font-weight: $font-semi-bold;
line-height: $threadInfoLineHeight;
white-space: nowrap;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;
}

@define-mixin ThreadInfoIcon {
content: "";
display: inline-block;
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
height: 18px;
min-width: 18px;
background-color: $secondary-content !important;
mask-repeat: no-repeat;
mask-size: contain;
}

@define-mixin ListResetDefault {
list-style: none;
padding: 0;
Expand Down
46 changes: 29 additions & 17 deletions res/css/views/right_panel/_ThreadPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,6 @@ limitations under the License.
height: 100px;
overflow: visible;

&:not(.mx_ThreadView).mx_BaseCard {
padding-right: 2px;
}

.mx_BaseCard_header {
margin-bottom: 12px;

Expand Down Expand Up @@ -111,15 +107,26 @@ limitations under the License.
.mx_AutoHideScrollbar {
background-color: $background;
border-radius: 8px;
width: calc(100% - 24px);
padding-right: 18px;
padding-inline-end: 0;
overflow-y: scroll; // set gap between the thread tile and the right border
}

// Override _GroupLayout.scss for the thread panel
.mx_GroupLayout {
.mx_EventTile {
> .mx_DisambiguatedProfile {
margin-inline-start: 0;
line-height: normal;
}

.mx_MessageTimestamp {
position: initial;
width: auto;
}
}
}

&.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
/* the scrollbar is 8px wide, and we want a 12px gap with the side of the
panel. Hence the magic number, 8+4=12 */
width: calc(100% + 6px);
padding-right: 4px;
position: relative;
min-height: 0; // don't displace the composer
flex-grow: 1;
Expand All @@ -129,9 +136,15 @@ limitations under the License.
}
}

.mx_RoomView_messagePanel { // To avoid the rule from being applied to .mx_ThreadPanel_empty
.mx_RoomView_messageListWrapper {
width: calc(100% + 6px); // 8px - 2px
}
}

.mx_RoomView_MessageList {
padding-left: 12px;
padding-right: 0;
padding-inline-start: $spacing-8;
padding-inline-end: $spacing-8;
content-visibility: visible;
}

Expand Down Expand Up @@ -256,14 +269,14 @@ limitations under the License.
}

.mx_ThreadPanel_replies {
margin-top: 8px;
margin-top: $spacing-8;
display: flex;
align-items: center;
position: relative;

.mx_ThreadSummary_threads-amount {
color: $secondary-content;
font-size: $font-12px;
.mx_ThreadPanel_ThreadsAmount {
@mixin ThreadsAmount;
font-size: $font-12px; // Same font size as the counter on the main panel
}
}

Expand All @@ -286,7 +299,6 @@ limitations under the License.
top: 0;
bottom: 0;
left: 0;
right: 6px;
padding: 20px;

h2 {
Expand Down
5 changes: 0 additions & 5 deletions res/css/views/right_panel/_TimelineCard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,6 @@ limitations under the License.
border-radius: 8px;
}

.mx_AutoHideScrollbar {
padding-right: 10px;
width: calc(100% - 10px);
}

.mx_NewRoomIntro {
margin-left: 36px;
}
Expand Down
98 changes: 61 additions & 37 deletions res/css/views/rooms/_EventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ limitations under the License.
*/

$left-gutter: 64px;
$threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
$eventTileZIndex: 10;

.mx_EventTile {
flex-shrink: 0;
Expand Down Expand Up @@ -683,15 +685,8 @@ $left-gutter: 64px;
.mx_ThreadPanel_replies::before,
.mx_ThreadSummaryIcon::before,
.mx_ThreadSummary::before {
content: "";
display: inline-block;
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
height: 18px;
min-width: 18px;
@mixin ThreadInfoIcon;
background-color: $secondary-content !important;
mask-repeat: no-repeat;
mask-size: contain;
}

.mx_ThreadSummaryIcon {
Expand All @@ -714,29 +709,51 @@ $left-gutter: 64px;
width: initial;
}

.mx_GroupLayout {
.mx_EventTile[data-shape=ThreadsList] {
.mx_EventTile_line {
padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss
}
}

.mx_EventTile[data-layout="group"],
.mx_EventTile[data-shape=ThreadsList] {
.mx_MessageActionBar {
right: 0;
top: -36px; // 2px above EventTile
z-index: $eventTileZIndex;
}
}
}

.mx_EventTile[data-shape=ThreadsList] {
--topOffset: 20px;
--leftOffset: 46px;
--topOffset: $spacing-12;
--leftOffset: 48px;
$borderRadius: 8px;
$padding: $spacing-8;
$hrHeight: 1px;

margin: var(--topOffset) 16px var(--topOffset) 0;
margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); // include the height of horizontal line
padding: $padding $spacing-24 $padding $padding;
border-radius: $borderRadius;

display: flex;
flex-flow: wrap;
align-items: center;

&:hover {
&:hover,
// To cancel "&.mx_EventTile:hover .mx_EventTile_line"
&:not([data-layout=bubble]):hover .mx_EventTile_line {
background-color: $system;
}

&::after {
content: "";
position: absolute;
left: var(--leftOffset);
right: 0;
height: 1px;
bottom: calc(-1 * var(--topOffset));
left: calc(var(--leftOffset) + $padding);
right: $spacing-24; // 24px: 32px - 8px (right padding)
height: $hrHeight;
bottom: calc(-1 * var(--topOffset) - $hrHeight); // exclude the height of horizontal line
background-color: $quinary-content;
}

Expand All @@ -748,7 +765,7 @@ $left-gutter: 64px;
left: 0;
right: 0;
/* enough to cover all sibling elements */
z-index: 10;
z-index: $eventTileZIndex;
}

&:last-child {
Expand All @@ -763,22 +780,15 @@ $left-gutter: 64px;
margin-top: 0;
}

padding-top: 0;

.mx_EventTile_avatar {
top: 0;
left: 0;
top: $padding;
left: $padding;
}

.mx_DisambiguatedProfile {
margin-left: var(--leftOffset) !important;
flex: 1;
margin-right: 12px;

display: inline-flex;
// not a fan of the magic number here, but I just tweaked
// the hardcoded value of the current implementation
max-width: calc(100% - 96px);
flex: 1;
}

.mx_DisambiguatedProfile_displayName,
Expand All @@ -800,14 +810,17 @@ $left-gutter: 64px;
.mx_EventTile_line {
width: 100%;
box-sizing: border-box;
padding-left: var(--leftOffset) !important;
border-radius: $borderRadius !important; // override 4px
}

.mx_DisambiguatedProfile,
.mx_EventTile_line {
padding-inline-start: var(--leftOffset);
}

.mx_MessageTimestamp {
position: initial !important;
max-width: 80px;
width: auto !important;
width: auto;
}
}

Expand All @@ -830,6 +843,8 @@ $left-gutter: 64px;
flex-direction: column;

.mx_EventTile_line {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0;
order: 10 !important;
}
Expand All @@ -843,10 +858,10 @@ $left-gutter: 64px;
padding-left: 0;
padding-right: 0;
}
}

.mx_EventTile:not([data-layout=bubble]) {
padding-top: 14px; // due to layout differences, this odd number matches the 18px padding-top of main tl events
&:not([data-layout=bubble]) {
padding-top: $spacing-16;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@janogarcia .mx_ThreadView .mx_EventTile:not([data-layout=bubble])'s top padding is set with this line.

}
}

.mx_EventTile[data-layout=bubble] {
Expand Down Expand Up @@ -878,7 +893,7 @@ $left-gutter: 64px;
}

.mx_EventTile[data-layout=group] {
$spacing-start: 48px;
$spacing-start: 56px; // 56px: 64px - 8px (padding)
width: 100%;

.mx_EventTile_content,
Expand All @@ -900,14 +915,14 @@ $left-gutter: 64px;
}

.mx_MessageTimestamp {
top: 2px !important;
width: auto;
top: 2px; // Align with mx_EventTile_content
}

.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: calc(14px + $selected-message-border-width);
gap: $spacing-16; // gap between the avatar and the sender ID
padding-inline-start: $spacing-8;

a {
flex: 1;
Expand Down Expand Up @@ -950,4 +965,13 @@ $left-gutter: 64px;
padding-right: 11px; // align with right edge of input
margin-right: 0; // align with right edge of background
}

.mx_GroupLayout {
.mx_EventTile {
.mx_EventTile_line {
padding-top: 2px;
padding-bottom: 2px;
}
}
}
}
3 changes: 2 additions & 1 deletion res/css/views/rooms/_GroupLayout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ $left-gutter: 64px;
width: $MessageTimestamp_width;
}

.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 1px;
padding-bottom: 3px;
line-height: $font-22px;
Expand Down
10 changes: 3 additions & 7 deletions res/css/views/rooms/_ThreadSummary.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,8 @@ $threadSummaryLineHeight: calc(2 * $font-12px);
}

// XXX: these classes are re-used outside of the component
.mx_ThreadSummary_threads-amount {
font-weight: $font-semi-bold;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;
white-space: nowrap;
line-height: $threadSummaryLineHeight;
.mx_ThreadSummary_ThreadsAmount {
@mixin ThreadsAmount;
}

.mx_ThreadSummary_sender {
Expand All @@ -113,5 +109,5 @@ $threadSummaryLineHeight: calc(2 * $font-12px);
}

.mx_ThreadSummary_avatar {
margin-right: $spacing-8;
margin-inline-end: $spacing-8;
}
8 changes: 5 additions & 3 deletions src/components/views/rooms/EventTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -517,7 +517,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
}

return <div className="mx_ThreadPanel_replies">
<span className="mx_ThreadSummary_threads-amount">
<span className="mx_ThreadPanel_ThreadsAmount">
{ this.state.thread.length }
</span>
<ThreadMessagePreview thread={this.state.thread} />
Expand Down Expand Up @@ -1032,8 +1032,10 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
if (this.context.timelineRenderingType === TimelineRenderingType.Notification) {
avatarSize = 24;
needsSenderProfile = true;
} else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) {
avatarSize = 36;
} else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList ||
this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation
) {
luixxiul marked this conversation as resolved.
Show resolved Hide resolved
avatarSize = 32;
needsSenderProfile = true;
} else if (eventType === EventType.RoomCreate || isBubbleMessage) {
avatarSize = 0;
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/rooms/ThreadSummary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
}}
aria-label={_t("Open thread")}
>
<span className="mx_ThreadSummary_threads-amount">
<span className="mx_ThreadSummary_ThreadsAmount">
{ countSection }
</span>
<ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
Expand Down