imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update settings tab icons (#12867)

Browse source 
* 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
This commit is contained in:
David Baker 2024-08-06 17:08:45 +01:00 • committed by GitHub
parent 5519b81af9
commit 6ca4f670bf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 177 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/structures/TabbedView.tsx
View file

@ -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,
) {}
@ -99,7 +99,11 @@ function TabLabel<T extends string>({ tab, isActive, showToolip, onClick }: ITab
let tabIcon: JSX.Element | undefined;
if (tab.icon) {
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
if (typeof tab.icon === "object") {
tabIcon = tab.icon;
} else if (typeof tab.icon === "string") {
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
}
}
const id = domIDForTabID(tab.id);

42
src/components/views/dialogs/UserSettingsDialog.tsx
View file

@ -17,6 +17,18 @@ limitations under the License.
import { Toast } from "@vector-im/compound-web";
import React, { useState } from "react";
import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
import DevicesIcon from "@vector-im/compound-design-tokens/assets/web/icons/devices";
import VisibilityOnIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";
import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
import PreferencesIcon from "@vector-im/compound-design-tokens/assets/web/icons/preferences";
import KeyboardIcon from "@vector-im/compound-design-tokens/assets/web/icons/keyboard";
import SidebarIcon from "@vector-im/compound-design-tokens/assets/web/icons/sidebar";
import MicOnIcon from "@vector-im/compound-design-tokens/assets/web/icons/mic-on";
import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock";
import LabsIcon from "@vector-im/compound-design-tokens/assets/web/icons/labs";
import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
import HelpIcon from "@vector-im/compound-design-tokens/assets/web/icons/help";
import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
import { _t, _td } from "../../../languageHandler";
@ -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",
),
@ -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,
),
@ -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",
),
@ -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",
),
@ -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",
),
@ -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",
),
@ -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",
),
@ -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",
),
@ -169,7 +181,7 @@ 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",
),
@ -177,13 +189,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
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) {
@ -191,7 +197,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
new Tab(
UserTab.Mjolnir,
_td("labs_mjolnir|title"),
"mx_UserSettingsDialog_mjolnirIcon",
<BlockIcon />,
<MjolnirUserSettingsTab />,
"UserSettingMjolnir",
),
@ -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",
),