PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,20 +18,52 @@ limitations under the License.
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
top: 6px; display: flex;
right: 6px; height: 24px;
border-radius: 4px;
background: $primary-bg-color;
top: -13px;
right: 8px;
user-select: none; user-select: none;
}
.mx_MessageActionBar_optionsButton { > * {
display: inline-block; display: inline-block;
width: 19px; position: relative;
height: 19px; width: 27px;
background-image: url($edit-button-url); border: 1px solid $message-action-bar-border-color;
margin-left: -1px;
&:hover {
border-color: $message-action-bar-hover-border-color;
z-index: 1;
} }
.mx_MatrixChat_useCompactLayout { &:first-child {
.mx_MessageActionBar { border-radius: 3px 0 0 3px;
top: 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');
}

15
res/img/icon_context_message.svg
View file

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon_context">
<g>
<path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#ECECEC"></path>
<path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#9B9B9B"></path>
</g>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.5 KiB

3
res/themes/dark/css/_dark.scss
View file

@ -146,6 +146,9 @@ $room-warning-bg-color: $header-panel-bg-color;
$dark-panel-bg-color: $header-panel-bg-color; $dark-panel-bg-color: $header-panel-bg-color;
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
$message-action-bar-border-color: $input-darker-bg-color;
$message-action-bar-hover-border-color: $text-secondary-color;
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @define-mixin mx_DialogButton {

8
res/themes/light/css/_light.scss
View file

@ -73,7 +73,7 @@ $primary-hairline-color: #e5e5e5;
// used for the border of input text fields // used for the border of input text fields
$input-border-color: #e7e7e7; $input-border-color: #e7e7e7;
$input-darker-bg-color: rgba(193, 201, 214, 0.29); $input-darker-bg-color: #e3e8f0;
$input-darker-fg-color: #9fa9ba; $input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8; $input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color; $input-lighter-fg-color: $input-darker-fg-color;
@ -153,7 +153,7 @@ $roomheader-button-color: #91A1C0;
$groupheader-button-color: #91A1C0; $groupheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0; $rightpanel-button-color: #91A1C0;
$composer-button-color: #91A1C0; $composer-button-color: #91A1C0;
$roomtopic-color: #9fa9ba; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #c9ced6; $composer-e2e-icon-color: #c9ced6;
@ -203,7 +203,6 @@ $event-redacted-border-color: #cccccc;
// event timestamp // event timestamp
$event-timestamp-color: #acacac; $event-timestamp-color: #acacac;
$edit-button-url: "$(res)/img/icon_context_message.svg";
$copy-button-url: "$(res)/img/icon_copy_message.svg"; $copy-button-url: "$(res)/img/icon_copy_message.svg";
// e2e // e2e
@ -255,6 +254,9 @@ $authpage-secondary-color: #61708b;
$dark-panel-bg-color: $secondary-accent-color; $dark-panel-bg-color: $secondary-accent-color;
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$message-action-bar-border-color: $input-darker-bg-color;
$message-action-bar-hover-border-color: $roomtopic-color;
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @define-mixin mx_DialogButton {

7
src/components/views/messages/MessageActionBar.js
View file

@ -78,10 +78,11 @@ export default class MessageActionBar extends React.PureComponent {
} }
render() { render() {
// TODO: Move the bar to a separate element once there are several buttons return <div className="mx_MessageActionBar">
return <span className="mx_MessageActionBar mx_MessageActionBar_optionsButton" <span className="mx_MessageActionBar_optionsButton"
title={_t("Options")} title={_t("Options")}
onClick={this.onOptionsClicked} onClick={this.onOptionsClicked}
/>; />
</div>;
} }
} }