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

Update settings tab icons #12867

Merged
merged 7 commits into from
Aug 6, 2024
Merged

Update settings tab icons #12867

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cccbbc6
Change icon for general/account tab
dbkr Aug 6, 2024
aebaf35
Update snapshots
dbkr Aug 6, 2024
3b14c99
Fix responsive mode
dbkr Aug 6, 2024
ca2088d
Missed one
dbkr Aug 6, 2024
ce64d78
truthy-check the whole block
dbkr Aug 6, 2024
7a8b816
Use asset imports
dbkr Aug 6, 2024
4205006
Update snapshots
dbkr Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ce-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions res/css/structures/_TabbedView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,12 @@ limitations under the License.
transition:
color 0.1s,
background-color 0.1s;

svg {
width: 20px;
height: 20px;
margin-right: var(--cpd-space-3x);
}
}

.mx_TabbedView_maskedIcon {
Expand Down Expand Up @@ -184,6 +190,10 @@ limitations under the License.
}
.mx_TabbedView_tabLabel {
padding-inline: 0 0;
justify-content: center;
svg {
margin-right: 0;
}
}
}
}
51 changes: 0 additions & 51 deletions res/css/views/dialogs/_UserSettingsDialog.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,54 +30,3 @@ limitations under the License.
font: var(--cpd-font-heading-md-semibold);
}
}

/* ICONS */
/* ========================================================== */

.mx_UserSettingsDialog_settingsIcon::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
}

.mx_UserSettingsDialog_appearanceIcon::before {
mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
}

.mx_UserSettingsDialog_voiceIcon::before {
mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
}

.mx_UserSettingsDialog_bellIcon::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}

.mx_UserSettingsDialog_preferencesIcon::before {
mask-image: url("$(res)/img/element-icons/settings/preference.svg");
}

.mx_UserSettingsDialog_keyboardIcon::before {
mask-image: url("$(res)/img/element-icons/settings/keyboard.svg");
}

.mx_UserSettingsDialog_sidebarIcon::before {
mask-image: url("$(res)/img/element-icons/settings/sidebar.svg");
}

.mx_UserSettingsDialog_securityIcon::before {
mask-image: url("$(res)/img/element-icons/security.svg");
}

.mx_UserSettingsDialog_sessionsIcon::before {
mask-image: url("$(res)/img/element-icons/settings/devices.svg");
}

.mx_UserSettingsDialog_helpIcon::before {
mask-image: url("$(res)/img/element-icons/settings/help.svg");
}

.mx_UserSettingsDialog_labsIcon::before {
mask-image: url("$(res)/img/element-icons/settings/flask.svg");
}

.mx_UserSettingsDialog_mjolnirIcon::before {
mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg");
}
8 changes: 5 additions & 3 deletions src/components/structures/TabbedView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@ export class Tab<T extends string> {
* Creates a new tab.
* @param {string} id The tab's ID.
* @param {string} label The untranslated tab label.
* @param {string} icon The class for the tab icon. This should be a simple mask.
* @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.
* @param {React.ReactNode} body The JSX for the tab container.
* @param {string} screenName The screen name to report to Posthog.
*/
public constructor(
public readonly id: T,
public readonly label: TranslationKey,
public readonly icon: string | null,
public readonly icon: string | JSX.Element | null,
public readonly body: React.ReactNode,
public readonly screenName?: ScreenName,
) {}
Expand Down Expand Up @@ -98,7 +98,9 @@ function TabLabel<T extends string>({ tab, isActive, showToolip, onClick }: ITab
});

let tabIcon: JSX.Element | undefined;
if (tab.icon) {
if (tab.icon && typeof tab.icon === "object") {
tabIcon = tab.icon;
} else if (typeof tab.icon === "string") {
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does only one of these paths have the truthy check? previously the string path had a truthy check

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would have to be the empty string to be of type string but still falsy, but I can add it around the whole lot easily enough

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

null would also hit this edge, no?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

null is of type object so it wouldn't match either case.


Expand Down
42 changes: 24 additions & 18 deletions src/components/views/dialogs/UserSettingsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,18 @@ limitations under the License.

import { Toast } from "@vector-im/compound-web";
import React, { useState } from "react";
import { Icon as UserProfileIcon } from "@vector-im/compound-design-tokens/icons/user-profile.svg";
import { Icon as DevicesIcon } from "@vector-im/compound-design-tokens/icons/devices.svg";
import { Icon as VisibilityOnIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications.svg";
import { Icon as PreferencesIcon } from "@vector-im/compound-design-tokens/icons/preferences.svg";
import { Icon as KeyboardIcon } from "@vector-im/compound-design-tokens/icons/keyboard.svg";
import { Icon as SidebarIcon } from "@vector-im/compound-design-tokens/icons/sidebar.svg";
import { Icon as MicOnIcon } from "@vector-im/compound-design-tokens/icons/mic-on.svg";
import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg";
import { Icon as LabsIcon } from "@vector-im/compound-design-tokens/icons/labs.svg";
import { Icon as BlockIcon } from "@vector-im/compound-design-tokens/icons/block.svg";
import { Icon as HelpIcon } from "@vector-im/compound-design-tokens/icons/help.svg";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use the new CDT exports please in assets/web, they ensure our snapshots include the svg which means we can detect changes in icons even if we're missing screenshot tests

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, yes, that's better

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, we should probably eslint ban the source svgs


import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
import { _t, _td } from "../../../languageHandler";
Expand Down Expand Up @@ -93,7 +105,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.General,
_td("common|general"),
"mx_UserSettingsDialog_settingsIcon",
<UserProfileIcon />,
<GeneralUserSettingsTab closeSettingsFn={props.onFinished} />,
"UserSettingsGeneral",
),
Expand All @@ -102,7 +114,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.SessionManager,
_td("settings|sessions|title"),
"mx_UserSettingsDialog_sessionsIcon",
<DevicesIcon />,
<SessionManagerTab showMsc4108QrCode={showMsc4108QrCode} />,
undefined,
),
Expand All @@ -111,7 +123,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Appearance,
_td("common|appearance"),
"mx_UserSettingsDialog_appearanceIcon",
<VisibilityOnIcon />,
<AppearanceUserSettingsTab />,
"UserSettingsAppearance",
),
Expand All @@ -120,7 +132,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Notifications,
_td("notifications|enable_prompt_toast_title"),
"mx_UserSettingsDialog_bellIcon",
<NotificationsIcon />,
<NotificationUserSettingsTab />,
"UserSettingsNotifications",
),
Expand All @@ -129,7 +141,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Preferences,
_td("common|preferences"),
"mx_UserSettingsDialog_preferencesIcon",
<PreferencesIcon />,
<PreferencesUserSettingsTab closeSettingsFn={props.onFinished} />,
"UserSettingsPreferences",
),
Expand All @@ -138,7 +150,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Keyboard,
_td("settings|keyboard|title"),
"mx_UserSettingsDialog_keyboardIcon",
<KeyboardIcon />,
<KeyboardUserSettingsTab />,
"UserSettingsKeyboard",
),
Expand All @@ -147,7 +159,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Sidebar,
_td("settings|sidebar|title"),
"mx_UserSettingsDialog_sidebarIcon",
<SidebarIcon />,
<SidebarUserSettingsTab />,
"UserSettingsSidebar",
),
Expand All @@ -158,7 +170,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Voice,
_td("settings|voip|title"),
"mx_UserSettingsDialog_voiceIcon",
<MicOnIcon />,
<VoiceUserSettingsTab />,
"UserSettingsVoiceVideo",
),
Expand All @@ -169,29 +181,23 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Security,
_td("room_settings|security|title"),
"mx_UserSettingsDialog_securityIcon",
<LockIcon />,
<SecurityUserSettingsTab closeSettingsFn={props.onFinished} />,
"UserSettingsSecurityPrivacy",
),
);

if (showLabsFlags() || SettingsStore.getFeatureSettingNames().some((k) => SettingsStore.getBetaInfo(k))) {
tabs.push(
new Tab(
UserTab.Labs,
_td("common|labs"),
"mx_UserSettingsDialog_labsIcon",
<LabsUserSettingsTab />,
"UserSettingsLabs",
),
new Tab(UserTab.Labs, _td("common|labs"), <LabsIcon />, <LabsUserSettingsTab />, "UserSettingsLabs"),
);
}
if (mjolnirEnabled) {
tabs.push(
new Tab(
UserTab.Mjolnir,
_td("labs_mjolnir|title"),
"mx_UserSettingsDialog_mjolnirIcon",
<BlockIcon />,
<MjolnirUserSettingsTab />,
"UserSettingMjolnir",
),
Expand All @@ -201,7 +207,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Help,
_td("setting|help_about|title"),
"mx_UserSettingsDialog_helpIcon",
<HelpIcon />,
<HelpUserSettingsTab />,
"UserSettingsHelpAbout",
),
Expand Down
40 changes: 10 additions & 30 deletions test/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ NodeList [
role="tab"
tabindex="0"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_settingsIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_GENERAL_TAB_label"
Expand All @@ -28,9 +26,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_sessionsIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_SESSION_MANAGER_TAB_label"
Expand All @@ -46,9 +42,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_appearanceIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_APPEARANCE_TAB_label"
Expand All @@ -64,9 +58,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_bellIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_NOTIFICATIONS_TAB_label"
Expand All @@ -82,9 +74,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_preferencesIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_PREFERENCES_TAB_label"
Expand All @@ -100,9 +90,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_keyboardIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_KEYBOARD_TAB_label"
Expand All @@ -118,9 +106,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_sidebarIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_SIDEBAR_TAB_label"
Expand All @@ -136,9 +122,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_securityIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_SECURITY_TAB_label"
Expand All @@ -154,9 +138,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_labsIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_LABS_TAB_label"
Expand All @@ -172,9 +154,7 @@ NodeList [
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_helpIcon"
/>
<div />
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_HELP_TAB_label"
Expand Down
Loading