From 537cfbc13c024d196d473b46447610a387ce8684 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 10:17:17 +0900 Subject: [PATCH 1/8] Include mx_MessageActionBar_maskButton::after in mx_MessageActionBar_maskButton Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 030b0d92c4c..495a80a7b08 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -75,9 +75,8 @@ limitations under the License. cursor: not-allowed; opacity: .75; } -} -.mx_MessageActionBar_maskButton::after { +&::after { content: ''; position: absolute; top: 0; @@ -89,6 +88,7 @@ limitations under the License. mask-position: center; background-color: $secondary-content; } +} .mx_MessageActionBar_maskButton:hover::after { background-color: $primary-content; From bf570c9b2b084d28a8549a0deec2ca5e939baa0b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 10:18:14 +0900 Subject: [PATCH 2/8] Include mx_MessageActionBar_maskButton:hover::after in mx_MessageActionBar_maskButton Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 495a80a7b08..c4454685b83 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -88,11 +88,11 @@ limitations under the License. mask-position: center; background-color: $secondary-content; } -} -.mx_MessageActionBar_maskButton:hover::after { +&:hover::after { background-color: $primary-content; } +} .mx_MessageActionBar_reactButton::after { mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); From c5955d8fb62a9da61e9f3b24b7472de296682ed4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 10:21:04 +0900 Subject: [PATCH 3/8] Ensure buttons on message action bar used only with mx_MessageActionBar_maskButton as expected Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index c4454685b83..24a6e42b4ad 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -92,64 +92,64 @@ limitations under the License. &:hover::after { background-color: $primary-content; } -} -.mx_MessageActionBar_reactButton::after { +&.mx_MessageActionBar_reactButton::after { mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); } -.mx_MessageActionBar_replyButton::after { +&.mx_MessageActionBar_replyButton::after { mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg'); } -.mx_MessageActionBar_threadButton::after { +&.mx_MessageActionBar_threadButton::after { mask-image: url('$(res)/img/element-icons/message/thread.svg'); } -.mx_MessageActionBar_threadButton .mx_Indicator { +&.mx_MessageActionBar_threadButton .mx_Indicator { background: $links; animation-iteration-count: infinite; } -.mx_MessageActionBar_editButton::after { +&.mx_MessageActionBar_editButton::after { mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg'); } -.mx_MessageActionBar_optionsButton::after { +&.mx_MessageActionBar_optionsButton::after { mask-image: url('$(res)/img/element-icons/context-menu.svg'); } -.mx_MessageActionBar_resendButton::after { +&.mx_MessageActionBar_resendButton::after { mask-image: url('$(res)/img/element-icons/retry.svg'); } -.mx_MessageActionBar_cancelButton::after { +&.mx_MessageActionBar_cancelButton::after { mask-image: url('$(res)/img/element-icons/trashcan.svg'); } -.mx_MessageActionBar_downloadButton::after { +&.mx_MessageActionBar_downloadButton::after { mask-size: 14px; mask-image: url('$(res)/img/download.svg'); } -.mx_MessageActionBar_expandMessageButton::after { +&.mx_MessageActionBar_expandMessageButton::after { mask-size: 12px; mask-image: url('$(res)/img/element-icons/expand-message.svg'); } -.mx_MessageActionBar_collapseMessageButton::after { +&.mx_MessageActionBar_collapseMessageButton::after { mask-size: 12px; mask-image: url('$(res)/img/element-icons/collapse-message.svg'); } -.mx_MessageActionBar_viewInRoom::after { +&.mx_MessageActionBar_viewInRoom::after { mask-image: url('$(res)/img/element-icons/view-in-room.svg'); } -.mx_MessageActionBar_copyLinkToThread::after { +&.mx_MessageActionBar_copyLinkToThread::after { mask-image: url('$(res)/img/element-icons/link.svg'); } -.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after { +&.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after { background-color: transparent; // hide the download icon mask } +} From 6adfed94fe99834187d9551b286bf16a6534d9b9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 10:22:37 +0900 Subject: [PATCH 4/8] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 122 +++++++++--------- 1 file changed, 61 insertions(+), 61 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 24a6e42b4ad..a45d024a398 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -76,80 +76,80 @@ limitations under the License. opacity: .75; } -&::after { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - mask-size: 18px; - mask-repeat: no-repeat; - mask-position: center; - background-color: $secondary-content; -} + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + mask-size: 18px; + mask-repeat: no-repeat; + mask-position: center; + background-color: $secondary-content; + } -&:hover::after { - background-color: $primary-content; -} + &:hover::after { + background-color: $primary-content; + } -&.mx_MessageActionBar_reactButton::after { - mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); -} + &.mx_MessageActionBar_reactButton::after { + mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); + } -&.mx_MessageActionBar_replyButton::after { - mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg'); -} + &.mx_MessageActionBar_replyButton::after { + mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg'); + } -&.mx_MessageActionBar_threadButton::after { - mask-image: url('$(res)/img/element-icons/message/thread.svg'); -} + &.mx_MessageActionBar_threadButton::after { + mask-image: url('$(res)/img/element-icons/message/thread.svg'); + } -&.mx_MessageActionBar_threadButton .mx_Indicator { - background: $links; - animation-iteration-count: infinite; -} + &.mx_MessageActionBar_threadButton .mx_Indicator { + background: $links; + animation-iteration-count: infinite; + } -&.mx_MessageActionBar_editButton::after { - mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg'); -} + &.mx_MessageActionBar_editButton::after { + mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg'); + } -&.mx_MessageActionBar_optionsButton::after { - mask-image: url('$(res)/img/element-icons/context-menu.svg'); -} + &.mx_MessageActionBar_optionsButton::after { + mask-image: url('$(res)/img/element-icons/context-menu.svg'); + } -&.mx_MessageActionBar_resendButton::after { - mask-image: url('$(res)/img/element-icons/retry.svg'); -} + &.mx_MessageActionBar_resendButton::after { + mask-image: url('$(res)/img/element-icons/retry.svg'); + } -&.mx_MessageActionBar_cancelButton::after { - mask-image: url('$(res)/img/element-icons/trashcan.svg'); -} + &.mx_MessageActionBar_cancelButton::after { + mask-image: url('$(res)/img/element-icons/trashcan.svg'); + } -&.mx_MessageActionBar_downloadButton::after { - mask-size: 14px; - mask-image: url('$(res)/img/download.svg'); -} + &.mx_MessageActionBar_downloadButton::after { + mask-size: 14px; + mask-image: url('$(res)/img/download.svg'); + } -&.mx_MessageActionBar_expandMessageButton::after { - mask-size: 12px; - mask-image: url('$(res)/img/element-icons/expand-message.svg'); -} + &.mx_MessageActionBar_expandMessageButton::after { + mask-size: 12px; + mask-image: url('$(res)/img/element-icons/expand-message.svg'); + } -&.mx_MessageActionBar_collapseMessageButton::after { - mask-size: 12px; - mask-image: url('$(res)/img/element-icons/collapse-message.svg'); -} + &.mx_MessageActionBar_collapseMessageButton::after { + mask-size: 12px; + mask-image: url('$(res)/img/element-icons/collapse-message.svg'); + } -&.mx_MessageActionBar_viewInRoom::after { - mask-image: url('$(res)/img/element-icons/view-in-room.svg'); -} + &.mx_MessageActionBar_viewInRoom::after { + mask-image: url('$(res)/img/element-icons/view-in-room.svg'); + } -&.mx_MessageActionBar_copyLinkToThread::after { - mask-image: url('$(res)/img/element-icons/link.svg'); -} + &.mx_MessageActionBar_copyLinkToThread::after { + mask-image: url('$(res)/img/element-icons/link.svg'); + } -&.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after { - background-color: transparent; // hide the download icon mask -} + &.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after { + background-color: transparent; // hide the download icon mask + } } From 08f400c6ae8f168823a82f32af480a7269ae5913 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 10:24:34 +0900 Subject: [PATCH 5/8] Include mx_Indicator in mx_MessageActionBar_threadButton Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index a45d024a398..85a1c0feddc 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -101,14 +101,16 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg'); } - &.mx_MessageActionBar_threadButton::after { + &.mx_MessageActionBar_threadButton { + &::after { mask-image: url('$(res)/img/element-icons/message/thread.svg'); } - &.mx_MessageActionBar_threadButton .mx_Indicator { + .mx_Indicator { background: $links; animation-iteration-count: infinite; } + } &.mx_MessageActionBar_editButton::after { mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg'); From f077ca11f7d7b15289a133c93cfca4d465dc4444 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 10:25:09 +0900 Subject: [PATCH 6/8] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 85a1c0feddc..ee30a7e90f3 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -102,14 +102,14 @@ limitations under the License. } &.mx_MessageActionBar_threadButton { - &::after { - mask-image: url('$(res)/img/element-icons/message/thread.svg'); - } + &::after { + mask-image: url('$(res)/img/element-icons/message/thread.svg'); + } - .mx_Indicator { - background: $links; - animation-iteration-count: infinite; - } + .mx_Indicator { + background: $links; + animation-iteration-count: infinite; + } } &.mx_MessageActionBar_editButton::after { From de9fc39015fddc3809939c24918dd29755fa5576 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 10:27:03 +0900 Subject: [PATCH 7/8] Include mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton in mx_MessageActionBar_downloadButton Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index ee30a7e90f3..67120fb8d1c 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -128,9 +128,15 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/trashcan.svg'); } - &.mx_MessageActionBar_downloadButton::after { + &.mx_MessageActionBar_downloadButton { + &::after { mask-size: 14px; mask-image: url('$(res)/img/download.svg'); + + &.mx_MessageActionBar_downloadSpinnerButton::after { + background-color: transparent; // hide the download icon mask + } + } } &.mx_MessageActionBar_expandMessageButton::after { @@ -150,8 +156,4 @@ limitations under the License. &.mx_MessageActionBar_copyLinkToThread::after { mask-image: url('$(res)/img/element-icons/link.svg'); } - - &.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after { - background-color: transparent; // hide the download icon mask - } } From 6ab28a2e471c0874e8853c4622817d6b9ca356f9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Jun 2022 10:27:39 +0900 Subject: [PATCH 8/8] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 67120fb8d1c..926ce199ec7 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -130,14 +130,14 @@ limitations under the License. &.mx_MessageActionBar_downloadButton { &::after { - mask-size: 14px; - mask-image: url('$(res)/img/download.svg'); + mask-size: 14px; + mask-image: url('$(res)/img/download.svg'); - &.mx_MessageActionBar_downloadSpinnerButton::after { - background-color: transparent; // hide the download icon mask + &.mx_MessageActionBar_downloadSpinnerButton::after { + background-color: transparent; // hide the download icon mask + } } } - } &.mx_MessageActionBar_expandMessageButton::after { mask-size: 12px;