From 36f2f3e2cef04c73c2eabcdcc1bbe0cb4bca52a8 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 8 Jun 2022 10:52:25 +0000
Subject: [PATCH] Use MessageActionBar style declarations on pinned message
card (#8757)
* 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 <luixxiul@users.noreply.github.com>
* Use variables for normalization
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set class name
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Readd the comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* 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 <luixxiul@users.noreply.github.com>
---
res/css/views/messages/_MessageActionBar.scss | 9 +++--
.../right_panel/_PinnedMessagesCard.scss | 36 ++++++++-----------
.../views/right_panel/PinnedMessagesCard.tsx | 9 ++---
3 files changed, 25 insertions(+), 29 deletions(-)
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index e6be414998..a103ca4ebf 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 b2c0a132d4..7b099387f6 100644
--- a/res/css/views/right_panel/_PinnedMessagesCard.scss
+++ b/res/css/views/right_panel/_PinnedMessagesCard.scss
@@ -33,37 +33,33 @@ 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;
.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 {
- 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;
@@ -71,13 +67,9 @@ limitations under the License.
}
}
- > h2 {
- font-weight: $font-semi-bold;
- font-size: $font-15px;
- line-height: $font-24px;
+ .mx_PinnedMessagesCard_empty_header {
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 def0985863..f17a743557 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;
@@ -154,16 +155,16 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
/>
));
} else {
- content = <div className="mx_PinnedMessagesCard_empty">
- <div>
+ content = <div className="mx_PinnedMessagesCard_empty_wrapper">
+ <div className="mx_PinnedMessagesCard_empty">
{ /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
- <div className="mx_PinnedMessagesCard_MessageActionBar">
+ <div className="mx_MessageActionBar mx_PinnedMessagesCard_MessageActionBar">
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton" />
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton" />
</div>
- <h2>{ _t("Nothing pinned, yet") }</h2>
+ <Heading size="h4" className="mx_PinnedMessagesCard_empty_header">{ _t("Nothing pinned, yet") }</Heading>
{ _t("If you have permissions, open the menu on any message and select " +
"<b>Pin</b> to stick them here.", {}, {
b: sub => <b>{ sub }</b>,