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

Update style of composer format bar to match message action bar (#6351)

Browse source 
Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin Townsend 2021-10-20 11:19:54 -04:00 • committed by GitHub
parent 4b903b9fbd
commit 2ee732b84d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

38
res/css/views/rooms/_MessageComposerFormatBar.scss
View file

@ -16,12 +16,13 @@ limitations under the License.
.mx_MessageComposerFormatBar { .mx_MessageComposerFormatBar {
display: none; display: none;
width: calc(26px * 5); width: calc(32px * 5);
height: 24px; height: 32px;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 8px;
background-color: $message-action-bar-bg-color; background-color: $primary-bg-color;
border: 1px solid $input-border-color;
user-select: none; user-select: none;
// equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) // equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000)
// but as it appears after them in the DOM, will appear on top. // but as it appears after them in the DOM, will appear on top.
@ -35,32 +36,19 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
position: relative; position: relative;
border: 1px solid $message-action-bar-border-color; margin: 2px;
margin-left: -1px;
&:hover { &:hover {
border-color: $message-action-bar-hover-border-color; background: $roomlist-button-bg-color;
border-radius: 6px;
z-index: 1; z-index: 1;
} }
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
}
&:only-child {
border-radius: 3px;
}
} }
.mx_MessageComposerFormatBar_button { .mx_MessageComposerFormatBar_button {
width: 27px; width: 28px;
height: 24px; height: 28px;
box-sizing: border-box; box-sizing: border-box;
background: none;
vertical-align: middle; vertical-align: middle;
} }
@ -73,7 +61,11 @@ limitations under the License.
width: 100%; width: 100%;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $message-action-bar-fg-color; background-color: $secondary-fg-color;
}
.mx_MessageComposerFormatBar_button:hover::after {
background-color: $primary-fg-color;
} }
.mx_MessageComposerFormatBar_buttonIconBold::after { .mx_MessageComposerFormatBar_buttonIconBold::after {

6
src/components/views/rooms/MessageComposerFormatBar.tsx
View file

@ -66,8 +66,8 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
this.setState({ visible: true }); this.setState({ visible: true });
const parentRect = this.formatBarRef.current.parentElement.getBoundingClientRect(); const parentRect = this.formatBarRef.current.parentElement.getBoundingClientRect();
this.formatBarRef.current.style.left = `${selectionRect.left - parentRect.left}px`; this.formatBarRef.current.style.left = `${selectionRect.left - parentRect.left}px`;
// 12 is half the height of the bar (e.g. to center it) and 16 is an offset that felt ok. // 16 is half the height of the bar (e.g. to center it) and 18 is an offset that felt ok.
this.formatBarRef.current.style.top = `${selectionRect.top - parentRect.top - 16 - 12}px`; this.formatBarRef.current.style.top = `${selectionRect.top - parentRect.top - 16 - 18}px`;
} }
public hide(): void { public hide(): void {
@ -103,8 +103,6 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
return ( return (
<AccessibleTooltipButton <AccessibleTooltipButton
element="button"
type="button"
onClick={this.props.onClick} onClick={this.props.onClick}
title={this.props.label} title={this.props.label}
tooltip={tooltip} tooltip={tooltip}