From b97c9ec8e47073b0cf73c9ade5246dc38f15b69c Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 14 Jan 2020 17:42:04 +1100 Subject: [PATCH] SessionRadio --- js/background.js | 5 + stylesheets/_session.scss | 48 ++++- ts/components/session/SessionRadio.tsx | 42 ++++ ts/components/session/SessionRadioGroup.tsx | 39 ++++ .../settings/SessionSettingListItem.tsx | 19 +- .../session/settings/SessionSettings.tsx | 186 ++++++++---------- ts/global.d.ts | 2 +- 7 files changed, 233 insertions(+), 108 deletions(-) create mode 100644 ts/components/session/SessionRadio.tsx create mode 100644 ts/components/session/SessionRadioGroup.tsx diff --git a/js/background.js b/js/background.js index b3d720872..8f8738fc4 100644 --- a/js/background.js +++ b/js/background.js @@ -906,6 +906,11 @@ window.Events.setThemeSetting(updatedTheme); }; + window.toggleMenuBar = () => { + const newValue = ! window.getSettingValue('hide-menu-bar'); + window.Events.setHideMenuBar(newValue); + } + window.sendGroupInvitations = (serverInfo, pubkeys) => { pubkeys.forEach(async pubkey => { const convo = await ConversationController.getOrCreateAndWait( diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 9951a1085..e2a5cbbfc 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -990,9 +990,11 @@ label { padding: $session-margin-lg; border-bottom: 2px solid $session-shade-5; - display: flex; - align-items: center; - justify-content: space-between; + &.inline { + display: flex; + align-items: center; + justify-content: space-between; + } &__info { padding-right: $session-margin-lg; @@ -1065,3 +1067,43 @@ label { border: none; } } + +.session-radio { + input[type="radio"] { + border: 0; + opacity: 0; + padding: 0; + position: absolute; + } + + label { + margin-right: 1em; + } + + label:before { + content: ""; + display: inline-block; + width: 0.5em; + height: 0.5em; + margin-right: 0.5em; + border-radius: 100%; + vertical-align: -3px; + border: 2px solid $session-color-white; + padding: 0.2em; + background-color: transparent; + background-clip: content-box; + } + + input:hover + label:before { + border-color: $session-color-white; + } + + input:checked + label:before { + background-color: $session-color-white; + border-color: $session-color-white; + } + + label:before { + transition: all $session-transition-duration ease; + } +} \ No newline at end of file diff --git a/ts/components/session/SessionRadio.tsx b/ts/components/session/SessionRadio.tsx new file mode 100644 index 000000000..1e84b4fe7 --- /dev/null +++ b/ts/components/session/SessionRadio.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import classNames from 'classnames'; + + +interface Props { + label: string; + active: boolean; +} + +interface State { + active: boolean; +} + +export class SessionRadio extends React.PureComponent { + constructor(props: any) { + super(props); + this.clickHandler = this.clickHandler.bind(this); + + this.state = { + active: this.props.active, + } + } + + public render() { + const active = this.state.active; + const { label } = this.props; + + + return ( +
+ + +
+ ); + } + + private clickHandler() { + this.setState({ + active: !this.state.active, + }); + } +} diff --git a/ts/components/session/SessionRadioGroup.tsx b/ts/components/session/SessionRadioGroup.tsx new file mode 100644 index 000000000..d2d316445 --- /dev/null +++ b/ts/components/session/SessionRadioGroup.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import classNames from 'classnames'; + +interface Props { + activeItem: Number; +} + +interface State { + activeItem: Number; +} + +export class SessionRadioGroup extends React.PureComponent { + public static defaultProps = { + onClick: () => null, + }; + + constructor(props: any) { + super(props); + this.clickHandler = this.clickHandler.bind(this); + } + + public render() { + return ( +
+ +
+ ); + } + + private clickHandler(e: any) { + return; + } +} diff --git a/ts/components/session/settings/SessionSettingListItem.tsx b/ts/components/session/settings/SessionSettingListItem.tsx index 4635cdc12..f86a4bf09 100644 --- a/ts/components/session/settings/SessionSettingListItem.tsx +++ b/ts/components/session/settings/SessionSettingListItem.tsx @@ -1,8 +1,12 @@ import React from 'react'; +import classNames from 'classnames'; + import { SessionToggle } from '../SessionToggle'; import { SessionButton, SessionButtonColor } from '../SessionButton'; import { SessionSettingType } from './SessionSettings'; +import { SessionRadio } from '../SessionRadio'; + interface Props { title: string; description?: string; @@ -10,11 +14,16 @@ interface Props { value: any; options?: Array; onClick?: any; + inline?: boolean; buttonText?: string; buttonColor?: SessionButtonColor; } export class SessionSettingListItem extends React.Component { + public static defaultProps = { + inline: true, + } + public constructor(props: Props) { super(props); this.state = {}; @@ -28,6 +37,7 @@ export class SessionSettingListItem extends React.Component { description, type, value, + inline, buttonText, buttonColor, } = this.props; @@ -35,7 +45,7 @@ export class SessionSettingListItem extends React.Component { return (
-
{title}
+
{title}
{description && (
@@ -57,6 +67,13 @@ export class SessionSettingListItem extends React.Component { onClick={this.handleClick} /> )} + + {type === SessionSettingType.Options && ( + + )}
); } diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 19eb635c7..11f79f318 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/ts/components/session/settings/SessionSettings.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { SettingsHeader } from './SessionSettingsHeader'; import { SessionSettingListItem } from './SessionSettingListItem'; -import { SessionButtonColor } from '../SessionButton'; + export enum SessionSettingCategory { General = 'general', @@ -16,91 +16,11 @@ export enum SessionSettingType { Toggle = 'toggle', Options = 'options', Button = 'button', + Slider = 'slider', } //const { Settings } = window.Signal.Types; -// Grab initial values from database on startup -const localSettings = [ - { - id: 'theme-setting', - title: 'Light Mode', - hidden: true, - comparisonValue: 'light', - description: 'Choose the theme best suited to you', - type: SessionSettingType.Toggle, - category: SessionSettingCategory.General, - setFn: window.toggleTheme, - }, - { - id: 'hide-menu-bar', - title: 'Hide Menu Bar', - //hidden: !Settings.isHideMenuBarSupported(), - type: SessionSettingType.Toggle, - category: SessionSettingCategory.General, - setFn: window.setHideMenuBar, - }, - - - - { - id: 'typing-indicators-setting', - 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: 'qwer', - title: 'Screen Lock', - description: - 'Unlock Loki Session using your password. Visit notification settings to customise.', - type: SessionSettingType.Toggle, - category: SessionSettingCategory.Privacy, - }, - { - id: 'qewrtrg', - title: 'Screen Security', - description: - 'Prevent Loki Session previews from appearing in desktop notifications.', - type: SessionSettingType.Toggle, - category: SessionSettingCategory.Privacy, - }, - { - id: 'erhe', - title: 'Send Link Previews', - description: - 'Supported for Imgur, Instagram, Pinterest, Reddit and YouTube.', - type: SessionSettingType.Toggle, - category: SessionSettingCategory.Privacy, - }, - { - id: 'qwefwef', - title: 'Clear Conversation History', - category: SessionSettingCategory.Privacy, - type: SessionSettingType.Button, - buttonText: 'Clear', - buttonColor: SessionButtonColor.Danger, - }, - { - id: 'ergreg', - title: 'Change Password', - category: SessionSettingCategory.Account, - type: SessionSettingType.Button, - buttonText: 'Change', - buttonColor: SessionButtonColor.Primary, - }, - { - id: 'etyjhnyth', - title: 'Remove Password', - category: SessionSettingCategory.Account, - type: SessionSettingType.Button, - buttonText: 'Remove', - buttonColor: SessionButtonColor.Danger, - }, -]; - export interface SettingsViewProps { category: SessionSettingCategory; } @@ -115,11 +35,63 @@ export class SettingsView extends React.Component { public renderSettingInCategory() { const { Settings } = window.Signal.Types; - console.log(Settings); - console.log(Settings); - console.log(Settings); - console.log(Settings); - + + // Grab initial values from database on startup + // ID corresponds to instalGetter parameters in preload.js + // They are NOT arbitrary; add with caution + const localSettings = [ + { + id: 'theme-setting', + title: 'Light Mode', + description: 'Choose the theme best suited to you', + hidden: true, + comparisonValue: 'light', + type: SessionSettingType.Options, + category: SessionSettingCategory.General, + setFn: window.toggleTheme, + childProps: {}, + }, + { + id: 'hide-menu-bar', + title: 'Hide Menu Bar', + description: 'Toggle system menu bar visibi', + hidden: !Settings.isHideMenuBarSupported(), + type: SessionSettingType.Toggle, + category: SessionSettingCategory.General, + setFn: window.toggleMenuBar, + childProps: {}, + }, + { + id: 'notification-setting', + title: 'Notifications', + description: 'When messages arive, display notifications that reveal:', + type: SessionSettingType.Options, + category: SessionSettingCategory.Notifications, + setFn: () => window.setSettingValue(this.getNotificationPreference()), + childProps: { + options: [ + { + id: 'default', + desc: 'Both sender name and message', + }, + { + id: 'name', + desc: 'Only sender name', + }, + { + id: 'count', + desc: 'Neither name nor messsage', + }, + { + id: 'off', + desc: 'Disable notificationss', + }, + ], + activeIndex: 0 + }, + }, + ]; + return ( <> {localSettings.map(setting => { @@ -130,15 +102,15 @@ export class SettingsView extends React.Component {
{renderSettings && !(setting.hidden) && ( { - this.updateSetting(setting); - }} - buttonText={setting.buttonText || undefined} - buttonColor={setting.buttonColor || undefined} + title={setting.title} + description={setting.description} + type={setting.type} + value={ window.getSettingValue(setting.id, setting.comparisonValue || null) } + onClick={() => { + this.updateSetting(setting); + }} + buttonText={setting.childProps.buttonText || undefined} + buttonColor={setting.childProps.buttonColor || undefined} /> )}
@@ -163,18 +135,26 @@ export class SettingsView extends React.Component { public updateSetting(item: any) { if (item.type === SessionSettingType.Toggle) { - // If no custom afterClick function given, alter values in storage here - if (!item.setFn) { - // Switch to opposite state - const newValue = !window.getSettingValue(item.id); - window.setSettingValue(item.id, newValue); - } + // If no custom afterClick function given, alter values in storage here + if (!item.setFn) { + // Switch to opposite state + const newValue = !window.getSettingValue(item.id); + window.setSettingValue(item.id, newValue); + } } // If there's a custom afterClick function, // execute it instead of automatically updating settings - item.setFn && item.setFn(); + if (item.setFn) { + item.setFn(); + } return; } + + public getNotificationPreference(){ + const value = window.getSettingValue('notification-setting'); + return value || 'default'; + } + } diff --git a/ts/global.d.ts b/ts/global.d.ts index 75e3798b5..dae15b102 100644 --- a/ts/global.d.ts +++ b/ts/global.d.ts @@ -25,7 +25,7 @@ interface Window { showAddServerDialog: any; deleteAccount: any; toggleTheme: any; - setHideMenuBar: any; + toggleMenuBar: any; getSettingValue: any; setSettingValue: any;