2021-10-22 01:39:05 +02:00
|
|
|
import React from 'react';
|
2023-07-26 11:26:46 +02:00
|
|
|
|
2021-10-22 01:39:05 +02:00
|
|
|
import useUpdate from 'react-use/lib/useUpdate';
|
2022-05-18 03:47:42 +02:00
|
|
|
import { SettingsKey } from '../../../data/settings-key';
|
2022-03-23 06:19:38 +01:00
|
|
|
import { isHideMenuBarSupported } from '../../../types/Settings';
|
2023-10-13 09:08:55 +02:00
|
|
|
import { useHasFollowSystemThemeEnabled } from '../../../state/selectors/settings';
|
2023-10-24 02:49:31 +02:00
|
|
|
import { ensureThemeConsistency } from '../../../themes/SessionTheme';
|
2022-08-19 07:25:26 +02:00
|
|
|
import { SessionToggleWithDescription } from '../SessionSettingListItem';
|
2022-08-26 02:40:31 +02:00
|
|
|
import { SettingsThemeSwitcher } from '../SettingsThemeSwitcher';
|
2021-10-22 01:39:05 +02:00
|
|
|
import { ZoomingSessionSlider } from '../ZoomingSessionSlider';
|
|
|
|
|
|
|
|
export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null }) => {
|
|
|
|
const forceUpdate = useUpdate();
|
2023-10-13 09:08:55 +02:00
|
|
|
const isFollowSystemThemeEnabled = useHasFollowSystemThemeEnabled();
|
2021-10-22 01:39:05 +02:00
|
|
|
|
|
|
|
if (props.hasPassword !== null) {
|
|
|
|
const isHideMenuBarActive =
|
2022-05-18 03:47:42 +02:00
|
|
|
window.getSettingValue(SettingsKey.settingsMenuBar) === undefined
|
2021-10-22 01:39:05 +02:00
|
|
|
? true
|
2022-05-18 03:47:42 +02:00
|
|
|
: window.getSettingValue(SettingsKey.settingsMenuBar);
|
2021-10-22 01:39:05 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2022-11-07 01:17:42 +01:00
|
|
|
<SettingsThemeSwitcher />
|
2022-08-19 07:25:26 +02:00
|
|
|
<ZoomingSessionSlider />
|
2022-03-23 06:19:38 +01:00
|
|
|
{isHideMenuBarSupported() && (
|
2021-10-22 01:39:05 +02:00
|
|
|
<SessionToggleWithDescription
|
|
|
|
onClickToggle={() => {
|
|
|
|
window.toggleMenuBar();
|
|
|
|
forceUpdate();
|
|
|
|
}}
|
|
|
|
title={window.i18n('hideMenuBarTitle')}
|
|
|
|
description={window.i18n('hideMenuBarDescription')}
|
|
|
|
active={isHideMenuBarActive}
|
|
|
|
/>
|
|
|
|
)}
|
2023-10-13 09:08:55 +02:00
|
|
|
<SessionToggleWithDescription
|
2023-10-24 02:49:31 +02:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
|
|
onClickToggle={async () => {
|
2023-10-13 09:08:55 +02:00
|
|
|
const toggledValue = !isFollowSystemThemeEnabled;
|
2023-10-24 02:49:31 +02:00
|
|
|
await window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
|
2023-10-13 09:08:55 +02:00
|
|
|
if (!isFollowSystemThemeEnabled) {
|
2023-10-24 02:49:31 +02:00
|
|
|
await ensureThemeConsistency();
|
2023-10-13 09:08:55 +02:00
|
|
|
}
|
|
|
|
}}
|
|
|
|
title={window.i18n('matchThemeSystemSettingTitle')}
|
|
|
|
description={window.i18n('matchThemeSystemSettingDescription')}
|
|
|
|
active={isFollowSystemThemeEnabled}
|
2023-10-24 02:49:31 +02:00
|
|
|
dataTestId="enable-follow-system-theme"
|
2023-10-13 09:08:55 +02:00
|
|
|
/>
|
2021-10-22 01:39:05 +02:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
};
|