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

Introduce new copy icon (#8942)

Browse source 
PSG-110
This commit is contained in:
Michael Weimann 2022-07-01 11:29:19 +02:00 committed by GitHub
parent 2468e5830b
commit 8e457f17ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 44 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
res/css/components/views/beacon/_ShareLatestLocation.scss
View file

@ -20,9 +20,20 @@ limitations under the License.
color: $secondary-content; 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 // override copyable text style to make compact
.mx_CopyableText_copyButton { .mx_CopyableText_copyButton {
height: 13px;
margin-left: $spacing-8 !important; margin-left: $spacing-8 !important;
position: relative;
top: -1px;
width: 13px;
&::before {
background-color: $secondary-content;
height: 13px;
width: 13px;
}
} }
} }

5
res/css/views/context_menus/_MessageContextMenu.scss
View file

@ -91,7 +91,12 @@ limitations under the License.
} }
.mx_MessageContextMenu_iconCopy::before { .mx_MessageContextMenu_iconCopy::before {
height: 12px;
left: 2px;
mask-image: url($copy-button-url); mask-image: url($copy-button-url);
position: relative;
width: 12px;
top: 3px;
} }
.mx_MessageContextMenu_iconEdit::before { .mx_MessageContextMenu_iconEdit::before {

17
res/css/views/elements/_CopyableText.scss
View file

@ -16,6 +16,7 @@ limitations under the License.
*/ */
.mx_CopyableText { .mx_CopyableText {
align-items: flex-start;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: max-content; width: max-content;
@ -31,19 +32,25 @@ limitations under the License.
.mx_CopyableText_copyButton { .mx_CopyableText_copyButton {
flex-shrink: 0; flex-shrink: 0;
width: 20px; // using em here to adapt to the local font size
height: 20px; width: 1em;
height: 1em;
cursor: pointer; cursor: pointer;
margin-left: 20px; margin-left: 20px;
display: block; display: block;
// center to first line
position: relative;
top: .15em;
&::before { &::before {
content: ""; content: "";
mask-image: url($copy-button-url); mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $message-action-bar-fg-color; background-color: $message-action-bar-fg-color;
width: 20px; width: 1em;
height: 20px; height: 1em;
display: block; display: block;
background-repeat: no-repeat; background-repeat: no-repeat;
} }

14
res/css/views/rooms/_EventTile.scss
View file

@ -611,6 +611,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
mask-size: 75%; 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; cursor: pointer;
} }
.mx_EventTile_copyButton {
mask-image: url($copy-button-url);
}
.mx_EventTile_collapseButton, .mx_EventTile_collapseButton,
.mx_EventTile_expandButton { .mx_EventTile_expandButton {
mask-position: center; mask-position: center;

3
res/img/element-icons/copy.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C1.34315 0 0 1.34315 0 3V10C0 11.6569 1.34315 13 3 13H5V15C5 16.6569 6.34315 18 8 18H15C16.6569 18 18 16.6569 18 15V8C18 6.34315 16.6569 5 15 5H13V3C13 1.34315 11.6569 0 10 0H3ZM11 5V3C11 2.44772 10.5523 2 10 2H3C2.44772 2 2 2.44772 2 3V10C2 10.5523 2.44772 11 3 11H5V8C5 6.34315 6.34315 5 8 5H11ZM7 8C7 7.44772 7.44772 7 8 7H15C15.5523 7 16 7.44772 16 8V15C16 15.5523 15.5523 16 15 16H8C7.44772 16 7 15.5523 7 15V8Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 590 B

4
res/img/feather-customised/clipboard.svg
View file

@ -1,4 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.75 3.75H3.75V10.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="7" y="7" width="7" height="7" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 341 B

2
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -210,7 +210,7 @@ $event-highlight-bg-color: $yellow-background;
// event timestamp // event timestamp
$event-timestamp-color: #acacac; $event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; $copy-button-url: "$(res)/img/element-icons/copy.svg";
// e2e // e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent

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

@ -325,7 +325,7 @@ $focus-brightness: 105%;
// Icon URLs // Icon URLs
// ******************** // ********************
$copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; $copy-button-url: "$(res)/img/element-icons/copy.svg";
// ******************** // ********************
// Location sharing // Location sharing