Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats 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 {
display: none;
width: calc(26px * 5);
height: 24px;
width: calc(32px * 5);
height: 32px;
position: absolute;
cursor: pointer;
border-radius: 4px;
background-color: $message-action-bar-bg-color;
border-radius: 8px;
background-color: $primary-bg-color;
border: 1px solid $input-border-color;
user-select: none;
// 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.
@ -35,32 +36,19 @@ limitations under the License.
white-space: nowrap;
display: inline-block;
position: relative;
border: 1px solid $message-action-bar-border-color;
margin-left: -1px;
margin: 2px;
&:hover {
border-color: $message-action-bar-hover-border-color;
background: $roomlist-button-bg-color;
border-radius: 6px;
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 {
width: 27px;
height: 24px;
width: 28px;
height: 28px;
box-sizing: border-box;
background: none;
vertical-align: middle;
}
@ -73,7 +61,11 @@ limitations under the License.
width: 100%;
mask-repeat: no-repeat;
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 {

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 });
const parentRect = this.formatBarRef.current.parentElement.getBoundingClientRect();
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.
this.formatBarRef.current.style.top = `${selectionRect.top - parentRect.top - 16 - 12}px`;
// 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 - 18}px`;
}
public hide(): void {
@ -103,8 +103,6 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
return (
<AccessibleTooltipButton
element="button"
type="button"
onClick={this.props.onClick}
title={this.props.label}
tooltip={tooltip}