Theme toggle and settings abstraction
Vincent
5 years ago
parent
bbf5f8a9f2
commit
8de2ce9e23
@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
|
||||
import { SettingsHeader } from './SessionSettingsHeader';
|
||||
import { SessionSettingListItem } from './SessionSettingListItem';
|
||||
import { SessionButtonColor } from '../SessionButton';
|
||||
|
||||
export enum SessionSettingCategory {
|
||||
General = 'general',
|
||||
Account = 'account',
|
||||
Privacy = 'privacy',
|
||||
Notifications = 'notifications',
|
||||
Devices = 'devices',
|
||||
}
|
||||
|
||||
export enum SessionSettingType {
|
||||
Toggle = 'toggle',
|
||||
Options = 'options',
|
||||
Button = 'button',
|
||||
}
|
||||
|
||||
// Grab initial values from database on startup
|
||||
const localSettings = [
|
||||
{
|
||||
id: 'theme',
|
||||
title: 'Light Mode',
|
||||
description: 'Choose the theme best suited to you',
|
||||
type: SessionSettingType.Toggle,
|
||||
category: SessionSettingCategory.General,
|
||||
afterClick: () => window.toggleTheme(),
|
||||
},
|
||||
{
|
||||
id: 'typingIndicators',
|
||||
title: 'Typing Indicators',
|
||||
description:
|
||||
'See and share when messages are being typed. This setting is optional and applies to all conversations.',
|
||||
type: SessionSettingType.Toggle,
|
||||
category: SessionSettingCategory.Privacy,
|
||||
},
|
||||
{
|
||||
id: 'screenLock',
|
||||
title: 'Screen Lock',
|
||||
description:
|
||||
'Unlock Loki Session using your password. Visit notification settings to customise.',
|
||||
type: SessionSettingType.Toggle,
|
||||
category: SessionSettingCategory.Privacy,
|
||||
},
|
||||
{
|
||||
id: 'screenSecurity',
|
||||
title: 'Screen Security',
|
||||
description:
|
||||
'Prevent Loki Session previews from appearing in desktop notifications.',
|
||||
type: SessionSettingType.Toggle,
|
||||
category: SessionSettingCategory.Privacy,
|
||||
},
|
||||
{
|
||||
id: 'linkPreviews',
|
||||
title: 'Send Link Previews',
|
||||
description:
|
||||
'Supported for Imgur, Instagram, Pinterest, Reddit and YouTube.',
|
||||
type: SessionSettingType.Toggle,
|
||||
category: SessionSettingCategory.Privacy,
|
||||
},
|
||||
{
|
||||
id: 'clearConversationHistory',
|
||||
title: 'Clear Conversation History',
|
||||
category: SessionSettingCategory.Privacy,
|
||||
type: SessionSettingType.Button,
|
||||
buttonText: 'Clear',
|
||||
buttonColor: SessionButtonColor.Danger,
|
||||
},
|
||||
{
|
||||
id: 'changePassword',
|
||||
title: 'Change Password',
|
||||
category: SessionSettingCategory.Account,
|
||||
type: SessionSettingType.Button,
|
||||
buttonText: 'Change',
|
||||
buttonColor: SessionButtonColor.Primary,
|
||||
},
|
||||
{
|
||||
id: 'removePassword',
|
||||
title: 'Remove Password',
|
||||
category: SessionSettingCategory.Account,
|
||||
type: SessionSettingType.Button,
|
||||
buttonText: 'Remove',
|
||||
buttonColor: SessionButtonColor.Danger,
|
||||
},
|
||||
];
|
||||
|
||||
export interface SettingsViewProps {
|
||||
category: SessionSettingCategory;
|
||||
}
|
||||
|
||||
export class SettingsView extends React.Component<SettingsViewProps> {
|
||||
public settingsViewRef: React.RefObject<HTMLDivElement>;
|
||||
|
||||
public constructor(props: any) {
|
||||
super(props);
|
||||
this.settingsViewRef = React.createRef();
|
||||
}
|
||||
|
||||
public renderSettingInCategory() {
|
||||
return (
|
||||
<>
|
||||
{localSettings.map(setting => {
|
||||
const { category } = this.props;
|
||||
const renderSettings = setting.category === category;
|
||||
|
||||
return (
|
||||
<div key={setting.id}>
|
||||
{renderSettings && (
|
||||
<SessionSettingListItem
|
||||
title={setting.title}
|
||||
description={setting.description}
|
||||
type={setting.type}
|
||||
value={window.getSettingValue(setting.id)}
|
||||
onClick={() => {
|
||||
SettingsManager.updateSetting(setting);
|
||||
}}
|
||||
buttonText={setting.buttonText || undefined}
|
||||
buttonColor={setting.buttonColor || undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { category } = this.props;
|
||||
|
||||
return (
|
||||
<div className="session-settings">
|
||||
<SettingsHeader category={category} />
|
||||
<div ref={this.settingsViewRef} className="session-settings-list">
|
||||
{this.renderSettingInCategory()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class SettingsManager {
|
||||
public static updateSetting(item: any) {
|
||||
if (item.type === SessionSettingType.Toggle) {
|
||||
//alert(`You clicked a toggle with ID: ${item.id}`);
|
||||
// Manage toggle events
|
||||
}
|
||||
|
||||
// If there's an onClick function, execute it
|
||||
item.afterClick && item.afterClick();
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
|
||||
|
||||
import { SettingsViewProps } from './SessionSettings';
|
||||
|
||||
export class SettingsHeader extends React.Component<SettingsViewProps> {
|
||||
public constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public focusSearch() {
|
||||
$('.left-pane-setting-section .session-search-input input').focus();
|
||||
}
|
||||
|
||||
render() {
|
||||
const category = String(this.props.category);
|
||||
const categoryTitlePrefix = category[0].toUpperCase() + category.substr(1);
|
||||
// Remove 's' on the end to keep words in singular form
|
||||
const categoryTitle =
|
||||
categoryTitlePrefix[categoryTitlePrefix.length - 1] === 's'
|
||||
? categoryTitlePrefix.slice(0, -1) + ' Settings'
|
||||
: categoryTitlePrefix + ' Settings';
|
||||
|
||||
return (
|
||||
<div className="session-settings-header">
|
||||
{categoryTitle}
|
||||
<SessionIconButton
|
||||
iconType={SessionIconType.Search}
|
||||
iconSize={SessionIconSize.Large}
|
||||
onClick={this.focusSearch}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue