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

Update styling of message action bar for multiple buttons

Browse source 
This applies the new design for multiple buttons in the message action bar,
paving the way for more things to appear here.

In addition, this changes the existing options button to use the three vertical
dots icon. Some theme colors are also tweaked to align with what they were meant
to be from the unified palette.
This commit is contained in:
J. Ryan Stinnett 2019-04-29 13:04:16 +01:00
parent ed8bbc7082
commit 8ef9fe951d
5 changed files with 58 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

56
res/css/views/messages/_MessageActionBar.scss
View file

@ -18,20 +18,52 @@ limitations under the License.
position: absolute;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
display: flex;
height: 24px;
border-radius: 4px;
background: $primary-bg-color;
top: -13px;
right: 8px;
user-select: none;
}
.mx_MessageActionBar_optionsButton {
display: inline-block;
width: 19px;
height: 19px;
background-image: url($edit-button-url);
}
> * {
display: inline-block;
position: relative;
width: 27px;
border: 1px solid $message-action-bar-border-color;
margin-left: -1px;
.mx_MatrixChat_useCompactLayout {
.mx_MessageActionBar {
top: 3px;
&:hover {
border-color: $message-action-bar-hover-border-color;
z-index: 1;
}
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
}
&:only-child {
border-radius: 3px;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
background-color: $primary-fg-color;
}
}
}
.mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/icon_context.svg');
}