Modal blurs and stylistic simplifications

background.html

@@ -41,7 +41,6 @@
 
   <script type='text/x-tmpl-mustache' id='two-column'>
     <div id='session-toast-container'></div>
-    <div id='session-confirm-container'></div>
     <div class='gutter'>
       <div class='network-status-container'></div>
       <div class='left-pane-placeholder'></div>
@@ -156,75 +155,6 @@
       </div>
     </div>
   </script>
-  <script type='text/x-tmpl-mustache' id='password-change-dialog'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <input type='password' id='old-password' placeholder='Old password' autofocus>
-      <input type='password' id='new-password' placeholder='New password' autofocus>
-      <input type='password' id='new-password-confirmation' placeholder='Type in your new password again' autofocus>
-      <div class='error'></div>
-      <div class='buttons'>
-        <button class='cancel' tabindex='2'>{{ cancel }}</button>
-        <button class='ok' tabindex='1'>{{ ok }}</button>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='nickname-dialog'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <input type='text' name='name' class='name' placeholder='Type a name' autofocus maxlength='25'>
-      {{ #message }}
-        <div class='message'>{{ message }}</div>
-      {{ /message }}
-      <div class='buttons'>
-        <button class='cancel' tabindex='2'>{{ cancel }}</button>
-        <button class='ok' tabindex='1'>{{ ok }}</button>
-      </div>
-    </div>
-  </script>
-
-  <script type='text/x-tmpl-mustache' id='device-pairing-words-dialog'>
-    <div class="content">
-        <h4>{{ title }}</h4>
-        <p>{{ secretWords }}</p>
-        <button id='close'>{{ closeText }}</button>
-    </div>
-  </script>
-
-  <script type='text/x-tmpl-mustache' id='connecting-to-server-template'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <div class='buttons'>
-        <button class='cancel' tabindex='2'>{{ cancel }}</button>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='add-server-template'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <input type='text' id='server-url' placeholder='Server Url' autofocus>
-      <div class='error'></div>
-      <div class='buttons'>
-        <button class='cancel' tabindex='2'>{{ cancel }}</button>
-        <button class='ok' tabindex='1'>{{ ok }}</button>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='qr-code-template'>
-    <div class="content">
-      <div id="qr">
-      </div>
-      <button class='ok' tabindex='1'>{{ ok }}</button>
-    </div>
-  </script>
   <script type='text/x-tmpl-mustache' id='identicon-svg'>
       <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
          <circle cx='50' cy='50' r='40' fill='{{ color }}' />

js/background.js

@@ -802,7 +802,7 @@
 
     window.confirmationDialog = params => {
       const confirmDialog = new Whisper.SessionConfirmView({
-        el: $('#session-confirm-container'),
+        el: $('body'),
         title: params.title,
         message: params.message,
         messageSub: params.messageSub || undefined,
@@ -969,7 +969,7 @@
         window.toasts.set(
           toastID,
           new Whisper.SessionToastView({
-            el: $('#session-toast-container'),
+            el: $('body'),
           })
         );
 

js/views/app_view.js

@@ -181,11 +181,11 @@
     },
     showEditProfileDialog(options) {
       const dialog = new Whisper.EditProfileDialogView(options);
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showUserDetailsDialog(options) {
       const dialog = new Whisper.UserDetailsDialogView(options);
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showNicknameDialog({ pubKey, title, message, nickname, onOk, onCancel }) {
       const _title = title || `Change nickname for ${pubKey}`;
@@ -196,16 +196,16 @@
         resolve: onOk,
         reject: onCancel,
       });
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
       dialog.focusInput();
     },
     showPasswordDialog(options) {
       const dialog = new Whisper.PasswordDialogView(options);
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showSeedDialog() {
       const dialog = new Whisper.SeedDialogView();
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showQRDialog(string) {
       const dialog = new Whisper.QRDialogView({
@@ -215,12 +215,11 @@
     },
     showDevicePairingDialog(options) {
       const dialog = new Whisper.DevicePairingDialogView(options);
-
+      this.el.prepend(dialog.el);
-      this.el.append(dialog.el);
     },
     showDevicePairingWordsDialog() {
       const dialog = new Whisper.DevicePairingWordsDialogView();
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showCreateGroup() {
       // TODO: make it impossible to open 2 dialogs as once
@@ -231,7 +230,7 @@
     },
     showUpdateGroupDialog(groupConvo) {
       const dialog = new Whisper.UpdateGroupDialogView(groupConvo);
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showSessionRestoreConfirmation(options) {
       const dialog = new Whisper.ConfirmSessionResetView(options);

js/views/session_confirm_view.js

@@ -28,12 +28,12 @@
       this.$('.session-confirm-wrapper').remove();
 
       this.confirmView = new Whisper.ReactWrapperView({
-        className: 'session-confirm-wrapper',
+        className: 'loki-dialog modal session-confirm-wrapper',
         Component: window.Signal.Components.SessionConfirm,
         props: this.props,
       });
 
-      this.$el.append(this.confirmView.el);
+      this.$el.prepend(this.confirmView.el);
     },
 
     ok() {

js/views/session_toast_view.js

@@ -25,7 +25,7 @@
         props: this.props,
       });
 
-      this.$el.append(this.toastView.el);
+      this.$el.prepend(this.toastView.el);
     },
 
     update(options) {

preload.js

@@ -67,6 +67,8 @@ window.CONSTANTS = {
   MAX_GROUP_NAME_LENGTH: 64,
   DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'),
   MAX_CONNECTION_DURATION: 5000,
+  // Limited due to the proof-of-work requirement
+  SMALL_GROUP_SIZE_LIMIT: 10,
 };
 
 window.versionInfo = {
@@ -492,8 +494,6 @@ window.shortenPubkey = pubkey => `(...${pubkey.substring(pubkey.length - 6)})`;
 
 window.pubkeyPattern = /@[a-fA-F0-9]{64,66}\b/g;
 
-// Limited due to the proof-of-work requirement
-window.SMALL_GROUP_SIZE_LIMIT = 10;
 
 // TODO: activate SealedSender once it is ready on all platforms
 window.lokiFeatureFlags = {

stylesheets/_mentions.scss

@@ -94,8 +94,10 @@
 
 .friend-selection-list {
   max-height: 240px;
-  overflow-y: scroll;
+  overflow-y: auto;
   margin: 4px;
+  border-top: 1px solid #2f2f2f;
+  border-bottom: 1px solid #2f2f2f;
 
   .check-mark {
     float: right;

stylesheets/_session.scss

@@ -115,6 +115,7 @@ $main-view-header-height: 85px;
 $session-left-pane-width: 300px;
 $session-left-pane-sections-container-width: 80px;
 
+
 div.spacer-sm {
   height: $session-margin-sm;
 }
@@ -134,6 +135,13 @@ div.spacer-lg {
   color: rgba($color, 0.6);
 }
 
+
+// Blur for modals
+.loki-dialog ~ .index.inbox{
+  filter: blur(1px);
+  transition: filter 0.1s;
+}
+
 .text-subtle {
   opacity: 0.6;
 }
@@ -597,7 +605,7 @@ label {
   cursor: pointer;
 }
 
-#session-toast-container {
+.session-toast-wrapper {
   position: fixed;
   right: $session-margin-lg;
   bottom: $session-margin-lg;
@@ -1761,3 +1769,9 @@ input {
     opacity: 0.8;
   }
 }
+
+
+.invite-friends-container {
+  height: $session-icon-size-lg;
+  width: $session-icon-size-lg;
+}

stylesheets/_session_group_panel.scss

@@ -19,7 +19,7 @@
       margin: auto;
     }
 
-    .session-icon-button {
+    .session-icon-button, .invite-friends-container {
       margin: 0 $session-margin-md;
     }
   }

ts/components/conversation/CreateGroupDialog.tsx

@@ -197,10 +197,10 @@ export class CreateGroupDialog extends React.Component<Props, State> {
 
     if (
       updatedFriends.filter(d => d.checkmarked).length >
-      window.SMALL_GROUP_SIZE_LIMIT - 1
+      window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT - 1
     ) {
       const msg = `${this.props.i18n('maxGroupMembersError')} ${
-        window.SMALL_GROUP_SIZE_LIMIT
+        window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
       }`;
       this.onShowError(msg);
 

ts/components/conversation/InviteFriendsDialog.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Contact, MemberList } from './MemberList';
 
 import { SessionModal } from '../session/SessionModal';
 import { SessionButton } from '../session/SessionButton';
+import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
 
 interface Props {
   friendList: Array<any>;
@@ -11,14 +11,8 @@ interface Props {
   onClose: any;
 }
 
-declare global {
-  interface Window {
-    i18n: any;
-  }
-}
-
 interface State {
-  friendList: Array<Contact>;
+  friendList: Array<ContactType>;
 }
 
 export class InviteFriendsDialog extends React.Component<Props, State> {
@@ -59,6 +53,7 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
   }
 
   public render() {
+
     const titleText = `${window.i18n('addingFriends')} ${this.props.chatName}`;
     const cancelText = window.i18n('cancel');
     const okText = window.i18n('ok');
@@ -74,12 +69,7 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
         <div className="spacer-lg" />
 
         <div className="friend-selection-list">
-          <MemberList
+          {this.renderMemberList()}
-            members={this.state.friendList}
-            selected={{}}
-            i18n={window.i18n}
-            onMemberClicked={this.onMemberClicked}
-          />
         </div>
         {hasFriends ? null : (
           <>
@@ -115,6 +105,23 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
     this.closeDialog();
   }
 
+  private renderMemberList() {
+    const members = this.state.friendList;
+
+    return members.map((member: ContactType) => (
+      <SessionMemberListItem
+        member={member}
+        isSelected={false}
+        onSelect={(selectedMember: ContactType) => {
+          this.onMemberClicked(selectedMember);
+        }}
+        onUnselect={(selectedMember: ContactType) => {
+          this.onMemberClicked(selectedMember);
+        }}
+      />
+    ));
+  }
+
   private onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':
@@ -128,15 +135,9 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
     }
   }
 
-  private closeDialog() {
+  private onMemberClicked(clickedMember: ContactType) {
-    window.removeEventListener('keyup', this.onKeyUp);
-
-    this.props.onClose();
-  }
-
-  private onMemberClicked(selected: any) {
     const updatedFriends = this.state.friendList.map(member => {
-      if (member.id === selected.id) {
+      if (member.id === clickedMember.id) {
         return { ...member, checkmarked: !member.checkmarked };
       } else {
         return member;
@@ -150,4 +151,16 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
       };
     });
   }
+
+  private closeDialog() {
+    window.removeEventListener('keyup', this.onKeyUp);
+
+    console.log(this.props.onClose);
+    console.log(this.props.onClose);
+    console.log(this.props.onClose);
+    console.log(this.props.onClose);
+    
+    this.props.onClose();
+  }
+
 }

ts/components/conversation/UpdateGroupDialog.tsx

@@ -4,13 +4,6 @@ import { Contact, MemberList } from './MemberList';
 
 import { SessionModal } from './../session/SessionModal';
 
-declare global {
-  interface Window {
-    SMALL_GROUP_SIZE_LIMIT: number;
-    Lodash: any;
-  }
-}
-
 interface Props {
   titleText: string;
   groupName: string;
@@ -229,9 +222,9 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
 
     const newMemberCount = this.getMemberCount(updatedFriends);
 
-    if (newMemberCount > window.SMALL_GROUP_SIZE_LIMIT) {
+    if (newMemberCount > window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT) {
       const msg = `${this.props.i18n('maxGroupMembersError')} ${
-        window.SMALL_GROUP_SIZE_LIMIT
+        window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
       }`;
       this.onShowError(msg);
 

ts/components/session/SessionChannelSettings.tsx

@@ -50,7 +50,10 @@ export class SessionChannelSettings extends React.Component<Props, any> {
   }
 
   public componentDidUpdate() {
-    this.getMediaGalleryProps()
+    const mediaScanInterval = 1000;
+
+    setTimeout(() => {
+      this.getMediaGalleryProps()
       .then(({ documents, media, onItemClick }) => {
         this.setState({
           documents,
@@ -59,6 +62,8 @@ export class SessionChannelSettings extends React.Component<Props, any> {
         });
       })
       .ignore();
+    }, mediaScanInterval);
+    
   }
 
   public async getMediaGalleryProps() {
@@ -244,6 +249,7 @@ export class SessionChannelSettings extends React.Component<Props, any> {
 
   private renderHeader() {
     const { id, onGoBack, onInviteFriends, avatarPath } = this.props;
+    const shouldShowInviteFriends = !this.props.isPublic;
 
     return (
       <div className="group-settings-header">
@@ -259,11 +265,18 @@ export class SessionChannelSettings extends React.Component<Props, any> {
           conversationType="group"
           size={80}
         />
-        <SessionIconButton
+        
-          iconType={SessionIconType.AddUser}
+        <div className="invite-friends-container">
-          iconSize={SessionIconSize.Medium}
+          {shouldShowInviteFriends && (
-          onClick={onInviteFriends}
+            <SessionIconButton
-        />
+              iconType={SessionIconType.AddUser}
+              iconSize={SessionIconSize.Medium}
+              onClick={onInviteFriends}
+            />
+          )}
+        </div>
+
+        
       </div>
     );
   }

ts/global.d.ts

@@ -3,6 +3,7 @@ interface Window {
   versionInfo: any;
 
   Events: any;
+  Lodash: any;
   deleteAllData: any;
   clearLocalData: any;
   getAccountManager: any;