From feba803bdafbdb7cc0d32a131a0c5c7a84996d62 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 07:39:41 +0000 Subject: [PATCH 01/17] Use mixin ThreadSummaryIcon Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 6 +++--- res/css/views/right_panel/_ThreadPanel.scss | 8 +------- res/css/views/rooms/_EventTile.scss | 2 +- res/css/views/rooms/_ThreadSummary.scss | 5 +++++ 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 1e8daf3ba30..b0b8f4b4333 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -786,14 +786,14 @@ legend { padding: 0 $spacing-12 0 $spacing-8; } -@define-mixin ThreadInfoIcon { +@define-mixin ThreadSummaryIcon { content: ""; display: inline-block; mask-image: url('$(res)/img/element-icons/thread-summary.svg'); mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; 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 50c61fa7ead..49b23a387b1 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -209,15 +209,9 @@ limitations under the License. border-radius: 50%; &::after { - content: ""; + @mixin ThreadSummaryIcon; width: inherit; height: inherit; - mask-image: url('$(res)/img/element-icons/thread-summary.svg'); - mask-position: center; - display: inline-block; - mask-repeat: no-repeat; - mask-size: contain; - background-color: $secondary-content; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 768eeb5e855..b072f203a74 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -714,7 +714,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_ThreadPanel_replies::before, .mx_ThreadSummaryIcon::before, .mx_ThreadSummary::before { - @mixin ThreadInfoIcon; + @mixin ThreadSummaryIcon; background-color: $secondary-content !important; } diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 11ff6cdbbe3..5a3b057a386 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -80,6 +80,7 @@ $threadSummaryLineHeight: calc(2 * $font-12px); } &::before { + @mixin ThreadSummaryIcon; align-self: center; // v-align the threads icon } } @@ -111,3 +112,7 @@ $threadSummaryLineHeight: calc(2 * $font-12px); .mx_ThreadSummary_avatar { margin-inline-end: $spacing-8; } + +.mx_ThreadSummaryIcon::before { + @mixin ThreadSummaryIcon; +} From 2a1bd18c33c70803f3f2b60185fce5ef902484e3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 00:39:07 +0900 Subject: [PATCH 02/17] Tidy mx_ThreadSummary Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ThreadSummary.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 5a3b057a386..8cd3b9aab53 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -24,16 +24,15 @@ $threadSummaryLineHeight: calc(2 * $font-12px); height: 40px; position: relative; background-color: $system; - padding-left: $spacing-12; + padding-inline: $spacing-12 $spacing-16; display: flex; align-items: center; + justify-content: flex-start; border-radius: 8px; - padding-right: $spacing-16; margin-top: $spacing-8; font-size: $font-12px; color: $secondary-content; box-sizing: border-box; - justify-content: flex-start; clear: both; overflow: hidden; border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout From d9d8c9f645958ef9effb76f736c132564807c025 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 00:40:44 +0900 Subject: [PATCH 03/17] Move style blocks from _EventTile.scss to _ThreadSummary.scss Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 27 ------------------------- res/css/views/rooms/_ThreadSummary.scss | 27 +++++++++++++++++++++++++ 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index b072f203a74..971729f7592 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -711,33 +711,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } -.mx_ThreadPanel_replies::before, -.mx_ThreadSummaryIcon::before, -.mx_ThreadSummary::before { - @mixin ThreadSummaryIcon; - background-color: $secondary-content !important; -} - -.mx_ThreadSummaryIcon { - display: inline-block; - font-size: $font-12px; - color: $secondary-content !important; - margin-top: 8px; - margin-bottom: 8px; - - &::before { - vertical-align: middle; - margin-right: 8px; - margin-top: -2px; - } -} - -.mx_MessagePanel_narrow .mx_ThreadSummary { - min-width: initial; - max-width: 100%; // prevent overflow - width: initial; -} - .mx_EventTile[data-shape=ThreadsList] { --topOffset: $spacing-12; --leftOffset: 48px; diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 8cd3b9aab53..99a80e5ed81 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -115,3 +115,30 @@ $threadSummaryLineHeight: calc(2 * $font-12px); .mx_ThreadSummaryIcon::before { @mixin ThreadSummaryIcon; } + +.mx_ThreadPanel_replies::before, +.mx_ThreadSummaryIcon::before, +.mx_ThreadSummary::before { + @mixin ThreadSummaryIcon; + background-color: $secondary-content !important; +} + +.mx_ThreadSummaryIcon { + display: inline-block; + font-size: $font-12px; + color: $secondary-content !important; + margin-top: 8px; + margin-bottom: 8px; + + &::before { + vertical-align: middle; + margin-right: 8px; + margin-top: -2px; + } +} + +.mx_MessagePanel_narrow .mx_ThreadSummary { + min-width: initial; + max-width: 100%; // prevent overflow + width: initial; +} From 7b9316473053306230b3bb259cac025a309d0296 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 00:42:41 +0900 Subject: [PATCH 04/17] Merge mx_ThreadSummaryIcon::before Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ThreadSummary.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 99a80e5ed81..d1228627c94 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -112,10 +112,6 @@ $threadSummaryLineHeight: calc(2 * $font-12px); margin-inline-end: $spacing-8; } -.mx_ThreadSummaryIcon::before { - @mixin ThreadSummaryIcon; -} - .mx_ThreadPanel_replies::before, .mx_ThreadSummaryIcon::before, .mx_ThreadSummary::before { @@ -131,6 +127,7 @@ $threadSummaryLineHeight: calc(2 * $font-12px); margin-bottom: 8px; &::before { + @mixin ThreadSummaryIcon; vertical-align: middle; margin-right: 8px; margin-top: -2px; From 7426736b2cb6ec9b38c166144e5a124fbfa6f07a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 00:53:09 +0900 Subject: [PATCH 05/17] From threads amount to replies amount Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 2 +- res/css/views/rooms/_EventTile.scss | 2 +- res/css/views/rooms/_ThreadSummary.scss | 7 +++---- src/components/views/rooms/ThreadSummary.tsx | 2 +- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index b0b8f4b4333..68d5f4b26d5 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -775,7 +775,7 @@ legend { } } -@define-mixin ThreadsAmount { +@define-mixin ThreadsRepliesAmount { $threadInfoLineHeight: calc(2 * $font-12px); color: $secondary-content; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 971729f7592..717aa060cec 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -825,7 +825,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss position: relative; .mx_ThreadPanel_replies_amount { - @mixin ThreadsAmount; + @mixin ThreadsRepliesAmount; font-size: $font-12px; // Same font size as the counter on the main panel } } diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index d1228627c94..79f4f65e7d5 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -82,11 +82,10 @@ $threadSummaryLineHeight: calc(2 * $font-12px); @mixin ThreadSummaryIcon; align-self: center; // v-align the threads icon } -} -// XXX: these classes are re-used outside of the component -.mx_ThreadSummary_ThreadsAmount { - @mixin ThreadsAmount; + .mx_ThreadSummary_replies_amount { + @mixin ThreadsRepliesAmount; + } } .mx_ThreadSummary_sender { diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx index 56ed1f9ff87..968727022f9 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 9b7a40a801cd3a88977f087a83de29c0ac3df6ed Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 00:55:23 +0900 Subject: [PATCH 06/17] Remove obsolete declaration and class names mixin ThreadSummaryIcon has "background-color: $secondary-content !important" Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ThreadSummary.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 79f4f65e7d5..d1e89493ba8 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -111,11 +111,8 @@ $threadSummaryLineHeight: calc(2 * $font-12px); margin-inline-end: $spacing-8; } -.mx_ThreadPanel_replies::before, -.mx_ThreadSummaryIcon::before, -.mx_ThreadSummary::before { +.mx_ThreadPanel_replies::before { @mixin ThreadSummaryIcon; - background-color: $secondary-content !important; } .mx_ThreadSummaryIcon { From 2a120878d6a774924b9f44985000aea2672a6d26 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 01:00:13 +0900 Subject: [PATCH 07/17] Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 4 ++++ res/css/views/rooms/_ThreadSummary.scss | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 717aa060cec..a18dd55bb45 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -824,6 +824,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss align-items: center; position: relative; + &::before { + @mixin ThreadSummaryIcon; + } + .mx_ThreadPanel_replies_amount { @mixin ThreadsRepliesAmount; font-size: $font-12px; // Same font size as the counter on the main panel diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index d1e89493ba8..8dfa370a31d 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -111,10 +111,6 @@ $threadSummaryLineHeight: calc(2 * $font-12px); margin-inline-end: $spacing-8; } -.mx_ThreadPanel_replies::before { - @mixin ThreadSummaryIcon; -} - .mx_ThreadSummaryIcon { display: inline-block; font-size: $font-12px; From d065cd3317587f156a710d859f12c3b77d5a0f95 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 01:02:41 +0900 Subject: [PATCH 08/17] Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 4 ++-- res/css/views/rooms/_ThreadSummary.scss | 2 +- src/components/views/rooms/EventTile.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a18dd55bb45..b33da144138 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -121,7 +121,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } .mx_ThreadSummary, - .mx_ThreadSummaryIcon { + .mx_ThreadSummary_icon { margin-left: $left-gutter; } @@ -446,7 +446,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile[data-layout=group] { .mx_ThreadSummary, - .mx_ThreadSummaryIcon, + .mx_ThreadSummary_icon, .mx_EventTile_line { /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ margin-right: 80px; diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 8dfa370a31d..7d79beaed06 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -111,7 +111,7 @@ $threadSummaryLineHeight: calc(2 * $font-12px); margin-inline-end: $spacing-8; } -.mx_ThreadSummaryIcon { +.mx_ThreadSummary_icon { display: inline-block; font-size: $font-12px; color: $secondary-content !important; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index bd2d7fb961f..3c5e419d94a 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -533,14 +533,14 @@ export class UnwrappedEventTile extends React.Component { if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) { if (this.props.highlightLink) { return ( - + { _t("From a thread") } ); } return ( -

{ _t("From a thread") }

+

{ _t("From a thread") }

); } } From 7ccc3c97708300745cff18a537580379e7dab8d2 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 01:10:03 +0900 Subject: [PATCH 09/17] Use variables and remove obsolete one Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 4 +--- res/css/views/rooms/_EventTile.scss | 1 - res/css/views/rooms/_ThreadSummary.scss | 6 +++--- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 68d5f4b26d5..7a2b8a9eff7 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -776,11 +776,9 @@ legend { } @define-mixin ThreadsRepliesAmount { - $threadInfoLineHeight: calc(2 * $font-12px); - color: $secondary-content; font-weight: $font-semi-bold; - line-height: $threadInfoLineHeight; + line-height: calc(2 * $font-12px); white-space: nowrap; position: relative; padding: 0 $spacing-12 0 $spacing-8; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index b33da144138..2d8ba745608 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -16,7 +16,6 @@ limitations under the License. */ $left-gutter: 64px; -$threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile { flex-shrink: 0; diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 7d79beaed06..c38af2980d6 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -115,13 +115,13 @@ $threadSummaryLineHeight: calc(2 * $font-12px); display: inline-block; font-size: $font-12px; color: $secondary-content !important; - margin-top: 8px; - margin-bottom: 8px; + margin-top: $spacing-8; + margin-bottom: $spacing-8; &::before { @mixin ThreadSummaryIcon; vertical-align: middle; - margin-right: 8px; + margin-inline-end: $spacing-8; margin-top: -2px; } } From 91bd4cd0f16e03b805730196943d9e5c08dce6a4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 01:38:06 +0900 Subject: [PATCH 10/17] Merge style rules, renaming a variable Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 2 +- res/css/views/rooms/_EventTile.scss | 2 +- res/css/views/rooms/_ThreadSummary.scss | 39 +++++++++++++++---------- 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 7a2b8a9eff7..1b3b4df4b35 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -775,7 +775,7 @@ legend { } } -@define-mixin ThreadsRepliesAmount { +@define-mixin ThreadRepliesAmount { color: $secondary-content; font-weight: $font-semi-bold; line-height: calc(2 * $font-12px); diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 2d8ba745608..de1f42f2af2 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -828,7 +828,7 @@ $left-gutter: 64px; } .mx_ThreadPanel_replies_amount { - @mixin ThreadsRepliesAmount; + @mixin ThreadRepliesAmount; font-size: $font-12px; // Same font size as the counter on the main panel } } diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index c38af2980d6..7de88ac78a1 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -17,6 +17,22 @@ limitations under the License. $left-gutter: 64px; // From _EventTile.scss $threadSummaryLineHeight: calc(2 * $font-12px); +.mx_ThreadSummary, +.mx_ThreadSummary_content, +.mx_ThreadSummary_icon { + font-size: $font-12px; +} + +.mx_ThreadSummary, +.mx_ThreadSummary_content { + color: $secondary-content; +} + +.mx_ThreadSummary, +.mx_ThreadSummary_icon { + margin-top: $spacing-8; +} + .mx_ThreadSummary { min-width: 267px; max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters @@ -29,9 +45,6 @@ $threadSummaryLineHeight: calc(2 * $font-12px); align-items: center; justify-content: flex-start; border-radius: 8px; - margin-top: $spacing-8; - font-size: $font-12px; - color: $secondary-content; box-sizing: border-box; clear: both; overflow: hidden; @@ -84,26 +97,24 @@ $threadSummaryLineHeight: calc(2 * $font-12px); } .mx_ThreadSummary_replies_amount { - @mixin ThreadsRepliesAmount; + @mixin ThreadRepliesAmount; } } -.mx_ThreadSummary_sender { - font-weight: $font-semi-bold; - line-height: $threadSummaryLineHeight; +.mx_ThreadSummary_sender, +.mx_ThreadSummary_content { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + line-height: $threadSummaryLineHeight; +} + +.mx_ThreadSummary_sender { + font-weight: $font-semi-bold; } .mx_ThreadSummary_content { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; margin-left: $spacing-4; - font-size: $font-12px; - line-height: $threadSummaryLineHeight; - color: $secondary-content; flex: 1; } @@ -113,9 +124,7 @@ $threadSummaryLineHeight: calc(2 * $font-12px); .mx_ThreadSummary_icon { display: inline-block; - font-size: $font-12px; color: $secondary-content !important; - margin-top: $spacing-8; margin-bottom: $spacing-8; &::before { From 55fdbe91386e9f6587ffa2126cccae3ee422688b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 10:59:10 +0900 Subject: [PATCH 11/17] Include mx_MessagePanel_narrow in mx_ThreadSummary Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ThreadSummary.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 7de88ac78a1..7a79a210b4d 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -99,6 +99,12 @@ $threadSummaryLineHeight: calc(2 * $font-12px); .mx_ThreadSummary_replies_amount { @mixin ThreadRepliesAmount; } + + .mx_MessagePanel_narrow & { + min-width: initial; + max-width: 100%; // prevent overflow + width: initial; + } } .mx_ThreadSummary_sender, @@ -134,9 +140,3 @@ $threadSummaryLineHeight: calc(2 * $font-12px); margin-top: -2px; } } - -.mx_MessagePanel_narrow .mx_ThreadSummary { - min-width: initial; - max-width: 100%; // prevent overflow - width: initial; -} From c33b72fa975b478421dc6339383ead293cb31e91 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 11:01:17 +0900 Subject: [PATCH 12/17] Remove a redundant declaration Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ThreadSummary.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 7a79a210b4d..677169a1586 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -82,7 +82,6 @@ $threadSummaryLineHeight: calc(2 * $font-12px); &:hover, &:focus { - cursor: pointer; border-color: $quinary-content; .mx_ThreadSummary_chevron { From fc43d9c5881a1802df251377cbdef3f98d88ccd5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 11:06:11 +0900 Subject: [PATCH 13/17] Use a variable Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 2 ++ res/css/views/rooms/_ThreadSummary.scss | 3 +-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index de1f42f2af2..0d788f4b007 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -18,6 +18,8 @@ limitations under the License. $left-gutter: 64px; .mx_EventTile { + --EventTile-gutter-start: $left-gutter; + flex-shrink: 0; .mx_EventTile_avatar { diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 677169a1586..c6c0ba2b877 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -$left-gutter: 64px; // From _EventTile.scss $threadSummaryLineHeight: calc(2 * $font-12px); .mx_ThreadSummary, @@ -35,7 +34,7 @@ $threadSummaryLineHeight: calc(2 * $font-12px); .mx_ThreadSummary { min-width: 267px; - max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters + max-width: min(calc(100% - var(--EventTile-gutter-start)), 600px); // leave space on both left & right gutters width: fit-content; height: 40px; position: relative; From 2e066644514f8571d7352472c469890479155e18 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 11:14:50 +0900 Subject: [PATCH 14/17] Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary Expected according to tests Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ThreadSummary.scss | 34 ++++++++++++------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index c6c0ba2b877..bd606511178 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -98,6 +98,23 @@ $threadSummaryLineHeight: calc(2 * $font-12px); @mixin ThreadRepliesAmount; } + .mx_ThreadSummary_sender, + .mx_ThreadSummary_content { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + line-height: $threadSummaryLineHeight; + } + + .mx_ThreadSummary_sender { + font-weight: $font-semi-bold; + } + + .mx_ThreadSummary_content { + margin-left: $spacing-4; + flex: 1; + } + .mx_MessagePanel_narrow & { min-width: initial; max-width: 100%; // prevent overflow @@ -105,23 +122,6 @@ $threadSummaryLineHeight: calc(2 * $font-12px); } } -.mx_ThreadSummary_sender, -.mx_ThreadSummary_content { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - line-height: $threadSummaryLineHeight; -} - -.mx_ThreadSummary_sender { - font-weight: $font-semi-bold; -} - -.mx_ThreadSummary_content { - margin-left: $spacing-4; - flex: 1; -} - .mx_ThreadSummary_avatar { margin-inline-end: $spacing-8; } From 0cf35db6a264fe387305090567578b16b4876c76 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 11:29:21 +0900 Subject: [PATCH 15/17] Remove a variable used only once Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ThreadSummary.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index bd606511178..4a8807afe11 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -14,8 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -$threadSummaryLineHeight: calc(2 * $font-12px); - .mx_ThreadSummary, .mx_ThreadSummary_content, .mx_ThreadSummary_icon { @@ -103,7 +101,7 @@ $threadSummaryLineHeight: calc(2 * $font-12px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - line-height: $threadSummaryLineHeight; + line-height: calc(2 * $font-12px); } .mx_ThreadSummary_sender { From 8455c507b5334b87015e8f67e3afdaf2e2d1ed40 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 11:34:20 +0900 Subject: [PATCH 16/17] Ensure the same line-height is applied Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 1 - res/css/views/rooms/_EventTile.scss | 2 ++ res/css/views/rooms/_ThreadSummary.scss | 9 +++++++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 1b3b4df4b35..e04bf616f93 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -778,7 +778,6 @@ legend { @define-mixin ThreadRepliesAmount { color: $secondary-content; font-weight: $font-semi-bold; - line-height: calc(2 * $font-12px); white-space: nowrap; position: relative; padding: 0 $spacing-12 0 $spacing-8; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 0d788f4b007..b30da4f795e 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -19,6 +19,7 @@ $left-gutter: 64px; .mx_EventTile { --EventTile-gutter-start: $left-gutter; + --EventTile_ThreadSummary-line-height: calc(2 * $font-12px); flex-shrink: 0; @@ -831,6 +832,7 @@ $left-gutter: 64px; .mx_ThreadPanel_replies_amount { @mixin ThreadRepliesAmount; + line-height: var(--EventTile_ThreadSummary-line-height); font-size: $font-12px; // Same font size as the counter on the main panel } } diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index 4a8807afe11..bdf5036a84f 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -92,8 +92,10 @@ limitations under the License. align-self: center; // v-align the threads icon } + .mx_ThreadSummary_sender, + .mx_ThreadSummary_content, .mx_ThreadSummary_replies_amount { - @mixin ThreadRepliesAmount; + line-height: var(--EventTile_ThreadSummary-line-height); } .mx_ThreadSummary_sender, @@ -101,7 +103,6 @@ limitations under the License. text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - line-height: calc(2 * $font-12px); } .mx_ThreadSummary_sender { @@ -113,6 +114,10 @@ limitations under the License. flex: 1; } + .mx_ThreadSummary_replies_amount { + @mixin ThreadRepliesAmount; + } + .mx_MessagePanel_narrow & { min-width: initial; max-width: 100%; // prevent overflow From 3256d48b9cedfdddd87a6f6044c6cbdd6ef31812 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 26 Jun 2022 08:00:07 +0900 Subject: [PATCH 17/17] Remove !important Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ThreadSummary.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index bdf5036a84f..1a0993a77b9 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -131,7 +131,6 @@ limitations under the License. .mx_ThreadSummary_icon { display: inline-block; - color: $secondary-content !important; margin-bottom: $spacing-8; &::before { @@ -140,4 +139,8 @@ limitations under the License. margin-inline-end: $spacing-8; margin-top: -2px; } + + a& { + color: $secondary-content; + } }