Merge pull request #1377 from Bilb/ui-fixes

js/conversation_controller.js

@@ -1,4 +1,4 @@
-/* global _, Whisper, Backbone, storage, textsecure, libsignal, log */
+/* global Whisper, Backbone, textsecure, libsignal, log */
 
 /* eslint-disable more/no-then */
 
@@ -15,10 +15,6 @@
       this.listenTo(conversations, 'reset', () => this.reset([]));
       this.listenTo(conversations, 'remove', this.remove);
 
-      this.on(
-        'add remove change:unreadCount',
-        _.debounce(this.updateUnreadCount.bind(this), 1000)
-      );
       this.startPruning();
     },
     addActive(model) {
@@ -29,23 +25,6 @@
         this.remove(model);
       }
     },
-    updateUnreadCount() {
-      const newUnreadCount = _.reduce(
-        this.map(m => m.get('unreadCount')),
-        (item, memo) => item + memo,
-        0
-      );
-      storage.put('unreadCount', newUnreadCount);
-
-      if (newUnreadCount > 0) {
-        window.setBadgeCount(newUnreadCount);
-        window.document.title = `${window.getTitle()} (${newUnreadCount})`;
-      } else {
-        window.setBadgeCount(0);
-        window.document.title = window.getTitle();
-      }
-      window.updateTrayIcon(newUnreadCount);
-    },
     startPruning() {
       const halfHour = 30 * 60 * 1000;
       this.interval = setInterval(() => {

js/models/conversations.js

@@ -641,9 +641,7 @@
         this.set({ verified });
 
         // we don't await here because we don't need to wait for this to finish
-        window.Signal.Data.updateConversation(this.id, this.attributes, {
+        this.commit();
-          Conversation: Whisper.Conversation,
-        });
 
         return;
       }
@@ -706,9 +704,7 @@
       }
 
       this.set({ verified });
-      await window.Signal.Data.updateConversation(this.id, this.attributes, {
+      await this.commit();
-        Conversation: Whisper.Conversation,
-      });
 
       // Three situations result in a verification notice in the conversation:
       //   1) The message came from an explicit verification in another client (not
@@ -813,16 +809,12 @@
           secondaryStatus: newStatus,
           primaryDevicePubKey,
         });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
     async updateGroupAdmins(groupAdmins) {
       this.set({ groupAdmins });
-      await window.Signal.Data.updateConversation(this.id, this.attributes, {
+      await this.commit();
-        Conversation: Whisper.Conversation,
-      });
     },
     isUnverified() {
       if (this.isPrivate()) {
@@ -1047,7 +1039,7 @@
       );
     },
 
-    getUnread() {
+    async getUnread() {
       return window.Signal.Data.getUnreadByConversation(this.id, {
         MessageCollection: Whisper.MessageCollection,
       });
@@ -1307,9 +1299,7 @@
           timestamp: now,
           isArchived: false,
         });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
 
         // We're offline!
         if (!textsecure.messaging) {
@@ -1494,17 +1484,13 @@
       this.set(lastMessageUpdate);
 
       if (this.hasChanged()) {
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
 
     async setArchived(isArchived) {
       this.set({ isArchived });
-      await window.Signal.Data.updateConversation(this.id, this.attributes, {
+      await this.commit();
-        Conversation: Whisper.Conversation,
-      });
     },
 
     async updateExpirationTimer(
@@ -1541,9 +1527,7 @@
       const timestamp = (receivedAt || Date.now()) - 1;
 
       this.set({ expireTimer });
-      await window.Signal.Data.updateConversation(this.id, this.attributes, {
+      await this.commit();
-        Conversation: Whisper.Conversation,
-      });
 
       const message = this.messageCollection.add({
         // Even though this isn't reflected to the user, we want to place the last seen
@@ -1636,9 +1620,7 @@
       }
       if (this.get('sessionResetStatus') !== newStatus) {
         this.set({ sessionResetStatus: newStatus });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
     async onSessionResetInitiated() {
@@ -1741,6 +1723,7 @@
       await window.Signal.Data.updateConversation(this.id, this.attributes, {
         Conversation: Whisper.Conversation,
       });
+      await this.trigger('change', this);
     },
 
     async addMessage(messageAttributes) {
@@ -1866,7 +1849,6 @@
           conversationId,
         })
       );
-
       let unreadMessages = await this.getUnread();
       const oldUnread = unreadMessages.filter(
         message => message.get('received_at') <= newestUnreadDate
@@ -1898,7 +1880,7 @@
       unreadMessages = unreadMessages.filter(m => Boolean(m.isIncoming()));
 
       const unreadCount = unreadMessages.length - read.length;
-      this.set({ unreadCount });
+      this.set('unreadCount', unreadCount);
 
       const mentionRead = (() => {
         const stillUnread = unreadMessages.filter(
@@ -1917,9 +1899,7 @@
         this.set({ mentionedUs: false });
       }
 
-      await window.Signal.Data.updateConversation(this.id, this.attributes, {
+      await this.commit();
-        Conversation: Whisper.Conversation,
-      });
 
       // If a message has errors, we don't want to send anything out about it.
       //   read syncs - let's wait for a client that really understands the message
@@ -1978,18 +1958,14 @@
       }
 
       this.set({ nickname: trimmed });
-      await window.Signal.Data.updateConversation(this.id, this.attributes, {
+      await this.commit();
-        Conversation: Whisper.Conversation,
-      });
 
       await this.updateProfileName();
     },
     async setLokiProfile(newProfile) {
       if (!_.isEqual(this.get('profile'), newProfile)) {
         this.set({ profile: newProfile });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
 
       // if set to null, it will show a placeholder with color and first letter
@@ -2041,9 +2017,7 @@
           channelId: newChannelId,
           active_at: Date.now(),
         });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
     getPublicSource() {
@@ -2080,9 +2054,7 @@
       }
       if (this.get('lastPublicMessage') !== newLastMessageId) {
         this.set({ lastPublicMessage: newLastMessageId });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
     isModerator(pubKey) {
@@ -2099,9 +2071,7 @@
       // TODO: compare array properly
       if (!_.isEqual(this.get('moderators'), moderators)) {
         this.set({ moderators });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
 
@@ -2136,18 +2106,14 @@
       const profileName = this.get('profileName');
       if (profileName !== name) {
         this.set({ profileName: name });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
     async setGroupName(name) {
       const profileName = this.get('name');
       if (profileName !== name) {
         this.set({ name });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
     async setSubscriberCount(count) {
@@ -2166,18 +2132,14 @@
           this.set({ name });
         }
         // save
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
     async setProfileAvatar(avatar) {
       const profileAvatar = this.get('profileAvatar');
       if (profileAvatar !== avatar) {
         this.set({ profileAvatar: avatar });
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
     async setProfileKey(profileKey) {
@@ -2194,9 +2156,7 @@
 
         await this.deriveAccessKeyIfNeeded();
 
-        await window.Signal.Data.updateConversation(this.id, this.attributes, {
+        await this.commit();
-          Conversation: Whisper.Conversation,
-        });
       }
     },
 
@@ -2426,9 +2386,7 @@
         });
       }
 
-      await window.Signal.Data.updateConversation(this.id, this.attributes, {
+      await this.commit();
-        Conversation: Whisper.Conversation,
-      });
     },
 
     getName() {

js/modules/debug.js

@@ -50,11 +50,7 @@ exports.createConversation = async ({
     unread: numMessages,
   });
   const conversationId = conversation.get('id');
-  await Signal.Data.updateConversation(
+  await conversation.commit();
-    conversationId,
-    conversation.attributes,
-    { Conversation: Whisper.Conversation }
-  );
 
   await Promise.all(
     range(0, numMessages).map(async index => {

js/modules/loki_app_dot_net_api.js

@@ -1619,14 +1619,7 @@ class LokiPublicChannelAPI {
     if (data.counts && Number.isInteger(data.counts.subscribers)) {
       this.conversation.setSubscriberCount(data.counts.subscribers);
     }
-
+    await this.conversation.commit();
-    await window.Signal.Data.updateConversation(
-      this.conversation.id,
-      this.conversation.attributes,
-      {
-        Conversation: Whisper.Conversation,
-      }
-    );
   }
 
   // get moderation actions

js/views/identicon_svg_view.js

@@ -13,7 +13,6 @@
     templateName: 'identicon-svg',
     initialize(options) {
       this.render_attributes = options;
-      this.render_attributes.color = COLORS[this.render_attributes.color];
     },
     getSVGUrl() {
       const html = this.render().$el.html();
@@ -40,19 +39,4 @@
       });
     },
   });
-
-  const COLORS = {
-    red: '#cc163d',
-    deep_orange: '#c73800',
-    brown: '#746c53',
-    pink: '#a23474',
-    purple: '#862caf',
-    indigo: '#5951c8',
-    blue: '#336ba3',
-    teal: '#067589',
-    green: '#3b7845',
-    light_green: '#1c8260',
-    blue_grey: '#895d66',
-    grey: '#6b6b78',
-  };
 })();

js/views/message_list_view.js

@@ -55,7 +55,7 @@
       this.triggerLazyScroll();
     },
     atBottom() {
-      return this.bottomOffset < 30;
+      return this.bottomOffset ? this.bottomOffset < 30 : true;
     },
     measureScrollPosition() {
       if (this.el.scrollHeight === 0) {

main.js

@@ -987,7 +987,7 @@ ipc.on('draw-attention', () => {
   if (!mainWindow) {
     return;
   }
-  if (process.platform === 'win32' || process.platform === 'linux') {
+  if (process.platform === 'win32') {
     mainWindow.flashFrame(true);
   }
 });

stylesheets/_modal.scss

@@ -287,7 +287,6 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-inline-start: $session-margin-lg;
 
       p {
         font-size: $session-font-md;

stylesheets/_modules.scss

@@ -76,94 +76,10 @@
   margin-inline-start: 32px;
 }
 
-.module-message__buttons {
+.module-message:hover {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  opacity: 0;
-}
-
-.module-message:hover .module-message__buttons {
   opacity: 1;
 }
 
-.module-message__buttons--incoming {
-  left: 100%;
-}
-.module-message__buttons--outgoing {
-  right: 100%;
-}
-
-.module-message__buttons__upload {
-  height: 24px;
-  width: 24px;
-  transform: rotate(180deg);
-  display: inline-block;
-  cursor: pointer;
-  @include color-svg('../images/download.svg', $color-light-45);
-  &:hover {
-    @include color-svg('../images/download.svg', $color-gray-90);
-  }
-}
-
-.module-message__buttons__download {
-  min-height: 24px;
-  min-width: 24px;
-  display: inline-block;
-  cursor: pointer;
-  @include color-svg('../images/download.svg', $color-light-45);
-  &:hover {
-    @include color-svg('../images/download.svg', $color-gray-90);
-  }
-}
-
-.module-message__buttons__download--incoming {
-  margin-inline-start: 12px;
-}
-.module-message__buttons__download--outgoing {
-  margin-inline-end: 12px;
-}
-
-.module-message__buttons__reply {
-  min-height: 24px;
-  min-width: 24px;
-  display: inline-block;
-  cursor: pointer;
-  @include color-svg('../images/reply.svg', $color-light-45);
-  &:hover {
-    @include color-svg('../images/reply.svg', $color-gray-90);
-  }
-}
-
-.module-message__buttons__reply--incoming {
-  margin-inline-start: 12px;
-}
-.module-message__buttons__reply--outgoing {
-  margin-inline-end: 12px;
-}
-
-.module-message__buttons__menu {
-  height: 24px;
-  width: 24px;
-  display: inline-block;
-  cursor: pointer;
-  @include color-svg('../images/ellipsis.svg', $color-light-45);
-  &:hover {
-    @include color-svg('../images/ellipsis.svg', $color-gray-90);
-  }
-}
-
-.module-message__buttons__menu--incoming {
-  margin-inline-start: 12px;
-}
-
-.module_message__buttons__menu--outgoing {
-  margin-inline-end: 12px;
-}
-
 .module-message__error-container {
   width: 28px;
   position: relative;
@@ -2822,6 +2738,7 @@
   border: 1px solid $color-dark-05;
   opacity: 0;
   user-select: none;
+  transition: opacity $session-transition-duration;
 }
 
 .react-contextmenu--visible {
@@ -2890,14 +2807,6 @@
 // All media query widths have 300px added to account for the left pane
 // And have been tweaked for smoother transitions
 
-// To hide in small breakpoints
-.module-message__buttons__download {
-  display: none;
-}
-.module-message__buttons__reply {
-  display: none;
-}
-
 // To limit messages with things forcing them wider, like long attachment names
 .module-message__container {
   max-width: 300px;
@@ -2926,14 +2835,6 @@
     margin-inline-start: auto;
   }
 
-  // To hide in small breakpoints
-  .module-message__buttons__download {
-    display: inline-block;
-  }
-  .module-message__buttons__reply {
-    display: inline-block;
-  }
-
   // To hide in larger breakpoints
   .module-message__context__download {
     display: none;
@@ -2965,14 +2866,6 @@
     margin-inline-start: auto;
   }
 
-  // To hide in small breakpoints
-  .module-message__buttons__download {
-    display: inline-block;
-  }
-  .module-message__buttons__reply {
-    display: inline-block;
-  }
-
   // To hide in larger breakpoints
   .module-message__context__download {
     display: none;

stylesheets/_session.scss

@@ -38,7 +38,9 @@ textarea {
     user-select: text;
 
     &::selection {
-      background: rgba($session-color-green, 0.6);
+      @include themify($themes) {
+        background: themed('textHighlight');
+      }
     }
   }
 }

stylesheets/_session_group_panel.scss

@@ -8,8 +8,8 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  width: 22vw;
+  width: -webkit-fill-available;
-  flex-shrink: 0;
+
   @include themify($themes) {
     background: themed('leftpaneOverlayBackground');
     border-left: themed('sessionBorder');
@@ -142,11 +142,11 @@
         .module-media-grid-item__image,
         .module-media-grid-item {
           height: calc(
-            22vw / 3.5
+            22vw / 4
-          ); //.group-settings is 22vw and we want three rows with some space so divide it by 3.5
+          ); //.group-settings is 22vw and we want three rows with some space so divide it by 4
           width: calc(
-            22vw / 3.5
+            22vw / 4
-          ); //.group-settings is 22vw and we want three rows with some space so divide it by 3.5
+          ); //.group-settings is 22vw and we want three rows with some space so divide it by 4
           margin: auto;
           margin-bottom: 1vh;
         }

stylesheets/_theme_dark.scss

@@ -295,27 +295,6 @@
 
   // Module: Message
 
-  .module-message__buttons__download {
-    @include color-svg('../images/download.svg', $color-light-45);
-    &:hover {
-      @include color-svg('../images/download.svg', $color-dark-05);
-    }
-  }
-
-  .module-message__buttons__reply {
-    @include color-svg('../images/reply.svg', $color-light-45);
-    &:hover {
-      @include color-svg('../images/reply.svg', $color-dark-05);
-    }
-  }
-
-  .module-message__buttons__menu {
-    @include color-svg('../images/ellipsis.svg', $color-light-45);
-    &:hover {
-      @include color-svg('../images/ellipsis.svg', $color-dark-05);
-    }
-  }
-
   .module-message__error {
     @include color-svg('../images/error.svg', $session-color-danger);
   }

stylesheets/themes.scss

@@ -25,6 +25,7 @@ $themes: (
       textColor: $black,
     textColorSubtle: #a0a0a0,
     textColorOpposite: $white,
+    textHighlight: rgba($black, 0.2),
     // inbox
       inboxBackground: $white,
     // buttons
@@ -74,6 +75,7 @@ $themes: (
       textColor: $white,
     textColorSubtle: #a0a0a0,
     textColorOpposite: $black,
+    textHighlight: rgba($accentDarkTheme, 0.6),
     // inbox
       inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
     // buttons

ts/components/conversation/Message.tsx

@@ -769,89 +769,6 @@ export class Message extends React.PureComponent<Props, State> {
     }
   }
 
-  public renderMenu(isCorrectSide: boolean, triggerId: string) {
-    const {
-      attachments,
-      direction,
-      disableMenu,
-      isKickedFromGroup,
-      onDownload,
-      onReply,
-    } = this.props;
-
-    if (!isCorrectSide || disableMenu || isKickedFromGroup) {
-      return null;
-    }
-
-    const fileName =
-      attachments && attachments[0] ? attachments[0].fileName : null;
-    const isDangerous = isFileDangerous(fileName || '');
-    const multipleAttachments = attachments && attachments.length > 1;
-    const firstAttachment = attachments && attachments[0];
-
-    const downloadButton =
-      !multipleAttachments && firstAttachment && !firstAttachment.pending ? (
-        <div
-          onClick={(e: any) => {
-            if (onDownload) {
-              onDownload(isDangerous);
-            }
-            e.stopPropagation();
-          }}
-          role="button"
-          className={classNames(
-            'module-message__buttons__download',
-            `module-message__buttons__download--${direction}`
-          )}
-        />
-      ) : null;
-
-    const replyButton = (
-      <div
-        onClick={(e: any) => {
-          if (onReply) {
-            onReply();
-          }
-          e.stopPropagation();
-        }}
-        role="button"
-        className={classNames(
-          'module-message__buttons__reply',
-          `module-message__buttons__download--${direction}`
-        )}
-      />
-    );
-
-    const menuButton = (
-      <ContextMenuTrigger id={triggerId} ref={this.captureMenuTriggerBound}>
-        <div
-          role="button"
-          onClick={this.showMenuBound}
-          className={classNames(
-            'module-message__buttons__menu',
-            `module-message__buttons__download--${direction}`
-          )}
-        />
-      </ContextMenuTrigger>
-    );
-
-    const first = direction === 'incoming' ? downloadButton : menuButton;
-    const last = direction === 'incoming' ? menuButton : downloadButton;
-
-    return (
-      <div
-        className={classNames(
-          'module-message__buttons',
-          `module-message__buttons--${direction}`
-        )}
-      >
-        {first}
-        {replyButton}
-        {last}
-      </div>
-    );
-  }
-
   public renderContextMenu(triggerId: string) {
     const {
       attachments,
@@ -1058,12 +975,7 @@ export class Message extends React.PureComponent<Props, State> {
     } = this.props;
     const { expired, expiring } = this.state;
 
-    // This id is what connects our triple-dot click with our associated pop-up menu.
-    //   It needs to be unique.
     // The Date.now() is a workaround to be sure a single triggerID with this id exists
-    const triggerId = id
-      ? String(`message-${id}-${Date.now()}`)
-      : String(`message-${authorPhoneNumber}-${timestamp}`);
     const rightClickTriggerId = id
       ? String(`message-ctx-${id}-${Date.now()}`)
       : String(`message-ctx-${authorPhoneNumber}-${timestamp}`);
@@ -1111,9 +1023,6 @@ export class Message extends React.PureComponent<Props, State> {
             )}
           >
             {this.renderError(isIncoming)}
-            {isRss || isKickedFromGroup
-              ? null
-              : this.renderMenu(!isIncoming, triggerId)}
             <div
               className={classNames(
                 'module-message__container',
@@ -1148,10 +1057,6 @@ export class Message extends React.PureComponent<Props, State> {
               {this.renderMetadata()}
             </div>
             {this.renderError(!isIncoming)}
-            {isRss || multiSelectMode
-              ? null
-              : this.renderMenu(isIncoming, triggerId)}
-            {enableContextMenu ? this.renderContextMenu(triggerId) : null}
             {enableContextMenu
               ? this.renderContextMenu(rightClickTriggerId)
               : null}

ts/components/session/LeftPaneMessageSection.tsx

@@ -161,7 +161,6 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
 
     const length = conversations.length;
     const listKey = 0;
-
     // Note: conversations is not a known prop for List, but it is required to ensure that
     //   it re-renders when our conversation data changes. Otherwise it would just render
     //   on startup and scroll.

ts/receiver/errors.ts

@@ -16,9 +16,7 @@ async function onNoSession(ev: any) {
   if (!convo.get('sessionRestoreSeen')) {
     convo.set({ sessionRestoreSeen: true });
 
-    await window.Signal.Data.updateConversation(convo.id, convo.attributes, {
+    await convo.commit();
-      Conversation: Whisper.Conversation,
-    });
 
     await SessionProtocol.sendSessionRequestIfNeeded(new PubKey(pubkey));
   } else {
@@ -85,10 +83,7 @@ export async function onError(ev: any) {
     if (ev.confirm) {
       ev.confirm();
     }
-
+    await conversation.commit();
-    await window.Signal.Data.updateConversation(id, conversation.attributes, {
-      Conversation: Whisper.Conversation,
-    });
   }
 
   throw error;

ts/receiver/mediumGroups.ts

@@ -207,7 +207,10 @@ async function handleNewGroup(
 
   // We only set group admins on group creation
   convo.set('groupAdmins', admins);
-
+  // update the unreadCount for this convo
+  convo.set({
+    unreadCount: Number(convo.get('unreadCount')) + 1,
+  });
   convo.commit();
 
   const secretKeyHex = toHex(groupPrivateKey);

ts/receiver/multidevice.ts

@@ -409,10 +409,7 @@ async function onContactReceived(details: any) {
       );
       conversation.set(newAttributes);
     }
-
+    await conversation.commit();
-    await window.Signal.Data.updateConversation(id, conversation.attributes, {
-      Conversation: Whisper.Conversation,
-    });
     const { expireTimer } = details;
     const isValidExpireTimer = typeof expireTimer === 'number';
     if (isValidExpireTimer) {

ts/state/selectors/conversations.ts

@@ -193,7 +193,6 @@ export const _getLeftPaneLists = (
   };
 
   const contacts: Array<ConversationType> = filterToPrimary(allContacts);
-
   return {
     conversations,
     archivedConversations,