Merge pull request #839 from vincentbavitz/clearnet

Stylistic improvements and bug fixes
5 years ago · ae3e89ee83
parent 366becca98 24839b3bf9
commit ae3e89ee83
16 changed files with 119 additions and 155 deletions
--- a/background.html
+++ b/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 }}' />
--- a/js/background.js
+++ b/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'),
          })
        );

--- a/js/views/app_view.js
+++ b/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.append(dialog.el);
+      this.el.prepend(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);
--- a/js/views/session_confirm_view.js
+++ b/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() {
--- a/js/views/session_toast_view.js
+++ b/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) {
--- a/preload.js
+++ b/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,
--- a/stylesheets/_mentions.scss
+++ b/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;
--- a/stylesheets/_session.scss
+++ b/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: $session-margin-md;
+  left: 0px;
+  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,7 +1293,15 @@ 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 {
@ -1761,3 +1777,8 @@ input {
    opacity: 0.8;
  }
 }
+
+.invite-friends-container {
+  height: $session-icon-size-lg;
+  width: $session-icon-size-lg;
+}
--- a/stylesheets/_session_group_panel.scss
+++ b/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;
    }
  }
--- a/stylesheets/_session_left_pane.scss
+++ b/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 {
--- a/ts/components/conversation/CreateGroupDialog.tsx
+++ b/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);

--- a/ts/components/conversation/InviteFriendsDialog.tsx
+++ b/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">
-          <MemberList
-            members={this.state.friendList}
-            selected={{}}
-            i18n={window.i18n}
-            onMemberClicked={this.onMemberClicked}
-          />
-        </div>
+        <div className="friend-selection-list">{this.renderMemberList()}</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() {
-    window.removeEventListener('keyup', this.onKeyUp);
-
-    this.props.onClose();
-  }
-
-  private onMemberClicked(selected: any) {
+  private onMemberClicked(clickedMember: ContactType) {
    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();
+  }
 }
--- a/ts/components/conversation/UpdateGroupDialog.tsx
+++ b/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);

--- a/ts/components/session/LeftPaneSettingSection.tsx
+++ b/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'),
      },
    ];
  }
--- a/ts/components/session/SessionChannelSettings.tsx
+++ b/ts/components/session/SessionChannelSettings.tsx
@ -50,15 +50,19 @@ export class SessionChannelSettings extends React.Component<Props, any> {
  }

  public componentDidUpdate() {
-    this.getMediaGalleryProps()
-      .then(({ documents, media, onItemClick }) => {
-        this.setState({
-          documents,
-          media,
-          onItemClick,
-        });
-      })
-      .ignore();
+    const mediaScanInterval = 1000;
+
+    setTimeout(() => {
+      this.getMediaGalleryProps()
+        .then(({ documents, media, onItemClick }) => {
+          this.setState({
+            documents,
+            media,
+            onItemClick,
+          });
+        })
+        .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}
        />
-        <SessionIconButton
-          iconType={SessionIconType.AddUser}
-          iconSize={SessionIconSize.Medium}
-          onClick={onInviteFriends}
-        />
+
+        <div className="invite-friends-container">
+          {shouldShowInviteFriends && (
+            <SessionIconButton
+              iconType={SessionIconType.AddUser}
+              iconSize={SessionIconSize.Medium}
+              onClick={onInviteFriends}
+            />
+          )}
+        </div>
      </div>
    );
  }
--- a/ts/global.d.ts
+++ b/ts/global.d.ts
@ -3,6 +3,7 @@ interface Window {
  versionInfo: any;

  Events: any;
+  Lodash: any;
  deleteAllData: any;
  clearLocalData: any;
  getAccountManager: any;