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 Slider from 'rc-slider';
|
||||
|
||||
import { SessionToggle } from '../SessionToggle';
|
||||
import { SessionButton } from '../SessionButton';
|
||||
import { SessionRadioGroup } from '../SessionRadioGroup';
|
||||
import { SessionButton, SessionButtonColor } from '../SessionButton';
|
||||
import { SessionConfirmDialogProps } from '../../dialog/SessionConfirm';
|
||||
import { SessionSettingType } from './LocalSettings';
|
||||
|
||||
type Props = {
|
||||
type ButtonSettingsProps = {
|
||||
title?: string;
|
||||
description?: string;
|
||||
type: SessionSettingType | undefined;
|
||||
value: any;
|
||||
options?: Array<any>;
|
||||
onClick?: any;
|
||||
onSliderChange?: any;
|
||||
content: any;
|
||||
confirmationDialogParams?: SessionConfirmDialogProps;
|
||||
buttonColor: SessionButtonColor;
|
||||
buttonText: string;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export const SessionSettingListItem = (props: Props) => {
|
||||
const handleSlider = (valueToForward: any) => {
|
||||
if (props.onSliderChange) {
|
||||
props.onSliderChange(valueToForward);
|
||||
}
|
||||
|
||||
setSliderValue(valueToForward);
|
||||
};
|
||||
|
||||
const [sliderValue, setSliderValue] = useState(null);
|
||||
const SettingsTitleAndDescription = (props: { title?: string; description?: string }) => {
|
||||
return (
|
||||
<div className="session-settings-item__info">
|
||||
<div className="session-settings-item__title">{props.title}</div>
|
||||
|
||||
const { title, description, type, value, content } = props;
|
||||
const inline = !!type && ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
|
||||
{props.description && (
|
||||
<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 (
|
||||
<div className={classNames('session-settings-item', inline && 'inline')}>
|
||||
<div className="session-settings-item__info">
|
||||
<div className="session-settings-item__title">{title}</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>
|
||||
)}
|
||||
<div className={classNames('session-settings-item', props.inline && 'inline')}>
|
||||
<SettingsTitleAndDescription title={props.title} description={props.description} />
|
||||
<SessionSettingsContent>{props.children}</SessionSettingsContent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
{type === SessionSettingType.Button && (
|
||||
<SessionButton
|
||||
text={content.buttonText}
|
||||
buttonColor={content.buttonColor}
|
||||
onClick={() => props.onClick?.()}
|
||||
/>
|
||||
)}
|
||||
export const SessionToggleWithDescription = (props: {
|
||||
title?: string;
|
||||
description?: string;
|
||||
active: boolean;
|
||||
onClickToggle: () => void;
|
||||
confirmationDialogParams?: SessionConfirmDialogProps;
|
||||
}) => {
|
||||
const { title, description, active, onClickToggle, confirmationDialogParams } = props;
|
||||
|
||||
{type === SessionSettingType.Options && (
|
||||
<SessionRadioGroup
|
||||
initialItem={content.options.initialItem}
|
||||
group={content.options.group}
|
||||
items={content.options.items}
|
||||
onClick={(selectedRadioValue: string) => {
|
||||
props.onClick(selectedRadioValue);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
return (
|
||||
<SessionSettingsItemWrapper title={title} description={description} inline={true}>
|
||||
<SessionToggle
|
||||
active={active}
|
||||
onClick={onClickToggle}
|
||||
confirmationDialogParams={confirmationDialogParams}
|
||||
/>
|
||||
</SessionSettingsItemWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
{type === SessionSettingType.Slider && (
|
||||
<div className="slider-wrapper">
|
||||
<Slider
|
||||
dots={true}
|
||||
step={content.step}
|
||||
min={content.min}
|
||||
max={content.max}
|
||||
defaultValue={currentSliderValue}
|
||||
onAfterChange={handleSlider}
|
||||
/>
|
||||
export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
|
||||
const { title, description, buttonColor, buttonText, onClick } = props;
|
||||
|
||||
<div className="slider-info">
|
||||
<p>{content.info(currentSliderValue)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<SessionSettingsItemWrapper title={title} description={description} inline={true}>
|
||||
<SessionButton text={buttonText} buttonColor={buttonColor} onClick={onClick} />
|
||||
</SessionSettingsItemWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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