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

Switch to rendering svg icons rather than css masking (#31517)

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>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-15 09:52:50 +00:00
committed by GitHub
parent ef63661cb0
commit 1d3421417f
50 changed files with 558 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_components.pcss
-1
View File
@@ -280,7 +280,6 @@
@import "./views/rooms/_AuxPanel.pcss";
@import "./views/rooms/_BasicMessageComposer.pcss";
@import "./views/rooms/_CallGuestLinkButton.pcss";
@import "./views/rooms/_DecryptionFailureBar.pcss";
@import "./views/rooms/_E2EIcon.pcss";
@import "./views/rooms/_E2EIconView.pcss";
@import "./views/rooms/_EditMessageComposer.pcss";
res/css/structures/_LeftPanel.pcss
+13 -51
View File
@@ -114,67 +114,30 @@ Please see LICENSE files in the repository root for full details.
margin-top: 12px;
}
.mx_LeftPanel_dialPadButton {
width: 32px;
height: 32px;
.mx_LeftPanel_dialPadButton,
.mx_LeftPanel_exploreButton {
width: 20px;
height: 20px;
padding: var(--cpd-space-1-5x);
border-radius: 8px;
background-color: $panel-actions;
position: relative;
margin-left: 8px;
&::before {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 20px;
height: 20px;
mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
}
}
.mx_LeftPanel_exploreButton,
.mx_LeftPanel_recentsButton {
width: 32px;
height: 32px;
border-radius: 8px;
background-color: $panel-actions;
position: relative;
margin-left: 8px;
&::before {
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 16px;
height: 16px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
svg {
width: inherit;
height: inherit;
display: block;
color: $secondary-content;
}
&:hover {
background-color: $tertiary-content;
&::before {
background-color: $background;
svg {
color: $background;
}
}
}
.mx_LeftPanel_exploreButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
}
.mx_LeftPanel_recentsButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
}
}
.mx_LegacyRoomListHeader:first-child {
@@ -228,8 +191,7 @@ Please see LICENSE files in the repository root for full details.
background-color: transparent;
}
.mx_LeftPanel_exploreButton,
.mx_LeftPanel_recentsButton {
.mx_LeftPanel_exploreButton {
margin-left: 0;
margin-top: 8px;
}
res/css/structures/_RoomStatusBar.pcss
+5 -22
View File
@@ -99,34 +99,17 @@ Please see LICENSE files in the repository root for full details.
position: relative;
user-select: none;
&:nth-child(2) {
& + .mx_AccessibleButton {
border-left: 1px solid $resend-button-divider-color;
}
&::before {
content: "";
position: absolute;
svg {
left: 10px; /* inset for regular button padding */
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 18px;
height: 18px;
top: 50%; /* text sizes are dynamic */
transform: translateY(-50%);
}
&.mx_RoomStatusBar_unsentCancelAllBtn::before {
mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
}
&.mx_RoomStatusBar_unsentRetry {
padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
}
vertical-align: middle;
color: $muted-fg-color;
}
}
res/css/structures/_SearchBox.pcss
+7 -6
View File
@@ -17,13 +17,14 @@ Please see LICENSE files in the repository root for full details.
.mx_SearchBox_closeButton {
cursor: pointer;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
width: 16px;
height: 16px;
width: 16px;
padding: 9px;
background-color: var(--cpd-color-icon-secondary);
svg {
height: inherit;
width: inherit;
color: var(--cpd-color-icon-secondary);
}
}
}
res/css/views/dialogs/_InviteDialog.pcss
-8
View File
@@ -223,14 +223,6 @@ Please see LICENSE files in the repository root for full details.
margin-inline-start: auto;
}
.mx_InviteDialog_userDirectoryIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_InviteDialog_dialPadIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
}
.mx_InviteDialog_tile {
cursor: pointer;
display: grid;
res/css/views/dialogs/_JoinRuleDropdown.pcss
+6 -27
View File
@@ -18,19 +18,14 @@ Please see LICENSE files in the repository root for full details.
min-height: 32px;
> div {
padding-left: 30px;
position: relative;
padding-left: var(--cpd-space-1-5x);
&::before {
content: "";
position: absolute;
height: 16px;
svg {
width: 16px;
left: 6px;
top: 8px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-content;
height: 16px;
color: $secondary-content;
vertical-align: -2px;
margin-right: var(--cpd-space-1-5x);
}
&.mx_JoinRuleDropdown_knock::before {
@@ -39,22 +34,6 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_JoinRuleDropdown_invite::before {
box-sizing: border-box;
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
mask-size: contain;
padding: 1px;
}
.mx_JoinRuleDropdown_public::before {
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
}
.mx_JoinRuleDropdown_restricted::before {
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
mask-size: contain;
}
.mx_JoinRuleDropdown_icon {
color: $secondary-content;
position: absolute;
res/css/views/dialogs/_LeaveSpaceDialog.pcss
+5 -12
View File
@@ -25,28 +25,21 @@ Please see LICENSE files in the repository root for full details.
overflow-y: auto;
.mx_LeaveSpaceDialog_section_warning {
position: relative;
border-radius: 8px;
margin: 12px 0 0;
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;
color: $secondary-content;
vertical-align: middle;
margin: 0 var(--cpd-space-1x);
}
}
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
+5 -11
View File
@@ -87,25 +87,19 @@ Please see LICENSE files in the repository root for full details.
position: relative;
border-radius: 8px;
margin: 12px 0;
padding: 8px 8px 8px 42px;
padding: 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;
color: $secondary-content;
vertical-align: middle;
margin: 0 var(--cpd-space-1x);
}
}
res/css/views/dialogs/_RoomSettingsDialog.pcss
-40
View File
@@ -5,46 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
/* ICONS */
/* ========================================================== */
.mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_RoomSettingsDialog_voiceIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
}
.mx_RoomSettingsDialog_securityIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
}
.mx_RoomSettingsDialog_rolesIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/admin.svg");
}
.mx_RoomSettingsDialog_notificationsIcon::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomSettingsDialog_bridgesIcon::before {
/* This icon is pants, please improve :) */
mask-image: url("$(res)/img/feather-customised/bridge.svg");
}
.mx_RoomSettingsDialog_pollsIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg");
}
.mx_RoomSettingsDialog_warningIcon::before {
mask-image: url("$(res)/img/element-icons/room/settings/advanced.svg");
}
.mx_RoomSettingsDialog_peopleIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
}
.mx_RoomSettingsDialog .mx_Dialog_title {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
res/css/views/dialogs/_SpacePreferencesDialog.pcss
-4
View File
@@ -26,7 +26,3 @@ Please see LICENSE files in the repository root for full details.
}
}
}
.mx_SpacePreferencesDialog_appearanceIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
}
res/css/views/dialogs/_SpaceSettingsDialog.pcss
-10
View File
@@ -71,14 +71,4 @@ Please see LICENSE files in the repository root for full details.
}
}
}
.mx_TabbedView_tabLabel {
.mx_SpaceSettingsDialog_generalIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_SpaceSettingsDialog_visibilityIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
}
}
}
res/css/views/elements/_ExternalLink.pcss
-4
View File
@@ -12,10 +12,6 @@ Please see LICENSE files in the repository root for full details.
.mx_ExternalLink_icon {
display: inline-block;
mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
width: $font-11px;
height: $font-11px;
margin-left: 0.3rem;
res/css/views/rooms/_DecryptionFailureBar.pcss
-79
View File
@@ -1,79 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_DecryptionFailureBar {
--gap-row: $spacing-8;
--gap-column: $spacing-12;
--gap: var(--gap-row) var(--gap-column);
--size-icon: 24px;
background-color: $system;
padding: $spacing-12;
margin-inline: $spacing-16;
border-radius: 4px;
&.mx_DecryptionFailureBar--withEnd {
display: flex;
flex-flow: wrap;
align-items: flex-start;
justify-content: space-between;
row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */
.mx_DecryptionFailureBar_end {
display: flex;
flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */
gap: var(--buttons-dialog-gap-row) var(--buttons-dialog-gap-column);
margin-inline-start: calc(var(--size-icon) + var(--gap-column)); /* Align the button(s) and the message */
}
}
.mx_DecryptionFailureBar_start {
display: grid;
gap: var(--gap);
grid-template-areas:
"status headline"
". message";
grid-template-columns: var(--size-icon) auto;
.mx_DecryptionFailureBar_start_status {
grid-area: status;
display: flex;
align-items: center;
gap: var(--gap);
.mx_Spinner {
height: unset; /* Unset height: 100% */
}
.mx_DecryptionFailureBar_start_status_icon {
min-width: var(--size-icon);
height: var(--size-icon);
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $e2e-warning-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
.mx_DecryptionFailureBar_start_headline {
grid-area: headline;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-16px;
align-self: center;
}
.mx_DecryptionFailureBar_start_message {
grid-area: message;
color: $secondary-content;
}
}
}
res/css/views/rooms/_ReplyPreview.pcss
+3 -8
View File
@@ -29,16 +29,11 @@ Please see LICENSE files in the repository root for full details.
font-weight: 400;
opacity: 0.4;
.mx_ReplyPreview_header_cancel {
background-color: $primary-content;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
.mx_ReplyPreview_header_cancel svg {
color: $primary-content;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
flex-shrink: 0;
}
}
}
res/img/element-icons/room/settings/advanced.svg
+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 13.89C17 15.0256 16.1603 16 14.9272 16H3.08038C1.83972 16 1 15.0256 1 13.89C1 13.5371 1.09078 13.1841 1.27234 12.8542L7.20331 2.08951C7.60426 1.36061 8.30024 1 9.00378 1C9.70733 1 10.3957 1.34527 10.7967 2.08951L16.7277 12.8542C16.9092 13.1841 17 13.5371 17 13.89ZM8.92011 5.00263C8.35011 5.04263 7.93011 5.54264 7.98011 6.11264L8.28011 9.85C8.31011 10.2 8.58011 10.47 8.93011 10.5H8.99011C9.36011 10.5 9.67011 10.22 9.70011 9.85L10.0401 6.11264V5.95264C9.98011 5.38264 9.48011 4.96263 8.92011 5.00263ZM10 12.5C10 13.0523 9.55229 13.5 9 13.5C8.44772 13.5 8 13.0523 8 12.5C8 11.9477 8.44772 11.5 9 11.5C9.55229 11.5 10 11.9477 10 12.5Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 13.89C17 15.0256 16.1603 16 14.9272 16H3.08038C1.83972 16 1 15.0256 1 13.89C1 13.5371 1.09078 13.1841 1.27234 12.8542L7.20331 2.08951C7.60426 1.36061 8.30024 1 9.00378 1C9.70733 1 10.3957 1.34527 10.7967 2.08951L16.7277 12.8542C16.9092 13.1841 17 13.5371 17 13.89ZM8.92011 5.00263C8.35011 5.04263 7.93011 5.54264 7.98011 6.11264L8.28011 9.85C8.31011 10.2 8.58011 10.47 8.93011 10.5H8.99011C9.36011 10.5 9.67011 10.22 9.70011 9.85L10.0401 6.11264V5.95264C9.98011 5.38264 9.48011 4.96263 8.92011 5.00263ZM10 12.5C10 13.0523 9.55229 13.5 9 13.5C8.44772 13.5 8 13.0523 8 12.5C8 11.9477 8.44772 11.5 9 11.5C9.55229 11.5 10 11.9477 10 12.5Z" fill="currentColor"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 807 B

After

Width:  |  Height:  |  Size: 814 B