Skip to content

Commit 1d34214

Browse files
t3chguyt3chguy
authored
Switch to rendering svg icons rather than css masking (#31517)
* 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>
1 parent ef63661 commit 1d34214

50 files changed

Lines changed: 558 additions & 375 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎playwright/snapshots/room/create-room.spec.ts/create-room-linux.png‎

15 Bytes
Loading

‎playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png‎

57 Bytes
Loading

‎playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png‎

13 Bytes
Loading

‎playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png‎

-476 Bytes
Loading

‎res/css/_components.pcss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,6 @@
280280
@import "./views/rooms/_AuxPanel.pcss";
281281
@import "./views/rooms/_BasicMessageComposer.pcss";
282282
@import "./views/rooms/_CallGuestLinkButton.pcss";
283-
@import "./views/rooms/_DecryptionFailureBar.pcss";
284283
@import "./views/rooms/_E2EIcon.pcss";
285284
@import "./views/rooms/_E2EIconView.pcss";
286285
@import "./views/rooms/_EditMessageComposer.pcss";

‎res/css/structures/_LeftPanel.pcss‎

Lines changed: 13 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -114,67 +114,30 @@ Please see LICENSE files in the repository root for full details.
114114
margin-top: 12px;
115115
}
116116

117-
.mx_LeftPanel_dialPadButton {
118-
width: 32px;
119-
height: 32px;
117+
.mx_LeftPanel_dialPadButton,
118+
.mx_LeftPanel_exploreButton {
119+
width: 20px;
120+
height: 20px;
121+
padding: var(--cpd-space-1-5x);
120122
border-radius: 8px;
121123
background-color: $panel-actions;
122-
position: relative;
123124
margin-left: 8px;
124125

125-
&::before {
126-
content: "";
127-
position: absolute;
128-
top: 6px;
129-
left: 6px;
130-
width: 20px;
131-
height: 20px;
132-
mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
133-
mask-position: center;
134-
mask-size: contain;
135-
mask-repeat: no-repeat;
136-
background-color: $secondary-content;
137-
}
138-
}
139-
140-
.mx_LeftPanel_exploreButton,
141-
.mx_LeftPanel_recentsButton {
142-
width: 32px;
143-
height: 32px;
144-
border-radius: 8px;
145-
background-color: $panel-actions;
146-
position: relative;
147-
margin-left: 8px;
148-
149-
&::before {
150-
content: "";
151-
position: absolute;
152-
top: 8px;
153-
left: 8px;
154-
width: 16px;
155-
height: 16px;
156-
mask-position: center;
157-
mask-size: contain;
158-
mask-repeat: no-repeat;
159-
background-color: $secondary-content;
126+
svg {
127+
width: inherit;
128+
height: inherit;
129+
display: block;
130+
color: $secondary-content;
160131
}
161132

162133
&:hover {
163134
background-color: $tertiary-content;
164135

165-
&::before {
166-
background-color: $background;
136+
svg {
137+
color: $background;
167138
}
168139
}
169140
}
170-
171-
.mx_LeftPanel_exploreButton::before {
172-
mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
173-
}
174-
175-
.mx_LeftPanel_recentsButton::before {
176-
mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
177-
}
178141
}
179142

180143
.mx_LegacyRoomListHeader:first-child {
@@ -228,8 +191,7 @@ Please see LICENSE files in the repository root for full details.
228191
background-color: transparent;
229192
}
230193

231-
.mx_LeftPanel_exploreButton,
232-
.mx_LeftPanel_recentsButton {
194+
.mx_LeftPanel_exploreButton {
233195
margin-left: 0;
234196
margin-top: 8px;
235197
}

‎res/css/structures/_RoomStatusBar.pcss‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -99,34 +99,17 @@ Please see LICENSE files in the repository root for full details.
9999
position: relative;
100100
user-select: none;
101101

102-
&:nth-child(2) {
102+
& + .mx_AccessibleButton {
103103
border-left: 1px solid $resend-button-divider-color;
104104
}
105105

106-
&::before {
107-
content: "";
108-
position: absolute;
106+
svg {
109107
left: 10px; /* inset for regular button padding */
110-
background-color: $muted-fg-color;
111-
mask-repeat: no-repeat;
112-
mask-position: center;
113-
mask-size: contain;
108+
114109
width: 18px;
115110
height: 18px;
116-
top: 50%; /* text sizes are dynamic */
117-
transform: translateY(-50%);
118-
}
119-
120-
&.mx_RoomStatusBar_unsentCancelAllBtn::before {
121-
mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
122-
}
123-
124-
&.mx_RoomStatusBar_unsentRetry {
125-
padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
126-
127-
&::before {
128-
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
129-
}
111+
vertical-align: middle;
112+
color: $muted-fg-color;
130113
}
131114
}
132115

‎res/css/structures/_SearchBox.pcss‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@ Please see LICENSE files in the repository root for full details.
1717

1818
.mx_SearchBox_closeButton {
1919
cursor: pointer;
20-
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
21-
mask-repeat: no-repeat;
22-
mask-position: center;
23-
mask-size: 16px;
24-
width: 16px;
2520
height: 16px;
21+
width: 16px;
2622
padding: 9px;
27-
background-color: var(--cpd-color-icon-secondary);
23+
24+
svg {
25+
height: inherit;
26+
width: inherit;
27+
color: var(--cpd-color-icon-secondary);
28+
}
2829
}
2930
}

‎res/css/views/dialogs/_InviteDialog.pcss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -223,14 +223,6 @@ Please see LICENSE files in the repository root for full details.
223223
margin-inline-start: auto;
224224
}
225225

226-
.mx_InviteDialog_userDirectoryIcon::before {
227-
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
228-
}
229-
230-
.mx_InviteDialog_dialPadIcon::before {
231-
mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
232-
}
233-
234226
.mx_InviteDialog_tile {
235227
cursor: pointer;
236228
display: grid;

‎res/css/views/dialogs/_JoinRuleDropdown.pcss‎

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,14 @@ Please see LICENSE files in the repository root for full details.
1818
min-height: 32px;
1919

2020
> div {
21-
padding-left: 30px;
22-
position: relative;
21+
padding-left: var(--cpd-space-1-5x);
2322

24-
&::before {
25-
content: "";
26-
position: absolute;
27-
height: 16px;
23+
svg {
2824
width: 16px;
29-
left: 6px;
30-
top: 8px;
31-
mask-repeat: no-repeat;
32-
mask-position: center;
33-
background-color: $secondary-content;
25+
height: 16px;
26+
color: $secondary-content;
27+
vertical-align: -2px;
28+
margin-right: var(--cpd-space-1-5x);
3429
}
3530

3631
&.mx_JoinRuleDropdown_knock::before {
@@ -39,22 +34,6 @@ Please see LICENSE files in the repository root for full details.
3934
}
4035
}
4136

42-
.mx_JoinRuleDropdown_invite::before {
43-
box-sizing: border-box;
44-
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
45-
mask-size: contain;
46-
padding: 1px;
47-
}
48-
49-
.mx_JoinRuleDropdown_public::before {
50-
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
51-
}
52-
53-
.mx_JoinRuleDropdown_restricted::before {
54-
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
55-
mask-size: contain;
56-
}
57-
5837
.mx_JoinRuleDropdown_icon {
5938
color: $secondary-content;
6039
position: absolute;

0 commit comments

Comments
 (0)
⚡