Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 6ca4f67

Browse files
dbkrdbkr
authored
Update settings tab icons (#12867)
* Change icon for general/account tab ...and add support for compound design token icons to TabbedView, changing all the other icons over while we're at it. * Update snapshots * Fix responsive mode * Missed one * truthy-check the whole block * Use asset imports * Update snapshots
1 parent 5519b81 commit 6ca4f67

File tree

10 files changed

+177
-102
lines changed

10 files changed

+177
-102
lines changed

‎playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png

602 Bytes
Loading

‎playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png

917 Bytes
Loading

‎playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png

576 Bytes
Loading

‎playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png

970 Bytes
Loading

‎playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png

654 Bytes
Loading

‎res/css/structures/_TabbedView.pcss

+10
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,12 @@ limitations under the License.
136136
transition:
137137
color 0.1s,
138138
background-color 0.1s;
139+
140+
svg {
141+
width: 20px;
142+
height: 20px;
143+
margin-right: var(--cpd-space-3x);
144+
}
139145
}
140146

141147
.mx_TabbedView_maskedIcon {
@@ -184,6 +190,10 @@ limitations under the License.
184190
}
185191
.mx_TabbedView_tabLabel {
186192
padding-inline: 0 0;
193+
justify-content: center;
194+
svg {
195+
margin-right: 0;
196+
}
187197
}
188198
}
189199
}

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

-51
Original file line numberDiff line numberDiff line change
@@ -30,54 +30,3 @@ limitations under the License.
3030
font: var(--cpd-font-heading-md-semibold);
3131
}
3232
}
33-
34-
/* ICONS */
35-
/* ========================================================== */
36-
37-
.mx_UserSettingsDialog_settingsIcon::before {
38-
mask-image: url("$(res)/img/element-icons/settings.svg");
39-
}
40-
41-
.mx_UserSettingsDialog_appearanceIcon::before {
42-
mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
43-
}
44-
45-
.mx_UserSettingsDialog_voiceIcon::before {
46-
mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
47-
}
48-
49-
.mx_UserSettingsDialog_bellIcon::before {
50-
mask-image: url("$(res)/img/element-icons/notifications.svg");
51-
}
52-
53-
.mx_UserSettingsDialog_preferencesIcon::before {
54-
mask-image: url("$(res)/img/element-icons/settings/preference.svg");
55-
}
56-
57-
.mx_UserSettingsDialog_keyboardIcon::before {
58-
mask-image: url("$(res)/img/element-icons/settings/keyboard.svg");
59-
}
60-
61-
.mx_UserSettingsDialog_sidebarIcon::before {
62-
mask-image: url("$(res)/img/element-icons/settings/sidebar.svg");
63-
}
64-
65-
.mx_UserSettingsDialog_securityIcon::before {
66-
mask-image: url("$(res)/img/element-icons/security.svg");
67-
}
68-
69-
.mx_UserSettingsDialog_sessionsIcon::before {
70-
mask-image: url("$(res)/img/element-icons/settings/devices.svg");
71-
}
72-
73-
.mx_UserSettingsDialog_helpIcon::before {
74-
mask-image: url("$(res)/img/element-icons/settings/help.svg");
75-
}
76-
77-
.mx_UserSettingsDialog_labsIcon::before {
78-
mask-image: url("$(res)/img/element-icons/settings/flask.svg");
79-
}
80-
81-
.mx_UserSettingsDialog_mjolnirIcon::before {
82-
mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg");
83-
}

‎src/components/structures/TabbedView.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ export class Tab<T extends string> {
3434
* Creates a new tab.
3535
* @param {string} id The tab's ID.
3636
* @param {string} label The untranslated tab label.
37-
* @param {string} icon The class for the tab icon. This should be a simple mask.
37+
* @param {string|JSX.Element} icon An SVG element to use for the tab icon. Can also be a string for legacy icons, in which case it is the class for the tab icon. This should be a simple mask.
3838
* @param {React.ReactNode} body The JSX for the tab container.
3939
* @param {string} screenName The screen name to report to Posthog.
4040
*/
4141
public constructor(
4242
public readonly id: T,
4343
public readonly label: TranslationKey,
44-
public readonly icon: string | null,
44+
public readonly icon: string | JSX.Element | null,
4545
public readonly body: React.ReactNode,
4646
public readonly screenName?: ScreenName,
4747
) {}
@@ -99,7 +99,11 @@ function TabLabel<T extends string>({ tab, isActive, showToolip, onClick }: ITab
9999

100100
let tabIcon: JSX.Element | undefined;
101101
if (tab.icon) {
102-
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
102+
if (typeof tab.icon === "object") {
103+
tabIcon = tab.icon;
104+
} else if (typeof tab.icon === "string") {
105+
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
106+
}
103107
}
104108

105109
const id = domIDForTabID(tab.id);

‎src/components/views/dialogs/UserSettingsDialog.tsx

+24-18
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,18 @@ limitations under the License.
1717

1818
import { Toast } from "@vector-im/compound-web";
1919
import React, { useState } from "react";
20+
import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
21+
import DevicesIcon from "@vector-im/compound-design-tokens/assets/web/icons/devices";
22+
import VisibilityOnIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";
23+
import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
24+
import PreferencesIcon from "@vector-im/compound-design-tokens/assets/web/icons/preferences";
25+
import KeyboardIcon from "@vector-im/compound-design-tokens/assets/web/icons/keyboard";
26+
import SidebarIcon from "@vector-im/compound-design-tokens/assets/web/icons/sidebar";
27+
import MicOnIcon from "@vector-im/compound-design-tokens/assets/web/icons/mic-on";
28+
import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock";
29+
import LabsIcon from "@vector-im/compound-design-tokens/assets/web/icons/labs";
30+
import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
31+
import HelpIcon from "@vector-im/compound-design-tokens/assets/web/icons/help";
2032

2133
import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
2234
import { _t, _td } from "../../../languageHandler";
@@ -93,7 +105,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
93105
new Tab(
94106
UserTab.General,
95107
_td("common|general"),
96-
"mx_UserSettingsDialog_settingsIcon",
108+
<UserProfileIcon />,
97109
<GeneralUserSettingsTab closeSettingsFn={props.onFinished} />,
98110
"UserSettingsGeneral",
99111
),
@@ -102,7 +114,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
102114
new Tab(
103115
UserTab.SessionManager,
104116
_td("settings|sessions|title"),
105-
"mx_UserSettingsDialog_sessionsIcon",
117+
<DevicesIcon />,
106118
<SessionManagerTab showMsc4108QrCode={showMsc4108QrCode} />,
107119
undefined,
108120
),
@@ -111,7 +123,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
111123
new Tab(
112124
UserTab.Appearance,
113125
_td("common|appearance"),
114-
"mx_UserSettingsDialog_appearanceIcon",
126+
<VisibilityOnIcon />,
115127
<AppearanceUserSettingsTab />,
116128
"UserSettingsAppearance",
117129
),
@@ -120,7 +132,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
120132
new Tab(
121133
UserTab.Notifications,
122134
_td("notifications|enable_prompt_toast_title"),
123-
"mx_UserSettingsDialog_bellIcon",
135+
<NotificationsIcon />,
124136
<NotificationUserSettingsTab />,
125137
"UserSettingsNotifications",
126138
),
@@ -129,7 +141,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
129141
new Tab(
130142
UserTab.Preferences,
131143
_td("common|preferences"),
132-
"mx_UserSettingsDialog_preferencesIcon",
144+
<PreferencesIcon />,
133145
<PreferencesUserSettingsTab closeSettingsFn={props.onFinished} />,
134146
"UserSettingsPreferences",
135147
),
@@ -138,7 +150,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
138150
new Tab(
139151
UserTab.Keyboard,
140152
_td("settings|keyboard|title"),
141-
"mx_UserSettingsDialog_keyboardIcon",
153+
<KeyboardIcon />,
142154
<KeyboardUserSettingsTab />,
143155
"UserSettingsKeyboard",
144156
),
@@ -147,7 +159,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
147159
new Tab(
148160
UserTab.Sidebar,
149161
_td("settings|sidebar|title"),
150-
"mx_UserSettingsDialog_sidebarIcon",
162+
<SidebarIcon />,
151163
<SidebarUserSettingsTab />,
152164
"UserSettingsSidebar",
153165
),
@@ -158,7 +170,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
158170
new Tab(
159171
UserTab.Voice,
160172
_td("settings|voip|title"),
161-
"mx_UserSettingsDialog_voiceIcon",
173+
<MicOnIcon />,
162174
<VoiceUserSettingsTab />,
163175
"UserSettingsVoiceVideo",
164176
),
@@ -169,29 +181,23 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
169181
new Tab(
170182
UserTab.Security,
171183
_td("room_settings|security|title"),
172-
"mx_UserSettingsDialog_securityIcon",
184+
<LockIcon />,
173185
<SecurityUserSettingsTab closeSettingsFn={props.onFinished} />,
174186
"UserSettingsSecurityPrivacy",
175187
),
176188
);
177189

178190
if (showLabsFlags() || SettingsStore.getFeatureSettingNames().some((k) => SettingsStore.getBetaInfo(k))) {
179191
tabs.push(
180-
new Tab(
181-
UserTab.Labs,
182-
_td("common|labs"),
183-
"mx_UserSettingsDialog_labsIcon",
184-
<LabsUserSettingsTab />,
185-
"UserSettingsLabs",
186-
),
192+
new Tab(UserTab.Labs, _td("common|labs"), <LabsIcon />, <LabsUserSettingsTab />, "UserSettingsLabs"),
187193
);
188194
}
189195
if (mjolnirEnabled) {
190196
tabs.push(
191197
new Tab(
192198
UserTab.Mjolnir,
193199
_td("labs_mjolnir|title"),
194-
"mx_UserSettingsDialog_mjolnirIcon",
200+
<BlockIcon />,
195201
<MjolnirUserSettingsTab />,
196202
"UserSettingMjolnir",
197203
),
@@ -201,7 +207,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
201207
new Tab(
202208
UserTab.Help,
203209
_td("setting|help_about|title"),
204-
"mx_UserSettingsDialog_helpIcon",
210+
<HelpIcon />,
205211
<HelpUserSettingsTab />,
206212
"UserSettingsHelpAbout",
207213
),

0 commit comments

Comments
 (0)