cleanup SessionSettings by making them less a IdoEverything
Audric Ackermann
4 years ago
parent
f74ce2a3ae
commit
a596531c57
@ -1,58 +0,0 @@
|
|||||||
import { unblockConvoById } from '../../../interactions/conversationInteractions';
|
|
||||||
import { getConversationController } from '../../../session/conversations';
|
|
||||||
import { BlockedNumberController } from '../../../util';
|
|
||||||
import { SessionButtonColor } from '../SessionButton';
|
|
||||||
import { LocalSettingType, SessionSettingType, SessionSettingCategory } from './LocalSettings';
|
|
||||||
|
|
||||||
export function getBlockedUserSettings(): Array<LocalSettingType> {
|
|
||||||
const results: Array<LocalSettingType> = [];
|
|
||||||
const blockedNumbers = BlockedNumberController.getBlockedNumbers();
|
|
||||||
|
|
||||||
for (const blockedNumber of blockedNumbers) {
|
|
||||||
let title: string;
|
|
||||||
|
|
||||||
const currentModel = getConversationController().get(blockedNumber);
|
|
||||||
if (currentModel) {
|
|
||||||
title = currentModel.getProfileName() || currentModel.getName() || window.i18n('anonymous');
|
|
||||||
} else {
|
|
||||||
title = window.i18n('anonymous');
|
|
||||||
}
|
|
||||||
|
|
||||||
results.push({
|
|
||||||
id: blockedNumber,
|
|
||||||
title,
|
|
||||||
description: '',
|
|
||||||
type: SessionSettingType.Button,
|
|
||||||
category: SessionSettingCategory.Blocked,
|
|
||||||
content: {
|
|
||||||
buttonColor: SessionButtonColor.Danger,
|
|
||||||
buttonText: window.i18n('unblockUser'),
|
|
||||||
},
|
|
||||||
comparisonValue: undefined,
|
|
||||||
setFn: async () => {
|
|
||||||
await unblockConvoById(blockedNumber);
|
|
||||||
},
|
|
||||||
hidden: false,
|
|
||||||
onClick: undefined,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (blockedNumbers.length === 0) {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
id: 'noBlockedContacts',
|
|
||||||
title: '',
|
|
||||||
description: window.i18n('noBlockedContacts'),
|
|
||||||
type: undefined,
|
|
||||||
category: SessionSettingCategory.Blocked,
|
|
||||||
content: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
setFn: undefined,
|
|
||||||
hidden: false,
|
|
||||||
onClick: undefined,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
return results;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
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 '../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);
|
||||||
|
let title: string;
|
||||||
|
|
||||||
|
if (currentModel) {
|
||||||
|
title = currentModel.getProfileName() || currentModel.getName() || window.i18n('anonymous');
|
||||||
|
} else {
|
||||||
|
title = window.i18n('anonymous');
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<SessionSettingButtonItem
|
||||||
|
key={blockedEntry}
|
||||||
|
buttonColor={SessionButtonColor.Danger}
|
||||||
|
buttonText={window.i18n('unblockUser')}
|
||||||
|
title={title}
|
||||||
|
onClick={async () => {
|
||||||
|
await unblockConvoById(blockedEntry);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return <>{blockedEntries}</>;
|
||||||
|
};
|
||||||
@ -1,388 +0,0 @@
|
|||||||
import { shell } from 'electron';
|
|
||||||
import { createOrUpdateItem, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
|
|
||||||
import { ToastUtils } from '../../../session/utils';
|
|
||||||
import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
|
|
||||||
import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
|
|
||||||
import { PasswordAction } from '../../dialog/SessionPasswordDialog';
|
|
||||||
import { SessionButtonColor } from '../SessionButton';
|
|
||||||
|
|
||||||
export enum SessionSettingCategory {
|
|
||||||
Appearance = 'appearance',
|
|
||||||
Account = 'account',
|
|
||||||
Privacy = 'privacy',
|
|
||||||
Permissions = 'permissions',
|
|
||||||
Notifications = 'notifications',
|
|
||||||
Blocked = 'blocked',
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum SessionSettingType {
|
|
||||||
Toggle = 'toggle',
|
|
||||||
Options = 'options',
|
|
||||||
Button = 'button',
|
|
||||||
Slider = 'slider',
|
|
||||||
}
|
|
||||||
|
|
||||||
export type LocalSettingType = {
|
|
||||||
category: SessionSettingCategory;
|
|
||||||
description: string | undefined;
|
|
||||||
comparisonValue: string | undefined;
|
|
||||||
id: any;
|
|
||||||
value?: any;
|
|
||||||
content: any | undefined;
|
|
||||||
hidden: any;
|
|
||||||
title?: string;
|
|
||||||
type: SessionSettingType | undefined;
|
|
||||||
setFn: any;
|
|
||||||
onClick: any;
|
|
||||||
};
|
|
||||||
|
|
||||||
function setNotificationSetting(settingID: string, selectedValue: string) {
|
|
||||||
window.setSettingValue(settingID, selectedValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayPasswordModal(
|
|
||||||
passwordAction: PasswordAction,
|
|
||||||
onPasswordUpdated: (action: string) => void
|
|
||||||
) {
|
|
||||||
window.inboxStore?.dispatch(
|
|
||||||
sessionPassword({
|
|
||||||
passwordAction,
|
|
||||||
onOk: () => {
|
|
||||||
onPasswordUpdated(passwordAction);
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// tslint:disable-next-line: max-func-body-length
|
|
||||||
export function getLocalSettings(
|
|
||||||
hasPassword: boolean | null,
|
|
||||||
onPasswordUpdated: (action: string) => void,
|
|
||||||
forceUpdate: () => void
|
|
||||||
): Array<LocalSettingType> {
|
|
||||||
const { Settings } = window.Signal.Types;
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
id: 'hide-menu-bar',
|
|
||||||
title: window.i18n('hideMenuBarTitle'),
|
|
||||||
description: window.i18n('hideMenuBarDescription'),
|
|
||||||
hidden: !Settings.isHideMenuBarSupported(),
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Appearance,
|
|
||||||
setFn: window.toggleMenuBar,
|
|
||||||
content: { defaultValue: true },
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'spell-check',
|
|
||||||
title: window.i18n('spellCheckTitle'),
|
|
||||||
description: window.i18n('spellCheckDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Appearance,
|
|
||||||
setFn: window.toggleSpellCheck,
|
|
||||||
content: { defaultValue: true },
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'link-preview-setting',
|
|
||||||
title: window.i18n('linkPreviewsTitle'),
|
|
||||||
description: window.i18n('linkPreviewDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Appearance,
|
|
||||||
setFn: async () => {
|
|
||||||
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,
|
|
||||||
// onClickOk:
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
content: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
id: 'start-in-tray-setting',
|
|
||||||
title: window.i18n('startInTrayTitle'),
|
|
||||||
description: window.i18n('startInTrayDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Appearance,
|
|
||||||
setFn: async () => {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
content: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'audio-message-autoplay-setting',
|
|
||||||
title: window.i18n('audioMessageAutoplayTitle'),
|
|
||||||
description: window.i18n('audioMessageAutoplayDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Appearance,
|
|
||||||
setFn: () => {
|
|
||||||
window.inboxStore?.dispatch(toggleAudioAutoplay());
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
defaultValue: window.inboxStore?.getState().userConfig.audioAutoplay,
|
|
||||||
},
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
id: 'notification-setting',
|
|
||||||
title: window.i18n('notificationSettingsDialog'),
|
|
||||||
type: SessionSettingType.Options,
|
|
||||||
category: SessionSettingCategory.Notifications,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
description: undefined,
|
|
||||||
hidden: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
setFn: (selectedValue: string) => {
|
|
||||||
setNotificationSetting('notification-setting', selectedValue);
|
|
||||||
forceUpdate();
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
options: {
|
|
||||||
group: 'notification-setting',
|
|
||||||
initialItem: window.getSettingValue('notification-setting') || 'message',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: window.i18n('nameAndMessage'),
|
|
||||||
value: 'message',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: window.i18n('nameOnly'),
|
|
||||||
value: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: window.i18n('noNameOrMessage'),
|
|
||||||
value: 'count',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: window.i18n('disableNotifications'),
|
|
||||||
value: 'off',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'zoom-factor-setting',
|
|
||||||
title: window.i18n('zoomFactorSettingTitle'),
|
|
||||||
description: undefined,
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Slider,
|
|
||||||
category: SessionSettingCategory.Appearance,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
content: {
|
|
||||||
dotsEnabled: true,
|
|
||||||
step: 20,
|
|
||||||
min: 60,
|
|
||||||
max: 200,
|
|
||||||
defaultValue: 100,
|
|
||||||
info: (value: number) => `${value}%`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'session-survey',
|
|
||||||
title: window.i18n('surveyTitle'),
|
|
||||||
description: undefined,
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Button,
|
|
||||||
category: SessionSettingCategory.Appearance,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: () => {
|
|
||||||
void shell.openExternal('https://getsession.org/survey');
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
buttonText: window.i18n('goToOurSurvey'),
|
|
||||||
buttonColor: SessionButtonColor.Primary,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'help-translation',
|
|
||||||
title: window.i18n('translation'),
|
|
||||||
description: undefined,
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Button,
|
|
||||||
category: SessionSettingCategory.Appearance,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: () => {
|
|
||||||
void shell.openExternal('https://crowdin.com/project/session-desktop/');
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
buttonText: window.i18n('helpUsTranslateSession'),
|
|
||||||
buttonColor: SessionButtonColor.Primary,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'media-permissions',
|
|
||||||
title: window.i18n('mediaPermissionsTitle'),
|
|
||||||
description: window.i18n('mediaPermissionsDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Privacy,
|
|
||||||
setFn: async () => {
|
|
||||||
await window.toggleMediaPermissions();
|
|
||||||
forceUpdate();
|
|
||||||
},
|
|
||||||
content: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'call-media-permissions',
|
|
||||||
title: window.i18n('callMediaPermissionsTitle'),
|
|
||||||
description: window.i18n('callMediaPermissionsDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Privacy,
|
|
||||||
setFn: async () => {
|
|
||||||
const currentValue = window.getCallMediaPermissions();
|
|
||||||
if (!currentValue) {
|
|
||||||
window.inboxStore?.dispatch(
|
|
||||||
updateConfirmModal({
|
|
||||||
message: window.i18n('callMediaPermissionsDialogContent'),
|
|
||||||
okTheme: SessionButtonColor.Green,
|
|
||||||
onClickOk: async () => {
|
|
||||||
await window.toggleCallMediaPermissionsTo(true);
|
|
||||||
forceUpdate();
|
|
||||||
},
|
|
||||||
onClickCancel: async () => {
|
|
||||||
await window.toggleCallMediaPermissionsTo(false);
|
|
||||||
forceUpdate();
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
await window.toggleCallMediaPermissionsTo(false);
|
|
||||||
forceUpdate();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
content: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'read-receipt-setting',
|
|
||||||
title: window.i18n('readReceiptSettingTitle'),
|
|
||||||
description: window.i18n('readReceiptSettingDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Privacy,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
content: {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'typing-indicators-setting',
|
|
||||||
title: window.i18n('typingIndicatorsSettingTitle'),
|
|
||||||
description: window.i18n('typingIndicatorsSettingDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Privacy,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
content: {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'auto-update',
|
|
||||||
title: window.i18n('autoUpdateSettingTitle'),
|
|
||||||
description: window.i18n('autoUpdateSettingDescription'),
|
|
||||||
hidden: false,
|
|
||||||
type: SessionSettingType.Toggle,
|
|
||||||
category: SessionSettingCategory.Privacy,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
onClick: undefined,
|
|
||||||
content: {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'set-password',
|
|
||||||
title: window.i18n('setAccountPasswordTitle'),
|
|
||||||
description: window.i18n('setAccountPasswordDescription'),
|
|
||||||
hidden: hasPassword,
|
|
||||||
type: SessionSettingType.Button,
|
|
||||||
category: SessionSettingCategory.Privacy,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
content: {
|
|
||||||
buttonText: window.i18n('setPassword'),
|
|
||||||
buttonColor: SessionButtonColor.Primary,
|
|
||||||
},
|
|
||||||
onClick: () => {
|
|
||||||
displayPasswordModal('set', onPasswordUpdated);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'change-password',
|
|
||||||
title: window.i18n('changeAccountPasswordTitle'),
|
|
||||||
description: window.i18n('changeAccountPasswordDescription'),
|
|
||||||
hidden: !hasPassword,
|
|
||||||
type: SessionSettingType.Button,
|
|
||||||
category: SessionSettingCategory.Privacy,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
content: {
|
|
||||||
buttonText: window.i18n('changePassword'),
|
|
||||||
buttonColor: SessionButtonColor.Primary,
|
|
||||||
},
|
|
||||||
onClick: () => {
|
|
||||||
displayPasswordModal('change', onPasswordUpdated);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'remove-password',
|
|
||||||
title: window.i18n('removeAccountPasswordTitle'),
|
|
||||||
description: window.i18n('removeAccountPasswordDescription'),
|
|
||||||
hidden: !hasPassword,
|
|
||||||
type: SessionSettingType.Button,
|
|
||||||
category: SessionSettingCategory.Privacy,
|
|
||||||
setFn: undefined,
|
|
||||||
comparisonValue: undefined,
|
|
||||||
content: {
|
|
||||||
buttonText: window.i18n('removePassword'),
|
|
||||||
buttonColor: SessionButtonColor.Danger,
|
|
||||||
},
|
|
||||||
onClick: () => {
|
|
||||||
displayPasswordModal('remove', onPasswordUpdated);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { SessionRadioGroup } from '../SessionRadioGroup';
|
||||||
|
import { SessionSettingsItemWrapper } from './SessionSettingListItem';
|
||||||
|
|
||||||
|
export const SessionNotificationGroupSettings = (props: { hasPassword: boolean | null }) => {
|
||||||
|
if (props.hasPassword === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialItem = window.getSettingValue('notification-setting') || 'message';
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
label: window.i18n('nameAndMessage'),
|
||||||
|
value: 'message',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: window.i18n('nameOnly'),
|
||||||
|
value: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: window.i18n('noNameOrMessage'),
|
||||||
|
value: 'count',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: window.i18n('disableNotifications'),
|
||||||
|
value: 'off',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<SessionSettingsItemWrapper title={window.i18n('notificationSettingsDialog')} inline={false}>
|
||||||
|
<SessionRadioGroup
|
||||||
|
initialItem={initialItem}
|
||||||
|
group={'notification-setting'}
|
||||||
|
items={items}
|
||||||
|
onClick={(selectedRadioValue: string) => {
|
||||||
|
window.setSettingValue('notification-setting', selectedRadioValue);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</SessionSettingsItemWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,97 +1,74 @@
|
|||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import Slider from 'rc-slider';
|
|
||||||
|
|
||||||
import { SessionToggle } from '../SessionToggle';
|
import { SessionToggle } from '../SessionToggle';
|
||||||
import { SessionButton } from '../SessionButton';
|
import { SessionButton, SessionButtonColor } from '../SessionButton';
|
||||||
import { SessionRadioGroup } from '../SessionRadioGroup';
|
|
||||||
import { SessionConfirmDialogProps } from '../../dialog/SessionConfirm';
|
import { SessionConfirmDialogProps } from '../../dialog/SessionConfirm';
|
||||||
import { SessionSettingType } from './LocalSettings';
|
|
||||||
|
|
||||||
type Props = {
|
type ButtonSettingsProps = {
|
||||||
title?: string;
|
title?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
type: SessionSettingType | undefined;
|
buttonColor: SessionButtonColor;
|
||||||
value: any;
|
buttonText: string;
|
||||||
options?: Array<any>;
|
onClick: () => void;
|
||||||
onClick?: any;
|
|
||||||
onSliderChange?: any;
|
|
||||||
content: any;
|
|
||||||
confirmationDialogParams?: SessionConfirmDialogProps;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SessionSettingListItem = (props: Props) => {
|
const SettingsTitleAndDescription = (props: { title?: string; description?: string }) => {
|
||||||
const handleSlider = (valueToForward: any) => {
|
return (
|
||||||
if (props.onSliderChange) {
|
<div className="session-settings-item__info">
|
||||||
props.onSliderChange(valueToForward);
|
<div className="session-settings-item__title">{props.title}</div>
|
||||||
}
|
|
||||||
|
|
||||||
setSliderValue(valueToForward);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [sliderValue, setSliderValue] = useState(null);
|
|
||||||
|
|
||||||
const { title, description, type, value, content } = props;
|
{props.description && (
|
||||||
const inline = !!type && ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
|
<div className="session-settings-item__description">{props.description}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const currentSliderValue = type === SessionSettingType.Slider && (sliderValue || value);
|
const SessionSettingsContent = (props: { children: React.ReactNode }) => {
|
||||||
|
return <div className="session-settings-item__content">{props.children}</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SessionSettingsItemWrapper = (props: {
|
||||||
|
inline: boolean;
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className={classNames('session-settings-item', inline && 'inline')}>
|
<div className={classNames('session-settings-item', props.inline && 'inline')}>
|
||||||
<div className="session-settings-item__info">
|
<SettingsTitleAndDescription title={props.title} description={props.description} />
|
||||||
<div className="session-settings-item__title">{title}</div>
|
<SessionSettingsContent>{props.children}</SessionSettingsContent>
|
||||||
|
</div>
|
||||||
{description && <div className="session-settings-item__description">{description}</div>}
|
);
|
||||||
</div>
|
};
|
||||||
|
|
||||||
<div className="session-settings-item__content">
|
|
||||||
{type === SessionSettingType.Toggle && (
|
|
||||||
<div className="session-settings-item__selection">
|
|
||||||
<SessionToggle
|
|
||||||
active={Boolean(value)}
|
|
||||||
onClick={() => props.onClick?.()}
|
|
||||||
confirmationDialogParams={props.confirmationDialogParams}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{type === SessionSettingType.Button && (
|
export const SessionToggleWithDescription = (props: {
|
||||||
<SessionButton
|
title?: string;
|
||||||
text={content.buttonText}
|
description?: string;
|
||||||
buttonColor={content.buttonColor}
|
active: boolean;
|
||||||
onClick={() => props.onClick?.()}
|
onClickToggle: () => void;
|
||||||
/>
|
confirmationDialogParams?: SessionConfirmDialogProps;
|
||||||
)}
|
}) => {
|
||||||
|
const { title, description, active, onClickToggle, confirmationDialogParams } = props;
|
||||||
|
|
||||||
{type === SessionSettingType.Options && (
|
return (
|
||||||
<SessionRadioGroup
|
<SessionSettingsItemWrapper title={title} description={description} inline={true}>
|
||||||
initialItem={content.options.initialItem}
|
<SessionToggle
|
||||||
group={content.options.group}
|
active={active}
|
||||||
items={content.options.items}
|
onClick={onClickToggle}
|
||||||
onClick={(selectedRadioValue: string) => {
|
confirmationDialogParams={confirmationDialogParams}
|
||||||
props.onClick(selectedRadioValue);
|
/>
|
||||||
}}
|
</SessionSettingsItemWrapper>
|
||||||
/>
|
);
|
||||||
)}
|
};
|
||||||
|
|
||||||
{type === SessionSettingType.Slider && (
|
export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
|
||||||
<div className="slider-wrapper">
|
const { title, description, buttonColor, buttonText, onClick } = props;
|
||||||
<Slider
|
|
||||||
dots={true}
|
|
||||||
step={content.step}
|
|
||||||
min={content.min}
|
|
||||||
max={content.max}
|
|
||||||
defaultValue={currentSliderValue}
|
|
||||||
onAfterChange={handleSlider}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="slider-info">
|
return (
|
||||||
<p>{content.info(currentSliderValue)}</p>
|
<SessionSettingsItemWrapper title={title} description={description} inline={true}>
|
||||||
</div>
|
<SessionButton text={buttonText} buttonColor={buttonColor} onClick={onClick} />
|
||||||
</div>
|
</SessionSettingsItemWrapper>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,35 @@
|
|||||||
|
import Slider from 'rc-slider';
|
||||||
|
import React from 'react';
|
||||||
|
// tslint:disable-next-line: no-submodule-imports
|
||||||
|
import useUpdate from 'react-use/lib/useUpdate';
|
||||||
|
import { SessionSettingsItemWrapper } from './SessionSettingListItem';
|
||||||
|
|
||||||
|
export const ZoomingSessionSlider = (props: { onSliderChange?: (value: number) => void }) => {
|
||||||
|
const forceUpdate = useUpdate();
|
||||||
|
const handleSlider = (valueToForward: number) => {
|
||||||
|
props?.onSliderChange?.(valueToForward);
|
||||||
|
window.setSettingValue('zoom-factor-setting', valueToForward);
|
||||||
|
window.updateZoomFactor();
|
||||||
|
forceUpdate();
|
||||||
|
};
|
||||||
|
const currentValueFromSettings = window.getSettingValue('zoom-factor-setting') || 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SessionSettingsItemWrapper title={window.i18n('zoomFactorSettingTitle')} inline={false}>
|
||||||
|
<div className="slider-wrapper">
|
||||||
|
<Slider
|
||||||
|
dots={true}
|
||||||
|
step={20}
|
||||||
|
min={60}
|
||||||
|
max={200}
|
||||||
|
defaultValue={currentValueFromSettings}
|
||||||
|
onAfterChange={handleSlider}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="slider-info">
|
||||||
|
<p>{currentValueFromSettings}%`</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SessionSettingsItemWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue