SessionRadio

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(

stylesheets/_session.scss

@@ -990,9 +990,11 @@ label {
     padding: $session-margin-lg;
     border-bottom: 2px solid $session-shade-5;
 
-    display: flex;
+    &.inline {
-    align-items: center;
+      display: flex;
-    justify-content: space-between;
+      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;
+  }
+}

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,
+    });
+  }
+}

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

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>
     );
   }

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);
+    // Grab initial values from database on startup
-    console.log(Settings);
+    // ID corresponds to instalGetter parameters in preload.js
-    console.log(Settings);
+    // 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}
+                    title={setting.title}
-                description={setting.description}
+                    description={setting.description}
-                type={setting.type}
+                    type={setting.type}
-                value={ window.getSettingValue(setting.id, setting.comparisonValue || null) }
+                    value={ window.getSettingValue(setting.id, setting.comparisonValue || null) }
-                onClick={() => {
+                    onClick={() => {
-                    this.updateSetting(setting);
+                        this.updateSetting(setting);
-                }}
+                    }}
-                buttonText={setting.buttonText || undefined}
+                    buttonText={setting.childProps.buttonText || undefined}
-                buttonColor={setting.buttonColor || 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 no custom afterClick function given, alter values in storage here
-      if (!item.setFn) {
+        if (!item.setFn) {
-        // Switch to opposite state
+            // Switch to opposite state
-        const newValue = !window.getSettingValue(item.id);
+            const newValue = !window.getSettingValue(item.id);
-        window.setSettingValue(item.id, newValue);
+            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';
+  }
+
 }

ts/global.d.ts

@@ -25,7 +25,7 @@ interface Window {
   showAddServerDialog: any;
   deleteAccount: any;
   toggleTheme: any;
-  setHideMenuBar: any;
+  toggleMenuBar: any;
   getSettingValue: any;
   setSettingValue: any;