From 4d463c659cc1858f6c4d156d4de4efe2c109a97f Mon Sep 17 00:00:00 2001 From: Vincent Date: Mon, 16 Dec 2019 17:38:43 +1100 Subject: [PATCH] Filesize toast amend --- background.html | 4 +- js/background.js | 39 +++++++++++ js/modules/signal.js | 2 + js/views/conversation_view.js | 74 +++++++-------------- js/views/file_input_view.js | 83 +++++++++--------------- js/views/seed_dialog_view.js | 9 ++- js/views/session_toast_view.js | 53 +++++++++++++++ js/views/standalone_registration_view.js | 23 +++---- stylesheets/_session.scss | 14 ++-- ts/components/UserDetailsDialog.tsx | 7 ++ ts/components/session/SessionToast.tsx | 33 ++++------ 11 files changed, 199 insertions(+), 142 deletions(-) create mode 100644 js/views/session_toast_view.js diff --git a/background.html b/background.html index eeda839c3..6dd3925ed 100644 --- a/background.html +++ b/background.html @@ -26,7 +26,7 @@ - + + diff --git a/js/background.js b/js/background.js index d5bb0898f..f37e4aaf6 100644 --- a/js/background.js +++ b/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( diff --git a/js/modules/signal.js b/js/modules/signal.js index bf214dc98..57932a1b4 100644 --- a/js/modules/signal.js +++ b/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, diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 7ade001eb..afd2e6700 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -23,31 +23,8 @@ getAbsoluteAttachmentPath, } = window.Signal.Migrations; - Whisper.ExpiredToast = Whisper.ToastView.extend({ - 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') }; - }, - }); + const MAX_MESSAGE_BODY_LENGTH = 64 * 1024; + 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(); - toast.$el.appendTo(this.$el); - toast.render(); + window.pushToast({ + title: i18n('messageDeletionForbidden'), + 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) { - toast.$el.appendTo(this.$el); - toast.render(); + if (toastOptions.title) { + window.pushToast(toastOptions); this.focusMessageFieldAndClearDisabled(); return; } diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js index 91900b0f5..1aebee109 100644 --- a/js/views/file_input_view.js +++ b/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(); - toast.$el.insertAfter(this.$el); - toast.render(); + window.pushToast({ + title: i18n('unableToLoadAttachment'), + type: 'error', + id: 'unableToLoadAttachment', + }); }, showDangerousError() { - const toast = new Whisper.DangerousFileTypeToast(); - toast.$el.insertAfter(this.$el); - toast.render(); + window.pushToast({ + title: i18n('dangerousFileType'), + type: 'error', + id: 'dangerousFileType', + }); }, - showFileSizeError({ limit, units, u }) { - const toast = new Whisper.FileSizeToast({ - model: { limit, units: units[u] }, + showFileSizeError() { + window.pushToast({ + 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(); - toast.$el.insertAfter(this.$el); - toast.render(); + window.pushToast({ + title: i18n('cannotMixImageAdnNonImageAttachments'), + type: 'error', + id: 'cannotMixImageAdnNonImageAttachments', + }); }, showMultipleNonImageError() { - const toast = new Whisper.OneNonImageAtATimeToast(); - toast.$el.insertAfter(this.$el); - toast.render(); + window.pushToast({ + title: i18n('oneNonImageAtATimeToast'), + type: 'error', + id: 'oneNonImageAtATimeToast', + }); }, showMaximumAttachmentsError() { - const toast = new Whisper.MaxAttachmentsToast(); - toast.$el.insertAfter(this.$el); - toast.render(); + window.pushToast({ + title: i18n('maximumAttachments'), + 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) { diff --git a/js/views/seed_dialog_view.js b/js/views/seed_dialog_view.js index 244006bc9..88b282008 100644 --- a/js/views/seed_dialog_view.js +++ b/js/views/seed_dialog_view.js @@ -74,12 +74,11 @@ }, copySeed() { window.clipboard.writeText(this.seed); - - const toast = new Whisper.MessageToastView({ - message: i18n('copiedMnemonic'), + window.pushToast({ + title: i18n('copiedMnemonic'), + type: 'success', + id: 'copySeedToast', }); - toast.$el.appendTo(this.$el); - toast.render(); }, onKeyup(event) { switch (event.key) { diff --git a/js/views/session_toast_view.js b/js/views/session_toast_view.js new file mode 100644 index 000000000..3777fa2d2 --- /dev/null +++ b/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(); + }); + }, + + }); + })(); \ No newline at end of file diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js index faaabd326..937738dfb 100644 --- a/js/views/standalone_registration_view.js +++ b/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()); - - this.showToast(i18n('copiedMnemonic')); + window.pushToast({ + 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(); - }, }); })(); diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4bfb96dd5..c3e4018b8 100644 --- a/stylesheets/_session.scss +++ b/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; } diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index e52f49713..1440c835f 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/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 { {cancelText} + +