Filesize toast amend

background.html

@@ -26,7 +26,7 @@
   <!--
     When making changes to these templates, be sure to update test/index.html as well
   -->
-
+  
   <script type='text/x-tmpl-mustache' id='app-loading-screen'>
     <div class='content'>
       <img src='images/loki/loki_icon_128.png'>
@@ -51,6 +51,7 @@
   </script>
 
   <script type='text/x-tmpl-mustache' id='two-column'>
+    <div id='session-toast-container'></div>
     <div class='gutter'>
       <div class='network-status-container'></div>
       <div class='left-pane-placeholder'></div>
@@ -786,6 +787,7 @@
   <script type='text/javascript' src='js/views/last_seen_indicator_view.js'></script>
   <script type='text/javascript' src='js/views/scroll_down_button_view.js'></script>
   <script type='text/javascript' src='js/views/toast_view.js'></script>
+  <script type='text/javascript' src='js/views/session_toast_view.js'></script>
   <script type='text/javascript' src='js/views/file_input_view.js'></script>
   <script type='text/javascript' src='js/views/list_view.js'></script>
   <script type='text/javascript' src='js/views/contact_list_view.js'></script>

js/background.js

@@ -802,6 +802,45 @@
       appView.openConversation(groupId, {});
     };
 
+    window.toasts = [];
+    window.pushToast = (options) => {
+      // Toast ID can be used to prevent identical toasts appearing at once.
+      // Eg, no two toasts with ID "messageDeletedAlert" can appear on the screen at once.
+      // If you want to be able to display mutliple, don't use toast IDs.
+      
+      // eslint-disable-next-line no-restricted-syntax
+      for (const toast of window.toasts){
+        if ((!!options.id) && (toast.props.id === options.id)) {
+          return;
+        }
+      }
+      
+      // Make new Toast
+      window.toasts.unshift(
+        new Whisper.SessionToastView({
+          el: window.$('#session-toast-container'),
+        })
+      );
+
+      window.toasts[0].update({
+        title: options.title,
+        description: options.description ? options.description : '',
+        type: options.type ? options.type : '',
+        id: options.id ? options.id : '',
+      });
+
+      console.log(window.toasts[0].props.id);
+
+      // Remove some toasts if too many exist
+      const maxToasts = 6;
+      const numToasts = window.toasts.length;
+
+      if (numToasts > maxToasts){
+        window.toasts[4].fadeToast();
+        window.toasts = window.toasts.slice(0, maxToasts - 1);
+      }
+    }
+
     window.sendGroupInvitations = (serverInfo, pubkeys) => {
       pubkeys.forEach(async pubkey => {
         const convo = await ConversationController.getOrCreateAndWait(

js/modules/signal.js

@@ -50,6 +50,7 @@ const {
 } = require('../../ts/components/conversation/CreateGroupDialog');
 const { EditProfileDialog } = require('../../ts/components/EditProfileDialog');
 const { UserDetailsDialog } = require('../../ts/components/UserDetailsDialog');
+const { SessionToast } = require('../../ts/components/session/SessionToast');
 
 const {
   UpdateGroupDialog,
@@ -244,6 +245,7 @@ exports.setup = (options = {}) => {
     InviteFriendsDialog,
     GroupInvitation,
     BulkEdit,
+    SessionToast,
     MediaGallery,
     Message,
     MessageBody,

js/views/conversation_view.js

@@ -23,31 +23,8 @@
     getAbsoluteAttachmentPath,
   } = window.Signal.Migrations;
 
-  Whisper.ExpiredToast = Whisper.ToastView.extend({
+  const MAX_MESSAGE_BODY_LENGTH = 64 * 1024;
-    render_attributes() {
+
-      return { toastMessage: i18n('expiredWarning') };
-    },
-  });
-  Whisper.ClockOutOfSyncToast = Whisper.ToastView.extend({
-    render_attributes() {
-      return { toastMessage: i18n('clockOutOfSync') };
-    },
-  });
-  Whisper.BlockedToast = Whisper.ToastView.extend({
-    render_attributes() {
-      return { toastMessage: i18n('unblockToSend') };
-    },
-  });
-  Whisper.BlockedGroupToast = Whisper.ToastView.extend({
-    render_attributes() {
-      return { toastMessage: i18n('unblockGroupToSend') };
-    },
-  });
-  Whisper.LeftGroupToast = Whisper.ToastView.extend({
-    render_attributes() {
-      return { toastMessage: i18n('youLeftTheGroup') };
-    },
-  });
   Whisper.OriginalNotFoundToast = Whisper.ToastView.extend({
     render_attributes() {
       return { toastMessage: i18n('originalMessageNotFound') };
@@ -69,19 +46,6 @@
     },
   });
 
-  Whisper.MessageDeletionForbiddenToast = Whisper.ToastView.extend({
-    render_attributes() {
-      return { toastMessage: i18n('messageDeletionForbidden') };
-    },
-  });
-
-  const MAX_MESSAGE_BODY_LENGTH = 64 * 1024;
-  Whisper.MessageBodyTooLongToast = Whisper.ToastView.extend({
-    render_attributes() {
-      return { toastMessage: i18n('messageBodyTooLong') };
-    },
-  });
-
   Whisper.ConversationLoadingScreen = Whisper.View.extend({
     templateName: 'conversation-loading-screen',
     className: 'conversation-loading-screen',
@@ -1410,9 +1374,10 @@
       );
 
       if (!isAllOurs && !isModerator) {
-        const toast = new Whisper.MessageDeletionForbiddenToast();
+        window.pushToast({
-        toast.$el.appendTo(this.$el);
+          title: i18n('messageDeletionForbidden'),
-        toast.render();
+          type: 'error',
+        });
 
         return;
       }
@@ -1961,31 +1926,38 @@
       let message = this.memberView.replaceMentions(input.val());
       message = window.Signal.Emoji.replaceColons(message).trim();
 
-      let toast;
+      const toastOptions = {type: 'info'};
       if (extension.expired()) {
-        toast = new Whisper.ExpiredToast();
+        toastOptions.title = i18n('expiredWarning');
+        toastOptions.id = 'expiredWarning';
       }
       if (!window.clientClockSynced) {
         // Check to see if user has updated their clock to current time
         const clockSynced = await window.LokiPublicChatAPI.setClockParams();
-        toast = clockSynced ? toast : new Whisper.ClockOutOfSyncToast();
+        if (clockSynced) {
+          toastOptions.title = i18n('clockOutOfSync');
+          toastOptions.id = 'clockOutOfSync';
+        }
       }
       if (this.model.isPrivate() && storage.isBlocked(this.model.id)) {
-        toast = new Whisper.BlockedToast();
+        toastOptions.title = i18n('unblockToSend');
+        toastOptions.id = 'unblockToSend';
       }
       if (!this.model.isPrivate() && storage.isGroupBlocked(this.model.id)) {
-        toast = new Whisper.BlockedGroupToast();
+        toastOptions.title = i18n('unblockGroupToSend');
+        toastOptions.id = 'unblockGroupToSend';
       }
       if (!this.model.isPrivate() && this.model.get('left')) {
-        toast = new Whisper.LeftGroupToast();
+        toastOptions.title = i18n('youLeftTheGroup');
+        toastOptions.id = 'youLeftTheGroup';
       }
       if (message.length > MAX_MESSAGE_BODY_LENGTH) {
-        toast = new Whisper.MessageBodyTooLongToast();
+        toastOptions.title = i18n('messageBodyTooLong');
+        toastOptions.id = 'messageBodyTooLong';
       }
 
-      if (toast) {
+      if (toastOptions.title) {
-        toast.$el.appendTo(this.$el);
+        window.pushToast(toastOptions);       
-        toast.render();
         this.focusMessageFieldAndClearDisabled();
         return;
       }

js/views/file_input_view.js

@@ -14,35 +14,6 @@
 
   const { MIME, VisualAttachment } = window.Signal.Types;
 
-  Whisper.FileSizeToast = Whisper.ToastView.extend({
-    templateName: 'file-size-modal',
-    render_attributes() {
-      return {
-        'file-size-warning': i18n('fileSizeWarning'),
-        limit: this.model.limit,
-        units: this.model.units,
-      };
-    },
-  });
-  Whisper.UnableToLoadToast = Whisper.ToastView.extend({
-    render_attributes() {
-      return { toastMessage: i18n('unableToLoadAttachment') };
-    },
-  });
-
-  Whisper.DangerousFileTypeToast = Whisper.ToastView.extend({
-    template: i18n('dangerousFileType'),
-  });
-  Whisper.OneNonImageAtATimeToast = Whisper.ToastView.extend({
-    template: i18n('oneNonImageAtATimeToast'),
-  });
-  Whisper.CannotMixImageAndNonImageAttachmentsToast = Whisper.ToastView.extend({
-    template: i18n('cannotMixImageAdnNonImageAttachments'),
-  });
-  Whisper.MaxAttachmentsToast = Whisper.ToastView.extend({
-    template: i18n('maximumAttachments'),
-  });
-
   Whisper.FileInputView = Backbone.View.extend({
     tagName: 'span',
     className: 'file-input',
@@ -217,43 +188,53 @@
     },
 
     // Show errors
-
     showLoadFailure() {
-      const toast = new Whisper.UnableToLoadToast();
+      window.pushToast({
-      toast.$el.insertAfter(this.$el);
+        title: i18n('unableToLoadAttachment'),
-      toast.render();
+        type: 'error',
+        id: 'unableToLoadAttachment',
+      });
     },
 
     showDangerousError() {
-      const toast = new Whisper.DangerousFileTypeToast();
+      window.pushToast({
-      toast.$el.insertAfter(this.$el);
+        title: i18n('dangerousFileType'),
-      toast.render();
+        type: 'error',
+        id: 'dangerousFileType',
+      });
     },
 
-    showFileSizeError({ limit, units, u }) {
+    showFileSizeError() {
-      const toast = new Whisper.FileSizeToast({
+      window.pushToast({
-        model: { limit, units: units[u] },
+        title: i18n('fileSizeWarning'),
+        description: `Max size: ${this.model.limit} ${this.model.units}`,
+        type: 'error',
+        id: 'fileSizeWarning',
       });
-      toast.$el.insertAfter(this.$el);
-      toast.render();
     },
 
     showCannotMixError() {
-      const toast = new Whisper.CannotMixImageAndNonImageAttachmentsToast();
+      window.pushToast({
-      toast.$el.insertAfter(this.$el);
+        title: i18n('cannotMixImageAdnNonImageAttachments'),
-      toast.render();
+        type: 'error',
+        id: 'cannotMixImageAdnNonImageAttachments',
+      });
     },
 
     showMultipleNonImageError() {
-      const toast = new Whisper.OneNonImageAtATimeToast();
+      window.pushToast({
-      toast.$el.insertAfter(this.$el);
+        title: i18n('oneNonImageAtATimeToast'),
-      toast.render();
+        type: 'error',
+        id: 'oneNonImageAtATimeToast',
+      });
     },
 
     showMaximumAttachmentsError() {
-      const toast = new Whisper.MaxAttachmentsToast();
+      window.pushToast({
-      toast.$el.insertAfter(this.$el);
+        title: i18n('maximumAttachments'),
-      toast.render();
+        type: 'error',
+        id: 'maximumAttachments',
+      });
     },
 
     // Housekeeping
@@ -388,7 +369,7 @@
             limit /= 1000;
             u += 1;
           } while (limit >= 1000 && u < units.length - 1);
-          this.showFileSizeError({ limit, units, u });
+          this.showFileSizeError();
           return;
         }
       } catch (error) {

js/views/seed_dialog_view.js

@@ -74,12 +74,11 @@
     },
     copySeed() {
       window.clipboard.writeText(this.seed);
-
+      window.pushToast({
-      const toast = new Whisper.MessageToastView({
+        title: i18n('copiedMnemonic'),
-        message: i18n('copiedMnemonic'),
+        type: 'success',
+        id: 'copySeedToast',
       });
-      toast.$el.appendTo(this.$el);
-      toast.render();
     },
     onKeyup(event) {
       switch (event.key) {

js/views/session_toast_view.js

@@ -0,0 +1,53 @@
+/* global Whisper, $ */
+
+// eslint-disable-next-line func-names
+(function() {
+    'use strict';
+  
+    window.Whisper = window.Whisper || {};
+  
+    Whisper.SessionToastView = Whisper.View.extend({
+      initialize(options) {
+        this.props = {
+          el: $('#session-toast-container'),
+          title: options.title,
+          description: options.description,
+          fadeToast: this.fadeToast.bind(this),
+          closeToast: this.closeToast.bind(this),
+        };
+      },
+
+      render() {
+        this.toastView = new Whisper.ReactWrapperView({
+          className: 'session-toast-wrapper',
+          Component: window.Signal.Components.SessionToast,
+          props: this.props,
+        });
+  
+        this.$el.append(this.toastView.el);
+      },
+
+      update(options) {
+        this.props.title = options.title;
+        this.props.description = options.description ? options.description : '';
+        this.props.type = options.type ? options.type : '';
+        this.props.id = options.id ? options.id : '';
+        this.render();
+
+        setTimeout(this.fadeToast.bind(this), 4000);
+      },
+
+      fadeToast() {
+        this.toastView.$el.fadeOut(500, () => {
+          this.toastView.remove();
+        });
+      },
+    
+      closeToast() {
+        this.toastView.$el.fadeOut(125, () => {
+          this.toastView.remove();
+        });
+      },
+
+    });
+  })();

js/views/standalone_registration_view.js

@@ -174,7 +174,10 @@
     async register(mnemonic, language) {
       // Make sure the password is valid
       if (this.validatePassword()) {
-        this.showToast(i18n('invalidPassword'));
+        window.pushToast({
+          title: i18n('invalidPassword'),
+          type: 'info',
+        });
         return;
       }
 
@@ -195,7 +198,10 @@
         this.$el.trigger('openInbox');
       } catch (e) {
         if (typeof e === 'string') {
-          this.showToast(e);
+          window.pushToast({
+            title: e,
+            type: 'info',
+          });
         }
         this.log(e);
       }
@@ -337,8 +343,10 @@
     },
     onCopyMnemonic() {
       window.clipboard.writeText(this.$('#mnemonic-display').text());
-
+      window.pushToast({
-      this.showToast(i18n('copiedMnemonic'));
+        title: i18n('copiedMnemonic'),
+        type: 'info',
+      });
     },
     log(s) {
       window.log.info(s);
@@ -478,12 +486,5 @@
     trim(value) {
       return value ? value.trim() : value;
     },
-    showToast(message) {
-      const toast = new Whisper.MessageToastView({
-        message,
-      });
-      toast.$el.appendTo(this.$el);
-      toast.render();
-    },
   });
 })();

stylesheets/_session.scss

@@ -322,20 +322,27 @@ $session_message-container-border-radius: 5px;
   margin-top: 13.5px;
 }
 
-.session-toast {
+#session-toast-container {
   position: fixed;
   right: $session-margin-lg;
   bottom: $session-margin-lg;
 
-  padding: $session-margin-md $session-margin-md;
   z-index: 100;
+}
 
+.session-toast {
+  position: relative;
+  padding: $session-margin-md $session-margin-md;
   background-color: rgba($session-shade-6, 0.8);
-
+  margin-bottom: $session-margin-md;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
 
+  &:nth-child(n + 6){
+    display: none;
+  }
+
   .toast-icon,
   .toast-info {
     display: flex;
@@ -357,7 +364,6 @@ $session_message-container-border-radius: 5px;
 
   .title,
   .description {
-    white-space: nowrap;
     text-overflow: ellipsis;
   }
 

ts/components/UserDetailsDialog.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Avatar } from './Avatar';
 
+import { SessionToast, SessionToastType } from './session/SessionToast';
+
 declare global {
   interface Window {
     displayNameRegex: any;
@@ -46,6 +48,11 @@ export class UserDetailsDialog extends React.Component<Props> {
             {cancelText}
           </button>
 
+          <SessionToast
+            title="This is a notification!"
+            type={SessionToastType.Error}
+          />
+
           <button
             className="ok"
             tabIndex={0}

ts/components/session/SessionToast.tsx

@@ -17,16 +17,18 @@ export enum SessionToastType {
 
 interface Props {
   title: string;
-  description: string;
+  description?: string;
-  type: SessionToastType;
+  type?: SessionToastType;
+  id?: string;
+  fadeToast: any;
+  closeToast: any;
 }
 
 export class SessionToast extends React.PureComponent<Props> {
   public static defaultProps = {
-    description: '',
+    id: '',
-    type: SessionToastType.Info,
   };
-
+  
   constructor(props: any) {
     super(props);
   }
@@ -34,6 +36,9 @@ export class SessionToast extends React.PureComponent<Props> {
   public render() {
     const { title, description, type } = this.props;
 
+    const toastType = type ? type : SessionToastType.Info;
+    const toastDesc = description ? description : '';
+
     let toastIcon;
     switch (type) {
       case SessionToastType.Info:
@@ -52,17 +57,15 @@ export class SessionToast extends React.PureComponent<Props> {
         toastIcon = SessionIconType.Globe;
     }
 
-    setTimeout(this.fadeToast.bind(this), 5000);
-
     return (
-      <div className={classNames('session-toast', type)}>
+      <div className={classNames('session-toast', toastType)}>
         <div className="toast-icon">
-          <SessionIcon iconType={toastIcon} iconSize={SessionIconSize.Large} />
+          <SessionIcon iconType={toastIcon} iconSize={toastDesc ? SessionIconSize.Large : SessionIconSize.Medium } />
         </div>
         <div className="toast-info">
           <div className="toast-info-container">
             <h3 className="title">{title}</h3>
-            <p className="description">{description}</p>
+            <p className="description">{toastDesc}</p>
           </div>
         </div>
 
@@ -70,18 +73,10 @@ export class SessionToast extends React.PureComponent<Props> {
           <SessionIconButton
             iconType={SessionIconType.Exit}
             iconSize={SessionIconSize.Small}
-            onClick={this.closeToast}
+            onClick={this.props.closeToast}
           />
         </div>
       </div>
     );
   }
-
-  public fadeToast() {
-    $('.session-toast').fadeOut(500);
-  }
-
-  public closeToast() {
-    $('.session-toast').fadeOut(125);
-  }
 }