finish cleaning up Settings page
Audric Ackermann
4 years ago
parent
a596531c57
commit
0ae23875b7
@ -0,0 +1,144 @@
|
|||||||
|
import { ipcRenderer, shell } from 'electron';
|
||||||
|
import React from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
// tslint:disable-next-line: no-submodule-imports
|
||||||
|
import useUpdate from 'react-use/lib/useUpdate';
|
||||||
|
import { createOrUpdateItem, hasLinkPreviewPopupBeenDisplayed } from '../../../../data/data';
|
||||||
|
import { ToastUtils } from '../../../../session/utils';
|
||||||
|
import { updateConfirmModal } from '../../../../state/ducks/modalDialog';
|
||||||
|
import { toggleAudioAutoplay } from '../../../../state/ducks/userConfig';
|
||||||
|
import { getAudioAutoplay } from '../../../../state/selectors/userConfig';
|
||||||
|
import { SessionButtonColor } from '../../SessionButton';
|
||||||
|
import { SessionSettingButtonItem, SessionToggleWithDescription } from '../SessionSettingListItem';
|
||||||
|
import { ZoomingSessionSlider } from '../ZoomingSessionSlider';
|
||||||
|
|
||||||
|
async function toggleLinkPreviews() {
|
||||||
|
const newValue = !window.getSettingValue('link-preview-setting');
|
||||||
|
window.setSettingValue('link-preview-setting', newValue);
|
||||||
|
if (!newValue) {
|
||||||
|
await createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: false });
|
||||||
|
} else {
|
||||||
|
window.inboxStore?.dispatch(
|
||||||
|
updateConfirmModal({
|
||||||
|
title: window.i18n('linkPreviewsTitle'),
|
||||||
|
message: window.i18n('linkPreviewsConfirmMessage'),
|
||||||
|
okTheme: SessionButtonColor.Danger,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toggleStartInTray() {
|
||||||
|
try {
|
||||||
|
const newValue = !(await window.getStartInTray());
|
||||||
|
|
||||||
|
// make sure to write it here too, as this is the value used on the UI to mark the toggle as true/false
|
||||||
|
window.setSettingValue('start-in-tray-setting', newValue);
|
||||||
|
await window.setStartInTray(newValue);
|
||||||
|
if (!newValue) {
|
||||||
|
ToastUtils.pushRestartNeeded();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
window.log.warn('start in tray change error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const settingsMenuBar = 'hide-menu-bar';
|
||||||
|
const settingsSpellCheck = 'spell-check';
|
||||||
|
const settingsLinkPreview = 'link-preview-setting';
|
||||||
|
const settingsStartInTray = 'start-in-tray-setting';
|
||||||
|
|
||||||
|
export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null }) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const forceUpdate = useUpdate();
|
||||||
|
const audioAutoPlay = useSelector(getAudioAutoplay);
|
||||||
|
|
||||||
|
if (props.hasPassword !== null) {
|
||||||
|
const isHideMenuBarActive =
|
||||||
|
window.getSettingValue(settingsMenuBar) === undefined
|
||||||
|
? true
|
||||||
|
: window.getSettingValue(settingsMenuBar);
|
||||||
|
|
||||||
|
const isSpellCheckActive =
|
||||||
|
window.getSettingValue(settingsSpellCheck) === undefined
|
||||||
|
? true
|
||||||
|
: window.getSettingValue(settingsSpellCheck);
|
||||||
|
|
||||||
|
const isLinkPreviewsOn = Boolean(window.getSettingValue(settingsLinkPreview));
|
||||||
|
const isStartInTrayActive = Boolean(window.getSettingValue(settingsStartInTray));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{window.Signal.Types.Settings.isHideMenuBarSupported() && (
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={() => {
|
||||||
|
window.toggleMenuBar();
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('hideMenuBarTitle')}
|
||||||
|
description={window.i18n('hideMenuBarDescription')}
|
||||||
|
active={isHideMenuBarActive}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={() => {
|
||||||
|
window.toggleSpellCheck();
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('spellCheckTitle')}
|
||||||
|
description={window.i18n('spellCheckDescription')}
|
||||||
|
active={isSpellCheckActive}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={async () => {
|
||||||
|
await toggleLinkPreviews();
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('linkPreviewsTitle')}
|
||||||
|
description={window.i18n('linkPreviewDescription')}
|
||||||
|
active={isLinkPreviewsOn}
|
||||||
|
/>
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={async () => {
|
||||||
|
await toggleStartInTray();
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('startInTrayTitle')}
|
||||||
|
description={window.i18n('startInTrayDescription')}
|
||||||
|
active={isStartInTrayActive}
|
||||||
|
/>
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={() => {
|
||||||
|
dispatch(toggleAudioAutoplay());
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('audioMessageAutoplayTitle')}
|
||||||
|
description={window.i18n('audioMessageAutoplayDescription')}
|
||||||
|
active={audioAutoPlay}
|
||||||
|
/>
|
||||||
|
<ZoomingSessionSlider />
|
||||||
|
<SessionSettingButtonItem
|
||||||
|
title={window.i18n('surveyTitle')}
|
||||||
|
onClick={() => void shell.openExternal('https://getsession.org/survey')}
|
||||||
|
buttonColor={SessionButtonColor.Primary}
|
||||||
|
buttonText={window.i18n('goToOurSurvey')}
|
||||||
|
/>
|
||||||
|
<SessionSettingButtonItem
|
||||||
|
title={window.i18n('helpUsTranslateSession')}
|
||||||
|
onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
|
||||||
|
buttonColor={SessionButtonColor.Primary}
|
||||||
|
buttonText={window.i18n('translation')}
|
||||||
|
/>
|
||||||
|
<SessionSettingButtonItem
|
||||||
|
onClick={() => {
|
||||||
|
ipcRenderer.send('show-debug-log');
|
||||||
|
}}
|
||||||
|
buttonColor={SessionButtonColor.Primary}
|
||||||
|
buttonText={window.i18n('showDebugLog')}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
@ -0,0 +1,145 @@
|
|||||||
|
import React from 'react';
|
||||||
|
// tslint:disable-next-line: no-submodule-imports
|
||||||
|
import useUpdate from 'react-use/lib/useUpdate';
|
||||||
|
import { sessionPassword, updateConfirmModal } from '../../../../state/ducks/modalDialog';
|
||||||
|
import { PasswordAction } from '../../../dialog/SessionPasswordDialog';
|
||||||
|
import { SessionButtonColor } from '../../SessionButton';
|
||||||
|
import { SessionSettingButtonItem, SessionToggleWithDescription } from '../SessionSettingListItem';
|
||||||
|
|
||||||
|
const settingsReadReceipt = 'read-receipt-setting';
|
||||||
|
const settingsTypingIndicator = 'typing-indicators-setting';
|
||||||
|
const settingsAutoUpdate = 'auto-update';
|
||||||
|
|
||||||
|
const toggleCallMediaPermissions = async (triggerUIUpdate: () => void) => {
|
||||||
|
const currentValue = window.getCallMediaPermissions();
|
||||||
|
if (!currentValue) {
|
||||||
|
window.inboxStore?.dispatch(
|
||||||
|
updateConfirmModal({
|
||||||
|
message: window.i18n('callMediaPermissionsDialogContent'),
|
||||||
|
okTheme: SessionButtonColor.Danger,
|
||||||
|
onClickOk: async () => {
|
||||||
|
await window.toggleCallMediaPermissionsTo(true);
|
||||||
|
triggerUIUpdate();
|
||||||
|
},
|
||||||
|
onClickCancel: async () => {
|
||||||
|
await window.toggleCallMediaPermissionsTo(false);
|
||||||
|
triggerUIUpdate();
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await window.toggleCallMediaPermissionsTo(false);
|
||||||
|
triggerUIUpdate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function displayPasswordModal(
|
||||||
|
passwordAction: PasswordAction,
|
||||||
|
onPasswordUpdated: (action: string) => void
|
||||||
|
) {
|
||||||
|
window.inboxStore?.dispatch(
|
||||||
|
sessionPassword({
|
||||||
|
passwordAction,
|
||||||
|
onOk: () => {
|
||||||
|
onPasswordUpdated(passwordAction);
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SettingsCategoryPrivacy = (props: {
|
||||||
|
hasPassword: boolean | null;
|
||||||
|
onPasswordUpdated: (action: string) => void;
|
||||||
|
}) => {
|
||||||
|
const forceUpdate = useUpdate();
|
||||||
|
|
||||||
|
if (props.hasPassword !== null) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={async () => {
|
||||||
|
await window.toggleMediaPermissions();
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('mediaPermissionsTitle')}
|
||||||
|
description={window.i18n('mediaPermissionsDescription')}
|
||||||
|
active={Boolean(window.getSettingValue('media-permissions'))}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={async () => {
|
||||||
|
await toggleCallMediaPermissions(forceUpdate);
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('callMediaPermissionsTitle')}
|
||||||
|
description={window.i18n('callMediaPermissionsDescription')}
|
||||||
|
active={Boolean(window.getCallMediaPermissions())}
|
||||||
|
/>
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={() => {
|
||||||
|
const old = Boolean(window.getSettingValue(settingsReadReceipt));
|
||||||
|
window.setSettingValue(settingsReadReceipt, !old);
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('readReceiptSettingTitle')}
|
||||||
|
description={window.i18n('readReceiptSettingDescription')}
|
||||||
|
active={window.getSettingValue(settingsReadReceipt)}
|
||||||
|
/>
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={() => {
|
||||||
|
const old = Boolean(window.getSettingValue(settingsTypingIndicator));
|
||||||
|
window.setSettingValue(settingsTypingIndicator, !old);
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('typingIndicatorsSettingTitle')}
|
||||||
|
description={window.i18n('typingIndicatorsSettingDescription')}
|
||||||
|
active={Boolean(window.getSettingValue(settingsTypingIndicator))}
|
||||||
|
/>
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={() => {
|
||||||
|
const old = Boolean(window.getSettingValue(settingsAutoUpdate));
|
||||||
|
window.setSettingValue(settingsAutoUpdate, !old);
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('autoUpdateSettingTitle')}
|
||||||
|
description={window.i18n('autoUpdateSettingDescription')}
|
||||||
|
active={Boolean(window.getSettingValue(settingsAutoUpdate))}
|
||||||
|
/>
|
||||||
|
{!props.hasPassword && (
|
||||||
|
<SessionSettingButtonItem
|
||||||
|
title={window.i18n('setAccountPasswordTitle')}
|
||||||
|
description={window.i18n('setAccountPasswordDescription')}
|
||||||
|
onClick={() => {
|
||||||
|
displayPasswordModal('set', props.onPasswordUpdated);
|
||||||
|
}}
|
||||||
|
buttonColor={SessionButtonColor.Primary}
|
||||||
|
buttonText={window.i18n('setPassword')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{props.hasPassword && (
|
||||||
|
<SessionSettingButtonItem
|
||||||
|
title={window.i18n('changeAccountPasswordTitle')}
|
||||||
|
description={window.i18n('changeAccountPasswordDescription')}
|
||||||
|
onClick={() => {
|
||||||
|
displayPasswordModal('change', props.onPasswordUpdated);
|
||||||
|
}}
|
||||||
|
buttonColor={SessionButtonColor.Primary}
|
||||||
|
buttonText={window.i18n('changePassword')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{props.hasPassword && (
|
||||||
|
<SessionSettingButtonItem
|
||||||
|
title={window.i18n('removeAccountPasswordTitle')}
|
||||||
|
description={window.i18n('removeAccountPasswordDescription')}
|
||||||
|
onClick={() => {
|
||||||
|
displayPasswordModal('remove', props.onPasswordUpdated);
|
||||||
|
}}
|
||||||
|
buttonColor={SessionButtonColor.Danger}
|
||||||
|
buttonText={window.i18n('removePassword')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue