Realign MessageActionBar to Figma designs (#32722)

* 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>
2026-03-09 10:29:15 +00:00
parent 8d076c897d
commit 095b407dae
15 changed files with 23 additions and 33 deletions
@@ -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;
    }
 }
@@ -196,7 +196,9 @@ Please see LICENSE files in the repository root for full details.
        }

        .mx_MessageActionBar {
-            inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
+            inset-inline-start: calc(
+                100% - var(--MessageActionBar-size-button) - 2 * var(--MessageActionBar-size-margin)
+            );
            right: initial; /* Reset the default value */
        }

@@ -130,7 +130,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                ref={buttonRefCallback}
                onFocus={onFocus}
                tabIndex={isActive ? 0 : -1}
-                placement="left"
+                placement="top"
            >
                <OverflowHorizontalIcon />
            </ContextMenuTooltipButton>
@@ -188,7 +188,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
                ref={buttonRefCallback}
                onFocus={onFocus}
                tabIndex={isActive ? 0 : -1}
-                placement="left"
+                placement="top"
            >
                <ReactionAddIcon />
            </ContextMenuTooltipButton>
@@ -241,7 +241,7 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
            title={title}
            onClick={onClick}
            onContextMenu={onClick}
-            placement="left"
+            placement="top"
        >
            <ThreadsIcon />
        </RovingAccessibleButton>
@@ -420,7 +420,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                    onClick={this.onEditClick}
                    onContextMenu={this.onEditClick}
                    key="edit"
-                    placement="left"
+                    placement="top"
                >
                    <EditIcon />
                </RovingAccessibleButton>,
@@ -439,7 +439,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                    onClick={(e: ButtonEvent) => this.onPinClick(e, isPinned)}
                    onContextMenu={(e: ButtonEvent) => this.onPinClick(e, isPinned)}
                    key="pin"
-                    placement="left"
+                    placement="top"
                >
                    {isPinned ? <UnpinIcon /> : <PinIcon />}
                </RovingAccessibleButton>,
@@ -453,7 +453,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                onClick={this.onCancelClick}
                onContextMenu={this.onCancelClick}
                key="cancel"
-                placement="left"
+                placement="top"
            >
                <DeleteIcon />
            </RovingAccessibleButton>
@@ -479,7 +479,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                    onClick={this.onResendClick}
                    onContextMenu={this.onResendClick}
                    key="resend"
-                    placement="left"
+                    placement="top"
                >
                    <RestartIcon />
                </RovingAccessibleButton>,
@@ -506,7 +506,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                            onClick={this.onReplyClick}
                            onContextMenu={this.onReplyClick}
                            key="reply"
-                            placement="left"
+                            placement="top"
                        >
                            <ReplyIcon />
                        </RovingAccessibleButton>,
@@ -570,7 +570,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                        caption={_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
                        onClick={this.props.toggleThreadExpanded}
                        key="expand"
-                        placement="left"
+                        placement="top"
                    >
                        {this.props.isQuoteExpanded ? <CollapseIcon /> : <ExpandIcon />}
                    </RovingAccessibleButton>,