Updated React dialogs to SessionModals

_locales/en/messages.json

@@ -2260,13 +2260,11 @@
     "message": "Editing Profile"
   },
 
-
   "editProfileModalTitle": {
     "message": "Edit Profile",
     "description": "Title for the Edit Profile modal"
   },
 
-
   "profileName": {
     "message": "Profile Name"
   },

background.html

@@ -60,7 +60,6 @@
       </div>
     </div>
     <div class='conversation-stack'>
-      <div id='settings-container'></div>
       <div class='conversation placeholder'>
         <div class='conversation-header'></div>
         <div class='container'>
@@ -701,7 +700,6 @@
   <script type='text/javascript' src='js/views/last_seen_indicator_view.js'></script>
   <script type='text/javascript' src='js/views/scroll_down_button_view.js'></script>
   <script type='text/javascript' src='js/views/toast_view.js'></script>
-  <script type='text/javascript' src='js/views/session_settings_view.js'></script>
   <script type='text/javascript' src='js/views/session_toast_view.js'></script>
   <script type='text/javascript' src='js/views/session_toggle_view.js'></script>
   <script type='text/javascript' src='js/views/session_modal_view.js'></script>

js/background.js

@@ -802,17 +802,13 @@
       appView.openConversation(groupId, {});
     };
 
+    // $(document).ready(() => {
+    //   window.settingsView = new Whisper.SessionSettingsView({
+    //     el: $('#settings-container'),
+    //   });
+    //   window.settingsView.render();
+    // });
 
-    
-    $(document).ready(() => {
-      window.settingsView = new Whisper.SessionSettingsView({
-        el: $('#settings-container'),
-      });
-      window.settingsView.render();
-    });
-
-
-    
     window.generateID = () =>
       Math.random()
         .toString(36)

js/modules/signal.js

@@ -50,8 +50,9 @@ const {
 } = require('../../ts/components/conversation/CreateGroupDialog');
 const { EditProfileDialog } = require('../../ts/components/EditProfileDialog');
 const { UserDetailsDialog } = require('../../ts/components/UserDetailsDialog');
-const { DevicePairingDialog } = require('../../ts/components/DevicePairingDialog');
-const { SessionSettings } = require('../../ts/components/session/SessionSettings');
+const {
+  SessionSettings,
+} = require('../../ts/components/session/SessionSettings');
 const { SessionToast } = require('../../ts/components/session/SessionToast');
 const { SessionToggle } = require('../../ts/components/session/SessionToggle');
 const { SessionModal } = require('../../ts/components/session/SessionModal');
@@ -250,7 +251,6 @@ exports.setup = (options = {}) => {
     CreateGroupDialog,
     EditProfileDialog,
     UserDetailsDialog,
-    DevicePairingDialog,
     SessionRegistrationView,
     ConfirmDialog,
     UpdateGroupDialog,

js/views/session_settings_view.js

@@ -2,30 +2,27 @@
 
 // eslint-disable-next-line func-names
 (function() {
-    'use strict';
-  
-    window.Whisper = window.Whisper || {};
-  
-    Whisper.SessionSettingsView = Whisper.View.extend({
-      initialize(options) {
-        console.log(options);
+  'use strict';
 
-        this.render();
-      },
-      render() {
-        this.settingsView = new Whisper.ReactWrapperView({
-          className: 'session-settings',
-          Component: window.Signal.Components.SessionSettings,
-          props: {
-            i18n,
-          },
-        });
-  
-        this.$el.append(this.settingsView.el);
-      },
-      close() {
-        this.remove();
-      },
-    });
-})();
+  window.Whisper = window.Whisper || {};
+
+  Whisper.SessionSettingsView = Whisper.View.extend({
+    initialize() {
+      this.render();
+    },
+    render() {
+      this.settingsView = new Whisper.ReactWrapperView({
+        className: 'session-settings',
+        Component: window.Signal.Components.SessionSettings,
+        props: {
+          i18n,
+        },
+      });
 
+      this.$el.append(this.settingsView.el);
+    },
+    close() {
+      this.remove();
+    },
+  });
+})();

stylesheets/_session.scss

@@ -529,7 +529,8 @@ label {
     font-size: 15px;
     font-weight: 700;
 
-    &__icons, &__close {
+    &__icons,
+    &__close {
       width: 60px;
     }
     &__icons {
@@ -551,7 +552,7 @@ label {
     line-height: 16px;
     font-size: 13px;
 
-    .message{
+    .message {
       text-align: center;
     }
   }
@@ -560,14 +561,13 @@ label {
     display: flex;
     justify-content: flex-end;
 
-    &__center{
+    &__center {
       align-items: center;
     }
     .session-button {
       margin-left: $session-margin-sm;
     }
   }
-
 }
 
 .session-toggle {
@@ -680,16 +680,8 @@ label {
   }
 }
 
-
-
 .edit-profile-dialog .image-upload-section {
   position: absolute;
   margin-top: 50px;
   margin-left: 75px;
 }
-
-#settings-container {
-  width: 100%;
-  height: 100%;
-  background-color: blue;
-}

ts/components/ConfirmDialog.tsx

@@ -19,20 +19,24 @@ export class ConfirmDialog extends React.Component<Props> {
 
   public render() {
     return (
-      <SessionModal title={this.props.titleText} onClose={() => null} onOk={() => null}>
-        <div className="spacer-md"></div>
+      <SessionModal
+        title={this.props.titleText}
+        onClose={() => null}
+        onOk={() => null}
+      >
+        <div className="spacer-md" />
         <p className="messageText">{this.props.messageText}</p>
-        <div className="spacer-md"></div>
+        <div className="spacer-md" />
 
         <div className="session-modal__button-group">
-          <SessionButton 
-            text = {this.props.okText}
-            onClick = {this.props.onConfirm}
+          <SessionButton
+            text={this.props.okText}
+            onClick={this.props.onConfirm}
           />
-          
-          <SessionButton 
-            text = {this.props.cancelText}
-            onClick = {this.props.onClose}
+
+          <SessionButton
+            text={this.props.cancelText}
+            onClick={this.props.onClose}
           />
         </div>
       </SessionModal>

ts/components/EditProfileDialog.tsx

@@ -2,10 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 import { Avatar } from './Avatar';
 
-import { SessionModal } from './session/SessionModal';
 import { SessionButton, SessionButtonColor } from './session/SessionButton';
-import { SessionIconButton, SessionIconType, SessionIconSize } from './session/icon';
-
+import {
+  SessionIconButton,
+  SessionIconSize,
+  SessionIconType,
+} from './session/icon';
+import { SessionModal } from './session/SessionModal';
 
 declare global {
   interface Window {
@@ -85,23 +88,23 @@ export class EditProfileDialog extends React.Component<Props, State> {
                 name="name"
                 onChange={this.onFileSelected}
               />
-              
-                <SessionIconButton
-                  iconType = {SessionIconType.Upload}
-                  iconSize = {SessionIconSize.Large}
-                  onClick={() => {
-                    const el = this.inputEl.current;
-                    if (el) {
-                      el.click();
-                    }
-                  }}
-                />
+
+              <SessionIconButton
+                iconType={SessionIconType.Upload}
+                iconSize={SessionIconSize.Large}
+                onClick={() => {
+                  const el = this.inputEl.current;
+                  if (el) {
+                    el.click();
+                  }
+                }}
+              />
             </div>
           </div>
         </div>
 
-        <div className="spacer md"></div>
-        
+        <div className="spacer md" />
+
         <input
           type="text"
           className="profile-name"
@@ -114,8 +117,8 @@ export class EditProfileDialog extends React.Component<Props, State> {
         />
         <div className="message">{i18n('editProfileDisplayNameWarning')}</div>
         <span className={errorMessageClasses}>{this.state.errorMessage}</span>
-        
-        <div className="spacer-lg"></div>
+
+        <div className="spacer-lg" />
 
         <div className="session-modal__button-group">
           <SessionButton

ts/components/UserDetailsDialog.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { Avatar } from './Avatar';
 
 import { SessionModal } from './session/SessionModal';
-import { SessionButton, SessionButtonType, SessionButtonColor } from './session/SessionButton';
+import {
+  SessionButton,
+  SessionButtonColor,
+  SessionButtonType,
+} from './session/SessionButton';
 
 declare global {
   interface Window {
@@ -32,7 +36,7 @@ export class UserDetailsDialog extends React.Component<Props> {
 
   public render() {
     const i18n = this.props.i18n;
-    
+
     return (
       <SessionModal
         title={this.props.profileName}
@@ -46,10 +50,10 @@ export class UserDetailsDialog extends React.Component<Props> {
 
         <div className="session-modal__button-group__center">
           <SessionButton
-              text={i18n('startConversation')}
-              buttonType={SessionButtonType.Default}
-              buttonColor={SessionButtonColor.Primary}
-              onClick={this.onClickStartConversation}
+            text={i18n('startConversation')}
+            buttonType={SessionButtonType.Default}
+            buttonColor={SessionButtonColor.Primary}
+            onClick={this.onClickStartConversation}
           />
         </div>
       </SessionModal>

ts/components/conversation/CreateGroupDialog.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { Contact, MemberList } from './MemberList';
 
+import { SessionModal } from './../session/SessionModal';
+
 declare global {
   interface Window {
     Lodash: any;
@@ -92,8 +94,7 @@ export class CreateGroupDialog extends React.Component<Props, State> {
     );
 
     return (
-      <div className="content">
-        <p className="titleText">{titleText}</p>
+      <SessionModal title={titleText} onClose={() => null} onOk={() => null}>
         <p className={errorMessageClasses}>{this.state.errorMessage}</p>
         <input
           type="text"
@@ -123,7 +124,7 @@ export class CreateGroupDialog extends React.Component<Props, State> {
             {okText}
           </button>
         </div>
-      </div>
+      </SessionModal>
     );
   }
 

ts/components/conversation/UpdateGroupDialog.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { Contact, MemberList } from './MemberList';
 
+import { SessionModal } from './../session/SessionModal';
+
 declare global {
   interface Window {
     SMALL_GROUP_SIZE_LIMIT: number;
@@ -105,9 +107,11 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
     );
 
     return (
-      <div className="content">
-        <p className="titleText">{titleText}</p>
+      <SessionModal title={titleText} onClose={() => null} onOk={() => null}>
+        <div className="spacer-md" />
         <p className={errorMessageClasses}>{errorMsg}</p>
+        <div className="spacer-md" />
+
         <input
           type="text"
           id="group-name"
@@ -121,6 +125,7 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
           aria-required={true}
           autoFocus={true}
         />
+
         <div className="friend-selection-list">
           <MemberList
             members={this.state.friendList}
@@ -140,7 +145,7 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
             {okText}
           </button>
         </div>
-      </div>
+      </SessionModal>
     );
   }
 

ts/components/session/SessionModal.tsx

@@ -19,7 +19,6 @@ interface State {
 }
 
 export class SessionModal extends React.PureComponent<Props, State> {
-
   constructor(props: any) {
     super(props);
     this.state = {
@@ -37,34 +36,34 @@ export class SessionModal extends React.PureComponent<Props, State> {
     const { isVisible } = this.state;
 
     return isVisible ? (
-        <div className={classNames('session-modal')}>
-          <div className="session-modal__header">
-            <div className="session-modal__header__close">
-              <SessionIconButton
-                iconType={SessionIconType.Exit}
-                iconSize={SessionIconSize.Small}
-                onClick={this.close}
-              />
-            </div>
-            <div className="session-modal__header__title">{title}</div>
-            <div className="session-modal__header__icons">
-              { headerIconButtons ? headerIconButtons.map((iconItem: any) => {
-                return (
-                  <SessionIconButton
-                    iconType={iconItem.type}
-                    iconSize={SessionIconSize.Medium}
-                  />
-                )
-                }) : null
-              }
-            </div>
+      <div className={classNames('session-modal')}>
+        <div className="session-modal__header">
+          <div className="session-modal__header__close">
+            <SessionIconButton
+              iconType={SessionIconType.Exit}
+              iconSize={SessionIconSize.Small}
+              onClick={this.close}
+            />
           </div>
-
-          <div className="session-modal__body">
-            {this.props.children}
+          <div className="session-modal__header__title">{title}</div>
+          <div className="session-modal__header__icons">
+            {headerIconButtons
+              ? headerIconButtons.map((iconItem: any) => {
+                  return (
+                    <SessionIconButton
+                      key={iconItem.type}
+                      iconType={iconItem.type}
+                      iconSize={SessionIconSize.Medium}
+                    />
+                  );
+                })
+              : null}
           </div>
         </div>
-      ) : null;
+
+        <div className="session-modal__body">{this.props.children}</div>
+      </div>
+    ) : null;
   }
 
   public close() {
@@ -76,7 +75,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
     this.props.onClose();
   }
 
-  public onKeyUp(event: any){
+  public onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':
         this.props.onOk();

ts/components/session/SessionSettings.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-
 interface Props {
   i18n: any;
 }
@@ -12,17 +11,7 @@ export class SessionSettings extends React.Component<Props> {
 
   public render() {
     const i18n = this.props.i18n;
-    
-    return (
-      <div>
-          gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
-          gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
-          gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
-          gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
-          gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
-          gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
-      </div>
-    );
-  }
 
+    return <div />;
+  }
 }