Skip to content

Commit efe59ff

Browse files
t3chguyt3chguy
authored
Improve icon rendering in iconized context menu (#31458)
* Fix composer button visibility in contrast colour mode Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update snapshot Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update test Signed-off-by: Michael Telatynski <[email protected]> * Simplify Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Update screenshots Signed-off-by: Michael Telatynski <[email protected]> * Update screenshots Signed-off-by: Michael Telatynski <[email protected]> * Update screenshot Signed-off-by: Michael Telatynski <[email protected]> * Improve icon rendering in iconized context menu Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Add test Signed-off-by: Michael Telatynski <[email protected]> * Delint Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 4fda167 commit efe59ff

37 files changed

+440
-564
lines changed

‎res/css/_components.pcss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,6 @@
120120
@import "./views/context_menus/_DeviceContextMenu.pcss";
121121
@import "./views/context_menus/_IconizedContextMenu.pcss";
122122
@import "./views/context_menus/_LegacyCallContextMenu.pcss";
123-
@import "./views/context_menus/_MessageContextMenu.pcss";
124-
@import "./views/context_menus/_RoomGeneralContextMenu.pcss";
125-
@import "./views/context_menus/_RoomNotificationContextMenu.pcss";
126123
@import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
127124
@import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
128125
@import "./views/dialogs/_BugReportDialog.pcss";

‎res/css/structures/_SpacePanel.pcss‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -428,46 +428,6 @@ Please see LICENSE files in the repository root for full details.
428428
white-space: nowrap;
429429
}
430430

431-
.mx_SpacePanel_iconHome::before {
432-
mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
433-
}
434-
435-
.mx_SpacePanel_iconInvite::before {
436-
mask-image: url("$(res)/img/element-icons/room/invite.svg");
437-
}
438-
439-
.mx_SpacePanel_iconSettings::before {
440-
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
441-
}
442-
443-
.mx_SpacePanel_iconLeave::before {
444-
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
445-
}
446-
447-
.mx_SpacePanel_iconMembers::before {
448-
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
449-
}
450-
451-
.mx_SpacePanel_iconPlus::before {
452-
mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
453-
}
454-
455-
.mx_SpacePanel_iconExplore::before {
456-
mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
457-
}
458-
459-
.mx_SpacePanel_iconPreferences::before {
460-
mask-image: url("@vector-im/compound-design-tokens/icons/preferences.svg");
461-
}
462-
463-
.mx_SpacePanel_noIcon {
464-
display: none;
465-
466-
& + .mx_IconizedContextMenu_label {
467-
padding-left: 5px !important; /* override default iconized label style to align with header */
468-
}
469-
}
470-
471431
.mx_SpacePanel_contextMenu_separatorLabel {
472432
color: $tertiary-content;
473433
font-size: $font-10px;

‎res/css/structures/_UserMenu.pcss‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -116,48 +116,11 @@ Please see LICENSE files in the repository root for full details.
116116
}
117117
}
118118

119-
.mx_IconizedContextMenu_icon {
120-
width: 16px;
121-
height: 16px;
122-
display: block;
123-
124-
&::before {
125-
content: "";
126-
width: 16px;
127-
height: 16px;
128-
display: block;
129-
mask-position: center;
130-
mask-size: contain;
131-
mask-repeat: no-repeat;
132-
background: $icon-button-color;
133-
}
134-
}
135-
136-
.mx_UserMenu_iconHome::before {
137-
mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
138-
}
139-
140-
.mx_UserMenu_iconBell::before {
141-
mask-image: url("$(res)/img/element-icons/notifications.svg");
142-
}
143-
144-
.mx_UserMenu_iconLock::before {
145-
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
146-
}
147-
148-
.mx_UserMenu_iconSettings::before {
149-
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
119+
.mx_IconizedContextMenu_icon svg {
120+
color: $icon-button-color;
150121
}
151122

152123
.mx_UserMenu_iconMessage::before {
153124
mask-image: url("$(res)/img/element-icons/feedback.svg");
154125
}
155-
156-
.mx_UserMenu_iconSignOut::before {
157-
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
158-
}
159-
160-
.mx_UserMenu_iconQr::before {
161-
mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
162-
}
163126
}

‎res/css/views/context_menus/_DeviceContextMenu.pcss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@ Please see LICENSE files in the repository root for full details.
99
.mx_DeviceContextMenu {
1010
max-width: 252px;
1111

12-
.mx_DeviceContextMenu_device_icon {
13-
display: none;
14-
}
15-
1612
.mx_IconizedContextMenu_label {
1713
padding-left: 0 !important;
1814
}

‎res/css/views/context_menus/_IconizedContextMenu.pcss‎

Lines changed: 15 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -68,19 +68,6 @@ Please see LICENSE files in the repository root for full details.
6868
cursor: not-allowed;
6969
}
7070

71-
img,
72-
svg,
73-
.mx_IconizedContextMenu_icon {
74-
/* icons */
75-
width: 16px;
76-
min-width: 16px;
77-
max-width: 16px;
78-
79-
& + .mx_IconizedContextMenu_label {
80-
padding-left: 14px;
81-
}
82-
}
83-
8471
span.mx_IconizedContextMenu_label {
8572
/* labels */
8673
width: 100%;
@@ -92,27 +79,23 @@ Please see LICENSE files in the repository root for full details.
9279
white-space: nowrap;
9380
}
9481

82+
svg {
83+
width: 16px;
84+
height: 16px;
85+
display: block;
86+
flex-shrink: 0;
87+
88+
& + .mx_IconizedContextMenu_label {
89+
padding-left: 14px;
90+
}
91+
}
92+
9593
.mx_BetaCard_betaPill {
9694
margin-left: 16px;
9795
}
9896
}
9997
}
10098

101-
.mx_IconizedContextMenu_icon {
102-
position: relative;
103-
104-
&::before {
105-
content: "";
106-
width: inherit;
107-
height: inherit;
108-
position: absolute;
109-
mask-position: center;
110-
mask-size: contain;
111-
mask-repeat: no-repeat;
112-
background-color: var(--cpd-color-icon-primary);
113-
}
114-
}
115-
11699
.mx_IconizedContextMenu_optionList_red {
117100
.mx_IconizedContextMenu_item {
118101
color: $alert !important;
@@ -121,10 +104,6 @@ Please see LICENSE files in the repository root for full details.
121104
svg {
122105
color: var(--cpd-color-icon-critical-primary);
123106
}
124-
125-
.mx_IconizedContextMenu_icon::before {
126-
background-color: var(--cpd-color-icon-critical-primary);
127-
}
128107
}
129108

130109
.mx_IconizedContextMenu_option_red {
@@ -133,24 +112,16 @@ Please see LICENSE files in the repository root for full details.
133112
svg {
134113
color: $alert;
135114
}
136-
137-
.mx_IconizedContextMenu_icon::before {
138-
background-color: $alert;
139-
}
140115
}
141116

142117
.mx_IconizedContextMenu_active {
143118
&.mx_IconizedContextMenu_item,
144119
.mx_IconizedContextMenu_item {
145120
color: $accent !important;
146-
}
147-
148-
svg {
149-
color: $accent;
150-
}
151121

152-
.mx_IconizedContextMenu_icon::before {
153-
background-color: $accent;
122+
svg {
123+
color: $accent;
124+
}
154125
}
155126
}
156127

@@ -160,24 +131,11 @@ Please see LICENSE files in the repository root for full details.
160131
}
161132
}
162133

163-
.mx_IconizedContextMenu_checked,
164-
.mx_IconizedContextMenu_unchecked {
134+
svg.mx_IconizedContextMenu_checked {
165135
margin-left: 16px;
166136
margin-right: -5px;
167137
}
168138

169-
.mx_IconizedContextMenu_developerTools::before {
170-
mask-image: url("@vector-im/compound-design-tokens/icons/labs.svg");
171-
}
172-
173-
.mx_IconizedContextMenu_checked::before {
174-
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
175-
}
176-
177-
.mx_IconizedContextMenu_unchecked::before {
178-
content: unset;
179-
}
180-
181139
.mx_IconizedContextMenu_sublabel {
182140
margin-left: 20px;
183141
color: $tertiary-content;

‎res/css/views/context_menus/_MessageContextMenu.pcss‎

Lines changed: 0 additions & 113 deletions
This file was deleted.

‎res/css/views/context_menus/_RoomGeneralContextMenu.pcss‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)