Added message selection inital functionality and added to buttons

5 years ago · 98b4b18583
parent c2c084920a
commit 98b4b18583
10 changed files with 194 additions and 69 deletions
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@ -1,4 +1,5 @@
 /* global
+  $,
  _,
  i18n,
  Backbone,
@ -231,6 +232,41 @@
      this.messageCollection.forEach(m => m.trigger('change'));
    },

+    setMessageSelectionBackdrop() {
+      const messageSelected = this.selectedMessages.size > 0;
+
+      if (messageSelected) {
+        $('.messages li, .messages > div').css({
+          opacity: '0.3',
+        });
+
+        $('.message-selection-overlay').show();
+        $('.module-conversation-header').css({
+          opacity: '0.15',
+          'pointer-events': 'none',
+        });
+
+        let messageId;
+        // eslint-disable-next-line no-restricted-syntax
+        for (const item of this.selectedMessages) {
+          messageId = item.propsForMessage.id;
+          $(`#${messageId}`).css({
+            opacity: '1',
+          });
+        }
+      } else {
+        $('.messages li, .messages > div').css({
+          opacity: '1',
+        });
+
+        $('.message-selection-overlay').hide();
+        $('.module-conversation-header').css({
+          opacity: '1',
+          'pointer-events': 'auto',
+        });
+      }
+    },
+
    addMessageSelection(id) {
      // If the selection is empty, then we chage the mode to
      // multiple selection by making it non-empty
@ -242,6 +278,7 @@
      }

      this.trigger('message-selection-changed');
+      this.setMessageSelectionBackdrop();
    },

    removeMessageSelection(id) {
@ -255,6 +292,7 @@
      }

      this.trigger('message-selection-changed');
+      this.setMessageSelectionBackdrop();
    },

    resetMessageSelection() {
@ -266,6 +304,7 @@
      });

      this.trigger('message-selection-changed');
+      this.setMessageSelectionBackdrop();
    },

    async bumpTyping() {
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@ -229,6 +229,7 @@
          isArchived: this.model.get('isArchived'),
          isPublic: this.model.isPublic(),
          members,
+          selectedMessages: this.model.selectedMessages,
          expirationSettingName,
          showBackButton: Boolean(this.panels && this.panels.length),
          timerOptions: Whisper.ExpirationTimerOptions.map(item => ({
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@ -165,18 +165,6 @@
  display: inline-flex;
 }

-.check-box-visible {
-  transition-duration: 200ms;
-  opacity: 0.1;
-  width: 40px;
-}
-
-.check-box-invisible {
-  transition-duration: 200ms;
-  opacity: 0;
-  width: 0px;
-}
-
 .check-box-selected {
  opacity: 1;
 }
@ -290,10 +278,6 @@
  align-self: flex-end;
 }

-.message-selected {
-  background-color: #60554060;
-}
-
 .bulk-edit-container {
  display: flex;
  border-top: solid;
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@ -24,6 +24,9 @@

 // Session Colors
 $session-color-green: #00f782;
+$session-color-green-alt-1: #00f17e;
+$session-color-green-alt-2: #007e42;
+
 $session-color-white: #fff;
 $session-color-black: #000;

@ -33,6 +36,11 @@ $session-color-dark-3: #404146;
 $session-color-dark-4: #5c5d5f;
 $session-color-dark-5: #a5a6a8;

+$session-color-secondary: #474646;
+$session-color-danger: #ff4538;
+
+$session-color-white-subtle: rgba($session-color-white, 0.6);
+
 $session-color-dark-highlight: #212126;

 $session-font-family: 'SpaceMono';
@ -42,6 +50,14 @@ $session-icon-size-sm: 15px;
 $session-icon-size-md: 20px;
 $session-icon-size-lg: 30px;

+$session-conversation-header-height: 60px;
+
+$session-green-gradient: linear-gradient(
+  270deg,
+  rgba($session-color-green-alt-1, 1),
+  rgba($session-color-green-alt-1, 0.6)
+);
+
 $session_message-container-border-radius: 5px;

 .session-button {
@ -75,6 +91,18 @@ $session_message-container-border-radius: 5px;
  &.white {
    @include transparent-background($session-color-white);
  }
+
+  @mixin square-button($background-color) {
+    border-radius: 2px;
+    height: 33px;
+    background-color: $background-color;
+  }
+  &.secondary {
+    @include square-button($session-color-secondary);
+  }
+  &.danger {
+    @include square-button($session-color-danger);
+  }
 }

@mixin set-icon-margin($size) {
@ -113,6 +141,15 @@ $session_message-container-border-radius: 5px;

 /* CONVERSATION AND MESSAGES */

+@mixin standard-icon-button() {
+  color: $session-color-white;
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .module-conversation-header__title-flex,
 .module-conversation-header__title {
  width: 100%;
@ -126,10 +163,6 @@ $session_message-container-border-radius: 5px;
  }
 }

-.module-conversation-header {
-  border-bottom: none;
-}
-
 .module-message__author__profile-name {
  font-style: normal;
 }
@ -144,3 +177,32 @@ $session_message-container-border-radius: 5px;
 .module-message__container {
  border-radius: $session_message-container-border-radius;
 }
+
+.conversation-header .session-icon-button {
+  @include standard-icon-button();
+}
+
+.module-conversation-header,
+.message-selection-overlay {
+  height: $session-conversation-header-height;
+}
+
+.message-selection-overlay {
+  position: absolute;
+  left: 15px;
+  right: 15px;
+  display: none;
+
+  .close-button {
+    float: left;
+    margin-top: 10px;
+  }
+}
+.message-selection-overlay div[role='button'] {
+  display: inline-block;
+}
+
+.message-selection-overlay .button-group {
+  float: right;
+  margin-top: 13.5px;
+}
--- a/stylesheets/_session_theme_dark.scss
+++ b/stylesheets/_session_theme_dark.scss
@ -7,6 +7,10 @@
    background-color: $session-color-dark-2;
  }

+  .module-conversation-header {
+    border-bottom: none;
+  }
+
  .module-message__author {
    color: $session-color-dark-5;
  }
@ -21,9 +25,6 @@
    color: $session-color-dark-5;
  }

-  .module-message__container {
-    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.69);
-  }
  .module-message__container--incoming {
    background-color: $session-color-dark-1;
  }
@ -32,12 +33,34 @@
    background-color: $session-color-dark-3;
  }

+  .module-message__container {
+    transition: background-color 0.25s;
+    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.69);
+  }
  .message-highlighted {
    background-color: $session-color-dark-highlight;
    border-radius: 0;
  }
+
  .message-selected {
-    background-color: rgba($session-color-dark-highlight, 0.8);
+    .module-message__container {
+      background-image: $session-green-gradient;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37);
+    }
+
+    .module-message__author {
+      color: $session-color-white;
+    }
+
+    .module-message__metadata__badge {
+      color: $session-color-white;
+    }
+    .module-message__metadata__date--incoming {
+      color: $session-color-white-subtle;
+    }
+    .module-message__metadata__date--outgoing {
+      color: $session-color-white-subtle;
+    }
  }
 }

--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@ -10,7 +10,13 @@ import {
  SubMenu,
 } from 'react-contextmenu';

-import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
+import {
+  SessionIconButton,
+  SessionIconSize,
+  SessionIconType,
+} from '../session/icon';
+
+import { SessionButton, SessionButtonTypes } from '../session/SessionButton';

 interface TimerOption {
  name: string;
@ -45,6 +51,8 @@ interface Props {
  isFriendRequestPending: boolean;
  isOnline?: boolean;

+  selectedMessages: any;
+
  onSetDisappearingMessages: (seconds: number) => void;
  onDeleteMessages: () => void;
  onDeleteContact: () => void;
@ -212,7 +220,7 @@ export class ConversationHeader extends React.Component<Props> {

  public renderSearch() {
    return (
-      <div>
+      <div className="search-icon">
        <SessionIconButton
          iconType={SessionIconType.Search}
          iconSize={SessionIconSize.Large}
@ -289,6 +297,31 @@ export class ConversationHeader extends React.Component<Props> {
    );
  }

+  public renderSelectionOverlay() {
+    return (
+      <div className="message-selection-overlay">
+        <div className="close-button">
+          <SessionIconButton
+            iconType={SessionIconType.Exit}
+            iconSize={SessionIconSize.Large}
+          />
+        </div>
+
+        <div className="button-group">
+          <SessionButton
+            buttonType={SessionButtonTypes.secondary}
+            text={'Forward'}
+          />
+
+          <SessionButton
+            buttonType={SessionButtonTypes.danger}
+            text={'Delete'}
+          />
+        </div>
+      </div>
+    );
+  }
+
  public render() {
    const { id, isGroup, isPublic } = this.props;
    const triggerId = `conversation-${id}`;
@ -296,20 +329,23 @@ export class ConversationHeader extends React.Component<Props> {
    const isPrivateGroup = isGroup && !isPublic;

    return (
-      <div className="module-conversation-header">
-        {this.renderOptions(triggerId)}
-        {this.renderBackButton()}
-        <div className="module-conversation-header__title-container">
-          <div className="module-conversation-header__title-flex">
-            {this.renderTitle()}
-            {isPrivateGroup ? this.renderMemberCount() : null}
+      <>
+        {this.renderSelectionOverlay()}
+        <div className="module-conversation-header">
+          {this.renderBackButton()}
+          <div className="module-conversation-header__title-container">
+            <div className="module-conversation-header__title-flex">
+              {this.renderOptions(triggerId)}
+              {this.renderTitle()}
+              {isPrivateGroup ? this.renderMemberCount() : null}
+            </div>
          </div>
+          {this.renderExpirationLength()}
+          {this.renderSearch()}
+          {this.renderAvatar()}
+          {this.renderMenu(triggerId)}
        </div>
-        {this.renderExpirationLength()}
-        {this.renderSearch()}
-        {this.renderAvatar()}
-        {this.renderMenu(triggerId)}
-      </div>
+      </>
    );
  }

--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@ -1087,6 +1087,7 @@ export class Message extends React.PureComponent<Props, State> {
    const isIncoming = direction === 'incoming';
    const shouldHightlight = mentionMe && isIncoming && this.props.isPublic;
    const divClasses = ['loki-message-wrapper'];
+
    if (shouldHightlight) {
      divClasses.push('message-highlighted');
    }
@ -1113,7 +1114,6 @@ export class Message extends React.PureComponent<Props, State> {
        }}
      >
        <ContextMenuTrigger id={rightClickTriggerId}>
-          {this.renderCheckBox()}
          {this.renderAvatar()}
          <div
            className={classNames(
@ -1159,26 +1159,6 @@ export class Message extends React.PureComponent<Props, State> {
    );
  }

-  private renderCheckBox() {
-    const classes = ['check-box-container'];
-
-    if (this.props.multiSelectMode) {
-      classes.push('check-box-visible');
-    } else {
-      classes.push('check-box-invisible');
-    }
-
-    if (this.props.selected) {
-      classes.push('check-box-selected');
-    }
-
-    return (
-      <div className={classNames(classes)}>
-        <SessionIcon iconType={SessionIconType.Check} />
-      </div>
-    );
-  }
-
  private renderAuthor() {
    const {
      authorName,
--- a/ts/components/session/SessionButton.tsx
+++ b/ts/components/session/SessionButton.tsx
@ -7,6 +7,8 @@ export enum SessionButtonTypes {
  fullGreen = 'fullGreen',
  white = 'white',
  green = 'green',
+  secondary = 'secondary',
+  danger = 'danger',
 }

 interface Props {
@ -20,15 +22,7 @@ export class SessionButton extends React.PureComponent<Props> {
    const { buttonType, text } = this.props;

    return (
-      <div
-        className={classNames(
-          'session-button',
-          buttonType === SessionButtonTypes.green ? 'green' : '',
-          buttonType === SessionButtonTypes.fullGreen ? 'full-green' : '',
-          buttonType === SessionButtonTypes.white ? 'white' : ''
-        )}
-        role="button"
-      >
+      <div className={classNames('session-button', buttonType)} role="button">
        {text}
      </div>
    );
--- a/ts/components/session/icon/Icons.tsx
+++ b/ts/components/session/icon/Icons.tsx
@ -8,6 +8,7 @@ export enum SessionIconType {
  Ellipses = 'ellipses',
  Emoji = 'emoji',
  Eye = 'eye',
+  Exit = 'exit',
  File = 'file',
  Gear = 'gear',
  Globe = 'globe',
@ -71,6 +72,11 @@ export const icons = {
      'M12,3 C15.3798024,3 18.3386923,4.63249094 20.8545372,7.31605887 C21.7188737,8.23801779 22.4694995,9.22244509 23.1056644,10.2074746 C23.4900327,10.8026256 23.7538591,11.2716502 23.8944272,11.5527864 C24.0351909,11.8343139 24.0351909,12.1656861 23.8944272,12.4472136 C23.7538591,12.7283498 23.4900327,13.1973744 23.1056644,13.7925254 C22.4694995,14.7775549 21.7188737,15.7619822 20.8545372,16.6839411 C18.3386923,19.3675091 15.3798024,21 12,21 C8.62019756,21 5.66130774,19.3675091 3.1454628,16.6839411 C2.28112631,15.7619822 1.5305005,14.7775549 0.894335622,13.7925254 C0.50996726,13.1973744 0.246140906,12.7283498 0.105572809,12.4472136 C-0.0351909363,12.1656861 -0.0351909363,11.8343139 0.105572809,11.5527864 C0.246140906,11.2716502 0.50996726,10.8026256 0.894335622,10.2074746 C1.5305005,9.22244509 2.28112631,8.23801779 3.1454628,7.31605887 C5.66130774,4.63249094 8.62019756,3 12,3 Z M12,5 C9.25480244,5 6.77619226,6.36750906 4.6045372,8.68394113 C3.82824869,9.51198221 3.149187,10.4025549 2.57441438,11.2925254 C2.41127724,11.5451249 2.26658862,11.7823697 2.14071218,12 C2.26658862,12.2176303 2.41127724,12.4548751 2.57441438,12.7074746 C3.149187,13.5974451 3.82824869,14.4880178 4.6045372,15.3160589 C6.77619226,17.6324909 9.25480244,19 12,19 C14.7451976,19 17.2238077,17.6324909 19.3954628,15.3160589 C20.1717513,14.4880178 20.850813,13.5974451 21.4255856,12.7074746 C21.5887228,12.4548751 21.7334114,12.2176303 21.8592878,12 C21.7334114,11.7823697 21.5887228,11.5451249 21.4255856,11.2925254 C20.850813,10.4025549 20.1717513,9.51198221 19.3954628,8.68394113 C17.2238077,6.36750906 14.7451976,5 12,5 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z M12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 lZ',
    viewBox: '0 3 24 18',
  },
+  [SessionIconType.Exit]: {
+    path:
+      'M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z',
+    viewBox: '0 0 47.971 47.971',
+  },
  [SessionIconType.File]: {
    path:
      'M13,1 C13.0425909,1 13.0845598,1.00266262 13.1257495,1.00783047 L13,1 C13.0528361,1 13.1052411,1.00418141 13.1567725,1.01236099 C13.1883933,1.0172036 13.2193064,1.02361582 13.249662,1.03141743 C13.2598053,1.0342797 13.2698902,1.03704988 13.2799252,1.0399762 C13.3109399,1.04873224 13.3413507,1.05922617 13.3710585,1.07110396 C13.3800191,1.07496957 13.3890567,1.0787342 13.3980377,1.08263089 C13.4262995,1.09463815 13.4536613,1.10806791 13.4802859,1.12267436 C13.4906553,1.12855823 13.5012587,1.13461331 13.5117542,1.14086468 C13.5399066,1.15749759 13.5670269,1.17554946 13.5931738,1.19484452 C13.5995817,1.19963491 13.6064603,1.20483437 13.6132762,1.21012666 C13.6177282,1.21353888 13.6216003,1.21659988 13.625449,1.21968877 L13.7071068,1.29289322 L13.7071068,1.29289322 L20.7071068,8.29289322 C20.7364445,8.32223095 20.7639678,8.3533831 20.7894939,8.38616693 L20.7071068,8.29289322 C20.7429509,8.32873733 20.7757929,8.36702236 20.8054709,8.40735764 C20.8244505,8.43297305 20.8425024,8.46009338 20.8592238,8.48809993 C20.8653867,8.49874131 20.8714418,8.50934473 20.8772982,8.52005033 C20.8919321,8.54633874 20.9053618,8.57370048 20.9175449,8.60172936 C20.9212658,8.61094326 20.9250304,8.61998091 20.9286618,8.62907226 C20.9407738,8.65864932 20.9512678,8.68906007 20.9602981,8.72009403 C20.9629501,8.73010978 20.9657203,8.7401947 20.9683328,8.75032594 C20.9763842,8.78069364 20.9827964,8.81160666 20.9877474,8.84300527 C20.9892866,8.85360724 20.990772,8.86402246 20.9920936,8.8744695 C20.9973374,8.91544017 21,8.95740914 21,9 L21,9 L21,20 C21,21.6568542 19.6568542,23 18,23 L6,23 C4.34314575,23 3,21.6568542 3,20 L3,4 C3,2.34314575 4.34314575,1 6,1 Z M12,3 L6,3 C5.44771525,3 5,3.44771525 5,4 L5,20 C5,20.5522847 5.44771525,21 6,21 L18,21 C18.5522847,21 19,20.5522847 19,20 L19,10 L13,10 C12.4871642,10 12.0644928,9.61395981 12.0067277,9.11662113 L12,9 L12,3 Z M17.586,8 L14,4.415 L14,8 L17.586,8 lZ',
--- a/ts/components/session/icon/index.tsx
+++ b/ts/components/session/icon/index.tsx
@ -1,3 +1,3 @@
 export { icons, SessionIconSize, SessionIconType } from './Icons';
 export { SessionIcon, Props } from './SessionIcon';
-export { SessionIconButton } from './SessionIconButton';
+export { SessionIconButton } from './SessionIconButton';