From 8e457f17ba834713de9beed1463987f5ecd77d2b Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Fri, 1 Jul 2022 11:29:19 +0200 Subject: [PATCH] Introduce new copy icon (#8942) PSG-110 --- .../views/beacon/_ShareLatestLocation.scss | 13 ++++++++++++- .../context_menus/_MessageContextMenu.scss | 5 +++++ res/css/views/elements/_CopyableText.scss | 17 ++++++++++++----- res/css/views/rooms/_EventTile.scss | 14 ++++++++++---- res/img/element-icons/copy.svg | 3 +++ res/img/feather-customised/clipboard.svg | 4 ---- res/themes/legacy-light/css/_legacy-light.scss | 2 +- res/themes/light/css/_light.scss | 2 +- 8 files changed, 44 insertions(+), 16 deletions(-) create mode 100644 res/img/element-icons/copy.svg delete mode 100644 res/img/feather-customised/clipboard.svg diff --git a/res/css/components/views/beacon/_ShareLatestLocation.scss b/res/css/components/views/beacon/_ShareLatestLocation.scss index 5d037fdbd5..cbdf34b9d7 100644 --- a/res/css/components/views/beacon/_ShareLatestLocation.scss +++ b/res/css/components/views/beacon/_ShareLatestLocation.scss @@ -20,9 +20,20 @@ limitations under the License. color: $secondary-content; } -.mx_ShareLatestLocation_copy { +// double class to be more specific than the general mx_CopyableText CSS rule +.mx_CopyableText.mx_ShareLatestLocation_copy { // override copyable text style to make compact .mx_CopyableText_copyButton { + height: 13px; margin-left: $spacing-8 !important; + position: relative; + top: -1px; + width: 13px; + + &::before { + background-color: $secondary-content; + height: 13px; + width: 13px; + } } } diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss index 90a1c58ee3..751a85f50c 100644 --- a/res/css/views/context_menus/_MessageContextMenu.scss +++ b/res/css/views/context_menus/_MessageContextMenu.scss @@ -91,7 +91,12 @@ limitations under the License. } .mx_MessageContextMenu_iconCopy::before { + height: 12px; + left: 2px; mask-image: url($copy-button-url); + position: relative; + width: 12px; + top: 3px; } .mx_MessageContextMenu_iconEdit::before { diff --git a/res/css/views/elements/_CopyableText.scss b/res/css/views/elements/_CopyableText.scss index ceafd42273..e035b38861 100644 --- a/res/css/views/elements/_CopyableText.scss +++ b/res/css/views/elements/_CopyableText.scss @@ -16,6 +16,7 @@ limitations under the License. */ .mx_CopyableText { + align-items: flex-start; display: flex; justify-content: space-between; width: max-content; @@ -31,19 +32,25 @@ limitations under the License. .mx_CopyableText_copyButton { flex-shrink: 0; - width: 20px; - height: 20px; + // using em here to adapt to the local font size + width: 1em; + height: 1em; cursor: pointer; margin-left: 20px; display: block; + // center to first line + position: relative; + top: .15em; &::before { content: ""; - mask-image: url($copy-button-url); + mask-position: center center; + mask-repeat: no-repeat; + mask-size: contain; background-color: $message-action-bar-fg-color; - width: 20px; - height: 20px; + width: 1em; + height: 1em; display: block; background-repeat: no-repeat; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 0aff810e8a..cd9c434bd0 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -611,6 +611,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss mask-size: 75%; } } + + .mx_EventTile_copyButton { + height: 17px; + mask-image: url($copy-button-url); + mask-position: center center; + mask-repeat: no-repeat; + mask-size: contain; + right: 9px; + width: 17px; + } } } @@ -631,10 +641,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss cursor: pointer; } -.mx_EventTile_copyButton { - mask-image: url($copy-button-url); -} - .mx_EventTile_collapseButton, .mx_EventTile_expandButton { mask-position: center; diff --git a/res/img/element-icons/copy.svg b/res/img/element-icons/copy.svg new file mode 100644 index 0000000000..5563442a30 --- /dev/null +++ b/res/img/element-icons/copy.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/res/img/feather-customised/clipboard.svg b/res/img/feather-customised/clipboard.svg deleted file mode 100644 index b25b97176c..0000000000 --- a/res/img/feather-customised/clipboard.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index c028175a08..0e3af16fce 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -210,7 +210,7 @@ $event-highlight-bg-color: $yellow-background; // event timestamp $event-timestamp-color: #acacac; -$copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; +$copy-button-url: "$(res)/img/element-icons/copy.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 0ed91eed83..709f100e82 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -325,7 +325,7 @@ $focus-brightness: 105%; // Icon URLs // ******************** -$copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; +$copy-button-url: "$(res)/img/element-icons/copy.svg"; // ******************** // Location sharing