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/src/components/views/messages/MessageActionBar.tsx
+9 -9
View File
@@ -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>,