Merge pull request #839 from vincentbavitz/clearnet

Stylistic improvements and bug fixes

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,9 +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 = {
   multiDeviceUnpairing: true,

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

@@ -111,7 +111,7 @@ $session-font-h3: 20px;
 $session-font-h4: 16px;
 
 $session-search-input-height: 34px;
-$main-view-header-height: 85px;
+$main-view-header-height: 63px;
 $session-left-pane-width: 300px;
 $session-left-pane-sections-container-width: 80px;
 
@@ -134,6 +134,12 @@ 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;
 }
@@ -224,7 +230,7 @@ $session_message-container-border-radius: 5px;
   pointer-events: none;
 }
 .overlay {
-  display: block !important;
+  display: flex !important;
   z-index: 1;
 }
 
@@ -572,12 +578,15 @@ label {
 .message-selection-overlay {
   display: none;
   position: absolute;
-  right: $session-margin-sm;
+  left: 0px;
-  left: $session-margin-md;
+  right: 0px;
+  margin: 0px $session-margin-sm;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
 
   .close-button {
     float: left;
-    margin: 17px 0px 0px 0px;
   }
 }
 .message-selection-overlay div[role='button'] {
@@ -586,7 +595,6 @@ label {
 
 .message-selection-overlay .button-group {
   float: right;
-  margin-top: 13.5px;
 }
 
 .hidden {
@@ -597,7 +605,7 @@ label {
   cursor: pointer;
 }
 
-#session-toast-container {
+.session-toast-wrapper {
   position: fixed;
   right: $session-margin-lg;
   bottom: $session-margin-lg;
@@ -1285,8 +1293,16 @@ label {
   .module-message {
     font-family: 'SF Pro Text';
     border-radius: 5px;
+  
+    &__text--incoming {
+      /* Add padding to large emojis in chat */
+      img.emoji.jumbo {
+        margin: $session-margin-sm 0px;
       }
     }
+  }
+  
+}
 
 .bottom-bar {
   .compose {
@@ -1761,3 +1777,8 @@ 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,8 @@
       margin: auto;
     }
 
-    .session-icon-button {
+    .session-icon-button,
+    .invite-friends-container {
       margin: 0 $session-margin-md;
     }
   }

stylesheets/_session_left_pane.scss

@@ -135,7 +135,7 @@ $session-compose-margin: 20px;
 }
 
 .module-left-pane {
-  border-right: none !important;
+  border-right: 1px solid rgba($session-color-white, 0.1) !important;
   width: $session-left-pane-width;
   position: relative;
   height: -webkit-fill-available;
@@ -213,6 +213,8 @@ $session-compose-margin: 20px;
 
   &__list {
     height: -webkit-fill-available;
+    border-top: 1px solid rgba(255,255,255,0.05);
+
     &-popup {
       width: -webkit-fill-available;
       height: -webkit-fill-available;
@@ -485,6 +487,8 @@ $session-compose-margin: 20px;
     flex-grow: 1;
 
     .module-conversation-list-item {
+      background-color: $session-shade-4;
+      
       &--has-friend-request {
         &:first-child {
           border-top: none !important;
@@ -496,6 +500,11 @@ $session-compose-margin: 20px;
         .module-conversation__user__profile-name {
           font-size: 13px !important;
         }
+
+      }
+
+      &__header__date, &__message {
+        display: none;
       }
 
       &__buttons {
@@ -550,11 +559,11 @@ $session-compose-margin: 20px;
     }
 
     &.active {
-      background-color: $session-shade-9;
+      background-color: $session-shade-5;
     }
 
     &:hover {
-      background-color: $session-shade-7;
+      background-color: $session-shade-6;
     }
 
     &__buttons {

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,11 @@
 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 +14,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> {
@@ -73,14 +70,7 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
       >
         <div className="spacer-lg" />
 
-        <div className="friend-selection-list">
+        <div className="friend-selection-list">{this.renderMemberList()}</div>
-          <MemberList
-            members={this.state.friendList}
-            selected={{}}
-            i18n={window.i18n}
-            onMemberClicked={this.onMemberClicked}
-          />
-        </div>
         {hasFriends ? null : (
           <>
             <div className="spacer-lg" />
@@ -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,9 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
       };
     });
   }
+
+  private closeDialog() {
+    window.removeEventListener('keyup', this.onKeyUp);
+    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/LeftPaneSettingSection.tsx

@@ -76,8 +76,6 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
       >
         <div>
           <strong>{item.title}</strong>
-          <br />
-          <span className="text-subtle">{item.description}</span>
         </div>
 
         <div>
@@ -181,31 +179,26 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
       {
         id: SessionSettingCategory.Appearance,
         title: window.i18n('appearanceSettingsTitle'),
-        description: window.i18n('appearanceSettingsDescription'),
         hidden: false,
       },
       {
         id: SessionSettingCategory.Privacy,
         title: window.i18n('privacySettingsTitle'),
-        description: window.i18n('privacySettingsDescription'),
         hidden: false,
       },
       {
         id: SessionSettingCategory.Permissions,
         title: window.i18n('permissionSettingsTitle'),
-        description: window.i18n('permissionSettingsDescription'),
         hidden: true,
       },
       {
         id: SessionSettingCategory.Notifications,
         title: window.i18n('notificationSettingsTitle'),
-        description: window.i18n('notificationSettingsDescription'),
         hidden: false,
       },
       {
         id: SessionSettingCategory.Devices,
         title: window.i18n('devicesSettingsTitle'),
-        description: window.i18n('devicesSettingsDescription'),
       },
     ];
   }

ts/components/session/SessionChannelSettings.tsx

@@ -50,6 +50,9 @@ export class SessionChannelSettings extends React.Component<Props, any> {
   }
 
   public componentDidUpdate() {
+    const mediaScanInterval = 1000;
+
+    setTimeout(() => {
       this.getMediaGalleryProps()
         .then(({ documents, media, onItemClick }) => {
           this.setState({
@@ -59,6 +62,7 @@ export class SessionChannelSettings extends React.Component<Props, any> {
           });
         })
         .ignore();
+    }, mediaScanInterval);
   }
 
   public async getMediaGalleryProps() {
@@ -244,6 +248,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 +264,16 @@ export class SessionChannelSettings extends React.Component<Props, any> {
           conversationType="group"
           size={80}
         />
+
+        <div className="invite-friends-container">
+          {shouldShowInviteFriends && (
             <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;