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

Check 'useSystemTheme' in quick settings theme switcher (#7809)

Browse source 
* mock Element.scrollIntoView in jest setup

Signed-off-by: Kerry Archibald <kerrya@element.io>

* extract theme switcher from quick settings, add match system option, test

Signed-off-by: Kerry Archibald <kerrya@element.io>

* i18n

Signed-off-by: Kerry Archibald <kerrya@element.io>

* forgotten copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* stylelint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove old class

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-02-24 10:01:06 +01:00 • committed by GitHub
parent 889b0cebb2
commit f4cd71fd47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 274 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/views/spaces/QuickSettingsButton.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useMemo } from "react";
import React from "react";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
@ -28,17 +28,9 @@ import { onMetaSpaceChangeFactory } from "../settings/tabs/user/SidebarUserSetti
import defaultDispatcher from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
import { UserTab } from "../dialogs/UserSettingsDialog";
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 QuickThemeSwitcher from "./QuickThemeSwitcher";
const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
const orderedThemes = useMemo(getOrderedThemes, []);
const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
const {
@ -48,10 +40,6 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
let contextMenu: JSX.Element;
if (menuDisplayed) {
const themeState = ThemeChoicePanel.calculateThemeState();
const nonHighContrast = findNonHighContrastTheme(themeState.theme);
const theme = nonHighContrast ? nonHighContrast : themeState.theme;
contextMenu = <ContextMenu
{...alwaysAboveRightOf(handle.current.getBoundingClientRect(), ChevronFace.None, 16)}
wrapperClassName="mx_QuickSettingsButton_ContextMenuWrapper"
@ -100,39 +88,7 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
{ _t("More options") }
</AccessibleButton>
<div className="mx_QuickSettingsButton_themePicker">
<h4>{ _t("Theme") }</h4>
<Dropdown
id="mx_QuickSettingsButton_themePickerDropdown"
onOptionChange={async (newTheme: string) => {
PosthogTrackers.trackInteraction("WebQuickSettingsThemeDropdown");
// XXX: mostly copied from ThemeChoicePanel
// doing getValue in the .catch will still return the value we failed to set,
// so remember what the value was before we tried to set it so we can revert
// const oldTheme: string = SettingsStore.getValue("theme");
SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
});
// The settings watcher doesn't fire until the echo comes back from the
// server, so to make the theme change immediately we need to manually
// do the dispatch now
// XXX: The local echoed value appears to be unreliable, in particular
// when settings custom themes(!) so adding forceTheme to override
// the value from settings.
dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme, forceTheme: newTheme });
closeMenu();
}}
value={theme}
label={_t("Space selection")}
>
{ orderedThemes.map((theme) => (
<div key={theme.id}>
{ theme.name }
</div>
)) }
</Dropdown>
</div>
<QuickThemeSwitcher requestClose={closeMenu} />
</ContextMenu>;
}