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

Deduplicate icons using Compound Design Tokens (#28419)

Browse source 
* Deduplicate icons using Compound Design Tokens

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

* Update screenshots & snapshots

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-11-11 17:27:22 +00:00 • committed by GitHub
parent c8c107405f
commit db30bc51a1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 117 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.pcss
View file

@ -186,7 +186,7 @@ input[type="search"].mx_textinput_icon {
/* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */
input[type="text"].mx_textinput_icon.mx_textinput_search,
input[type="search"].mx_textinput_icon.mx_textinput_search {
background-image: url("$(res)/img/feather-customised/search-input.svg");
background-image: url("@vector-im/compound-design-tokens/icons/search.svg");
}
/* dont search UI as not all browsers support it, */

4
res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss
View file

@ -32,8 +32,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_DeviceExpandDetailsButton_icon {
height: 16px;
width: 16px;
height: 24px;
width: 24px;
transition: all 0.3s;
transform: var(--icon-transform);

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

@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
width: 18px;
height: 18px;
background: currentColor;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;

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

@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
&::before {
background-color: $info-plinth-fg-color;
mask: url("$(res)/img/feather-customised/search-input.svg");
mask: url("@vector-im/compound-design-tokens/icons/search.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 50px;

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

@ -121,7 +121,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $tertiary-content;
mask-size: 16px;
transform: rotate(270deg);
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
}
&.mx_SpaceHierarchy_subspace_toggle_shown::before {

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

@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background-color: $background;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
transform: rotate(270deg);
}
@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: 20px;
mask-repeat: no-repeat;
background-color: $tertiary-content;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
}
.mx_SpaceButton_icon {

19
res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss
View file

@ -36,9 +36,24 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AnalyticsLearnMore_bullets li {
background: url("$(res)/img/tick-circle.svg") no-repeat;
list-style-type: none;
padding: 2px 0px 20px 32px;
padding: 2px 0 0 32px;
margin-bottom: 20px;
vertical-align: middle;
position: relative;
&::before {
content: "";
position: absolute;
width: 26px;
height: 26px;
left: 0;
top: 0;
background-color: #0dbd8b;
mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
}

10
res/css/views/elements/_Dropdown.pcss
View file

@ -39,11 +39,13 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Dropdown_arrow {
width: 10px;
height: 6px;
padding-right: 9px;
mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
width: 16px;
height: 16px;
margin-right: 4px;
mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 18px;
background: $primary-content;
}

13
res/css/views/elements/_Field.pcss
View file

@ -51,12 +51,15 @@ Please see LICENSE files in the repository root for full details.
.mx_Field_select::before {
content: "";
position: absolute;
top: 15px;
right: 10px;
width: 10px;
height: 6px;
mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
top: 50%;
transform: translateY(-50%);
right: 4px;
width: 18px;
height: 18px;
mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $primary-content;
z-index: 1;
pointer-events: none;

2
res/css/views/messages/_DateSeparator.pcss
View file

@ -30,6 +30,6 @@ 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/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
background-color: var(--cpd-color-icon-secondary);
}

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

@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
width: 18px;
height: 18px;
background: currentColor;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;

4
res/css/views/right_panel/_UserInfo.pcss
View file

@ -26,9 +26,9 @@ Please see LICENSE files in the repository root for full details.
height: 16px;
width: 16px;
padding: 4px;
mask-image: url("$(res)/img/minimise.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-left.svg");
mask-repeat: no-repeat;
mask-position: 7px center;
mask-position: center;
background-color: $header-panel-text-primary-color;
}
}

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

@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
}
}
&:hover .mx_LinkPreviewGroup_hide img,
&:hover .mx_LinkPreviewGroup_hide svg,
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
visibility: visible;
}

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

@ -42,7 +42,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background-color: $tertiary-content;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
}
&[aria-expanded="true"] {

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

@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background-color: var(--cpd-color-icon-secondary);
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
}
&.mx_RoomSublist_collapseBtn_collapsed::before {
@ -276,7 +276,7 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomSublist_showMoreButtonChevron,
.mx_RoomSublist_showLessButtonChevron {
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
}
.mx_RoomSublist_showLessButtonChevron {

2
res/css/views/spaces/_SpaceCreateMenu.pcss
View file

@ -67,7 +67,7 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: 2px 3px;
mask-size: 24px;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
}
}

2
res/css/views/voip/_CallView.pcss
View file

@ -147,7 +147,7 @@ Please see LICENSE files in the repository root for full details.
&::before {
content: "";
display: inline-block;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-size: 20px;
mask-position: center;
background-color: $call-primary-content;