Skip to content

Commit 7e3a6d9

Browse files
t3chguyt3chguy
authored
Switch to rendering svg icons rather than masking them (#31550)
* 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> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
1 parent 773662e commit 7e3a6d9

File tree

24 files changed

+644
-318
lines changed

24 files changed

+644
-318
lines changed

‎playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png‎

25 Bytes
Loading

‎playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png‎

200 Bytes
Loading

‎res/css/_components.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
@import "./structures/_SearchBox.pcss";
8080
@import "./structures/_SpaceHierarchy.pcss";
8181
@import "./structures/_SpacePanel.pcss";
82+
@import "./structures/_SpacePillButton.pcss";
8283
@import "./structures/_SpaceRoomView.pcss";
8384
@import "./structures/_SplashPage.pcss";
8485
@import "./structures/_TabbedView.pcss";
@@ -381,7 +382,6 @@
381382
@import "./views/spaces/_SpaceBasicSettings.pcss";
382383
@import "./views/spaces/_SpaceChildrenPicker.pcss";
383384
@import "./views/spaces/_SpaceCreateMenu.pcss";
384-
@import "./views/spaces/_SpacePublicShare.pcss";
385385
@import "./views/terms/_InlineTermsAgreement.pcss";
386386
@import "./views/toasts/_AnalyticsToast.pcss";
387387
@import "./views/toasts/_IncomingCallToast.pcss";

‎res/css/structures/_SpacePanel.pcss‎

Lines changed: 46 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -44,29 +44,23 @@ Please see LICENSE files in the repository root for full details.
4444
top: 19px; /* v-align with avatar */
4545
right: -8px;
4646

47-
&::before {
48-
content: "";
49-
position: absolute;
50-
width: inherit;
47+
svg {
5148
height: inherit;
52-
mask-position: center;
53-
mask-size: contain;
54-
mask-repeat: no-repeat;
55-
background-color: $background;
56-
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
57-
transform: rotate(270deg);
49+
width: inherit;
50+
display: inline-block;
51+
color: $background;
52+
/* Slight alignment tweak to center the asset */
53+
margin-left: 1px;
5854
}
5955

6056
&:not(.expanded) {
6157
opacity: 0;
62-
63-
&::before {
64-
mask-position: center 1px;
65-
}
6658
}
6759

68-
&.expanded::before {
69-
transform: rotate(90deg);
60+
&.expanded svg {
61+
transform: rotate(180deg);
62+
/* Slight alignment tweak to center the asset */
63+
margin-left: -1px;
7064
}
7165
}
7266

@@ -103,7 +97,6 @@ Please see LICENSE files in the repository root for full details.
10397
& > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
10498
padding: 0 10px;
10599
margin: 0 -10px;
106-
transform: rotate(-90deg);
107100
}
108101

109102
& > .mx_SpaceTreeLevel {
@@ -166,109 +159,67 @@ Please see LICENSE files in the repository root for full details.
166159
}
167160

168161
.mx_SpaceButton_toggleCollapse {
162+
height: 20px;
169163
width: var(--gutterSize);
164+
flex-shrink: 0;
170165
padding: 10px 0;
171-
min-width: var(--gutterSize);
172-
height: 20px;
173-
mask-position: center;
174-
mask-size: 20px;
175-
mask-repeat: no-repeat;
176-
background-color: $tertiary-content;
177-
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
178-
}
179166

180-
.mx_SpaceButton_icon {
181-
width: var(--height-topLevel);
182-
min-width: var(--height-topLevel);
183-
height: var(--height-topLevel);
184-
border-radius: 8px;
185-
position: relative;
186-
187-
&::before {
188-
position: absolute;
189-
content: "";
190-
width: var(--height-topLevel);
191-
height: var(--height-topLevel);
192-
top: 0;
193-
left: 0;
194-
mask-position: center;
195-
mask-repeat: no-repeat;
196-
mask-size: 18px;
167+
svg {
168+
width: 20px;
169+
height: inherit;
170+
display: inline-block;
171+
color: $tertiary-content;
172+
/* Re-align with parent */
173+
margin-left: -3px;
197174
}
198175
}
199176

200-
&.mx_SpaceButton_home,
201-
&.mx_SpaceButton_favourites,
202-
&.mx_SpaceButton_people,
203-
&.mx_SpaceButton_orphans,
204-
&.mx_SpaceButton_videoRooms {
205-
.mx_SpaceButton_icon {
206-
background-color: $panel-actions;
207-
208-
&::before {
209-
background-color: $secondary-content;
210-
}
211-
}
212-
}
213-
214-
&.mx_SpaceButton_withIcon .mx_SpaceButton_icon {
177+
.mx_SpaceButton_icon {
178+
/* Calculate height excluding padding to allow svg to inherit */
179+
width: calc(var(--height-topLevel) - 14px);
180+
height: calc(var(--height-topLevel) - 14px);
181+
flex-shrink: 0;
182+
border-radius: 8px;
183+
padding: 7px;
215184
background-color: $panel-actions;
216-
}
217-
218-
&.mx_SpaceButton_home .mx_SpaceButton_icon::before {
219-
mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
220-
}
221-
222-
&.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
223-
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
224-
}
225-
226-
&.mx_SpaceButton_people .mx_SpaceButton_icon::before {
227-
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
228-
}
229-
230-
&.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
231-
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
232-
}
233185

234-
&.mx_SpaceButton_videoRooms .mx_SpaceButton_icon::before {
235-
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
186+
svg {
187+
width: inherit;
188+
height: inherit;
189+
display: block;
190+
color: $secondary-content;
191+
}
236192
}
237193

238194
&.mx_SpaceButton_new .mx_SpaceButton_icon {
239-
&::before {
240-
background-color: $primary-content;
241-
mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
195+
background-color: unset;
196+
197+
svg {
198+
color: $primary-content;
242199
transition: all 0.2s ease-in-out; /* TODO transition */
243200
}
244201
}
245202

246-
&.mx_SpaceButton_newCancel .mx_SpaceButton_icon::before {
203+
&.mx_SpaceButton_newCancel .mx_SpaceButton_icon svg {
247204
transform: rotate(45deg);
248205
}
249206

250207
.mx_SpaceButton_menuButton {
251-
width: 20px;
252-
min-width: 20px; /* yay flex */
253-
height: 20px;
208+
width: 16px;
209+
height: 16px;
210+
padding: var(--cpd-space-0-5x);
211+
flex-shrink: 0;
254212
margin-top: auto;
255213
margin-bottom: auto;
256214
display: none;
257215
position: absolute;
258216
right: 4px;
259217

260-
&::before {
261-
top: 3px;
262-
left: 2px;
263-
content: "";
264-
width: 16px;
265-
height: 16px;
266-
position: absolute;
267-
mask-position: center;
268-
mask-size: contain;
269-
mask-repeat: no-repeat;
270-
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
271-
background: $primary-content;
218+
svg {
219+
width: inherit;
220+
height: inherit;
221+
display: block;
222+
color: $primary-content;
272223
}
273224
}
274225
}
@@ -341,18 +292,6 @@ Please see LICENSE files in the repository root for full details.
341292
padding: 0 0 16px 0;
342293
scrollbar-gutter: stable;
343294

344-
& > .mx_SpaceButton {
345-
height: var(--height-topLevel);
346-
347-
&.mx_SpaceButton_active::before {
348-
height: var(--height-topLevel);
349-
}
350-
}
351-
352-
& > ul {
353-
padding-left: 0;
354-
}
355-
356295
&.mx_IndicatorScrollbar_topOverflow {
357296
mask-image: linear-gradient(to bottom, transparent, black 16px);
358297
}

‎res/css/structures/_SpacePillButton.pcss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
Copyright 2025 Element Creations Ltd.
3+
4+
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
.mx_SpacePillButton {
9+
position: relative;
10+
padding: 16px 32px 16px 72px;
11+
width: 432px;
12+
box-sizing: border-box;
13+
border-radius: 8px;
14+
border: 1px solid $input-border-color;
15+
font-size: $font-17px;
16+
font-weight: var(--cpd-font-weight-semibold);
17+
margin: 20px 0;
18+
19+
> div {
20+
margin-top: 4px;
21+
font-weight: normal;
22+
font-size: $font-15px;
23+
color: $secondary-content;
24+
}
25+
26+
svg {
27+
position: absolute;
28+
content: "";
29+
width: 28px;
30+
height: 28px;
31+
top: 50%;
32+
transform: translateY(-50%);
33+
left: 22px;
34+
color: $tertiary-content;
35+
}
36+
37+
&:hover {
38+
border-color: var(--cpd-color-bg-action-primary-rest);
39+
40+
svg {
41+
color: var(--cpd-color-icon-primary);
42+
}
43+
44+
> span {
45+
color: $primary-content;
46+
}
47+
}
48+
}

‎res/css/structures/_SpaceRoomView.pcss‎

Lines changed: 0 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,51 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
@define-mixin SpacePillButton {
10-
position: relative;
11-
padding: 16px 32px 16px 72px;
12-
width: 432px;
13-
box-sizing: border-box;
14-
border-radius: 8px;
15-
border: 1px solid $input-border-color;
16-
font-size: $font-17px;
17-
font-weight: var(--cpd-font-weight-semibold);
18-
margin: 20px 0;
19-
20-
> div {
21-
margin-top: 4px;
22-
font-weight: normal;
23-
font-size: $font-15px;
24-
color: $secondary-content;
25-
}
26-
27-
&::before {
28-
position: absolute;
29-
content: "";
30-
width: 28px;
31-
height: 28px;
32-
top: 50%;
33-
transform: translateY(-50%);
34-
left: 22px;
35-
mask-position: center;
36-
mask-repeat: no-repeat;
37-
mask-size: 28px;
38-
background-color: $tertiary-content;
39-
}
40-
41-
&:hover {
42-
border-color: var(--cpd-color-bg-action-primary-rest);
43-
44-
&::before {
45-
background-color: var(--cpd-color-icon-primary);
46-
}
47-
48-
> span {
49-
color: $primary-content;
50-
}
51-
}
52-
}
53-
549
.mx_SpaceRoomView {
5510
--innerWidth: 428px;
5611

@@ -242,20 +197,6 @@ Please see LICENSE files in the repository root for full details.
242197
}
243198
}
244199

245-
.mx_SpaceRoomView_privateScope {
246-
> .mx_AccessibleButton {
247-
@mixin SpacePillButton;
248-
}
249-
250-
.mx_SpaceRoomView_privateScope_justMeButton::before {
251-
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
252-
}
253-
254-
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
255-
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
256-
}
257-
}
258-
259200
.mx_SpaceRoomView_inviteTeammates {
260201
.mx_SpaceRoomView_inviteTeammates_buttons {
261202
color: $secondary-content;

0 commit comments

Comments
 (0)
⚡