Move threads header below base card header

element-hq · Jan 13, 2025 · a8b66d0 · a8b66d0
1 parent f99d7ce
commit a8b66d0
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 38 deletions.
diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -15,41 +15,48 @@ Please see LICENSE files in the repository root for full details.
         flex: unset;
     }
 
-    .mx_BaseCard_header {
-        .mx_BaseCard_header_title {
-            .mx_AccessibleButton {
-                font-size: 12px;
-                color: $secondary-content;
-            }
+    .mx_ThreadPanelHeader {
+        height: 60px;
+        display: flex;
+        box-sizing: border-box;
+        padding: 16px;
+        align-items: center;
+        border-bottom: 1px solid var(--cpd-color-gray-400);
+
+        .mx_AccessibleButton {
+            font-size: 12px;
+            color: $secondary-content;
+        }
 
-            .mx_ThreadPanel_vertical_separator {
-                height: 16px;
-                margin-left: var(--cpd-space-3x);
-                margin-right: var(--cpd-space-1x);
-                border-left: 1px solid var(--cpd-color-gray-400);
+        .mx_ThreadPanel_vertical_separator {
+            height: 28px;
+            margin-left: var(--cpd-space-3x);
+            margin-right: var(--cpd-space-2x);
+            border-left: 1px solid var(--cpd-color-gray-400);
+        }
+
+        .mx_ThreadPanel_dropdown {
+            font: var(--cpd-font-body-sm-regular);
+            padding: 3px $spacing-4 3px $spacing-8;
+            border-radius: 4px;
+            line-height: 1.5;
+            user-select: none;
+
+            &:hover,
+            &[aria-expanded="true"] {
+                background: $quinary-content;
             }
 
-            .mx_ThreadPanel_dropdown {
-                padding: 3px $spacing-4 3px $spacing-8;
-                border-radius: 4px;
-                line-height: 1.5;
-                user-select: none;
-
-                &:hover,
-                &[aria-expanded="true"] {
-                    background: $quinary-content;
-                }
-
-                &::before {
-                    content: "";
-                    width: 18px;
-                    height: 18px;
-                    background: currentColor;
-                    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-                    mask-size: 100%;
-                    mask-repeat: no-repeat;
-                    float: right;
-                }
+            &::before {
+                margin-left: 2px;
+                content: "";
+                width: 20px;
+                height: 20px;
+                background: currentColor;
+                mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
+                mask-size: 100%;
+                mask-repeat: no-repeat;
+                float: right;
             }
         }
     }

diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx
@@ -129,10 +129,10 @@ export const ThreadPanelHeader: React.FC<{
     );
 
     return (
-        <div className="mx_BaseCard_header_title">
+        <div className="mx_ThreadPanelHeader">
             <Tooltip label={_t("threads|mark_all_read")}>
-                <IconButton onClick={onMarkAllThreadsReadClick} size="24px">
-                    <MarkAllThreadsReadIcon />
+                <IconButton onClick={onMarkAllThreadsReadClick} size="28px">
+                    <MarkAllThreadsReadIcon height={20} width={20} />
                 </IconButton>
             </Tooltip>
             <div className="mx_ThreadPanel_vertical_separator" />
@@ -192,9 +192,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
             narrow={narrow}
         >
             <BaseCard
-                header={
-                    hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
-                }
+                header={_t("common|threads")}
                 id="thread-panel"
                 className="mx_ThreadPanel"
                 ariaLabelledBy="thread-panel-tab"
@@ -204,6 +202,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                 ref={card}
                 closeButtonRef={closeButonRef}
             >
+                {hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />}
                 {card.current && <Measured sensor={card.current} onMeasurement={setNarrow} />}
                 {timelineSet ? (
                     <TimelinePanel