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

Add a pinned message badge under a pinned message (#118)

Browse source 
* Add pinned message badge for Modern Layout

* Add Bubble layout support

* Add thread support

* Add irc support

* Rename event tile badges

* Don't render footer when there is no reactions

* Add a test for `PinnedMessageBadge.tsx`

* Add a test in EventTile-test.tsx

* Add e2e test
This commit is contained in:
Florian Duros 2024-10-04 09:11:37 +02:00 • committed by GitHub
parent 2dbaf00e71
commit 70418f8f3d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 189 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/_components.pcss
View file

@ -249,6 +249,7 @@
@import "./views/messages/_MessageActionBar.pcss";
@import "./views/messages/_MessageTimestamp.pcss";
@import "./views/messages/_MjolnirBody.pcss";
@import "./views/messages/_PinnedMessageBadge.pcss";
@import "./views/messages/_ReactionsRow.pcss";
@import "./views/messages/_ReactionsRowButton.pcss";
@import "./views/messages/_RedactedBody.pcss";

26
res/css/views/messages/_PinnedMessageBadge.pcss Normal file
View file

@ -0,0 +1,26 @@
/*
* Copyright 2024 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
* Please see LICENSE files in the repository root for full details.
*
*/
.mx_PinnedMessageBadge {
position: relative;
display: flex;
align-items: center;
gap: var(--cpd-space-1x);
padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
font: var(--cpd-font-body-xs-medium);
background-color: var(--cpd-color-alpha-gray-200);
color: var(--cpd-color-text-secondary);
border-radius: 99px;
border: 1px solid var(--cpd-color-alpha-gray-400);
svg {
fill: var(--cpd-color-icon-secondary);
}
}

1
res/css/views/messages/_ReactionsRow.pcss
View file

@ -6,7 +6,6 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_ReactionsRow {
margin: 6px 0;
color: var(--cpd-color-text-primary);
.mx_ReactionsRow_addReactionButton {

10
res/css/views/rooms/_EventBubbleTile.pcss
View file

@ -172,7 +172,8 @@ Please see LICENSE files in the repository root for full details.
border-color: $quinary-content;
}
.mx_ReactionsRow {
.mx_EventTile_footer {
margin: var(--cpd-space-1-5x) 0;
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
}
@ -204,7 +205,8 @@ Please see LICENSE files in the repository root for full details.
margin-inline-end: auto;
}
.mx_ReactionsRow {
.mx_ReactionsRow,
.mx_EventTile_footer {
justify-content: flex-start;
}
@ -245,6 +247,10 @@ Please see LICENSE files in the repository root for full details.
max-width: 100%;
}
.mx_EventTile_footer {
justify-content: flex-end;
}
.mx_ReactionsRow {
justify-content: flex-end;

18
res/css/views/rooms/_EventTile.pcss
View file

@ -463,6 +463,10 @@ $left-gutter: 64px;
margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
}
}
.mx_EventTile_footer {
margin: var(--cpd-space-1-5x) 0;
}
}
&[data-layout="group"] {
@ -509,8 +513,8 @@ $left-gutter: 64px;
margin-left: $left-gutter;
}
.mx_ReactionsRow {
margin: $spacing-4 64px;
.mx_EventTile_footer {
margin: var(--cpd-space-1x) var(--cpd-space-16x);
}
> .mx_DisambiguatedProfile {
@ -1248,7 +1252,7 @@ $left-gutter: 64px;
padding-block-start: $spacing-16;
.mx_EventTile_line,
.mx_ReactionsRow {
.mx_EventTile_footer {
margin-inline-end: var(--ThreadView_group_spacing-end);
}
@ -1266,7 +1270,7 @@ $left-gutter: 64px;
}
}
.mx_ReactionsRow {
.mx_EventTile_footer {
/* Align with message text and summary text */
margin-inline-start: var(--ThreadView_group_spacing-start);
}
@ -1456,6 +1460,12 @@ $left-gutter: 64px;
display: flex;
}
.mx_EventTile_footer {
display: flex;
gap: var(--cpd-space-2x);
align-items: center;
}
/* Media query for mobile UI */
@media only screen and (max-width: 480px) {
.mx_EventTile_content {