From dff2a1e102830c756dccccef56a6fb5ba9f0119f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 03:12:44 +0900 Subject: [PATCH 01/36] Remove duplicate declarations and add height and overflow properties Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_PinnedMessagesCard.scss | 3 +++ res/css/views/right_panel/_ThreadPanel.scss | 2 -- res/css/views/right_panel/_TimelineCard.scss | 4 ++++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 7b099387f61..43e437e9a17 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -17,6 +17,9 @@ limitations under the License. .mx_PinnedMessagesCard { padding-top: 0; + height: 100px; + overflow: visible; + .mx_BaseCard_header { text-align: center; margin-top: 0; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 4199466d326..348cd359f00 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -17,8 +17,6 @@ limitations under the License. .mx_ThreadPanel { --ThreadPanel_header-button-size: 24px; - display: flex; - flex-direction: column; height: 100px; overflow: visible; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 8b3064e5295..ae797f71049 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -15,6 +15,10 @@ limitations under the License. */ .mx_TimelineCard { + + height: 100px; + overflow: visible; + .mx_TimelineCard__header { margin-left: 6px; From c5be5c241c02461aba7b98a74fda3c430b099317 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 03:22:48 +0900 Subject: [PATCH 02/36] Move mx_TimelineCard__header under mx_BaseCard_header for normalization Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 22 ++++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index ae797f71049..a0d2d7793da 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -19,17 +19,6 @@ limitations under the License. height: 100px; overflow: visible; - .mx_TimelineCard__header { - margin-left: 6px; - - span:first-of-type { - font-weight: 600; - font-size: 15px; - line-height: 18px; - color: $secondary-content; - } - } - .mx_BaseCard_header { margin: 5px 0 9px 0; @@ -37,6 +26,17 @@ limitations under the License. margin: 8px; right: 0; } + + .mx_TimelineCard__header { + margin-left: 6px; + + span:first-of-type { + font-weight: 600; + font-size: 15px; + line-height: 18px; + color: $secondary-content; + } + } } .mx_TimelineCard_timeline { From 079c9457a785e99fef31d3a25fdbe12c8d74b4d5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 03:24:51 +0900 Subject: [PATCH 03/36] Normalize mx_BaseCard_close position Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_PinnedMessagesCard.scss | 2 +- res/css/views/right_panel/_TimelineCard.scss | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 43e437e9a17..146a4c82930 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -32,7 +32,7 @@ limitations under the License. } .mx_BaseCard_close { - margin-right: 6px; + margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); } } diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index a0d2d7793da..34a7fbde31b 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -23,8 +23,7 @@ limitations under the License. margin: 5px 0 9px 0; .mx_BaseCard_close { - margin: 8px; - right: 0; + margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); } .mx_TimelineCard__header { From a14d10fa8a82233ae7da1ad42bfc350fd5817acf Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 03:27:55 +0900 Subject: [PATCH 04/36] Normalize className of header - mx_BaseCard_header__ThreadPanel - mx_BaseCard_header__TimelineCard Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 6 +++--- res/css/views/right_panel/_TimelineCard.scss | 2 +- src/components/structures/ThreadPanel.tsx | 4 ++-- src/components/structures/ThreadView.tsx | 2 +- src/components/views/right_panel/TimelineCard.tsx | 2 +- .../structures/__snapshots__/ThreadPanel-test.tsx.snap | 4 ++-- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 348cd359f00..6365d44fcb1 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -32,7 +32,7 @@ limitations under the License. .mx_BaseCard_back { margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px); - ~ .mx_ThreadPanel__header { + ~ .mx_BaseCard_header__ThreadPanel { width: calc(100% - 60px); margin-inline-start: var(--ThreadPanel_header-button-size); @@ -46,7 +46,7 @@ limitations under the License. margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); } - .mx_ThreadPanel__header { + .mx_BaseCard_header__ThreadPanel { width: calc(100% - 38px); height: 24px; display: flex; @@ -294,7 +294,7 @@ limitations under the License. } } -.mx_ContextualMenu_wrapper.mx_ThreadPanel__header { +.mx_ContextualMenu_wrapper.mx_BaseCard_header__ThreadPanel { .mx_ContextualMenu { position: initial; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 34a7fbde31b..7051960b570 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -26,7 +26,7 @@ limitations under the License. margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); } - .mx_TimelineCard__header { + .mx_BaseCard_header__TimelineCard { margin-left: 6px; span:first-of-type { diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index a84013bb221..04e9ea3f457 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -113,11 +113,11 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: { right={33} onFinished={closeMenu} chevronFace={ChevronFace.Top} - wrapperClassName="mx_ThreadPanel__header" + wrapperClassName="mx_BaseCard_header__ThreadPanel" > { contextMenuOptions } : null; - return
+ return
{ _t("Threads") } { !empty && <> { } private renderThreadViewHeader = (): JSX.Element => { - return
+ return
{ _t("Thread") } { }; private renderTimelineCardHeader = (): JSX.Element => { - return
+ return
{ _t("Chat") }
; }; diff --git a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap index 6c3d1db26d0..46b8a6b573b 100644 --- a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap @@ -2,7 +2,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properly renders Show: All threads 1`] = `
Threads @@ -24,7 +24,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly renders Show: My threads 1`] = `
Threads From 7a3c091f37dd46e6089cd09e464e2408fa82e32d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 03:38:13 +0900 Subject: [PATCH 05/36] Normalize header's button size Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_PinnedMessagesCard.scss | 4 ++++ res/css/views/right_panel/_ThreadPanel.scss | 4 ++-- res/css/views/right_panel/_TimelineCard.scss | 3 +++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 146a4c82930..e8c5fd332d8 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_PinnedMessagesCard { + --PinnedMessagesCard_header-button-size: 24px; + padding-top: 0; height: 100px; @@ -33,6 +35,8 @@ limitations under the License. .mx_BaseCard_close { margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); + width: var(--PinnedMessagesCard_header-button-size); + height: var(--PinnedMessagesCard_header-button-size); } } diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 6365d44fcb1..f41b29e4583 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -23,8 +23,8 @@ limitations under the License. .mx_BaseCard_header { margin-bottom: $spacing-12; - .mx_BaseCard_close, - .mx_BaseCard_back { + .mx_BaseCard_back, + .mx_BaseCard_close { width: var(--ThreadPanel_header-button-size); height: var(--ThreadPanel_header-button-size); } diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 7051960b570..cc8bea4e338 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -15,6 +15,7 @@ limitations under the License. */ .mx_TimelineCard { + --TimelineCard_header-button-size: 24px; height: 100px; overflow: visible; @@ -24,6 +25,8 @@ limitations under the License. .mx_BaseCard_close { margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); + width: var(--TimelineCard_header-button-size); + height: var(--TimelineCard_header-button-size); } .mx_BaseCard_header__TimelineCard { From 60a442c354f04ff59ebdddf182c382d849d59fda Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 03:41:12 +0900 Subject: [PATCH 06/36] Normalize inline start header margin Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index cc8bea4e338..34d255e3785 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -30,8 +30,6 @@ limitations under the License. } .mx_BaseCard_header__TimelineCard { - margin-left: 6px; - span:first-of-type { font-weight: 600; font-size: 15px; From a0f2164f41f79830ee8af108d577174e988305e6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 03:51:50 +0900 Subject: [PATCH 07/36] normalize header bottom margin for PinnedMessagesCard and TimelineCard Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_PinnedMessagesCard.scss | 2 +- res/css/views/right_panel/_TimelineCard.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index e8c5fd332d8..d487c76beff 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -24,7 +24,7 @@ limitations under the License. .mx_BaseCard_header { text-align: center; - margin-top: 0; + margin-bottom: $spacing-12; border-bottom: 1px solid $menu-border-color; > h2 { diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 34d255e3785..1c97fa18fb9 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -21,7 +21,7 @@ limitations under the License. overflow: visible; .mx_BaseCard_header { - margin: 5px 0 9px 0; + margin-bottom: $spacing-12; .mx_BaseCard_close { margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); From 77db3c7884566cc47981bc591a3cb63d7292ead3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 03:57:48 +0900 Subject: [PATCH 08/36] Normalize header declarations Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 1c97fa18fb9..6ed61cf45d3 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -30,6 +30,12 @@ limitations under the License. } .mx_BaseCard_header__TimelineCard { + width: inherit; + height: inherit; + display: flex; + justify-content: space-between; + align-items: center; + span:first-of-type { font-weight: 600; font-size: 15px; From 1a23dbf6d293ab97c9ed81a0de2df9bdbb8f6a36 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 18:54:38 +0900 Subject: [PATCH 09/36] Add mixin RightPanelCard Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 3 +++ res/css/views/right_panel/_PinnedMessagesCard.scss | 2 ++ res/css/views/right_panel/_ThreadPanel.scss | 2 ++ res/css/views/right_panel/_TimelineCard.scss | 2 ++ 4 files changed, 9 insertions(+) diff --git a/res/css/_common.scss b/res/css/_common.scss index 867a04bf6cd..d8ed76b31a0 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -806,3 +806,6 @@ legend { mask-repeat: no-repeat; mask-size: contain; } + +@define-mixin RightPanelCard { +} diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index d487c76beff..08c5f556428 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_PinnedMessagesCard { + @mixin RightPanelCard; + --PinnedMessagesCard_header-button-size: 24px; padding-top: 0; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index f41b29e4583..d359d397f36 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_ThreadPanel { + @mixin RightPanelCard; + --ThreadPanel_header-button-size: 24px; height: 100px; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 6ed61cf45d3..b8c106abfcd 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_TimelineCard { + @mixin RightPanelCard; + --TimelineCard_header-button-size: 24px; height: 100px; From b5bb8391e38141128be8e008f540acecf906d39a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 18:55:41 +0900 Subject: [PATCH 10/36] Move common declarations - top level Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 2 ++ res/css/views/right_panel/_PinnedMessagesCard.scss | 5 ----- res/css/views/right_panel/_ThreadPanel.scss | 3 --- res/css/views/right_panel/_TimelineCard.scss | 3 --- 4 files changed, 2 insertions(+), 11 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index d8ed76b31a0..3360497dd83 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -808,4 +808,6 @@ legend { } @define-mixin RightPanelCard { + height: 100px; + overflow: visible; } diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 08c5f556428..9cd1d8f357b 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -19,11 +19,6 @@ limitations under the License. --PinnedMessagesCard_header-button-size: 24px; - padding-top: 0; - - height: 100px; - overflow: visible; - .mx_BaseCard_header { text-align: center; margin-bottom: $spacing-12; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index d359d397f36..00a0081490e 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -19,9 +19,6 @@ limitations under the License. --ThreadPanel_header-button-size: 24px; - height: 100px; - overflow: visible; - .mx_BaseCard_header { margin-bottom: $spacing-12; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index b8c106abfcd..c9abc47f976 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -19,9 +19,6 @@ limitations under the License. --TimelineCard_header-button-size: 24px; - height: 100px; - overflow: visible; - .mx_BaseCard_header { margin-bottom: $spacing-12; From e9cdd643c0d2da18102188094f48ac607be7a5a6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 18:59:10 +0900 Subject: [PATCH 11/36] Move common declarations - mx_BaseCard_header Remove specific declarations on PinnedMessagesCard Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 4 ++++ res/css/views/right_panel/_PinnedMessagesCard.scss | 4 ---- res/css/views/right_panel/_ThreadPanel.scss | 2 -- res/css/views/right_panel/_TimelineCard.scss | 2 -- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 3360497dd83..dfd0c931a34 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -810,4 +810,8 @@ legend { @define-mixin RightPanelCard { height: 100px; overflow: visible; + + .mx_BaseCard_header { + margin-bottom: $spacing-12; + } } diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 9cd1d8f357b..79c89c66497 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -20,10 +20,6 @@ limitations under the License. --PinnedMessagesCard_header-button-size: 24px; .mx_BaseCard_header { - text-align: center; - margin-bottom: $spacing-12; - border-bottom: 1px solid $menu-border-color; - > h2 { font-weight: $font-semi-bold; font-size: $font-18px; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 00a0081490e..dd701fd3a06 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -20,8 +20,6 @@ limitations under the License. --ThreadPanel_header-button-size: 24px; .mx_BaseCard_header { - margin-bottom: $spacing-12; - .mx_BaseCard_back, .mx_BaseCard_close { width: var(--ThreadPanel_header-button-size); diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index c9abc47f976..52f97f04775 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -20,8 +20,6 @@ limitations under the License. --TimelineCard_header-button-size: 24px; .mx_BaseCard_header { - margin-bottom: $spacing-12; - .mx_BaseCard_close { margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); width: var(--TimelineCard_header-button-size); From ae339720b21e32284addac439494877cb6660a44 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 19:06:16 +0900 Subject: [PATCH 12/36] Move common declarations - mx_BaseCard_back and mx_BaseCard_close Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 16 ++++++++++++++++ .../views/right_panel/_PinnedMessagesCard.scss | 8 -------- res/css/views/right_panel/_ThreadPanel.scss | 12 ------------ res/css/views/right_panel/_TimelineCard.scss | 6 +----- 4 files changed, 17 insertions(+), 25 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index dfd0c931a34..97ba908302e 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -808,10 +808,26 @@ legend { } @define-mixin RightPanelCard { + --RightPanelCard_header-button-size: 24px; + height: 100px; overflow: visible; .mx_BaseCard_header { margin-bottom: $spacing-12; + + .mx_BaseCard_back, + .mx_BaseCard_close { + width: var(--RightPanelCard_header-button-size); + height: var(--RightPanelCard_header-button-size); + } + + .mx_BaseCard_back { + margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px); + } + + .mx_BaseCard_close { + margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); + } } } diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 79c89c66497..f9e748e38dc 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -17,20 +17,12 @@ limitations under the License. .mx_PinnedMessagesCard { @mixin RightPanelCard; - --PinnedMessagesCard_header-button-size: 24px; - .mx_BaseCard_header { > h2 { font-weight: $font-semi-bold; font-size: $font-18px; margin: 8px 0; } - - .mx_BaseCard_close { - margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); - width: var(--PinnedMessagesCard_header-button-size); - height: var(--PinnedMessagesCard_header-button-size); - } } .mx_PinnedMessagesCard_empty_wrapper { diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index dd701fd3a06..eb40c8e0574 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -20,15 +20,7 @@ limitations under the License. --ThreadPanel_header-button-size: 24px; .mx_BaseCard_header { - .mx_BaseCard_back, - .mx_BaseCard_close { - width: var(--ThreadPanel_header-button-size); - height: var(--ThreadPanel_header-button-size); - } - .mx_BaseCard_back { - margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px); - ~ .mx_BaseCard_header__ThreadPanel { width: calc(100% - 60px); margin-inline-start: var(--ThreadPanel_header-button-size); @@ -39,10 +31,6 @@ limitations under the License. } } - .mx_BaseCard_close { - margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); - } - .mx_BaseCard_header__ThreadPanel { width: calc(100% - 38px); height: 24px; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 52f97f04775..ec2c2fe9058 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -17,13 +17,9 @@ limitations under the License. .mx_TimelineCard { @mixin RightPanelCard; - --TimelineCard_header-button-size: 24px; - .mx_BaseCard_header { .mx_BaseCard_close { - margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); - width: var(--TimelineCard_header-button-size); - height: var(--TimelineCard_header-button-size); + margin: calc(var(--BaseCard_header_button-margin) - 4px); } .mx_BaseCard_header__TimelineCard { From cea3c73f7f4c256d23ef3e10a6d08e59ffc3f4c9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 19:15:56 +0900 Subject: [PATCH 13/36] Create a common class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 2 +- src/components/views/right_panel/TimelineCard.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index ec2c2fe9058..9aa01aba93b 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -22,7 +22,7 @@ limitations under the License. margin: calc(var(--BaseCard_header_button-margin) - 4px); } - .mx_BaseCard_header__TimelineCard { + .mx_BaseCard_header_title.mx_BaseCard_header_title--TimelineCard { width: inherit; height: inherit; display: flex; diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index 0284f9c724c..f0346592d98 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -192,7 +192,7 @@ export default class TimelineCard extends React.Component { }; private renderTimelineCardHeader = (): JSX.Element => { - return
+ return
{ _t("Chat") }
; }; From 91b9f09f885c60bb4d16db98730a4ff9336f6161 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 19:19:19 +0900 Subject: [PATCH 14/36] Create a common class name - mx_BaseCard_header_title - ThreadPanel Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 6 +++--- src/components/structures/ThreadPanel.tsx | 4 ++-- src/components/structures/ThreadView.tsx | 2 +- .../structures/__snapshots__/ThreadPanel-test.tsx.snap | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index eb40c8e0574..b76825c5c1d 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_BaseCard_header { .mx_BaseCard_back { - ~ .mx_BaseCard_header__ThreadPanel { + ~ .mx_BaseCard_header_title.mx_BaseCard_header_title--ThreadPanel { width: calc(100% - 60px); margin-inline-start: var(--ThreadPanel_header-button-size); @@ -31,7 +31,7 @@ limitations under the License. } } - .mx_BaseCard_header__ThreadPanel { + .mx_BaseCard_header_title.mx_BaseCard_header_title--ThreadPanel { width: calc(100% - 38px); height: 24px; display: flex; @@ -279,7 +279,7 @@ limitations under the License. } } -.mx_ContextualMenu_wrapper.mx_BaseCard_header__ThreadPanel { +.mx_ContextualMenu_wrapper.mx_BaseCard_header_title.mx_BaseCard_header_title--ThreadPanel { .mx_ContextualMenu { position: initial; diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 04e9ea3f457..20914a93b73 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -113,11 +113,11 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: { right={33} onFinished={closeMenu} chevronFace={ChevronFace.Top} - wrapperClassName="mx_BaseCard_header__ThreadPanel" + wrapperClassName="mx_BaseCard_header_title mx_BaseCard_header_title--ThreadPanel" > { contextMenuOptions } : null; - return
+ return
{ _t("Threads") } { !empty && <> { } private renderThreadViewHeader = (): JSX.Element => { - return
+ return
{ _t("Thread") } Threads @@ -24,7 +24,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly renders Show: My threads 1`] = `
Threads From c8ae9bbd78119a406ba1b60f7b025d17f33a2b45 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 19:21:39 +0900 Subject: [PATCH 15/36] Move common declarations - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 6 ++++++ res/css/views/right_panel/_ThreadPanel.scss | 3 --- res/css/views/right_panel/_TimelineCard.scss | 3 --- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 97ba908302e..c5d473a4f2e 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -829,5 +829,11 @@ legend { .mx_BaseCard_close { margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); } + + .mx_BaseCard_header_title { + display: flex; + align-items: center; + justify-content: space-between; + } } } diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index b76825c5c1d..b28e28d52a5 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -34,10 +34,7 @@ limitations under the License. .mx_BaseCard_header_title.mx_BaseCard_header_title--ThreadPanel { width: calc(100% - 38px); height: 24px; - display: flex; flex: 1; - justify-content: space-between; - align-items: center; span:first-of-type { font-weight: 600; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 9aa01aba93b..5af386a7f5e 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -25,9 +25,6 @@ limitations under the License. .mx_BaseCard_header_title.mx_BaseCard_header_title--TimelineCard { width: inherit; height: inherit; - display: flex; - justify-content: space-between; - align-items: center; span:first-of-type { font-weight: 600; From 89ce8aec5b3d35955ba24f3d1eb21c38a72dae08 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 19:22:49 +0900 Subject: [PATCH 16/36] Move common declarations - span:first-of-type Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 7 +++++++ res/css/views/right_panel/_ThreadPanel.scss | 7 ------- res/css/views/right_panel/_TimelineCard.scss | 7 ------- 3 files changed, 7 insertions(+), 14 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index c5d473a4f2e..71b2dfd0bee 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -834,6 +834,13 @@ legend { display: flex; align-items: center; justify-content: space-between; + + span:first-of-type { + font-weight: 600; + font-size: 15px; + line-height: 18px; + color: $secondary-content; + } } } } diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index b28e28d52a5..30f00287272 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -36,13 +36,6 @@ limitations under the License. height: 24px; flex: 1; - span:first-of-type { - font-weight: 600; - font-size: 15px; - line-height: 18px; - color: $secondary-content; - } - .mx_AccessibleButton { font-size: 12px; color: $secondary-content; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 5af386a7f5e..9b9a21c53cb 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -25,13 +25,6 @@ limitations under the License. .mx_BaseCard_header_title.mx_BaseCard_header_title--TimelineCard { width: inherit; height: inherit; - - span:first-of-type { - font-weight: 600; - font-size: 15px; - line-height: 18px; - color: $secondary-content; - } } } From b83203427aba46a481bca17c46f133b7013d55b8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 19:27:55 +0900 Subject: [PATCH 17/36] Remove redundant declarations Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 9b9a21c53cb..79118afdd64 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -21,11 +21,6 @@ limitations under the License. .mx_BaseCard_close { margin: calc(var(--BaseCard_header_button-margin) - 4px); } - - .mx_BaseCard_header_title.mx_BaseCard_header_title--TimelineCard { - width: inherit; - height: inherit; - } } .mx_TimelineCard_timeline { From c01061743f96f630e62cba1ec8863727e1631ef8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 19:29:06 +0900 Subject: [PATCH 18/36] Rename a variable to remove --ThreadPanel_header-button-size Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 30f00287272..4bf8fa28819 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -17,13 +17,11 @@ limitations under the License. .mx_ThreadPanel { @mixin RightPanelCard; - --ThreadPanel_header-button-size: 24px; - .mx_BaseCard_header { .mx_BaseCard_back { ~ .mx_BaseCard_header_title.mx_BaseCard_header_title--ThreadPanel { width: calc(100% - 60px); - margin-inline-start: var(--ThreadPanel_header-button-size); + margin-inline-start: var(--RightPanelCard_header-button-size); span { margin-inline-start: 6px; @@ -46,11 +44,11 @@ limitations under the License. } .mx_MessageActionBar_maskButton { - width: var(--ThreadPanel_header-button-size); - height: var(--ThreadPanel_header-button-size); + width: var(--RightPanelCard_header-button-size); + height: var(--RightPanelCard_header-button-size); &::after { - mask-size: var(--ThreadPanel_header-button-size); + mask-size: var(--RightPanelCard_header-button-size); mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); } } From f86e9bd6cd227c48987b64082d244fb5881c1507 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 19:41:55 +0900 Subject: [PATCH 19/36] Remove class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 4bf8fa28819..b8c0a738b2a 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -19,7 +19,7 @@ limitations under the License. .mx_BaseCard_header { .mx_BaseCard_back { - ~ .mx_BaseCard_header_title.mx_BaseCard_header_title--ThreadPanel { + ~ .mx_BaseCard_header_title--ThreadPanel { width: calc(100% - 60px); margin-inline-start: var(--RightPanelCard_header-button-size); @@ -29,7 +29,7 @@ limitations under the License. } } - .mx_BaseCard_header_title.mx_BaseCard_header_title--ThreadPanel { + .mx_BaseCard_header_title--ThreadPanel { width: calc(100% - 38px); height: 24px; flex: 1; From 75aac2518d6abb8d9d5950e56e5f74e2b01cd150 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 24 May 2022 20:00:15 +0900 Subject: [PATCH 20/36] Remove mx_BaseCard_header_title--ThreadPanel and h2 declarations from PinnedMessagesCard Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 13 +++++++++++++ .../right_panel/_PinnedMessagesCard.scss | 8 -------- res/css/views/right_panel/_ThreadPanel.scss | 19 ++----------------- res/css/views/right_panel/_TimelineCard.scss | 6 ------ src/components/structures/ThreadPanel.tsx | 4 ++-- src/components/structures/ThreadView.tsx | 2 +- .../views/right_panel/PinnedMessagesCard.tsx | 4 +++- .../views/right_panel/TimelineCard.tsx | 2 +- .../__snapshots__/ThreadPanel-test.tsx.snap | 4 ++-- 9 files changed, 24 insertions(+), 38 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 71b2dfd0bee..17a8dfd89ac 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -824,6 +824,16 @@ legend { .mx_BaseCard_back { margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px); + + // Header title with the back button + ~ .mx_BaseCard_header_title { + width: calc(100% - 60px); + margin-inline-start: var(--RightPanelCard_header-button-size); + + span { + margin-inline-start: 6px; + } + } } .mx_BaseCard_close { @@ -834,6 +844,9 @@ legend { display: flex; align-items: center; justify-content: space-between; + width: calc(100% - 38px); + height: 24px; + flex: 1; span:first-of-type { font-weight: 600; diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index f9e748e38dc..21b65011a51 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -17,14 +17,6 @@ limitations under the License. .mx_PinnedMessagesCard { @mixin RightPanelCard; - .mx_BaseCard_header { - > h2 { - font-weight: $font-semi-bold; - font-size: $font-18px; - margin: 8px 0; - } - } - .mx_PinnedMessagesCard_empty_wrapper { display: flex; height: 100%; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index b8c0a738b2a..323d4ff4691 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -18,22 +18,7 @@ limitations under the License. @mixin RightPanelCard; .mx_BaseCard_header { - .mx_BaseCard_back { - ~ .mx_BaseCard_header_title--ThreadPanel { - width: calc(100% - 60px); - margin-inline-start: var(--RightPanelCard_header-button-size); - - span { - margin-inline-start: 6px; - } - } - } - - .mx_BaseCard_header_title--ThreadPanel { - width: calc(100% - 38px); - height: 24px; - flex: 1; - + .mx_BaseCard_header_title { .mx_AccessibleButton { font-size: 12px; color: $secondary-content; @@ -267,7 +252,7 @@ limitations under the License. } } -.mx_ContextualMenu_wrapper.mx_BaseCard_header_title.mx_BaseCard_header_title--ThreadPanel { +.mx_ContextualMenu_wrapper.mx_BaseCard_header_title { .mx_ContextualMenu { position: initial; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 79118afdd64..e67d746fd17 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -17,12 +17,6 @@ limitations under the License. .mx_TimelineCard { @mixin RightPanelCard; - .mx_BaseCard_header { - .mx_BaseCard_close { - margin: calc(var(--BaseCard_header_button-margin) - 4px); - } - } - .mx_TimelineCard_timeline { overflow: hidden; position: relative; // offset parent for jump to bottom button diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 20914a93b73..1fdc3bf58a6 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -113,11 +113,11 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: { right={33} onFinished={closeMenu} chevronFace={ChevronFace.Top} - wrapperClassName="mx_BaseCard_header_title mx_BaseCard_header_title--ThreadPanel" + wrapperClassName="mx_BaseCard_header_title" > { contextMenuOptions } : null; - return
+ return
{ _t("Threads") } { !empty && <> { } private renderThreadViewHeader = (): JSX.Element => { - return
+ return
{ _t("Thread") } { } return { _t("Pinned messages") }} + header={
+ { _t("Pinned messages") } +
} className="mx_PinnedMessagesCard" onClose={onClose} > diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index f0346592d98..b079d62a50d 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -192,7 +192,7 @@ export default class TimelineCard extends React.Component { }; private renderTimelineCardHeader = (): JSX.Element => { - return
+ return
{ _t("Chat") }
; }; diff --git a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap index b2e9247bb0f..7375dfe2aa0 100644 --- a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap @@ -2,7 +2,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properly renders Show: All threads 1`] = `
Threads @@ -24,7 +24,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly renders Show: My threads 1`] = `
Threads From dd12ba9726c550979fc794b0cdf3dbc4f9bfd9f5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Jun 2022 11:04:00 +0900 Subject: [PATCH 21/36] Headers need Heading Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 7 ++----- src/components/structures/ThreadPanel.tsx | 3 ++- src/components/structures/ThreadView.tsx | 3 ++- .../views/right_panel/PinnedMessagesCard.tsx | 2 +- src/components/views/right_panel/TimelineCard.tsx | 3 ++- .../__snapshots__/ThreadPanel-test.tsx.snap | 14 ++++++++++---- 6 files changed, 19 insertions(+), 13 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 17a8dfd89ac..c0f5e50d077 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -830,7 +830,7 @@ legend { width: calc(100% - 60px); margin-inline-start: var(--RightPanelCard_header-button-size); - span { + .mx_BaseCard_header_title_heading { margin-inline-start: 6px; } } @@ -848,10 +848,7 @@ legend { height: 24px; flex: 1; - span:first-of-type { - font-weight: 600; - font-size: 15px; - line-height: 18px; + .mx_BaseCard_header_title_heading { color: $secondary-content; } } diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 1fdc3bf58a6..4ab83ab80f2 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -40,6 +40,7 @@ import { Action } from '../../dispatcher/actions'; import { UserTab } from '../views/dialogs/UserTab'; import dis from '../../dispatcher/dispatcher'; import Spinner from "../views/elements/Spinner"; +import Heading from '../views/typography/Heading'; interface IProps { roomId: string; @@ -118,7 +119,7 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: { { contextMenuOptions } : null; return
- { _t("Threads") } + { _t("Threads") } { !empty && <> { private renderThreadViewHeader = (): JSX.Element => { return
- { _t("Thread") } + { _t("Thread") } diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx index ed819ec3b07..1f4aac0f199 100644 --- a/src/components/views/right_panel/PinnedMessagesCard.tsx +++ b/src/components/views/right_panel/PinnedMessagesCard.tsx @@ -175,7 +175,7 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => { return - { _t("Pinned messages") } + { _t("Pinned messages") }
} className="mx_PinnedMessagesCard" onClose={onClose} diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index b079d62a50d..f73150db5ec 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -42,6 +42,7 @@ import SettingsStore from '../../../settings/SettingsStore'; import JumpToBottomButton from '../rooms/JumpToBottomButton'; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import Measured from '../elements/Measured'; +import Heading from '../typography/Heading'; interface IProps { room: Room; @@ -193,7 +194,7 @@ export default class TimelineCard extends React.Component { private renderTimelineCardHeader = (): JSX.Element => { return
- { _t("Chat") } + { _t("Chat") }
; }; diff --git a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap index 7375dfe2aa0..16b33009272 100644 --- a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap @@ -4,9 +4,12 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
- + Threads - + - + Threads - + Date: Fri, 10 Jun 2022 11:37:30 +0900 Subject: [PATCH 22/36] Use spacing variables Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index c0f5e50d077..0ea4ffd4dfb 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -823,7 +823,7 @@ legend { } .mx_BaseCard_back { - margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px); + margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4); // Header title with the back button ~ .mx_BaseCard_header_title { @@ -831,13 +831,13 @@ legend { margin-inline-start: var(--RightPanelCard_header-button-size); .mx_BaseCard_header_title_heading { - margin-inline-start: 6px; + margin-inline-start: 6px; // TODO: Use a spacing variable } } } .mx_BaseCard_close { - margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); + margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4); } .mx_BaseCard_header_title { From 2006038849fc6cd447f9d3db8406311be397e42c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Jun 2022 12:32:52 +0900 Subject: [PATCH 23/36] Move common style rules of mx_ContextualMenu inside mx_BaseCard_header_title to BaseCard leaving style rules specific to ThreadPanel. Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_BaseCard.scss | 35 +++++++++++++++++++++ res/css/views/right_panel/_ThreadPanel.scss | 35 +-------------------- 2 files changed, 36 insertions(+), 34 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 39e699a60ad..34c5ad5cfed 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -167,3 +167,38 @@ limitations under the License. } } } + +.mx_ContextualMenu_wrapper.mx_BaseCard_header_title { + .mx_ContextualMenu { + position: initial; + + span:first-of-type { + font-weight: $font-semi-bold; + font-size: inherit; + color: $primary-content; + } + + font-size: $font-12px; + color: $secondary-content; + padding-top: 10px; + padding-bottom: 10px; + + border: 1px solid $quinary-content; + box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); + } + + .mx_ContextualMenu_chevron_top { + left: auto; + right: 22px; + border-bottom-color: $quinary-content; + + &::after { + content: ""; + border: inherit; + border-bottom-color: $menu-bg-color; + position: absolute; + top: 1px; + left: -8px; + } + } +} diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 323d4ff4691..26cbf3af890 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -252,40 +252,7 @@ limitations under the License. } } -.mx_ContextualMenu_wrapper.mx_BaseCard_header_title { - .mx_ContextualMenu { - position: initial; - - span:first-of-type { - font-weight: $font-semi-bold; - font-size: inherit; - color: $primary-content; - } - - font-size: $font-12px; - color: $secondary-content; - padding-top: 10px; - padding-bottom: 10px; - - border: 1px solid $quinary-content; - box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); - } - - .mx_ContextualMenu_chevron_top { - left: auto; - right: 22px; - border-bottom-color: $quinary-content; - - &::after { - content: ""; - border: inherit; - border-bottom-color: $menu-bg-color; - position: absolute; - top: 1px; - left: -8px; - } - } - +.mx_ContextualMenu_wrapper { .mx_ThreadPanel_Header_FilterOptionItem { display: flex; flex-grow: 1; From 463c30592a99cd06e1ea24fef4b075c8044c40a1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 10 Jun 2022 19:45:52 +0900 Subject: [PATCH 24/36] Hide long header title with ellipsis Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/res/css/_common.scss b/res/css/_common.scss index 0ea4ffd4dfb..2b0acfb310b 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -850,6 +850,9 @@ legend { .mx_BaseCard_header_title_heading { color: $secondary-content; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } } } From 1aeb5f90d7ae347a6e2fd5e45c0590cf622d4b7b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:05:35 +0900 Subject: [PATCH 25/36] Merge style rules - BaseCard_header-button-size Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 10 +--------- res/css/views/right_panel/_BaseCard.scss | 5 +++-- res/css/views/right_panel/_ThreadPanel.scss | 6 +++--- 3 files changed, 7 insertions(+), 14 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 2b0acfb310b..7cc020112ae 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -808,27 +808,19 @@ legend { } @define-mixin RightPanelCard { - --RightPanelCard_header-button-size: 24px; - height: 100px; overflow: visible; .mx_BaseCard_header { margin-bottom: $spacing-12; - .mx_BaseCard_back, - .mx_BaseCard_close { - width: var(--RightPanelCard_header-button-size); - height: var(--RightPanelCard_header-button-size); - } - .mx_BaseCard_back { margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4); // Header title with the back button ~ .mx_BaseCard_header_title { width: calc(100% - 60px); - margin-inline-start: var(--RightPanelCard_header-button-size); + margin-inline-start: var(--BaseCard_header-button-size); .mx_BaseCard_header_title_heading { margin-inline-start: 6px; // TODO: Use a spacing variable diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 5d8452edde6..c3c56b91637 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -17,6 +17,7 @@ limitations under the License. .mx_BaseCard { --BaseCard_EventTile_line-padding-block: 2px; --BaseCard_EventTile-spacing-inline: 36px; + --BaseCard_header-button-size: 24px; padding: 0 8px; overflow: hidden; @@ -42,8 +43,8 @@ limitations under the License. .mx_BaseCard_close { position: absolute; background-color: rgba(141, 151, 165, 0.2); - height: 20px; - width: 20px; + width: var(--BaseCard_header-button-size); + height: var(--BaseCard_header-button-size); margin: var(--BaseCard_header_button-margin); top: 0; border-radius: 50%; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 26cbf3af890..45d2eaaede9 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -29,11 +29,11 @@ limitations under the License. } .mx_MessageActionBar_maskButton { - width: var(--RightPanelCard_header-button-size); - height: var(--RightPanelCard_header-button-size); + width: var(--BaseCard_header-button-size); + height: var(--BaseCard_header-button-size); &::after { - mask-size: var(--RightPanelCard_header-button-size); + mask-size: var(--BaseCard_header-button-size); mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); } } From 589e58c61e18848ab62d7162aa81cb44138228ad Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:07:34 +0900 Subject: [PATCH 26/36] Merge style rules - BaseCard_header margin-bottom Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 2 -- res/css/views/right_panel/_BaseCard.scss | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 7cc020112ae..735d6be1752 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -812,8 +812,6 @@ legend { overflow: visible; .mx_BaseCard_header { - margin-bottom: $spacing-12; - .mx_BaseCard_back { margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4); diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index c3c56b91637..201def5f30a 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_BaseCard_header { --BaseCard_header_button-margin: $spacing-12; - margin: $spacing-4 0; + margin: $spacing-4 0 $spacing-12; > h2 { margin: 0 44px; From 9102d5c7bd694409adfe4922b0e5ebbd06841daa Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:08:50 +0900 Subject: [PATCH 27/36] Merge style rules - BaseCard back and close margin Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 6 ------ res/css/views/right_panel/_BaseCard.scss | 2 ++ 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 735d6be1752..0dd22b644b7 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -813,8 +813,6 @@ legend { .mx_BaseCard_header { .mx_BaseCard_back { - margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4); - // Header title with the back button ~ .mx_BaseCard_header_title { width: calc(100% - 60px); @@ -826,10 +824,6 @@ legend { } } - .mx_BaseCard_close { - margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4); - } - .mx_BaseCard_header_title { display: flex; align-items: center; diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 201def5f30a..be8cdef7e9d 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -64,6 +64,7 @@ limitations under the License. .mx_BaseCard_back { left: 0; + margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4); &::before { transform: rotate(90deg); @@ -74,6 +75,7 @@ limitations under the License. .mx_BaseCard_close { right: 0; + margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4); &::before { mask-image: url('$(res)/img/icons-close.svg'); From 9e214b3b66e065490f69bd1041b786635a3d00a4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:10:39 +0900 Subject: [PATCH 28/36] Merge style rules - BaseCard back ~ mx_BaseCard_header_title Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 12 ------------ res/css/views/right_panel/_BaseCard.scss | 10 ++++++++++ 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 0dd22b644b7..1dc9801229b 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -812,18 +812,6 @@ legend { overflow: visible; .mx_BaseCard_header { - .mx_BaseCard_back { - // Header title with the back button - ~ .mx_BaseCard_header_title { - width: calc(100% - 60px); - margin-inline-start: var(--BaseCard_header-button-size); - - .mx_BaseCard_header_title_heading { - margin-inline-start: 6px; // TODO: Use a spacing variable - } - } - } - .mx_BaseCard_header_title { display: flex; align-items: center; diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index be8cdef7e9d..5d0a72217ac 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -71,6 +71,16 @@ limitations under the License. mask-size: 22px; mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } + + // Header title with the back button + ~ .mx_BaseCard_header_title { + width: calc(100% - 60px); + margin-inline-start: var(--BaseCard_header-button-size); + + .mx_BaseCard_header_title_heading { + margin-inline-start: 6px; // TODO: Use a spacing variable + } + } } .mx_BaseCard_close { From 0d54c8b64181a9ba44cd2897cf7e3729d97f1404 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:12:17 +0900 Subject: [PATCH 29/36] Merge style rules - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 18 ------------------ res/css/views/right_panel/_BaseCard.scss | 16 ++++++++++++++++ 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 1dc9801229b..3360497dd83 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -810,22 +810,4 @@ legend { @define-mixin RightPanelCard { height: 100px; overflow: visible; - - .mx_BaseCard_header { - .mx_BaseCard_header_title { - display: flex; - align-items: center; - justify-content: space-between; - width: calc(100% - 38px); - height: 24px; - flex: 1; - - .mx_BaseCard_header_title_heading { - color: $secondary-content; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - } } diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 5d0a72217ac..32929e0a8da 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -92,6 +92,22 @@ limitations under the License. mask-size: 8px; } } + + .mx_BaseCard_header_title { + display: flex; + align-items: center; + justify-content: space-between; + width: calc(100% - 38px); + height: 24px; + flex: 1; + + .mx_BaseCard_header_title_heading { + color: $secondary-content; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } } .mx_AutoHideScrollbar { From 658b88f84695ac28cb2383548afe270f488cc7d9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:14:15 +0900 Subject: [PATCH 30/36] Return special declarations to _ThreadPanel.scss Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 2 -- res/css/views/right_panel/_ThreadPanel.scss | 3 +++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 3360497dd83..d8ed76b31a0 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -808,6 +808,4 @@ legend { } @define-mixin RightPanelCard { - height: 100px; - overflow: visible; } diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 45d2eaaede9..cdec73ddfb0 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -17,6 +17,9 @@ limitations under the License. .mx_ThreadPanel { @mixin RightPanelCard; + height: 100px; + overflow: visible; + .mx_BaseCard_header { .mx_BaseCard_header_title { .mx_AccessibleButton { From 9e6fb6554da80d5c9cf38461080ca5c1edd19477 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:16:43 +0900 Subject: [PATCH 31/36] Remove the mixin Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 3 --- res/css/views/right_panel/_PinnedMessagesCard.scss | 2 -- res/css/views/right_panel/_ThreadPanel.scss | 2 -- res/css/views/right_panel/_TimelineCard.scss | 2 -- 4 files changed, 9 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index d8ed76b31a0..867a04bf6cd 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -806,6 +806,3 @@ legend { mask-repeat: no-repeat; mask-size: contain; } - -@define-mixin RightPanelCard { -} diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 21b65011a51..ac76cf6754e 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -15,8 +15,6 @@ limitations under the License. */ .mx_PinnedMessagesCard { - @mixin RightPanelCard; - .mx_PinnedMessagesCard_empty_wrapper { display: flex; height: 100%; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index cdec73ddfb0..d000086d7c1 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -15,8 +15,6 @@ limitations under the License. */ .mx_ThreadPanel { - @mixin RightPanelCard; - height: 100px; overflow: visible; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 41c4cf5fe42..5bb5efe9f6f 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -15,8 +15,6 @@ limitations under the License. */ .mx_TimelineCard { - @mixin RightPanelCard; - .mx_TimelineCard_timeline { overflow: hidden; position: relative; // offset parent for jump to bottom button From d4ab2618442e58eef64a1829651ab1f4cdfba41a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 15 Jun 2022 23:14:33 +0900 Subject: [PATCH 32/36] Add mx_BaseCard_header_title_button--option Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_BaseCard.scss | 23 ++++++++++++ res/css/views/right_panel/_ThreadPanel.scss | 14 -------- res/css/views/right_panel/_WidgetCard.scss | 35 ------------------- .../context_menus/ThreadListContextMenu.tsx | 2 +- .../views/right_panel/WidgetCard.tsx | 10 +++--- 5 files changed, 29 insertions(+), 55 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 32929e0a8da..ba57875a9a0 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -107,6 +107,29 @@ limitations under the License. white-space: nowrap; text-overflow: ellipsis; } + + .mx_BaseCard_header_title_button--option { + position: relative; + width: var(--BaseCard_header-button-size); + height: var(--BaseCard_header-button-size); + + &::after { + content: ''; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + height: 100%; + width: 100%; + mask-repeat: no-repeat; + mask-position: center; + mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); + background-color: $secondary-content; + } + + &:hover::after { + background-color: $primary-content; + } + } } } diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index d000086d7c1..48bdeaafec0 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -25,20 +25,6 @@ limitations under the License. color: $secondary-content; } - .mx_MessageActionBar_optionsButton { - position: relative; - } - - .mx_MessageActionBar_maskButton { - width: var(--BaseCard_header-button-size); - height: var(--BaseCard_header-button-size); - - &::after { - mask-size: var(--BaseCard_header-button-size); - mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); - } - } - .mx_ThreadPanel_dropdown { padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable border-radius: 4px; diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss index 812de3cfc83..cb115fff065 100644 --- a/res/css/views/right_panel/_WidgetCard.scss +++ b/res/css/views/right_panel/_WidgetCard.scss @@ -15,9 +15,6 @@ limitations under the License. */ .mx_WidgetCard { - height: 100%; - display: contents; - .mx_AppTileFullWidth { max-width: unset; width: auto !important; @@ -25,38 +22,6 @@ limitations under the License. height: 100%; border: 0; } - - .mx_BaseCard_header { - display: inline-flex; - - & > h2 { - margin-right: 0; - flex-grow: 1; - } - - .mx_WidgetCard_optionsButton { - position: relative; - margin-right: 44px; - height: 20px; - width: 20px; - min-width: 20px; // prevent crushing by the flexbox - padding: 0; - - &::before { - content: ""; - position: absolute; - width: 20px; - height: 20px; - top: 0; - left: 4px; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); - background-color: $secondary-content; - } - } - } } .mx_WidgetCard_maxPinnedTooltip { diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx index e433918fd73..73fa52ef3c4 100644 --- a/src/components/views/context_menus/ThreadListContextMenu.tsx +++ b/src/components/views/context_menus/ThreadListContextMenu.tsx @@ -82,7 +82,7 @@ const ThreadListContextMenu: React.FC = ({ return = ({ room, widgetId, onClose }) => { ); } - const header = -

{ WidgetUtils.getWidgetName(app) }

+ const header =
+ { WidgetUtils.getWidgetName(app) } { contextMenu } - ; +
; return Date: Wed, 15 Jun 2022 23:15:56 +0900 Subject: [PATCH 33/36] Remove redundant margin from AppTileFullWidth Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_WidgetCard.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss index cb115fff065..6759cbc0d8a 100644 --- a/res/css/views/right_panel/_WidgetCard.scss +++ b/res/css/views/right_panel/_WidgetCard.scss @@ -18,7 +18,6 @@ limitations under the License. .mx_AppTileFullWidth { max-width: unset; width: auto !important; - margin: 0px $container-border-width 0px $container-border-width; height: 100%; border: 0; } From 30ea020c50415e1417a8466b4b673ea105fb83e3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:38:23 +0900 Subject: [PATCH 34/36] Header on mx_RoomSummaryCard - remove default declarations Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_RoomSummaryCard.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index f340883d484..6061b853dd1 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -17,25 +17,23 @@ limitations under the License. .mx_RoomSummaryCard { .mx_BaseCard_header { text-align: center; - margin-top: 20px; + margin-top: $spacing-20; h2 { - font-weight: $font-semi-bold; - font-size: $font-18px; - margin: 12px 0 4px; + margin: $spacing-12 0 $spacing-4; } .mx_RoomSummaryCard_alias { font-size: $font-13px; color: $secondary-content; + overflow: hidden; + text-overflow: ellipsis; } h2, .mx_RoomSummaryCard_alias { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; white-space: pre-wrap; } From 8a555238e0fc27b7af8eb93ec3abb4508ed38c32 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 11:43:12 +0900 Subject: [PATCH 35/36] Remove default declarations from mx_UserInfo Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_UserInfo.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 5befee1425b..4a0478888da 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -18,9 +18,6 @@ limitations under the License. .mx_UserInfo.mx_BaseCard { // UserInfo has a circular image at the top so it fits between the back & close buttons padding-top: 0; - display: flex; - flex-direction: column; - flex: 1; overflow-y: auto; font-size: $font-12px; From ca984b716f10da1b0be227ebe318d0a17305b9c0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 12:31:45 +0900 Subject: [PATCH 36/36] Use variables - _BaseCard.scss Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_BaseCard.scss | 27 ++++++++++++------------ 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index ba57875a9a0..64cb0c74f42 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -16,10 +16,10 @@ limitations under the License. .mx_BaseCard { --BaseCard_EventTile_line-padding-block: 2px; - --BaseCard_EventTile-spacing-inline: 36px; + --BaseCard_EventTile-spacing-inline: 36px; // TODO: Use a spacing variable --BaseCard_header-button-size: 24px; - padding: 0 8px; + padding: 0 $spacing-8; overflow: hidden; display: flex; flex-direction: column; @@ -31,7 +31,7 @@ limitations under the License. margin: $spacing-4 0 $spacing-12; > h2 { - margin: 0 44px; + margin: 0 44px; // TODO: Use a spacing variable font-size: $font-18px; font-weight: $font-semi-bold; overflow: hidden; @@ -143,11 +143,11 @@ limitations under the License. } .mx_BaseCard_Group { - margin: 20px 0 16px; + margin: $spacing-20 0 $spacing-16; & > * { - margin-left: 12px; - margin-right: 12px; + margin-left: $spacing-12; + margin-right: $spacing-12; } > h1 { @@ -157,7 +157,8 @@ limitations under the License. } .mx_BaseCard_Button { - padding: 10px 10px 10px 12px; + padding: 10px; // TODO: Use a spacing variable + padding-inline-start: $spacing-12; margin: 0; position: relative; font-size: $font-13px; @@ -179,7 +180,7 @@ limitations under the License. } &.mx_AccessibleButton_disabled { - padding-right: 12px; + padding-right: $spacing-12; &::after { content: unset; } @@ -188,7 +189,7 @@ limitations under the License. } .mx_BaseCard_footer { - padding-top: 4px; + padding-top: $spacing-4; text-align: center; display: flex; justify-content: space-around; @@ -211,7 +212,7 @@ limitations under the License. .mx_NotificationPanel, .mx_MemberList { &.mx_BaseCard { - padding: 32px 0 0; + padding: $spacing-32 0 0; .mx_AutoHideScrollbar { margin-right: unset; @@ -232,8 +233,8 @@ limitations under the License. font-size: $font-12px; color: $secondary-content; - padding-top: 10px; - padding-bottom: 10px; + padding-top: 10px; // TODO: Use a spacing variable + padding-bottom: 10px; // TODO: Use a spacing variable border: 1px solid $quinary-content; box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); @@ -241,7 +242,7 @@ limitations under the License. .mx_ContextualMenu_chevron_top { left: auto; - right: 22px; + right: 22px; // TODO: Use a spacing variable border-bottom-color: $quinary-content; &::after {