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 {