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