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

New theme ui in user settings (#12576)

Browse source 
* Add hook to get the theme

* Adapt subsection settings to new ui

* WIP new theme subsection

* Add theme selection

* Fix test types

* Disabled theme selector when system theme is used

* Update compound to `4.4.1`

* Add custom theme support

* Remove old ThemChoicePanel

* Fix QuickThemeSwitcher-test.tsx

* Fix AppearanceUserSettingsTab-test.tsx

* Update i18n

* Fix ThemeChoicePanel-test.tsx

* Update `@vector-im/compound-web`

* Small tweaks

* Fix CSS comments and use compound variable

* Remove custom theme title

* i18n: update

* test: add tests to theme selection

* test: update AppearanceUserSettingsTab-test snapshot

* test: rework custom theme

* playwright: fix audio-player.spec.ts

* playwright: appearance tab

* test: update snapshot

* playright: add custom theme

* i18n: use correct char for ellipsis

* a11y: add missing aria-label to delete button

* dialog: update close button tooltip

* theme: remove local state and handle custom delete

* theme: don't add twice the same custom theme

* test: update snapshot

* playwright: update snapshot

* custom theme: add background to custom theme list

* update compound web

* Use new destructive property on `IconButton` of theme panel

* test: update snapshots

* rename new ui into legacy

* remove wrong constructor doc

* fix theme selector padding

* theme selector: fix key

* test: fix e2e
This commit is contained in:
Florian Duros 2024-06-26 17:47:01 +02:00 • committed by GitHub
parent 8ede89101a
commit 33a017b528
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 1749 additions and 477 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/spaces/QuickThemeSwitcher.tsx
View file

@ -20,13 +20,13 @@ import { _t } from "../../../languageHandler";
import { Action } from "../../../dispatcher/actions";
import { findNonHighContrastTheme, getOrderedThemes } from "../../../theme";
import Dropdown from "../elements/Dropdown";
import ThemeChoicePanel from "../settings/ThemeChoicePanel";
import SettingsStore from "../../../settings/SettingsStore";
import { SettingLevel } from "../../../settings/SettingLevel";
import dis from "../../../dispatcher/dispatcher";
import { RecheckThemePayload } from "../../../dispatcher/payloads/RecheckThemePayload";
import PosthogTrackers from "../../../PosthogTrackers";
import { NonEmptyArray } from "../../../@types/common";
import { useTheme } from "../../../hooks/useTheme";
type Props = {
requestClose: () => void;
@ -37,10 +37,10 @@ const MATCH_SYSTEM_THEME_ID = "MATCH_SYSTEM_THEME_ID";
const QuickThemeSwitcher: React.FC<Props> = ({ requestClose }) => {
const orderedThemes = useMemo(getOrderedThemes, []);
const themeState = ThemeChoicePanel.calculateThemeState();
const themeState = useTheme();
const nonHighContrast = findNonHighContrastTheme(themeState.theme);
const theme = nonHighContrast ? nonHighContrast : themeState.theme;
const { useSystemTheme } = themeState;
const { systemThemeActivated } = themeState;
const themeOptions = [
{
@ -50,7 +50,7 @@ const QuickThemeSwitcher: React.FC<Props> = ({ requestClose }) => {
...orderedThemes,
];
const selectedTheme = useSystemTheme ? MATCH_SYSTEM_THEME_ID : theme;
const selectedTheme = systemThemeActivated ? MATCH_SYSTEM_THEME_ID : theme;
const onOptionChange = async (newTheme: string): Promise<void> => {
PosthogTrackers.trackInteraction("WebQuickSettingsThemeDropdown");