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

Deduplicate icons using Compound Design Tokens (#28381)

Browse Source 
* Deduplicate icons using Compound Design Tokens

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

* Remove unused test images

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

* Update snapshots & screenshots

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-07 11:39:18 +00:00
committed by GitHub
parent b92101a3da
commit 74a919cb65
26 changed files with 75 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
res/css/views/context_menus/_MessageContextMenu.pcss
View File

@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconReport::before {
mask-image: url("$(res)/img/element-icons/warning-badge.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
}
.mx_MessageContextMenu_iconLink::before {
@@ -61,7 +61,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconResend::before {
mask-image: url("$(res)/img/element-icons/retry.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
}
.mx_MessageContextMenu_iconSource::before {

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

@@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/retry.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
width: 18px;
height: 18px;
left: 0;

4
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View File

@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_AccessSecretStorageDialog_resetBadge::before {
/* The image isn't capable of masking, so we use a background instead. */
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
background-size: 24px;
background-color: transparent;
}
@@ -120,7 +120,7 @@ Please see LICENSE files in the repository root for full details.
width: 16px;
left: 0;
top: 2px; /* alignment */
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
background-size: contain;
}

2
res/css/views/elements/_InfoTooltip.pcss
View File

@@ -29,5 +29,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InfoTooltip_icon_warning::before {
mask-image: url("$(res)/img/element-icons/warning.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
}

4
res/css/views/messages/_MessageActionBar.pcss
View File

@@ -108,6 +108,10 @@ Please see LICENSE files in the repository root for full details.
color: var(--cpd-color-icon-primary);
}
&.mx_MessageActionBar_retryButton {
--MessageActionBar-icon-size: 16px;
}
&.mx_MessageActionBar_downloadButton {
--MessageActionBar-icon-size: 14px;

3
res/css/views/rooms/_EntityTile.pcss
View File

@@ -31,8 +31,9 @@ Please see LICENSE files in the repository root for full details.
position: absolute;
top: calc(50% - 8px); /* center */
right: -8px;
mask: url("$(res)/img/member_chevron.png");
mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
mask-repeat: no-repeat;
mask-position: center;
width: 16px;
height: 16px;
background-color: $header-panel-text-primary-color;

8
res/css/views/rooms/_ThreadSummary.pcss
View File

@@ -53,11 +53,11 @@ Please see LICENSE files in the repository root for full details.
content: "";
position: absolute;
top: 50%;
right: $spacing-12;
right: var(--cpd-space-1x);
transform: translateY(-50%);
width: 12px;
height: 12px;
mask-image: url("$(res)/img/compound/chevron-right-12px.svg");
width: 24px;
height: 24px;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;