imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deduplicate more icons using Compound Design Tokens (#132)

Browse source 
* Deduplicate more icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
(cherry picked from commit 7448bd52e2ff354917d6e5f769ca052961c13aa0)
This commit is contained in:
Michael Telatynski 2024-10-15 11:19:06 +01:00
parent a22e9e8f13
commit 146968da2c
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
68 changed files with 358 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/components/views/context_menus/_KebabContextMenu.pcss
View file

@ -8,5 +8,6 @@ Please see LICENSE files in the repository root for full details.
.mx_KebabContextMenu_icon {
width: 24px;
height: 24px;
color: $icon-button-color;
}

4
res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
View file

@ -12,8 +12,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_PollDetailHeader_icon {
height: 15px;
width: 15px;
height: 16px;
width: 16px;
margin-right: $spacing-8;
vertical-align: middle;
}

5
res/css/components/views/location/_ShareDialogButtons.pcss
View file

@ -40,6 +40,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ShareDialogButtons_button-icon {
height: 10px;
margin-top: 3px;
width: 20px;
height: 20px;
margin: 2px;
}

2
res/css/components/views/polls/_PollOption.pcss
View file

@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
border-width: 2px;
border-color: var(--cpd-color-icon-accent-tertiary);
background-color: var(--cpd-color-icon-accent-tertiary);
background-image: url("$(res)/img/element-icons/check-white.svg");
background-image: url("@vector-im/compound-design-tokens/icons/check.svg");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;

2
res/css/structures/_SpaceHierarchy.pcss
View file

@ -211,7 +211,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background-color: $accent;
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
}
}

2
res/css/structures/_SpacePanel.pcss
View file

@ -258,7 +258,7 @@ Please see LICENSE files in the repository root for full details.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/context-menu.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
background: $primary-content;
}
}

2
res/css/views/context_menus/_IconizedContextMenu.pcss
View file

@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_IconizedContextMenu_checked::before {
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
.mx_IconizedContextMenu_unchecked::before {

8
res/css/views/context_menus/_MessageContextMenu.pcss
View file

@ -49,7 +49,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconEndPoll::before {
mask-image: url("$(res)/img/element-icons/check-white.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
.mx_MessageContextMenu_iconForward::before {
@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconCopy::before {
height: 12px;
left: 2px;
height: 16px;
mask-image: url($copy-button-url);
position: relative;
width: 12px;
top: 3px;
width: 16px;
}
.mx_MessageContextMenu_iconEdit::before {

2
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
View file

@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background-color: $accent;
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
}
}

14
res/css/views/dialogs/_SpotlightDialog.pcss
View file

@ -121,14 +121,12 @@ Please see LICENSE files in the repository root for full details.
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 8px;
height: 8px;
mask-size: 14px;
width: inherit;
height: inherit;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/cancel-small.svg");
left: 0;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
}
@ -358,7 +356,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_option--menu::before {
mask-image: url("$(res)/img/element-icons/context-menu.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&:hover,

8
res/css/views/directory/_NetworkDropdown.pcss
View file

@ -64,14 +64,14 @@ Please see LICENSE files in the repository root for full details.
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 8px;
height: 8px;
mask-size: 14px;
width: inherit;
height: inherit;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/cancel-small.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}

2
res/css/views/elements/_FacePile.pcss
View file

@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
}

4
res/css/views/elements/_TagComposer.pcss
View file

@ -68,8 +68,8 @@ Please see LICENSE files in the repository root for full details.
position: relative;
svg {
width: 0.5em;
vertical-align: middle;
width: 16px;
height: 16px;
}
}
}

2
res/css/views/elements/_UseCaseSelectionButton.pcss
View file

@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
width: 12px;
height: 12px;
mask-image: url("$(res)/img/element-icons/check-white.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
}

2
res/css/views/right_panel/_ExtensionsCard.pcss
View file

@ -97,7 +97,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ExtensionsCard_app_options {
right: 32px; /* 24 + 8 */
&::before {
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
}

2
res/css/views/rooms/_LegacyRoomHeader.pcss
View file

@ -240,7 +240,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyRoomHeader_closeButton {
&::before {
mask-image: url("$(res)/img/cancel.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-size: 20px;
mask-position: center;
}

4
res/css/views/rooms/_LinkPreviewGroup.pcss
View file

@ -12,14 +12,14 @@ Please see LICENSE files in the repository root for full details.
width: 18px;
height: 18px;
img {
svg {
flex: 0 0 40px;
visibility: hidden;
}
}
&:hover .mx_LinkPreviewGroup_hide img,
.mx_LinkPreviewGroup_hide:focus-visible:focus img {
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
visibility: visible;
}

12
res/css/views/rooms/_ReplyPreview.pcss
View file

@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details.
.mx_ReplyPreview_header_cancel {
background-color: $primary-content;
mask: url("$(res)/img/cancel.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 18px;
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
mask-size: contain;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
}
}
}

2
res/css/views/rooms/_RoomSublist.pcss
View file

@ -131,7 +131,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomSublist_menuButton::before {
mask-image: url("$(res)/img/element-icons/context-menu.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
.mx_RoomSublist_headerText {

2
res/css/views/rooms/_RoomTile.pcss
View file

@ -133,7 +133,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomTile_menuButton::before {
mask-image: url("$(res)/img/element-icons/context-menu.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {

6
res/css/views/rooms/_TopUnreadMessagesBar.pcss
View file

@ -63,9 +63,9 @@ Please see LICENSE files in the repository root for full details.
position: absolute;
width: 18px;
height: 18px;
mask-image: url("$(res)/img/cancel.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-size: 10px;
mask-position: 4px 4px;
mask-size: 16px;
mask-position: center;
background: var(--cpd-color-icon-tertiary);
}

2
res/css/views/toasts/_IncomingCallToast.pcss
View file

@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
&::before {
content: "";
mask-image: url("$(res)/img/cancel.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
height: inherit;
width: inherit;

13
res/css/views/user-onboarding/_UserOnboardingButton.pcss
View file

@ -52,14 +52,13 @@ Please see LICENSE files in the repository root for full details.
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 7px;
height: 7px;
mask-size: 12px;
width: inherit;
height: inherit;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/element-icons/cancel-rounded.svg");
left: -1px;
top: -1px;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
}

12
res/css/views/user-onboarding/_UserOnboardingTask.pcss
View file

@ -75,13 +75,13 @@ Please see LICENSE files in the repository root for full details.
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 16px;
height: 16px;
mask-size: 24px;
width: inherit;
height: inherit;
position: absolute;
left: calc(50% - 8px);
top: calc(50% - 8px);
mask-image: url("$(res)/img/element-icons/check-white.svg");
left: 0;
top: 0;
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
animation-duration: 300ms;
animation-fill-mode: both;

13
res/img/cancel-small.svg
View file

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>Line + Line</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
<path d="M8,0 L0,8" id="Line" sketch:type="MSShapeGroup"></path>
<path d="M0,0 L8,8" id="Line" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 873 B

3
res/img/cancel.svg
View file

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.2756 4.69628C21.8922 4.07969 21.8922 3.08 21.2756 2.46342C20.659 1.84683 19.6593 1.84683 19.0427 2.46342L11.8917 9.61447L4.74063 2.46342C4.12404 1.84683 3.12436 1.84683 2.50777 2.46342C1.89118 3.08 1.89118 4.07969 2.50777 4.69628L9.65882 11.8473L2.20145 19.3047C1.58487 19.9213 1.58487 20.921 2.20145 21.5376C2.81804 22.1541 3.81773 22.1541 4.43431 21.5376L11.8917 14.0802L19.349 21.5375C19.9656 22.1541 20.9653 22.1541 21.5819 21.5375C22.1985 20.921 22.1985 19.9213 21.5819 19.3047L14.1245 11.8473L21.2756 4.69628Z" fill="#737D8C"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 650 B

3
res/img/element-icons/back.svg
View file

@ -1,3 +0,0 @@
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 227 B

4
res/img/element-icons/cancel-rounded.svg
View file

@ -1,4 +0,0 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M9.00098 1L1.00098 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 285 B

3
res/img/element-icons/caret-left.svg
View file

@ -1,3 +0,0 @@
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.63679 0.707107C8.02732 1.09763 8.02834 1.73182 7.63909 2.1236L2.70538 7.08934L7.65512 12.0391C8.04565 12.4296 8.04667 13.0638 7.65742 13.4556C7.26816 13.8474 6.63602 13.8484 6.24549 13.4579L0.588639 7.80101C0.198115 7.41049 0.197089 6.7763 0.586348 6.38452L6.22487 0.709391C6.61413 0.317605 7.24627 0.316582 7.63679 0.707107Z" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 502 B

3
res/img/element-icons/check-white.svg
View file

@ -1,3 +0,0 @@
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.54541 5.8884L4.80299 9.24274L12.4545 1.36395" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 248 B

20
res/img/element-icons/check.svg
View file

@ -1,20 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="18.86364"
height="14.318086"
viewBox="0 0 18.86364 14.318086"
fill="none"
version="1.1"
id="svg4"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<path
d="M 1.25,8.03668 6.13636,13.06814 17.61364,1.25"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
id="path2" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 488 B

5
res/img/element-icons/context-menu.svg
View file

@ -1,5 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4.25" cy="9" r="1.25" fill="currentColor"/>
<circle cx="9" cy="9" r="1.25" fill="currentColor"/>
<circle cx="13.75" cy="9" r="1.25" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 269 B

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

@ -1,3 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 590 B

5
res/img/element-icons/room/ellipsis.svg
View file

@ -1,5 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.5" cy="10" r="1.5" transform="rotate(180 15.5 10)" fill="currentColor"/>
<circle cx="10" cy="10" r="1.5" transform="rotate(180 10 10)" fill="currentColor"/>
<circle cx="4.5" cy="10" r="1.5" transform="rotate(180 4.5 10)" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 373 B

3
res/img/element-icons/roomlist/checkmark.svg
View file

@ -1,3 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8.81818L7.125 12L14 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 228 B

25
res/img/ellipsis.svg
View file

@ -1,25 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>icons_archive</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ellipsis" sketch:type="MSLayerGroup">
<g id="03-Input" sketch:type="MSShapeGroup">
<g id="03_3-Input-filled">
<g id="right_default">
<g id="right_middle">
<g id="Left-panel">
<g id="icons_archive">
<rect id="Rectangle-1" fill="#ECECEC" x="0" y="0" width="24" height="24"></rect>
<path d="M7.338,13.154 C7.842,13.154 8.164,12.776 8.164,12.272 C8.164,11.754 7.842,11.39 7.338,11.39 C6.848,11.39 6.512,11.754 6.512,12.272 C6.498,12.776 6.848,13.154 7.338,13.154 L7.338,13.154 L7.338,13.154 Z M12,13.154 C12.504,13.154 12.84,12.776 12.84,12.272 C12.826,11.754 12.504,11.39 12.014,11.39 C11.524,11.39 11.174,11.754 11.174,12.272 C11.16,12.776 11.51,13.154 12,13.154 L12,13.154 L12,13.154 Z M16.662,13.154 C17.18,13.154 17.502,12.776 17.502,12.272 C17.502,11.754 17.166,11.39 16.676,11.39 C16.186,11.39 15.836,11.754 15.836,12.272 C15.836,12.776 16.172,13.154 16.662,13.154 L16.662,13.154 L16.662,13.154 Z" id="Matrix-HQ-Copy-15" fill="#454545"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.8 KiB

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

@ -239,7 +239,7 @@ $event-highlight-bg-color: $yellow-background;
/* event timestamp */
$event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/element-icons/copy.svg";
$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
/* e2e */
$e2e-verified-color: #0dbd8b;

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

@ -345,7 +345,7 @@ $focus-brightness: 105%;
/* Icon URLs */
/* ******************** */
$copy-button-url: "$(res)/img/element-icons/copy.svg";
$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
/* ******************** */
/* Location sharing */