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 (#31531)

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

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

* Remove unused stylesheet

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

* Switch to rendering svg icons rather than masking them for ExternalLink

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

* Switch to rendering svg icons rather than masking them for TabbedView

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

* Switch to rendering svg icons rather than masking them for JoinRuleDropdown

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

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

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

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

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

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

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

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

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

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

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

* Fix advanced.svg

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

* Update snapshots

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

* Update screenshots

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

* Iterate

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

* Fix bad merge conflict resolution

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

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

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

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

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

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

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

* Remove unused class

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

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

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

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

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

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

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

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

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

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

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

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

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

* Delint

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

* Update tests

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

* Add test

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

* Add test

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-15 12:00:35 +00:00
committed by GitHub
parent c7134e8532
commit 4a3cf3e69d
47 changed files with 638 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/structures/_ToastContainer.pcss
+1 -33
View File
@@ -41,42 +41,10 @@ Please see LICENSE files in the repository root for full details.
padding: var(--cpd-space-3x);
&.mx_Toast_hasIcon {
&::before,
&::after {
content: "";
svg {
width: 22px;
height: 22px;
grid-column: 1;
grid-row: 1;
mask-size: 100%;
mask-position: center;
mask-repeat: no-repeat;
background-size: 100%;
background-repeat: no-repeat;
}
&.mx_Toast_icon_verification::after {
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
background-color: $primary-content;
}
&.mx_Toast_icon_verification_warning {
/* white infill for the hollow svg mask */
&::before {
background-color: #ffffff;
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
mask-size: 80%;
}
&::after {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $e2e-warning-color;
}
}
&.mx_Toast_icon_key_storage::after {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
background-color: $primary-content;
}
.mx_Toast_title,
res/css/structures/_UploadBar.pcss
+35 -39
View File
@@ -7,12 +7,44 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_UploadBar {
padding-left: 65px; /* line up with the shield area in the composer */
padding-top: 5px;
/* line up with the shield area in the composer */
padding: 5px 21px 0;
position: relative;
display: grid;
grid-template:
"icon filename cancel" auto
"progress progress progress" auto
/ min-content auto min-content;
gap: var(--cpd-space-1-5x);
& > svg {
grid-area: icon;
height: 18px;
width: 18px;
color: $muted-fg-color;
align-self: center;
}
.mx_UploadBar_filename {
grid-area: filename;
color: $muted-fg-color;
position: relative;
font-size: $font-15px;
vertical-align: middle;
}
.mx_UploadBar_cancel {
grid-area: cancel;
height: 16px;
width: 16px;
color: $muted-fg-color;
align-self: center;
}
.mx_ProgressBar {
width: calc(100% - 40px); /* cheating at a right margin */
grid-area: progress;
width: 100%;
}
}
@@ -21,39 +53,3 @@ Please see LICENSE files in the repository root for full details.
padding-left: 0;
}
}
.mx_UploadBar_filename {
color: $muted-fg-color;
position: relative;
padding-right: 38px; /* 32px for cancel icon, 6px for padding */
padding-left: 22px; /* 18px for icon, 4px for padding */
font-size: $font-15px;
vertical-align: middle;
&::before {
content: "";
height: 18px;
width: 18px;
position: absolute;
top: 0;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
}
}
.mx_UploadBar_cancel {
position: absolute;
top: 0;
right: 0;
height: 16px;
width: 16px;
margin-right: 16px; /* align over rightmost button in composer */
margin-top: 5px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
res/css/structures/_UserMenu.pcss
-4
View File
@@ -119,8 +119,4 @@ Please see LICENSE files in the repository root for full details.
.mx_IconizedContextMenu_icon svg {
color: $icon-button-color;
}
.mx_UserMenu_iconMessage::before {
mask-image: url("$(res)/img/element-icons/feedback.svg");
}
}
res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
+5 -12
View File
@@ -32,27 +32,20 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ConfirmSpaceUserActionDialog_warning {
position: relative;
border-radius: 8px;
padding: 12px 8px 12px 42px;
padding: 12px 8px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: "";
position: absolute;
left: 10px;
top: calc(50% - 8px); /* vertical centering */
svg {
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
vertical-align: -4px;
margin-right: var(--cpd-space-1-5x);
color: $secondary-content;
}
}
}
res/css/views/dialogs/_FeedbackDialog.pcss
+5 -25
View File
@@ -55,33 +55,17 @@ Please see LICENSE files in the repository root for full details.
text-decoration: underline;
}
&::before,
&::after {
content: "";
& > svg {
position: absolute;
width: 40px;
height: 40px;
left: 16px;
top: 12px;
}
&::before {
padding: var(--cpd-space-2x);
width: 24px;
height: 24px;
background-color: $icon-button-color;
color: $avatar-initial-color;
border-radius: 8px;
}
&::after {
background: $avatar-initial-color; /* TODO */
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
}
}
.mx_FeedbackDialog_reportBug {
&::after {
mask-image: url("$(res)/img/feather-customised/bug.svg");
}
}
.mx_FeedbackDialog_rateApp {
@@ -125,9 +109,5 @@ Please see LICENSE files in the repository root for full details.
font-size: 24px;
border-color: var(--cpd-color-bg-action-primary-rest);
}
&::after {
mask-image: url("$(res)/img/element-icons/feedback.svg");
}
}
}
res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss
+4 -12
View File
@@ -10,20 +10,12 @@ Please see LICENSE files in the repository root for full details.
}
.mx_KeyBackupFailedDialog_title {
position: relative;
padding-left: 45px;
padding-bottom: 10px;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
mask-repeat: no-repeat;
background-color: $primary-content;
content: "";
position: absolute;
top: -6px;
right: 0;
bottom: 0;
left: 0;
svg {
margin-right: var(--cpd-space-2x);
vertical-align: -2px;
color: $primary-content;
}
}
res/css/views/elements/_CopyableText.pcss
+2 -8
View File
@@ -39,17 +39,11 @@ Please see LICENSE files in the repository root for full details.
top: 0.15em;
background-color: $background;
&::before {
content: "";
mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $message-action-bar-fg-color;
svg {
width: 1em;
height: 1em;
color: $message-action-bar-fg-color;
display: block;
background-repeat: no-repeat;
}
}
}
res/css/views/elements/_InviteReason.pcss
+5 -7
View File
@@ -23,14 +23,12 @@ Please see LICENSE files in the repository root for full details.
cursor: pointer;
color: $secondary-content;
&::before {
content: "";
margin-right: 8px;
background-color: $secondary-content;
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
svg {
width: 16px;
height: 16px;
color: $secondary-content;
display: inline-block;
width: 18px;
height: 14px;
margin-right: 8px;
}
}
}
res/css/views/rooms/_EventTile.pcss
+7 -30
View File
@@ -918,30 +918,21 @@ $left-gutter: 64px;
position: absolute;
top: $spacing-8;
right: $spacing-8;
width: 19px;
height: 19px;
width: 16px;
height: 16px;
visibility: hidden;
background-color: $message-action-bar-fg-color;
&.mx_EventTile_buttonBottom {
top: 33px;
}
&.mx_EventTile_collapseButton,
&.mx_EventTile_expandButton {
mask-size: 75%;
svg {
width: inherit;
height: inherit;
display: block;
color: $message-action-bar-fg-color;
}
}
.mx_EventTile_copyButton {
height: 17px;
mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
right: 9px;
width: 17px;
}
}
}
@@ -962,20 +953,6 @@ $left-gutter: 64px;
cursor: pointer;
}
.mx_EventTile_collapseButton,
.mx_EventTile_expandButton {
mask-position: center;
mask-repeat: no-repeat;
}
.mx_EventTile_collapseButton {
mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg");
}
.mx_EventTile_expandButton {
mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
}
.mx_EventTile_tileError {
color: red;
text-align: center;
res/css/views/rooms/_RoomInfoLine.pcss
+3 -26
View File
@@ -10,33 +10,10 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
display: inline-block;
&::before {
content: "";
display: inline-block;
height: 1.2em;
mask-position: center;
mask-repeat: no-repeat;
background-color: $tertiary-content;
vertical-align: text-bottom;
svg {
margin-right: 6px;
}
&.mx_RoomInfoLine_public::before {
width: 12px;
mask-size: 12px;
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
}
&.mx_RoomInfoLine_private::before {
width: 10px;
mask-size: 10px;
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
}
&.mx_RoomInfoLine_video::before {
width: 16px;
mask-size: 16px;
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
vertical-align: -2px;
color: $tertiary-content;
}
.mx_RoomInfoLine_members {
res/img/feather-customised/bug.svg
+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7L17 7C17 4.23858 14.7614 2 12 2ZM2.29289 7.70711C1.90237 7.31658 1.90237 6.68342 2.29289 6.29289C2.68342 5.90237 3.31658 5.90237 3.70711 6.29289L6.41421 9H17.5858L20.2929 6.29289C20.6834 5.90237 21.3166 5.90237 21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L19 10.4142V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H19C19 15.7795 18.8726 16.5292 18.6375 17.2295C18.6614 17.2493 18.6847 17.2705 18.7071 17.2929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.6791 19.0933C16.5924 20.5983 14.9222 21.6542 13 21.9291L13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21.9291C9.07785 21.6542 7.40759 20.5983 6.32091 19.0933L3.70711 21.7071C3.31658 22.0976 2.68342 22.0976 2.29289 21.7071C1.90237 21.3166 1.90237 20.6834 2.29289 20.2929L5.29289 17.2929C5.31533 17.2705 5.33857 17.2493 5.36252 17.2295C5.1274 16.5292 5 15.7795 5 15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H5V10.4142L2.29289 7.70711Z" fill="#FF5B55"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7L17 7C17 4.23858 14.7614 2 12 2ZM2.29289 7.70711C1.90237 7.31658 1.90237 6.68342 2.29289 6.29289C2.68342 5.90237 3.31658 5.90237 3.70711 6.29289L6.41421 9H17.5858L20.2929 6.29289C20.6834 5.90237 21.3166 5.90237 21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L19 10.4142V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H19C19 15.7795 18.8726 16.5292 18.6375 17.2295C18.6614 17.2493 18.6847 17.2705 18.7071 17.2929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.6791 19.0933C16.5924 20.5983 14.9222 21.6542 13 21.9291L13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21.9291C9.07785 21.6542 7.40759 20.5983 6.32091 19.0933L3.70711 21.7071C3.31658 22.0976 2.68342 22.0976 2.29289 21.7071C1.90237 21.3166 1.90237 20.6834 2.29289 20.2929L5.29289 17.2929C5.31533 17.2705 5.33857 17.2493 5.36252 17.2295C5.1274 16.5292 5 15.7795 5 15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H5V10.4142L2.29289 7.70711Z" fill="currentColor"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

res/themes/legacy-light/css/_legacy-light.pcss
-2
View File
@@ -241,8 +241,6 @@ $event-highlight-bg-color: $yellow-background;
/* event timestamp */
$event-timestamp-color: #acacac;
$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
/* e2e */
$e2e-verified-color: #0dbd8b;
$e2e-warning-color: #ff5b55;
res/themes/light/css/_light.pcss
-5
View File
@@ -347,11 +347,6 @@ $focus-brightness: 105%;
/* ******************** */
/* Icon URLs */
/* ******************** */
$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
/* ******************** */
/* Location sharing */
/* ******************** */
$location-marker-color: var(--cpd-color-icon-on-solid-primary);