SessionRadio

2020-01-14 17:42:04 +11:00 · 2020-01-14 17:42:04 +11:00 · b97c9ec8e4
parent cc3e206504
commit b97c9ec8e4
7 changed files with 233 additions and 108 deletions
--- 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(
--- 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;
+  }
+}
--- a/ts/components/session/SessionRadio.tsx
+++ 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<Props, State> {
+  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 (
+      <div className={classNames('session-radio', active && 'checked')}>
+        <input type="radio" />
+        <label>{ label } </label>
+      </div>
+    );
+  }
+
+  private clickHandler() {
+    this.setState({
+      active: !this.state.active,
+    });
+  }
+}
--- a/ts/components/session/SessionRadioGroup.tsx
+++ 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<Props, State> {
+  public static defaultProps = {
+    onClick: () => null,
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.clickHandler = this.clickHandler.bind(this);
+  }
+
+  public render() {
+    return (
+      <div
+        className='session-radio-group'
+        onClick={this.clickHandler}
+      >
+        <label className="radio-container">Four
+            <input type="checkbox"/>>
+            <span className="radio-checkmark"></span>
+        </label>
+      </div>
+    );
+  }
+
+  private clickHandler(e: any) {
+    return;
+  }
+}
--- 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<any>;
  onClick?: any;
+  inline?: boolean;
  buttonText?: string;
  buttonColor?: SessionButtonColor;
 }

 export class SessionSettingListItem extends React.Component<Props> {
+  public static defaultProps = {
+    inline: true,
+  }
+  
  public constructor(props: Props) {
    super(props);
    this.state = {};
@ -28,6 +37,7 @@ export class SessionSettingListItem extends React.Component<Props> {
      description,
      type,
      value,
+      inline,
      buttonText,
      buttonColor,
    } = this.props;
@ -35,7 +45,7 @@ export class SessionSettingListItem extends React.Component<Props> {
    return (
      <div className="session-settings-item">
        <div className="session-settings-item__info">
-          <div className="session-settings-item__title">{title}</div>
+          <div className={classNames('session-settings-item__title', inline && 'inline')}>{title}</div>

          {description && (
            <div className="session-settings-item__description">
@ -57,6 +67,13 @@ export class SessionSettingListItem extends React.Component<Props> {
            onClick={this.handleClick}
          />
        )}
+
+        {type === SessionSettingType.Options && (
+          <SessionRadio
+            label="Both sender name and message"
+            active={false}
+          />
+        )}
      </div>
    );
  }
--- 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<SettingsViewProps> {

  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<SettingsViewProps> {
            <div key={setting.id}>
                {renderSettings && !(setting.hidden) && (
                <SessionSettingListItem
-                title={setting.title}
-                description={setting.description}
-                type={setting.type}
-                value={ window.getSettingValue(setting.id, setting.comparisonValue || null) }
-                onClick={() => {
-                    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}
                />
            )}
            </div>
@ -163,18 +135,26 @@ export class SettingsView extends React.Component<SettingsViewProps> {

  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';
+  }
+
 }
--- 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;