sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Realign MessageActionBar to Figma designs (#32722)

Browse Source 
* Realign MessageActionBar to Figma designs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate style based on review

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Move tooltips to above MAB

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update event bubble tile style

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update apps/web/res/css/views/messages/_MessageActionBar.pcss

Co-authored-by: Florian Duros <florianduros@element.io>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Florian Duros <florianduros@element.io>
This commit is contained in:
Michael Telatynski
2026-03-09 10:29:15 +00:00
committed by GitHub
co-authored by Florian Duros
parent 8d076c897d
commit 095b407dae
15 changed files with 23 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/views/messages/_MessageActionBar.pcss
+11 -23
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MessageActionBar {
--MessageActionBar-size-button: 28px;
--MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
--MessageActionBar-size-margin: 3px;
--MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
--MessageActionBar-item-hover-borderRadius: 6px;
--MessageActionBar-item-hover-zIndex: 1;
@@ -17,12 +17,18 @@ Please see LICENSE files in the repository root for full details.
visibility: hidden;
cursor: pointer;
display: flex;
height: var(--MessageActionBar-size-box);
gap: var(--cpd-space-0-5x);
line-height: $font-24px;
border-radius: 8px;
background: $background;
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
top: -32px;
top: calc(
-1 *
(
var(--MessageActionBar-size-button) + 2 *
(var(--MessageActionBar-size-margin) + var(--cpd-border-width-1))
)
);
right: 8px;
user-select: none;
/* Ensure the action bar appears above other things like the read marker */
@@ -74,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
white-space: nowrap;
display: inline-block;
position: relative;
margin: 2px;
margin: var(--MessageActionBar-size-margin);
&:hover {
background: var(--MessageActionBar-item-hover-background);
@@ -84,7 +90,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageActionBar_iconButton {
--MessageActionBar-icon-size: 18px;
--MessageActionBar-icon-size: 20px;
width: var(--MessageActionBar-size-button);
height: var(--MessageActionBar-size-button);
color: var(--cpd-color-icon-secondary);
@@ -108,30 +114,12 @@ Please see LICENSE files in the repository root for full details.
color: var(--cpd-color-icon-primary);
}
&.mx_MessageActionBar_threadButton {
--MessageActionBar-icon-size: 20px;
}
&.mx_MessageActionBar_retryButton {
--MessageActionBar-icon-size: 16px;
}
&.mx_MessageActionBar_downloadButton {
--MessageActionBar-icon-size: 20px;
&.mx_MessageActionBar_downloadSpinnerButton {
svg {
display: none; /* hide the download icon */
}
}
}
&.mx_MessageActionBar_expandCollapseMessageButton {
--MessageActionBar-icon-size: 12px;
}
}
.mx_MessageActionBar_optionsButton {
--MessageActionBar-icon-size: 22px;
}
}