sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Switch to rendering svg icons rather than masking them (#31557)

Browse Source 
* Switch to rendering svg icons rather than masking them in SpacePanel

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

* Fix badly rendered icon in JoinRuleDropdown

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

* Fix badly rendered icon in RoomPreviewCard

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

* Fix badly rendered icon in Space menus

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

* Fix badly rendered icon in ThreadPanel

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

* Update snapshots

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

* Update screenshot

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

* Remove unused icon underfill

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

* Update screenshot

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

* Add test

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

* Add missing snapshot

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

* Remove unused AccessibleButton kinds

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

* Switch to rendering svg icons rather than masking them in EventTileBubble

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

* Switch to rendering svg icons rather than masking them in ReactionsRow

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

* Switch to rendering svg icons rather than masking them in MFileBody

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

* Switch to rendering svg icons rather than masking them in BaseCard

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

* Switch to rendering svg icons rather than masking them in RedactedBody

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

* Switch to rendering svg icons rather than masking them in E2ePadlock

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

* Tidy up E2EIcon

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

* Switch to rendering svg icons rather than masking them in DialPad

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

* Switch to rendering svg icons rather than masking them in AccessSecretStorageDialog

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

* Switch to rendering svg icons rather than masking them in HiddenBody

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

* Update tests

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

* Iterate

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

* Update tests

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

* Fix overflow in base card size

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

* Add missing screenshots

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

* Add tests

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-01-05 17:14:51 +00:00
committed by GitHub
parent be7be39d0f
commit 914c959e31
63 changed files with 594 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/dialogs/_ForwardDialog.pcss
+1 -2
View File
@@ -40,8 +40,7 @@ Please see LICENSE files in the repository root for full details.
/* that our preview is unencrypted, which doesn't actually matter */
/* We also hide download links to not encourage users to try interacting */
.mx_EventTile_msgOption,
.mx_EventTile_e2eIcon_unencrypted,
.mx_EventTile_e2eIcon_warning,
.mx_EventTile_e2eIcon,
.mx_MFileBody_download {
display: none;
}
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
+3 -7
View File
@@ -33,14 +33,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
&::before {
content: "";
svg {
display: inline-block;
vertical-align: bottom;
width: 20px;
height: 20px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-inline-end: 5px;
}
@@ -48,9 +45,8 @@ Please see LICENSE files in the repository root for full details.
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
color: $alert;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $alert;
svg {
color: $alert;
}
}
}
res/css/views/elements/_AccessibleButton.pcss
-41
View File
@@ -63,22 +63,6 @@ Please see LICENSE files in the repository root for full details.
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_confirm_sm {
background-color: var(--cpd-color-bg-action-primary-rest);
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
}
&.mx_AccessibleButton_kind_cancel_sm {
background-color: var(--cpd-color-bg-critical-primary);
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
&.mx_AccessibleButton_kind_icon,
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_icon_primary_outline {
@@ -114,10 +98,6 @@ Please see LICENSE files in the repository root for full details.
text-decoration: underline;
}
&.mx_AccessibleButton_kind_secondary_content {
color: $secondary-content;
}
&.mx_AccessibleButton_kind_danger {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
@@ -175,25 +155,4 @@ Please see LICENSE files in the repository root for full details.
&.mx_AccessibleButton_kind_content_inline {
display: inline;
}
&.mx_AccessibleButton_kind_confirm_sm,
&.mx_AccessibleButton_kind_cancel_sm {
padding: 0px;
width: 16px;
height: 16px;
border-radius: 100%;
position: relative;
display: block;
&::before {
content: "";
display: block;
position: absolute;
inset: 0;
background-color: #ffffff;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
}
}
}
res/css/views/messages/_CreateEvent.pcss
+2 -3
View File
@@ -9,8 +9,7 @@ Please see LICENSE files in the repository root for full details.
.mx_EventTileBubble.mx_CreateEvent {
margin: var(--EventTileBubble_margin-block) auto;
&::before {
background-color: $header-panel-text-primary-color;
mask-image: url("@vector-im/compound-design-tokens/icons/chat-solid.svg");
svg {
color: $header-panel-text-primary-color;
}
}
res/css/views/messages/_EventTileBubble.pcss
+1 -2
View File
@@ -18,8 +18,7 @@ Please see LICENSE files in the repository root for full details.
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content min-content;
&::before,
&::after {
svg {
position: relative;
grid-column: 1;
grid-row: 1 / 3;
res/css/views/messages/_HiddenBody.pcss
+5 -14
View File
@@ -11,21 +11,12 @@ Please see LICENSE files in the repository root for full details.
color: $muted-fg-color;
vertical-align: middle;
padding-left: 20px;
position: relative;
&::before {
svg {
height: 14px;
width: 14px;
background-color: $muted-fg-color;
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-off.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
content: "";
position: absolute;
top: 1px;
left: 0;
display: inline-block;
margin-right: var(--cpd-space-1-5x);
color: $muted-fg-color;
vertical-align: -2px;
}
}
res/css/views/messages/_MFileBody.pcss
+8 -16
View File
@@ -34,25 +34,17 @@ Please see LICENSE files in the repository root for full details.
background-color: $system;
border-radius: 20px;
display: inline-block;
width: 32px;
height: 32px;
position: relative;
width: 16px;
height: 16px;
padding: var(--cpd-space-2x);
vertical-align: middle;
margin-right: 12px;
&::before {
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
mask-image: url("@vector-im/compound-design-tokens/icons/attachment.svg");
background-color: $secondary-content;
width: 16px;
height: 16px;
position: absolute;
top: 8px;
left: 8px;
svg {
color: $secondary-content;
width: inherit;
height: inherit;
display: block;
}
}
res/css/views/messages/_MJitsiWidgetEvent.pcss
+2 -3
View File
@@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_EventTileBubble.mx_MJitsiWidgetEvent {
&::before {
background-color: $header-panel-text-primary-color; /* XXX: Variable abuse */
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
svg {
color: $header-panel-text-primary-color; /* XXX: Variable abuse */
}
}
res/css/views/messages/_ReactionsRow.pcss
+9 -15
View File
@@ -9,25 +9,19 @@ Please see LICENSE files in the repository root for full details.
color: var(--cpd-color-text-primary);
.mx_ReactionsRow_addReactionButton {
position: relative;
display: inline-block;
visibility: hidden; /* show on hover of the .mx_EventTile */
width: 24px;
height: 24px;
width: 16px;
height: 16px;
padding: var(--cpd-space-1x);
vertical-align: middle;
margin-left: 4px;
margin-right: 4px;
&::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
mask-size: 16px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $tertiary-content;
mask-image: url("@vector-im/compound-design-tokens/icons/reaction-add.svg");
svg {
height: inherit;
width: inherit;
color: $tertiary-content;
}
&.mx_ReactionsRow_addReactionButton_active {
@@ -36,8 +30,8 @@ Please see LICENSE files in the repository root for full details.
&:hover,
&.mx_ReactionsRow_addReactionButton_active {
&::before {
background-color: $primary-content;
svg {
color: $primary-content;
}
}
}
res/css/views/messages/_RedactedBody.pcss
+4 -13
View File
@@ -11,20 +11,11 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
vertical-align: middle;
padding-left: 20px;
position: relative;
&::before {
svg {
margin-right: 6px;
height: 14px;
width: 14px;
background-color: $icon-button-color;
mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
content: "";
position: absolute;
top: 1px;
left: 0;
color: $icon-button-color;
vertical-align: -2px;
}
}
res/css/views/messages/_common_CryptoEvent.pcss
+2 -22
View File
@@ -9,28 +9,8 @@ Please see LICENSE files in the repository root for full details.
.mx_EventTileBubble.mx_cryptoEvent {
margin: var(--EventTileBubble_margin-block) auto;
/* white infill for the transparency */
&.mx_cryptoEvent_icon::before {
background-color: #ffffff;
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
}
&.mx_cryptoEvent_icon::after {
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
background-color: $header-panel-text-primary-color;
}
&.mx_cryptoEvent_icon_verified::after {
mask-image: url("@vector-im/compound-design-tokens/icons/shield.svg");
background-color: $accent;
}
&.mx_cryptoEvent_icon_warning::after {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $e2e-warning-color;
&.mx_cryptoEvent_icon svg {
color: $header-panel-text-primary-color;
}
.mx_cryptoEvent_state,
res/css/views/right_panel/_BaseCard.pcss
+10 -15
View File
@@ -61,24 +61,19 @@ Please see LICENSE files in the repository root for full details.
.mx_BaseCard_header_title_button--option {
position: relative;
width: var(--BaseCard_header-button-size);
height: var(--BaseCard_header-button-size);
width: calc(var(--BaseCard_header-button-size) - 4px);
height: calc(var(--BaseCard_header-button-size) - 4px);
padding: 2px;
&::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
height: 100%;
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
background-color: $secondary-content;
svg {
width: inherit;
height: inherit;
display: block;
color: $secondary-content;
}
&:hover::after {
background-color: $primary-content;
&:hover svg {
color: $primary-content;
}
}
}
res/css/views/rooms/_E2EIcon.pcss
-19
View File
@@ -21,22 +21,3 @@ Please see LICENSE files in the repository root for full details.
.mx_E2EIcon.mx_E2EIcon_inline {
display: inline-block;
}
.mx_E2EIcon_warning {
color: $e2e-warning-color;
}
.mx_E2EIcon_normal {
color: var(--cpd-color-icon-tertiary);
}
.mx_E2EIcon_verified,
.mx_E2EIcon_warning {
.mx_E2EIcon_normal::after {
background-color: white;
}
}
.mx_E2EIcon_verified {
color: $e2e-verified-color;
}
res/css/views/rooms/_EventTile.pcss
+3 -24
View File
@@ -836,32 +836,11 @@ $left-gutter: 64px;
width: 14px;
height: 14px;
display: block;
background-repeat: no-repeat;
background-size: contain;
&::after {
content: "";
svg {
height: inherit;
width: inherit;
display: block;
position: absolute;
inset: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
&.mx_EventTile_e2eIcon_warning::after {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $e2e-warning-color; /* red */
}
&.mx_EventTile_e2eIcon_normal::after {
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
background-color: var(--cpd-color-icon-tertiary); /* grey */
}
&.mx_EventTile_e2eIcon_decryption_failure::after {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: var(--cpd-color-icon-tertiary);
}
}
res/css/views/rooms/_HistoryTile.pcss
+2 -3
View File
@@ -9,8 +9,7 @@ Please see LICENSE files in the repository root for full details.
.mx_EventTileBubble.mx_HistoryTile {
margin: var(--EventTileBubble_margin-block) auto;
&::before {
background-color: $header-panel-text-primary-color;
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-off.svg");
svg {
color: $header-panel-text-primary-color;
}
}
res/css/views/rooms/_ReplyTile.pcss
-8
View File
@@ -11,14 +11,6 @@ Please see LICENSE files in the repository root for full details.
padding: 2px 0;
font: var(--cpd-font-body-md-regular);
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg");
}
&.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
> a {
display: grid;
grid-template:
res/css/views/voip/_DialPad.pcss
+5 -10
View File
@@ -44,16 +44,11 @@ Please see LICENSE files in the repository root for full details.
grid-column: 2;
background-color: $accent;
&::before {
content: "";
svg {
display: inline-block;
height: 40px;
width: 40px;
vertical-align: middle;
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: #fff; /* on all themes */
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
height: 20px;
width: 20px;
padding: 10px;
color: #fff; /* on all themes */
}
}