From b7f92961ab8219f08e2e953de0ac864192a5892b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 14 Apr 2022 19:33:26 +0000 Subject: [PATCH 01/38] Fix avatar size: Thread list and thread timeline Signed-off-by: Suguru Hirahara --- src/components/views/rooms/EventTile.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 722b77b5af0..f528f77ea84 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1044,8 +1044,10 @@ export class UnwrappedEventTile extends React.Component { avatarSize = 24; needsSenderProfile = true; } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) { - avatarSize = 36; + avatarSize = 32; needsSenderProfile = true; + } else if (!this.props.continuation && this.context.timelineRenderingType === TimelineRenderingType.Thread) { + avatarSize = 32; } else if (eventType === EventType.RoomCreate || isBubbleMessage) { avatarSize = 0; needsSenderProfile = false; From 54f4dfc12e576e82e62d973bcd516b39794967e9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 14 Apr 2022 20:35:39 +0000 Subject: [PATCH 02/38] Thread list: Right padding Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 7d2fb2817d5..072c0111dc2 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -847,7 +847,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); --leftOffset: 46px; $borderRadius: 8px; - margin: var(--topOffset) 16px var(--topOffset) 0; + margin: var(--topOffset) 14px var(--topOffset) 0; // 14px: 32px - 18px (padding of mx_AutoHideScrollbar) border-radius: $borderRadius; display: flex; From 05cad5e3dbb48a14cf8bfca7bcbb11028f27704f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 14 Apr 2022 20:51:08 +0000 Subject: [PATCH 03/38] Thread list: Padding inside each thread Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 072c0111dc2..ef79110dd28 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -846,8 +846,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); --topOffset: 20px; --leftOffset: 46px; $borderRadius: 8px; + $padding: $spacing-8; margin: var(--topOffset) 14px var(--topOffset) 0; // 14px: 32px - 18px (padding of mx_AutoHideScrollbar) + padding: $padding; border-radius: $borderRadius; display: flex; @@ -891,11 +893,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); margin-top: 0; } - padding-top: 0; - .mx_EventTile_avatar { - top: 0; - left: 0; + top: $padding; + left: $padding; } .mx_DisambiguatedProfile { From 24d65abad85b44ccbd4faab18e1b149ae0d2489f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 14 Apr 2022 20:48:30 +0000 Subject: [PATCH 04/38] Thread list: Margin between thread and border Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index ef79110dd28..5f77c66d8c1 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -843,7 +843,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); } .mx_EventTile[data-shape=ThreadsList] { - --topOffset: 20px; + --topOffset: $spacing-8; --leftOffset: 46px; $borderRadius: 8px; $padding: $spacing-8; From 5bcde0c944bd3c6c024a71d7c529df3dd0f1c0af Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 14 Apr 2022 21:07:58 +0000 Subject: [PATCH 05/38] Thread list: Align the reply summary, avatar, and the content .mx_ThreadInfo has already adopted flexbox to align elements Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 7 ++++--- res/css/views/rooms/_EventTile.scss | 3 +-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 4b4384f1d49..051d6ff8a96 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -256,7 +256,9 @@ limitations under the License. } .mx_ThreadPanel_replies { - margin-top: 8px; + margin-top: $spacing-8; + display: flex; + align-items: center; } .mx_ThreadPanel_repliesSummary { @@ -276,8 +278,7 @@ limitations under the License. color: $secondary-content; font-weight: 600; - float: left; - margin-right: 12px; + margin-inline-end: $spacing-12; font-size: $font-12px; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 5f77c66d8c1..57b9e61b6c1 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -830,8 +830,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); } .mx_ThreadInfo_avatar { - float: left; - margin-right: 8px; + margin-inline-end: $spacing-8; } .mx_ThreadInfo_threads-amount { From 48e4db9060398695b3bb282b97661f151e9ba3bf Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 09:00:34 +0000 Subject: [PATCH 06/38] Thread list: Spacing with the scroll bar enabled / disabled Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 14 ++++++++++---- res/css/views/rooms/_EventTile.scss | 8 +++++++- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 051d6ff8a96..09d919404e3 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -111,8 +111,8 @@ limitations under the License. .mx_AutoHideScrollbar { background-color: $background; border-radius: 8px; - width: calc(100% - 24px); - padding-right: 18px; + width: calc(100% - 6px); // 6px: 8px - 2px (&:not(.mx_ThreadView).mx_BaseCard) + padding-inline-end: 0; } &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper { @@ -129,9 +129,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% + $spacing-8); // 8px: scroll bar width + } + } + .mx_RoomView_MessageList { - padding-left: 12px; - padding-right: 0; + padding-inline-start: $spacing-8; + padding-inline-end: $spacing-8; content-visibility: visible; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 57b9e61b6c1..70b47332afc 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -841,6 +841,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); line-height: $threadInfoLineHeight; } +.mx_GroupLayout { + .mx_EventTile[data-shape="ThreadsList"] { + margin-inline-end: 0; + } +} + .mx_EventTile[data-shape=ThreadsList] { --topOffset: $spacing-8; --leftOffset: 46px; @@ -863,7 +869,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); content: ""; position: absolute; left: var(--leftOffset); - right: 0; + right: $spacing-24; // 24px: 32px - 8px height: 1px; bottom: calc(-1 * var(--topOffset)); background-color: $quinary-content; From 31711f16a2bcdd56d1f7859548525c56d78cdb89 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 09:14:57 +0000 Subject: [PATCH 07/38] Thread list: Remove the magic number from the timestamp The magic number has been used for spacing, and it is no longer required. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 70b47332afc..8c884250e36 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -844,6 +844,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_GroupLayout { .mx_EventTile[data-shape="ThreadsList"] { margin-inline-end: 0; + padding-inline-end: $spacing-24; // 24px: 32px - 8px; } } @@ -905,13 +906,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); .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, From 7d3ac6078ec47ba36a418dbba39672aeee812929 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 09:07:41 +0000 Subject: [PATCH 08/38] Thread list: Remove !important to clarify the rule dependency Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 5 ++--- res/css/views/rooms/_GroupLayout.scss | 26 +++++++++++++++----------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 8c884250e36..dea9f6c5ba7 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -905,7 +905,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); } .mx_DisambiguatedProfile { - margin-left: var(--leftOffset) !important; + margin-left: var(--leftOffset); margin-right: 12px; display: inline-flex; flex: 1; @@ -935,9 +935,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); } .mx_MessageTimestamp { - position: initial !important; max-width: 80px; - width: auto !important; + width: auto; } } diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index c054256b6a6..f5896504606 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -19,26 +19,30 @@ $left-gutter: 64px; .mx_GroupLayout { .mx_EventTile { - > .mx_DisambiguatedProfile { - line-height: $font-20px; - margin-left: $left-gutter; - } - > .mx_EventTile_avatar { position: absolute; z-index: 9; } - .mx_MessageTimestamp { - position: absolute; - 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; } + + // See: _EventTile.scss + &:not([data-shape="ThreadsList"]) { + .mx_MessageTimestamp { + position: absolute; + width: $MessageTimestamp_width; + } + + > .mx_DisambiguatedProfile { + line-height: $font-20px; + margin-left: $left-gutter; + } + } } } From 0ed326f9676865482b23f90126c8fd0c9f5beb13 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 09:40:42 +0000 Subject: [PATCH 09/38] Thread list: Spacing horizontal bar and right border - Spacing between the left border and horizontal bar - Spacing between the right border and thread list Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index dea9f6c5ba7..ef659e18633 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -842,8 +842,19 @@ $threadInfoLineHeight: calc(2 * $font-12px); } .mx_GroupLayout { - .mx_EventTile[data-shape="ThreadsList"] { - margin-inline-end: 0; + &[data-scrollbar=true] { + .mx_EventTile[data-shape=ThreadsList] { + margin-inline-end: 0; + } + } + + &[data-scrollbar=false] { + .mx_EventTile[data-shape=ThreadsList] { + margin-inline-end: $spacing-8; + } + } + + .mx_EventTile[data-shape=ThreadsList] { padding-inline-end: $spacing-24; // 24px: 32px - 8px; } } @@ -869,7 +880,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); &::after { content: ""; position: absolute; - left: var(--leftOffset); + left: calc(var(--leftOffset) + $padding); right: $spacing-24; // 24px: 32px - 8px height: 1px; bottom: calc(-1 * var(--topOffset)); From 865573490ef2bf16842c53c874aeb4bf882f515e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 10:14:49 +0000 Subject: [PATCH 10/38] Thread list: MessageActionBar Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index ef659e18633..3848be62ca2 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -949,6 +949,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); max-width: 80px; width: auto; } + + .mx_MessageActionBar { + right: 0; + top: -36px; // 2px above EventTile + } } .mx_ThreadView { From fa25451c3018651fa6e61a73bbe4dfc8c6d19db1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 15:55:44 +0000 Subject: [PATCH 11/38] Thread list: Dedupe (profile and eventtile line padding) !important does not seem to be required. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 3848be62ca2..e74081fa54b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -916,7 +916,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); } .mx_DisambiguatedProfile { - margin-left: var(--leftOffset); margin-right: 12px; display: inline-flex; flex: 1; @@ -941,10 +940,14 @@ $threadInfoLineHeight: calc(2 * $font-12px); .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 { max-width: 80px; width: auto; From a93a5a8d76500e592aa5cf73bc5649b403c58942 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 16:10:41 +0000 Subject: [PATCH 12/38] Thread list: Background-color Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index e74081fa54b..772d3d4f17c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -873,7 +873,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); 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; } From c4b7a3bf1829348bcf0643cb5c8e3fc239fbe0d3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 13:17:59 +0000 Subject: [PATCH 13/38] Normalize: Thread info icon Share the style rules to display the thread info icons on the main panel and the right panel. Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 23 ++++++++++++++++++ res/css/views/right_panel/_ThreadPanel.scss | 25 +++++++------------- res/css/views/rooms/_EventTile.scss | 18 ++++---------- src/components/views/rooms/EventTile.tsx | 3 ++- src/components/views/rooms/ThreadSummary.tsx | 2 +- 5 files changed, 39 insertions(+), 32 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 5c6349c2204..936159ceaea 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -692,3 +692,26 @@ 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; +} diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 09d919404e3..dea3ac3591a 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -267,25 +267,18 @@ limitations under the License. align-items: center; } -.mx_ThreadPanel_repliesSummary { +.mx_ThreadPanel_ThreadsAmount { + @mixin ThreadsAmount; + font-size: $font-12px; // Same font size as the counter on the main panel +} + +.mx_ThreadPanel_ThreadInfo { + height: $font-18px; + &::before { - content: ""; - mask-image: url('$(res)/img/element-icons/thread-summary.svg'); - mask-position: center; - display: inline-block; - height: 18px; - min-width: 18px; + @mixin ThreadInfoIcon; background-color: currentColor; - mask-repeat: no-repeat; - mask-size: contain; - margin-right: 8px; - vertical-align: middle; } - - color: $secondary-content; - font-weight: 600; - margin-inline-end: $spacing-12; - font-size: $font-12px; } .mx_ThreadPanel_viewInRoom::before { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 772d3d4f17c..acc83f67d08 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -710,15 +710,8 @@ $left-gutter: 64px; .mx_ThreadSummaryIcon::before, .mx_ThreadInfo::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 { @@ -808,6 +801,7 @@ $left-gutter: 64px; width: initial; } +// See _commons.scss $threadInfoLineHeight: calc(2 * $font-12px); .mx_ThreadInfo_sender { @@ -833,12 +827,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); margin-inline-end: $spacing-8; } -.mx_ThreadInfo_threads-amount { - font-weight: $font-semi-bold; - position: relative; - padding: 0 12px 0 8px; - white-space: nowrap; - line-height: $threadInfoLineHeight; +.mx_ThreadInfo_ThreadsAmount { + @mixin ThreadsAmount; } .mx_GroupLayout { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index f528f77ea84..3ba8f2b288c 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -502,7 +502,8 @@ export class UnwrappedEventTile extends React.Component { } return
- + + { this.state.thread.length } diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx index 50a74aa20de..ff90b77b260 100644 --- a/src/components/views/rooms/ThreadSummary.tsx +++ b/src/components/views/rooms/ThreadSummary.tsx @@ -58,7 +58,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => { }} aria-label={_t("Open thread")} > - + { countSection } From fb8cd59d28147c8da51f4cc14f300681d95545bd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 13:46:30 +0000 Subject: [PATCH 14/38] Thread Timeline: Right margin Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index acc83f67d08..73da646062b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -833,13 +833,15 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_GroupLayout { &[data-scrollbar=true] { - .mx_EventTile[data-shape=ThreadsList] { + .mx_EventTile[data-shape=ThreadsList], + .mx_RoomView_MessageList { margin-inline-end: 0; } } &[data-scrollbar=false] { - .mx_EventTile[data-shape=ThreadsList] { + .mx_EventTile[data-shape=ThreadsList], + .mx_RoomView_MessageList { margin-inline-end: $spacing-8; } } From 317654f6b167107ea04b8db909b7af9c9085fe47 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 14:11:28 +0000 Subject: [PATCH 15/38] Thread list: Right margin Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 73da646062b..c31cc7d0077 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -840,7 +840,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); } &[data-scrollbar=false] { - .mx_EventTile[data-shape=ThreadsList], + .mx_EventTile[data-shape=ThreadsList] { + margin-inline-end: 0; + } + .mx_RoomView_MessageList { margin-inline-end: $spacing-8; } From 2a366bfd0b7d341ff047bdb83a2bfb1aca9b021b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 13:49:27 +0000 Subject: [PATCH 16/38] Thread Timeline: Avatar left padding Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index c31cc7d0077..f7d5619705c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1053,6 +1053,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); display: flex; align-items: center; gap: calc(14px + $selected-message-border-width); + padding-inline-start: $spacing-8; a { flex: 1; From 8ee9e71a0747d962d2a51f6e00d1f8a004eb0bab Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 13:52:10 +0000 Subject: [PATCH 17/38] Thread Timeline: Message left margin Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f7d5619705c..f96e92a8ba7 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1023,7 +1023,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); } .mx_EventTile[data-layout=group] { - $spacing-start: 48px; + $spacing-start: 56px; // 56px: 64px - 8px (padding) width: 100%; .mx_EventTile_content, From 25b854fca7d3e2eabf28553a72633a2d202fce19 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 15:11:46 +0000 Subject: [PATCH 18/38] Thread Timeline: Action bar position Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f96e92a8ba7..10327f99f9f 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -854,6 +854,14 @@ $threadInfoLineHeight: calc(2 * $font-12px); } } +.mx_EventTile[data-layout="group"], +.mx_EventTile[data-shape=ThreadsList] { + .mx_MessageActionBar { + right: 0; + top: -36px; // 2px above EventTile + } +} + .mx_EventTile[data-shape=ThreadsList] { --topOffset: $spacing-8; --leftOffset: 46px; @@ -949,11 +957,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); max-width: 80px; width: auto; } - - .mx_MessageActionBar { - right: 0; - top: -36px; // 2px above EventTile - } } .mx_ThreadView { From bba2bdeccbf83158c8654a59f5d09312aac08f9a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 15:52:08 +0000 Subject: [PATCH 19/38] Thread Timeline: Message action bar position and padding inside a message Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 10327f99f9f..09f8adb3377 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -852,13 +852,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_EventTile[data-shape=ThreadsList] { padding-inline-end: $spacing-24; // 24px: 32px - 8px; } -} -.mx_EventTile[data-layout="group"], -.mx_EventTile[data-shape=ThreadsList] { - .mx_MessageActionBar { - right: 0; - top: -36px; // 2px above EventTile + .mx_EventTile[data-layout="group"], + .mx_EventTile[data-shape=ThreadsList] { + .mx_MessageActionBar { + right: 0; + top: -36px; // 2px above EventTile + } } } @@ -978,6 +978,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); flex-direction: column; .mx_EventTile_line { + padding-top: 2px; + padding-bottom: 2px; padding-left: 0; order: 10 !important; } @@ -1099,4 +1101,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); 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; + } + } + } } From e7988ec3b441a6ca978d0e08726cba13baa0e7fa Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 16:30:16 +0000 Subject: [PATCH 20/38] Thread Timeline: Spacing between the avatar and the right border (bubble message layout) Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 09f8adb3377..fddf7ecebde 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -999,6 +999,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); padding-top: 14px; // due to layout differences, this odd number matches the 18px padding-top of main tl events } + .mx_RoomView_messagePanel[data-scrollbar=false] { + .mx_EventTile[data-layout="bubble"] { + margin-inline-end: 44px; // 44px: 36px + 8px (scroll bar area width) + } + } + .mx_EventTile[data-layout=bubble] { margin-left: 36px; margin-right: 36px; From ba6d4a9add10bb516ccb01eac8e497491d6b2c9c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 16:50:25 +0000 Subject: [PATCH 21/38] Add comments Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index fddf7ecebde..245bf461655 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -801,7 +801,7 @@ $left-gutter: 64px; width: initial; } -// See _commons.scss +// See: _commons.scss $threadInfoLineHeight: calc(2 * $font-12px); .mx_ThreadInfo_sender { @@ -835,22 +835,25 @@ $threadInfoLineHeight: calc(2 * $font-12px); &[data-scrollbar=true] { .mx_EventTile[data-shape=ThreadsList], .mx_RoomView_MessageList { + // If scroll bar is enabled, its area creates 8px spacing margin-inline-end: 0; } } &[data-scrollbar=false] { .mx_EventTile[data-shape=ThreadsList] { + // Remove default margin margin-inline-end: 0; } .mx_RoomView_MessageList { + // Set 8px spacing between the thread list and the right border margin-inline-end: $spacing-8; } } .mx_EventTile[data-shape=ThreadsList] { - padding-inline-end: $spacing-24; // 24px: 32px - 8px; + padding-inline-end: $spacing-24; // 24px: 32px - 8px (create a 24px gap when a thread on the list is hovered) } .mx_EventTile[data-layout="group"], @@ -886,7 +889,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); content: ""; position: absolute; left: calc(var(--leftOffset) + $padding); - right: $spacing-24; // 24px: 32px - 8px + right: $spacing-24; // 24px: 32px - 8px (right padding) height: 1px; bottom: calc(-1 * var(--topOffset)); background-color: $quinary-content; @@ -1001,6 +1004,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_RoomView_messagePanel[data-scrollbar=false] { .mx_EventTile[data-layout="bubble"] { + // Create 8px gap between the avatar and the right border margin-inline-end: 44px; // 44px: 36px + 8px (scroll bar area width) } } From 29bb38131f4774ccb5ef9c9dd02f931c5b7e78c6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 15 Apr 2022 19:16:40 +0000 Subject: [PATCH 22/38] Thread Timeline: Fix sender ID, avatar, and spacing - Display sender ID - Set gap between the avatar and the ID Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 2 +- src/components/views/rooms/EventTile.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 245bf461655..099b32aa9d9 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1067,7 +1067,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .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 { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 3ba8f2b288c..4b1adfd7d05 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1044,11 +1044,11 @@ export class UnwrappedEventTile extends React.Component { if (this.context.timelineRenderingType === TimelineRenderingType.Notification) { avatarSize = 24; needsSenderProfile = true; - } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) { + } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList || + this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation + ) { avatarSize = 32; needsSenderProfile = true; - } else if (!this.props.continuation && this.context.timelineRenderingType === TimelineRenderingType.Thread) { - avatarSize = 32; } else if (eventType === EventType.RoomCreate || isBubbleMessage) { avatarSize = 0; needsSenderProfile = false; From 0661f0f186408704098f0c52ea0f084a42d133f1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 26 Apr 2022 15:52:35 +0000 Subject: [PATCH 23/38] Set z-index to MessageActionBar with a variable Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index aab7b4c807f..8cf16d88162 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -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; @@ -811,9 +813,6 @@ $left-gutter: 64px; width: initial; } -// See: _commons.scss -$threadInfoLineHeight: calc(2 * $font-12px); - .mx_ThreadInfo_sender { font-weight: $font-semi-bold; line-height: $threadInfoLineHeight; @@ -871,6 +870,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_MessageActionBar { right: 0; top: -36px; // 2px above EventTile + z-index: $eventTileZIndex; } } } @@ -913,7 +913,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); left: 0; right: 0; /* enough to cover all sibling elements */ - z-index: 10; + z-index: $eventTileZIndex; } &:last-child { From e9ea310930dc8ebd501974e933c4572340493fc9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 26 Apr 2022 16:18:38 +0000 Subject: [PATCH 24/38] 8px spacing with AutoHideScrollbar Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 8cf16d88162..26923b2626f 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -847,6 +847,10 @@ $eventTileZIndex: 10; // If scroll bar is enabled, its area creates 8px spacing margin-inline-end: 0; } + + .mx_RoomView_messageListWrapper { + width: calc(100% + 6px); // 6px: .mx_ThreadPanel .mx_AutoHideScrollbar + } } &[data-scrollbar=false] { From b4187e4c6ea8c892ef8f97638b6abb1ce2beaf61 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 26 Apr 2022 16:25:03 +0000 Subject: [PATCH 25/38] 8px spacing below mx_EventTile_line Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 26923b2626f..dad2e777670 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -867,6 +867,10 @@ $eventTileZIndex: 10; .mx_EventTile[data-shape=ThreadsList] { padding-inline-end: $spacing-24; // 24px: 32px - 8px (create a 24px gap when a thread on the list is hovered) + + .mx_EventTile_line { + padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss + } } .mx_EventTile[data-layout="group"], From b739ebfc09672024205606ef0e543dc27109623d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 26 Apr 2022 16:29:11 +0000 Subject: [PATCH 26/38] Add 2px to leftOffset - Spacing between the avatar and the event tile: 48px - 32px = 16px - Spacing between the left edge and the event tile: 48px + 8px + 8px = 64px Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index dad2e777670..66595934509 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -885,7 +885,7 @@ $eventTileZIndex: 10; .mx_EventTile[data-shape=ThreadsList] { --topOffset: $spacing-8; - --leftOffset: 46px; + --leftOffset: 48px; $borderRadius: 8px; $padding: $spacing-8; From e97d1128170129fd1864d09341c89e474f22179a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 27 Apr 2022 18:14:24 +0000 Subject: [PATCH 27/38] Remove ThreadPanel_ThreadInfo Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 9 --------- src/components/views/rooms/EventTile.tsx | 1 - 2 files changed, 10 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 66b4f532c51..cbd9fe5933c 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -271,15 +271,6 @@ limitations under the License. @mixin ThreadsAmount; font-size: $font-12px; // Same font size as the counter on the main panel } - - .mx_ThreadPanel_ThreadInfo { - height: $font-18px; - - &::before { - @mixin ThreadInfoIcon; - background-color: currentColor; - } - } } .mx_ThreadPanel_viewInRoom::before { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 3ec7d03274e..067dd014699 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -517,7 +517,6 @@ export class UnwrappedEventTile extends React.Component { } return
- { this.state.thread.length } From 3ab6c7069d86703ccb0e89a509da76e2d99f2b5a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 27 Apr 2022 18:20:43 +0000 Subject: [PATCH 28/38] Vertical: 12px gap and 20px gap Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f8c22c8a183..97acaa48215 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -753,7 +753,7 @@ $eventTileZIndex: 10; } .mx_EventTile[data-shape=ThreadsList] { - --topOffset: $spacing-8; + --topOffset: $spacing-12; --leftOffset: 48px; $borderRadius: 8px; $padding: $spacing-8; From a413e3a1133b50654dc7a249d6c7beae733bfc38 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 27 Apr 2022 20:38:52 +0000 Subject: [PATCH 29/38] Horizontal: spacing Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 13 ++------ res/css/views/rooms/_EventTile.scss | 37 ++------------------- 2 files changed, 4 insertions(+), 46 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index cbd9fe5933c..388520fdb8d 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -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; @@ -111,15 +107,11 @@ limitations under the License. .mx_AutoHideScrollbar { background-color: $background; border-radius: 8px; - width: calc(100% - 6px); // 6px: 8px - 2px (&:not(.mx_ThreadView).mx_BaseCard) padding-inline-end: 0; + overflow-y: scroll; // set gap between the thread tile and the right border } &.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; @@ -131,7 +123,7 @@ limitations under the License. .mx_RoomView_messagePanel { // To avoid the rule from being applied to .mx_ThreadPanel_empty .mx_RoomView_messageListWrapper { - width: calc(100% + $spacing-8); // 8px: scroll bar width + width: calc(100% + 6px); // 8px - 2px } } @@ -292,7 +284,6 @@ limitations under the License. top: 0; bottom: 0; left: 0; - right: 6px; padding: 20px; h2 { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 97acaa48215..935b0aead72 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -710,33 +710,7 @@ $eventTileZIndex: 10; } .mx_GroupLayout { - &[data-scrollbar=true] { - .mx_EventTile[data-shape=ThreadsList], - .mx_RoomView_MessageList { - // If scroll bar is enabled, its area creates 8px spacing - margin-inline-end: 0; - } - - .mx_RoomView_messageListWrapper { - width: calc(100% + 6px); // 6px: .mx_ThreadPanel .mx_AutoHideScrollbar - } - } - - &[data-scrollbar=false] { - .mx_EventTile[data-shape=ThreadsList] { - // Remove default margin - margin-inline-end: 0; - } - - .mx_RoomView_MessageList { - // Set 8px spacing between the thread list and the right border - margin-inline-end: $spacing-8; - } - } - .mx_EventTile[data-shape=ThreadsList] { - padding-inline-end: $spacing-24; // 24px: 32px - 8px (create a 24px gap when a thread on the list is hovered) - .mx_EventTile_line { padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss } @@ -758,8 +732,8 @@ $eventTileZIndex: 10; $borderRadius: 8px; $padding: $spacing-8; - margin: var(--topOffset) 14px var(--topOffset) 0; // 14px: 32px - 18px (padding of mx_AutoHideScrollbar) - padding: $padding; + margin: var(--topOffset) 0; + padding: $padding $spacing-24 $padding $padding; border-radius: $borderRadius; display: flex; @@ -889,13 +863,6 @@ $eventTileZIndex: 10; padding-top: 14px; // due to layout differences, this odd number matches the 18px padding-top of main tl events } - .mx_RoomView_messagePanel[data-scrollbar=false] { - .mx_EventTile[data-layout="bubble"] { - // Create 8px gap between the avatar and the right border - margin-inline-end: 44px; // 44px: 36px + 8px (scroll bar area width) - } - } - .mx_EventTile[data-layout=bubble] { margin-left: 36px; margin-right: 36px; From ef331830f407de5be73560c687694bc80ec0daf7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 05:46:26 +0000 Subject: [PATCH 30/38] Vertical: spacing around 1px horizontal line Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 935b0aead72..a99b45e118b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -731,8 +731,9 @@ $eventTileZIndex: 10; --leftOffset: 48px; $borderRadius: 8px; $padding: $spacing-8; + $hrHeight: 1px; - margin: 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; @@ -751,8 +752,8 @@ $eventTileZIndex: 10; position: absolute; left: calc(var(--leftOffset) + $padding); right: $spacing-24; // 24px: 32px - 8px (right padding) - height: 1px; - bottom: calc(-1 * var(--topOffset)); + height: $hrHeight; + bottom: calc(-1 * var(--topOffset) - $hrHeight); // exclude the height of horizontal line background-color: $quinary-content; } From addd6a723f2a49192c26dc4e2397de9157962646 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 06:30:23 +0000 Subject: [PATCH 31/38] Fix regressions: chat panel with a maximized widget Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 26 ++++++++++++++++++++ res/css/views/right_panel/_TimelineCard.scss | 5 ---- res/css/views/rooms/_GroupLayout.scss | 23 ++++++++--------- 3 files changed, 36 insertions(+), 18 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 388520fdb8d..3dd1b97f3d8 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -111,6 +111,32 @@ limitations under the License. overflow-y: scroll; // set gap between the thread tile and the right border } + .mx_GroupLayout { + .mx_EventTile { + > .mx_DisambiguatedProfile { + margin-inline-start: 0; + line-height: normal; + } + + .mx_MessageTimestamp { + position: initial; + width: auto; + } + } + } + + // chat panel with a maximized widget + &.mx_TimelineCard { + .mx_GroupLayout { + .mx_EventTile { + .mx_MessageTimestamp { + position: absolute; + width: $MessageTimestamp_width; + } + } + } + } + &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper { position: relative; min-height: 0; // don't displace the composer diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 029c5f224a5..5a121a8f61c 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -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; } diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index 1cd5aef0ad3..646ab983a86 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -19,30 +19,27 @@ $left-gutter: 64px; .mx_GroupLayout { .mx_EventTile { + > .mx_DisambiguatedProfile { + line-height: $font-20px; + margin-left: $left-gutter; + } + > .mx_EventTile_avatar { position: absolute; z-index: 9; } + .mx_MessageTimestamp { + position: absolute; + width: $MessageTimestamp_width; + } + .mx_EventTile_line, .mx_EventTile_reply { padding-top: 1px; padding-bottom: 3px; line-height: $font-22px; } - - // See: _EventTile.scss - &:not([data-shape="ThreadsList"]) { - .mx_MessageTimestamp { - position: absolute; - width: $MessageTimestamp_width; - } - - > .mx_DisambiguatedProfile { - line-height: $font-20px; - margin-left: $left-gutter; - } - } } } From afce31eb47ebf7fcf07b8e1f636a139fa8defa54 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 09:56:38 +0000 Subject: [PATCH 32/38] Set padding-top: 16px Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a99b45e118b..b2b8c866327 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -858,10 +858,10 @@ $eventTileZIndex: 10; 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; + } } .mx_EventTile[data-layout=bubble] { From 5fb4274131f66be4e1285bd3f70f41d89cf9ee0a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 09:41:42 +0000 Subject: [PATCH 33/38] Fix regression: timestamp position inside a thread Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 13 +------------ res/css/views/rooms/_EventTile.scss | 3 +-- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 3dd1b97f3d8..a8ba95258eb 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -111,6 +111,7 @@ limitations under the License. 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 { @@ -125,18 +126,6 @@ limitations under the License. } } - // chat panel with a maximized widget - &.mx_TimelineCard { - .mx_GroupLayout { - .mx_EventTile { - .mx_MessageTimestamp { - position: absolute; - width: $MessageTimestamp_width; - } - } - } - } - &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper { position: relative; min-height: 0; // don't displace the composer diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index b2b8c866327..59a99c1d19b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -915,8 +915,7 @@ $eventTileZIndex: 10; } .mx_MessageTimestamp { - top: 2px !important; - width: auto; + top: 2px; // Align with mx_EventTile_content } .mx_EventTile_senderDetails { From b737bef3788600adb63473b0f229158d0fedb550 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 11:19:45 +0000 Subject: [PATCH 34/38] Fix position of the message action bar Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 15 ++++++++++++++- res/css/views/rooms/_EventTile.scss | 20 +------------------- 2 files changed, 15 insertions(+), 20 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index a8ba95258eb..0f4939313ae 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -113,7 +113,7 @@ limitations under the License. // Override _GroupLayout.scss for the thread panel .mx_GroupLayout { - .mx_EventTile { + .mx_EventTile[data-shape=ThreadsList] { > .mx_DisambiguatedProfile { margin-inline-start: 0; line-height: normal; @@ -123,6 +123,19 @@ limitations under the License. position: initial; width: auto; } + + .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: 10; // See _EventTile.scss + } } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 59a99c1d19b..340e3fd9f21 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -17,7 +17,6 @@ limitations under the License. $left-gutter: 64px; $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss -$eventTileZIndex: 10; .mx_EventTile { flex-shrink: 0; @@ -709,23 +708,6 @@ $eventTileZIndex: 10; 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: $spacing-12; --leftOffset: 48px; @@ -765,7 +747,7 @@ $eventTileZIndex: 10; left: 0; right: 0; /* enough to cover all sibling elements */ - z-index: $eventTileZIndex; + z-index: 10; } &:last-child { From 1a5b503f734485d8b4498f781d6d1f40275f73f3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 11:25:40 +0000 Subject: [PATCH 35/38] Fix regression: line height of profile Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 0f4939313ae..9ec15ee65ac 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -116,7 +116,6 @@ limitations under the License. .mx_EventTile[data-shape=ThreadsList] { > .mx_DisambiguatedProfile { margin-inline-start: 0; - line-height: normal; } .mx_MessageTimestamp { From e65bb2ea458f5380538c56e328760163c1b8a6e6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 11:40:04 +0000 Subject: [PATCH 36/38] Simplify the structure Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 33 ++++++++++----------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 9ec15ee65ac..9e9c59d2cbb 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -113,28 +113,27 @@ limitations under the License. // Override _GroupLayout.scss for the thread panel .mx_GroupLayout { - .mx_EventTile[data-shape=ThreadsList] { - > .mx_DisambiguatedProfile { - margin-inline-start: 0; - } - - .mx_MessageTimestamp { - position: initial; - width: auto; - } - - .mx_EventTile_line { - padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss - } - } - - .mx_EventTile[data-layout=group], - .mx_EventTile[data-shape=ThreadsList] { + .mx_EventTile { .mx_MessageActionBar { right: 0; top: -36px; // 2px above EventTile z-index: 10; // See _EventTile.scss } + + &[data-shape=ThreadsList] { + > .mx_DisambiguatedProfile { + margin-inline-start: 0; + } + + .mx_MessageTimestamp { + position: initial; + width: auto; + } + + .mx_EventTile_line { + padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss + } + } } } From 423a235c9f0bddbc4102741437ca6c058d48cb62 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 12:14:08 +0000 Subject: [PATCH 37/38] Revert the one line change Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_GroupLayout.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index 646ab983a86..b1d6e8b535b 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -34,8 +34,7 @@ $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; From 7c06cbe664178fea935638018e12509b1257dc71 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 29 Apr 2022 10:35:18 +0000 Subject: [PATCH 38/38] Update src/components/views/rooms/EventTile.tsx Based on the suggestion. Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/EventTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 067dd014699..aa581b094cb 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1033,7 +1033,7 @@ export class UnwrappedEventTile extends React.Component { avatarSize = 24; needsSenderProfile = true; } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList || - this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation + (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation) ) { avatarSize = 32; needsSenderProfile = true;