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;