Improve style rules for thread summary (#8868)

* Use mixin ThreadSummaryIcon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Tidy mx_ThreadSummary

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move style blocks from _EventTile.scss to _ThreadSummary.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge mx_ThreadSummaryIcon::before

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* From threads amount to replies amount

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove obsolete declaration and class names

mixin ThreadSummaryIcon has "background-color: $secondary-content !important"

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use variables and remove obsolete one

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style rules, renaming a variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include mx_MessagePanel_narrow in mx_ThreadSummary

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a redundant declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use a variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary

Expected according to tests

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a variable used only once

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Ensure the same line-height is applied

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove !important

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/_common.scss

@@ -775,25 +775,22 @@ legend {
     }
 }
 
-@define-mixin ThreadsAmount {
+@define-mixin ThreadRepliesAmount {
-    $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 {
+@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;
 }

res/css/views/right_panel/_ThreadPanel.scss

@@ -208,15 +208,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;
     }
 }
 

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 {
     --EventTile_content-margin-inline-end: 34px; // TODO: Use a spacing variable
@@ -24,6 +23,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     --EventTile_group_line-spacing-block-end: 3px;
     --EventTile_group_line-spacing-inline-start: $left-gutter;
     --EventTile_group_line-line-height: $font-22px;
+    --EventTile_ThreadSummary-line-height: calc(2 * $font-12px);
 
     flex-shrink: 0;
 
@@ -204,7 +204,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         }
 
         .mx_ThreadSummary,
-        .mx_ThreadSummaryIcon {
+        .mx_ThreadSummary_icon {
             margin-left: $left-gutter;
         }
 
@@ -484,7 +484,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;
@@ -722,33 +722,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 }
 
-.mx_ThreadPanel_replies::before,
-.mx_ThreadSummaryIcon::before,
-.mx_ThreadSummary::before {
-    @mixin ThreadInfoIcon;
-    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;
@@ -864,8 +837,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             align-items: center;
             position: relative;
 
+            &::before {
+                @mixin ThreadSummaryIcon;
+            }
+
             .mx_ThreadPanel_replies_amount {
-                @mixin ThreadsAmount;
+                @mixin ThreadRepliesAmount;
+                line-height: var(--EventTile_ThreadSummary-line-height);
                 font-size: $font-12px; // Same font size as the counter on the main panel
             }
         }

res/css/views/rooms/_ThreadSummary.scss

@@ -14,26 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$left-gutter: 64px; // From _EventTile.scss
+.mx_ThreadSummary,
-$threadSummaryLineHeight: calc(2 * $font-12px);
+.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
+    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px); // leave space on both left & right gutters
     width: fit-content;
     height: 40px;
     position: relative;
     background-color: $system;
-    padding-left: $spacing-12;
+    padding-inline: $spacing-12 $spacing-16;
     display: flex;
     align-items: center;
-    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;
+    border-radius: 8px;
+    box-sizing: border-box;
     clear: both;
     overflow: hidden;
     border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
@@ -70,7 +79,6 @@ $threadSummaryLineHeight: calc(2 * $font-12px);
 
     &:hover,
     &:focus {
-        cursor: pointer;
         border-color: $quinary-content;
 
         .mx_ThreadSummary_chevron {
@@ -80,34 +88,59 @@ $threadSummaryLineHeight: calc(2 * $font-12px);
     }
 
     &::before {
+        @mixin ThreadSummaryIcon;
         align-self: center; // v-align the threads icon
     }
-}
 
-// XXX: these classes are re-used outside of the component
+    .mx_ThreadSummary_sender,
-.mx_ThreadSummary_ThreadsAmount {
+    .mx_ThreadSummary_content,
-    @mixin ThreadsAmount;
+    .mx_ThreadSummary_replies_amount {
-}
+        line-height: var(--EventTile_ThreadSummary-line-height);
+    }
 
-.mx_ThreadSummary_sender {
+    .mx_ThreadSummary_sender,
-    font-weight: $font-semi-bold;
+    .mx_ThreadSummary_content {
-    line-height: $threadSummaryLineHeight;
+        text-overflow: ellipsis;
-    text-overflow: ellipsis;
+        overflow: hidden;
-    overflow: hidden;
+        white-space: nowrap;
-    white-space: nowrap;
+    }
-}
 
-.mx_ThreadSummary_content {
+    .mx_ThreadSummary_sender {
-    text-overflow: ellipsis;
+        font-weight: $font-semi-bold;
-    overflow: hidden;
+    }
-    white-space: nowrap;
+
-    margin-left: $spacing-4;
+    .mx_ThreadSummary_content {
-    font-size: $font-12px;
+        margin-left: $spacing-4;
-    line-height: $threadSummaryLineHeight;
+        flex: 1;
-    color: $secondary-content;
+    }
-    flex: 1;
+
+    .mx_ThreadSummary_replies_amount {
+        @mixin ThreadRepliesAmount;
+    }
+
+    .mx_MessagePanel_narrow & {
+        min-width: initial;
+        max-width: 100%; // prevent overflow
+        width: initial;
+    }
 }
 
 .mx_ThreadSummary_avatar {
     margin-inline-end: $spacing-8;
 }
+
+.mx_ThreadSummary_icon {
+    display: inline-block;
+    margin-bottom: $spacing-8;
+
+    &::before {
+        @mixin ThreadSummaryIcon;
+        vertical-align: middle;
+        margin-inline-end: $spacing-8;
+        margin-top: -2px;
+    }
+
+    a& {
+        color: $secondary-content;
+    }
+}

src/components/views/rooms/EventTile.tsx

@@ -533,14 +533,14 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
             if (this.props.highlightLink) {
                 return (
-                    <a className="mx_ThreadSummaryIcon" href={this.props.highlightLink}>
+                    <a className="mx_ThreadSummary_icon" href={this.props.highlightLink}>
                         { _t("From a thread") }
                     </a>
                 );
             }
 
             return (
-                <p className="mx_ThreadSummaryIcon">{ _t("From a thread") }</p>
+                <p className="mx_ThreadSummary_icon">{ _t("From a thread") }</p>
             );
         }
     }

src/components/views/rooms/ThreadSummary.tsx

@@ -58,7 +58,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
             }}
             aria-label={_t("Open thread")}
         >
-            <span className="mx_ThreadSummary_ThreadsAmount">
+            <span className="mx_ThreadSummary_replies_amount">
                 { countSection }
             </span>
             <ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />