From 25fcd6a65fac2744ce3668421815eac2a28135bb Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 23 Jul 2024 10:12:07 +0100 Subject: [PATCH] Update Thread Panel to match latest designs (#12797) * Add reusable empty state for the right panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update Thread Panel to match latest Figma Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use --cpd-space var Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.pcss | 2 +- res/css/views/right_panel/_ThreadPanel.pcss | 9 +++++---- res/css/views/rooms/_EventTile.pcss | 4 ++-- res/img/element-icons/thread-summary.svg | 1 - src/components/structures/ThreadPanel.tsx | 4 ---- .../structures/__snapshots__/ThreadPanel-test.tsx.snap | 10 ---------- 6 files changed, 8 insertions(+), 22 deletions(-) delete mode 100644 res/img/element-icons/thread-summary.svg diff --git a/res/css/_common.pcss b/res/css/_common.pcss index a454789efc..8264ccb704 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -851,7 +851,7 @@ legend { @define-mixin ThreadSummaryIcon { content: ""; display: inline-block; - mask-image: url("$(res)/img/element-icons/thread-summary.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg"); mask-position: center; mask-repeat: no-repeat; mask-size: contain; diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index 612fd96747..fc1d39c9ca 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -18,12 +18,13 @@ limitations under the License. height: 100px; overflow: visible; + /* Unset flex on the thread list, but not the thread view */ + &:not(.mx_ThreadView) .mx_BaseCard_header .mx_BaseCard_header_title { + flex: unset; + } + .mx_BaseCard_header { .mx_BaseCard_header_title { - .mx_BaseCard_header_title_heading { - margin-right: auto; - } - .mx_AccessibleButton { font-size: 12px; color: $secondary-content; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 46f0ba900f..66c60f5f15 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1024,7 +1024,7 @@ $left-gutter: 64px; $notification-dot-size: 8px; /* notification dot next to the timestamp */ margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */ - padding: $padding $spacing-24 $padding $padding; + padding: $padding; border-radius: $borderRadius; display: flex; @@ -1039,7 +1039,7 @@ $left-gutter: 64px; &::after { $inset-block-start: auto; - $inset-inline-end: calc(32px - $padding); + $inset-inline-end: calc(-1 * var(--cpd-space-2x)); $inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); /* exclude the height of horizontal line */ $inset-inline-start: calc(var(--leftOffset) + $padding); inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start; diff --git a/res/img/element-icons/thread-summary.svg b/res/img/element-icons/thread-summary.svg deleted file mode 100644 index 2c4f0ead0c..0000000000 --- a/res/img/element-icons/thread-summary.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 7c7761368d..547d185bf1 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -36,7 +36,6 @@ import Measured from "../views/elements/Measured"; import PosthogTrackers from "../../PosthogTrackers"; import { ButtonEvent } from "../views/elements/AccessibleButton"; import Spinner from "../views/elements/Spinner"; -import Heading from "../views/typography/Heading"; import { clearRoomNotification } from "../../utils/notifications"; import EmptyState from "../views/right_panel/EmptyState"; @@ -138,9 +137,6 @@ export const ThreadPanelHeader: React.FC<{ return (
- - {_t("common|threads")} - diff --git a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap index 0a219b8403..21a08b8a6c 100644 --- a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap @@ -5,11 +5,6 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
-

- Threads -