From 8ef9fe951dca64db7f83eb3dd60032a2f77b4ace Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 29 Apr 2019 13:04:16 +0100 Subject: [PATCH] Update styling of message action bar for multiple buttons 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. --- res/css/views/messages/_MessageActionBar.scss | 56 +++++++++++++++---- res/img/icon_context_message.svg | 15 ----- res/themes/dark/css/_dark.scss | 3 + res/themes/light/css/_light.scss | 8 ++- .../views/messages/MessageActionBar.js | 11 ++-- 5 files changed, 58 insertions(+), 35 deletions(-) delete mode 100644 res/img/icon_context_message.svg diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 917f82dc66..7bd5fa5cf9 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -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'); +} diff --git a/res/img/icon_context_message.svg b/res/img/icon_context_message.svg deleted file mode 100644 index f2ceccfa78..0000000000 --- a/res/img/icon_context_message.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - ED5D3E59-2561-4AC1-9B43-82FBC51767FC - Created with sketchtool. - - - - - - - - - - diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index c433a028a3..0d3b40b64f 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -146,6 +146,9 @@ $room-warning-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); +$message-action-bar-border-color: $input-darker-bg-color; +$message-action-bar-hover-border-color: $text-secondary-color; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index ca2e4cf58d..bdd5f10cc9 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -73,7 +73,7 @@ $primary-hairline-color: #e5e5e5; // used for the border of input text fields $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-lighter-bg-color: #f2f5f8; $input-lighter-fg-color: $input-darker-fg-color; @@ -153,7 +153,7 @@ $roomheader-button-color: #91A1C0; $groupheader-button-color: #91A1C0; $rightpanel-button-color: #91A1C0; $composer-button-color: #91A1C0; -$roomtopic-color: #9fa9ba; +$roomtopic-color: #9e9e9e; $eventtile-meta-color: $roomtopic-color; $composer-e2e-icon-color: #c9ced6; @@ -203,7 +203,6 @@ $event-redacted-border-color: #cccccc; // event timestamp $event-timestamp-color: #acacac; -$edit-button-url: "$(res)/img/icon_context_message.svg"; $copy-button-url: "$(res)/img/icon_copy_message.svg"; // e2e @@ -255,6 +254,9 @@ $authpage-secondary-color: #61708b; $dark-panel-bg-color: $secondary-accent-color; $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! ***** @define-mixin mx_DialogButton { diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index c4c271e1a5..3543c41ace 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -78,10 +78,11 @@ export default class MessageActionBar extends React.PureComponent { } render() { - // TODO: Move the bar to a separate element once there are several buttons - return ; + return
+ +
; } }