From f475ac140a9e7f461a1a98577febcf84817317e1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 5 Jun 2022 16:02:36 +0900 Subject: [PATCH 1/5] Refer mx_MessageActionBar on pinned messages card Normalize mx_MessageActionBar style rules - Allow the varaible (--MessageActionBar-size-button) to be used - Remove redundant declarations Signed-off-by: Suguru Hirahara --- .../views/right_panel/_PinnedMessagesCard.scss | 18 +++++++----------- .../views/right_panel/PinnedMessagesCard.tsx | 3 +-- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index b2c0a132d42..50cded30e84 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -44,20 +44,16 @@ limitations under the License. .mx_PinnedMessagesCard_MessageActionBar { pointer-events: none; - display: flex; - height: 32px; - line-height: $font-24px; - border-radius: 8px; - background: $background; - border: 1px solid $input-border-color; - padding: 1px; width: max-content; margin: 0 auto; - box-sizing: border-box; - .mx_MessageActionBar_maskButton { - display: inline-block; - position: relative; + // Cancel the default values for non-interactivity + position: unset; + visibility: visible; + cursor: unset; + + &::before { + content: unset; } .mx_MessageActionBar_optionsButton { diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx index def09858638..98541acd8c5 100644 --- a/src/components/views/right_panel/PinnedMessagesCard.tsx +++ b/src/components/views/right_panel/PinnedMessagesCard.tsx @@ -156,8 +156,7 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => { } else { content =
- { /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ } -
+
From 44324a4972cd2dcdc1fe08f4cd5b8f9b8ae7c32c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 5 Jun 2022 16:14:16 +0900 Subject: [PATCH 2/5] Use variables for normalization Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 9 ++++++--- res/css/views/right_panel/_PinnedMessagesCard.scss | 6 +++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 030b0d92c4c..8634f43cb50 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -18,6 +18,9 @@ limitations under the License. .mx_MessageActionBar { --MessageActionBar-size-button: 28px; --MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2 + --MessageActionBar-item-hover-background: $panel-actions; + --MessageActionBar-item-hover-borderRadius: 6px; + --MessageActionBar-item-hover-zIndex: 1; position: absolute; visibility: hidden; @@ -59,9 +62,9 @@ limitations under the License. margin: 2px; &:hover { - background: $panel-actions; - border-radius: 6px; - z-index: 1; + background: var(--MessageActionBar-item-hover-background); + border-radius: var(--MessageActionBar-item-hover-borderRadius); + z-index: var(--MessageActionBar-item-hover-zIndex); } } } diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 50cded30e84..4678d4936a9 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -57,9 +57,9 @@ limitations under the License. } .mx_MessageActionBar_optionsButton { - background: $panel-actions; - border-radius: 6px; - z-index: 1; + background: var(--MessageActionBar-item-hover-background); + border-radius: var(--MessageActionBar-item-hover-borderRadius); + z-index: var(--MessageActionBar-item-hover-zIndex); &::after { background-color: $primary-content; From e1851f728306656e807ced26ef486bec32750afd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 5 Jun 2022 16:36:46 +0900 Subject: [PATCH 3/5] Set class name Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_PinnedMessagesCard.scss | 6 +++--- src/components/views/right_panel/PinnedMessagesCard.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 4678d4936a9..7ce0e9ac5de 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -33,11 +33,11 @@ limitations under the License. } } - .mx_PinnedMessagesCard_empty { + .mx_PinnedMessagesCard_empty_wrapper { display: flex; height: 100%; - > div { + .mx_PinnedMessagesCard_empty { height: max-content; text-align: center; margin: auto 40px; @@ -67,7 +67,7 @@ limitations under the License. } } - > h2 { + .mx_PinnedMessagesCard_empty_header { font-weight: $font-semi-bold; font-size: $font-15px; line-height: $font-24px; diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx index 98541acd8c5..442b8384028 100644 --- a/src/components/views/right_panel/PinnedMessagesCard.tsx +++ b/src/components/views/right_panel/PinnedMessagesCard.tsx @@ -154,15 +154,15 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => { /> )); } else { - content =
-
+ content =
+
-

{ _t("Nothing pinned, yet") }

+

{ _t("Nothing pinned, yet") }

{ _t("If you have permissions, open the menu on any message and select " + "Pin to stick them here.", {}, { b: sub => { sub }, From b9eaedc95b1dd64a7e974f76f00b4e0f7330fcd1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 19:13:50 +0900 Subject: [PATCH 4/5] Readd the comment Signed-off-by: Suguru Hirahara --- src/components/views/right_panel/PinnedMessagesCard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx index 442b8384028..8d2b381606c 100644 --- a/src/components/views/right_panel/PinnedMessagesCard.tsx +++ b/src/components/views/right_panel/PinnedMessagesCard.tsx @@ -156,6 +156,7 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => { } else { content =
+ { /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
From c53cea81a5c7efc058c948cc579f034ecea30414 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 19:23:14 +0900 Subject: [PATCH 5/5] Use Heading size='h4' - Use size='h4' instead of 'h2' as 15px has been specified as the font-size of the header - Use logical values following _Heading.scss - Remove line-height declaration in favor of the default value Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_PinnedMessagesCard.scss | 6 +----- src/components/views/right_panel/PinnedMessagesCard.tsx | 3 ++- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 7ce0e9ac5de..7b099387f61 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -68,12 +68,8 @@ limitations under the License. } .mx_PinnedMessagesCard_empty_header { - font-weight: $font-semi-bold; - font-size: $font-15px; - line-height: $font-24px; color: $primary-content; - margin-top: 24px; - margin-bottom: 20px; + margin-block: $spacing-24 $spacing-20; } > span { diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx index 8d2b381606c..f17a7435574 100644 --- a/src/components/views/right_panel/PinnedMessagesCard.tsx +++ b/src/components/views/right_panel/PinnedMessagesCard.tsx @@ -32,6 +32,7 @@ import PinnedEventTile from "../rooms/PinnedEventTile"; import { useRoomState } from "../../../hooks/useRoomState"; import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext"; import { ReadPinsEventId } from "./types"; +import Heading from '../typography/Heading'; interface IProps { room: Room; @@ -163,7 +164,7 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
-

{ _t("Nothing pinned, yet") }

+ { _t("Nothing pinned, yet") } { _t("If you have permissions, open the menu on any message and select " + "Pin to stick them here.", {}, { b: sub => { sub },