imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use MessageActionBar style declarations on pinned message card (#8757)

Browse source 
* 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>
This commit is contained in:
Suguru Hirahara 2022-06-08 10:52:25 +00:00 • committed by GitHub
parent 911150846e
commit 36f2f3e2ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/right_panel/PinnedMessagesCard.tsx
View file

@ -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>,