feat: start of settings screen redesign
Audric Ackermann
3 years ago
parent
cfbb58aa7f
commit
a0d3a00afa
@ -1,43 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { useSelector } from 'react-redux';
|
|
||||||
import { unblockConvoById } from '../../interactions/conversationInteractions';
|
|
||||||
import { getConversationController } from '../../session/conversations';
|
|
||||||
import { getBlockedPubkeys } from '../../state/selectors/conversations';
|
|
||||||
import { SessionButtonColor } from '../basic/SessionButton';
|
|
||||||
|
|
||||||
import { SessionSettingButtonItem, SessionSettingsItemWrapper } from './SessionSettingListItem';
|
|
||||||
|
|
||||||
export const BlockedUserSettings = () => {
|
|
||||||
const blockedNumbers = useSelector(getBlockedPubkeys);
|
|
||||||
|
|
||||||
if (!blockedNumbers || blockedNumbers.length === 0) {
|
|
||||||
return (
|
|
||||||
<SessionSettingsItemWrapper
|
|
||||||
inline={true}
|
|
||||||
description={window.i18n('noBlockedContacts')}
|
|
||||||
title={''}
|
|
||||||
>
|
|
||||||
{' '}
|
|
||||||
</SessionSettingsItemWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const blockedEntries = blockedNumbers.map(blockedEntry => {
|
|
||||||
const currentModel = getConversationController().get(blockedEntry);
|
|
||||||
const title =
|
|
||||||
currentModel?.getNicknameOrRealUsernameOrPlaceholder() || window.i18n('anonymous');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SessionSettingButtonItem
|
|
||||||
key={blockedEntry}
|
|
||||||
buttonColor={SessionButtonColor.Danger}
|
|
||||||
buttonText={window.i18n('unblockUser')}
|
|
||||||
title={title}
|
|
||||||
onClick={async () => {
|
|
||||||
await unblockConvoById(blockedEntry);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return <>{blockedEntries}</>;
|
|
||||||
};
|
|
||||||
@ -0,0 +1,140 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import useUpdate from 'react-use/lib/useUpdate';
|
||||||
|
import { SettingsKey } from '../../../data/settings-key';
|
||||||
|
import { unblockConvoById } from '../../../interactions/conversationInteractions';
|
||||||
|
import { getConversationController } from '../../../session/conversations';
|
||||||
|
import { ToastUtils } from '../../../session/utils';
|
||||||
|
import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
|
||||||
|
import { getBlockedPubkeys } from '../../../state/selectors/conversations';
|
||||||
|
import { getAudioAutoplay } from '../../../state/selectors/userConfig';
|
||||||
|
import { SessionButtonColor } from '../../basic/SessionButton';
|
||||||
|
|
||||||
|
import {
|
||||||
|
SessionSettingButtonItem,
|
||||||
|
SessionSettingsItemWrapper,
|
||||||
|
SessionToggleWithDescription,
|
||||||
|
} from '../SessionSettingListItem';
|
||||||
|
|
||||||
|
async function toggleCommunitiesPruning() {
|
||||||
|
try {
|
||||||
|
const newValue = !(await window.getOpengroupPruning());
|
||||||
|
|
||||||
|
// 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(SettingsKey.settingsOpengroupPruning, newValue);
|
||||||
|
await window.setOpengroupPruning(newValue);
|
||||||
|
ToastUtils.pushRestartNeeded();
|
||||||
|
} catch (e) {
|
||||||
|
window.log.warn('toggleCommunitiesPruning change error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const CommunitiesPruningSetting = () => {
|
||||||
|
const forceUpdate = useUpdate();
|
||||||
|
const isOpengroupPruningEnabled = Boolean(
|
||||||
|
window.getSettingValue(SettingsKey.settingsOpengroupPruning)
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={async () => {
|
||||||
|
await toggleCommunitiesPruning();
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('pruneSettingTitle')}
|
||||||
|
description={window.i18n('pruneSettingDescription')}
|
||||||
|
active={isOpengroupPruningEnabled}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const SpellCheckSetting = () => {
|
||||||
|
const forceUpdate = useUpdate();
|
||||||
|
|
||||||
|
const isSpellCheckActive =
|
||||||
|
window.getSettingValue(SettingsKey.settingsSpellCheck) === undefined
|
||||||
|
? true
|
||||||
|
: window.getSettingValue(SettingsKey.settingsSpellCheck);
|
||||||
|
return (
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={() => {
|
||||||
|
window.toggleSpellCheck();
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('spellCheckTitle')}
|
||||||
|
description={window.i18n('spellCheckDescription')}
|
||||||
|
active={isSpellCheckActive}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const AudioMessageAutoPlaySetting = () => {
|
||||||
|
const audioAutoPlay = useSelector(getAudioAutoplay);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const forceUpdate = useUpdate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={() => {
|
||||||
|
dispatch(toggleAudioAutoplay());
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('audioMessageAutoplayTitle')}
|
||||||
|
description={window.i18n('audioMessageAutoplayDescription')}
|
||||||
|
active={audioAutoPlay}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const NoBlockedContacts = () => {
|
||||||
|
return (
|
||||||
|
<SessionSettingsItemWrapper
|
||||||
|
inline={true}
|
||||||
|
description={window.i18n('noBlockedContacts')}
|
||||||
|
title={''}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const BlockedEntry = (props: { blockedEntry: string; title: string }) => {
|
||||||
|
return (
|
||||||
|
<SessionSettingButtonItem
|
||||||
|
key={props.blockedEntry}
|
||||||
|
buttonColor={SessionButtonColor.Danger}
|
||||||
|
buttonText={window.i18n('unblockUser')}
|
||||||
|
title={props.title}
|
||||||
|
onClick={async () => {
|
||||||
|
await unblockConvoById(props.blockedEntry);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const BlockedContactsList = (props: { blockedNumbers: Array<string> }) => {
|
||||||
|
const blockedEntries = props.blockedNumbers.map(blockedEntry => {
|
||||||
|
const currentModel = getConversationController().get(blockedEntry);
|
||||||
|
const title =
|
||||||
|
currentModel?.getNicknameOrRealUsernameOrPlaceholder() || window.i18n('anonymous');
|
||||||
|
|
||||||
|
return <BlockedEntry key={blockedEntry} blockedEntry={blockedEntry} title={title} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
return <>{blockedEntries}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CategoryConversations = () => {
|
||||||
|
const blockedNumbers = useSelector(getBlockedPubkeys);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<CommunitiesPruningSetting />
|
||||||
|
<SpellCheckSetting />
|
||||||
|
<AudioMessageAutoPlaySetting />
|
||||||
|
|
||||||
|
{blockedNumbers?.length ? (
|
||||||
|
<BlockedContactsList blockedNumbers={blockedNumbers} />
|
||||||
|
) : (
|
||||||
|
<NoBlockedContacts />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { ipcRenderer, shell } from 'electron';
|
||||||
|
import React from 'react';
|
||||||
|
import { SessionButtonColor } from '../../basic/SessionButton';
|
||||||
|
|
||||||
|
import { SessionSettingButtonItem } from '../SessionSettingListItem';
|
||||||
|
|
||||||
|
export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) => {
|
||||||
|
if (props.hasPassword !== null) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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,98 @@
|
|||||||
|
import React from 'react';
|
||||||
|
// tslint:disable-next-line: no-submodule-imports
|
||||||
|
import useUpdate from 'react-use/lib/useUpdate';
|
||||||
|
import { SettingsKey } from '../../../data/settings-key';
|
||||||
|
import { CallManager, ToastUtils } from '../../../session/utils';
|
||||||
|
import { updateConfirmModal } from '../../../state/ducks/modalDialog';
|
||||||
|
import { SessionButtonColor } from '../../basic/SessionButton';
|
||||||
|
|
||||||
|
import { SessionToggleWithDescription } from '../SessionSettingListItem';
|
||||||
|
|
||||||
|
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();
|
||||||
|
CallManager.onTurnedOnCallMediaPermissions();
|
||||||
|
},
|
||||||
|
onClickCancel: async () => {
|
||||||
|
await window.toggleCallMediaPermissionsTo(false);
|
||||||
|
triggerUIUpdate();
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await window.toggleCallMediaPermissionsTo(false);
|
||||||
|
triggerUIUpdate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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(SettingsKey.settingsStartInTray, newValue);
|
||||||
|
await window.setStartInTray(newValue);
|
||||||
|
if (!newValue) {
|
||||||
|
ToastUtils.pushRestartNeeded();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
window.log.warn('start in tray change error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SettingsCategoryPermissions = (props: { hasPassword: boolean | null }) => {
|
||||||
|
const forceUpdate = useUpdate();
|
||||||
|
const isStartInTrayActive = Boolean(window.getSettingValue(SettingsKey.settingsStartInTray));
|
||||||
|
|
||||||
|
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(SettingsKey.settingsAutoUpdate));
|
||||||
|
window.setSettingValue(SettingsKey.settingsAutoUpdate, !old);
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('autoUpdateSettingTitle')}
|
||||||
|
description={window.i18n('autoUpdateSettingDescription')}
|
||||||
|
active={Boolean(window.getSettingValue(SettingsKey.settingsAutoUpdate))}
|
||||||
|
/>
|
||||||
|
<SessionToggleWithDescription
|
||||||
|
onClickToggle={async () => {
|
||||||
|
await toggleStartInTray();
|
||||||
|
forceUpdate();
|
||||||
|
}}
|
||||||
|
title={window.i18n('startInTrayTitle')}
|
||||||
|
description={window.i18n('startInTrayDescription')}
|
||||||
|
active={isStartInTrayActive}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue