nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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
68 changed files with 358 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;