diff --git a/js/background.js b/js/background.js index 3dd639272..e43c08151 100644 --- a/js/background.js +++ b/js/background.js @@ -802,7 +802,7 @@ appView.openConversation(groupId, {}); }; - window.toasts = {}; + window.toasts = new Map(); window.pushToast = options => { // Setting toasts with the same ID can be used to prevent identical // toasts from appearing at once (stacking). @@ -810,45 +810,38 @@ const params = { title: options.title, - description: options.description ? options.description : '', - type: options.type ? options.type : '', - id: options.id ? options.id : '', + id: + options.id || + Math.random() + .toString(36) + .substring(3), + description: options.description || '', + type: options.type || '', }; // Give all toasts an ID. User may define. - const toastID = options.id - ? options.id - : Math.random() - .toString(36) - .substring(3); - - let toastExists = false; - // eslint-disable-next-line no-restricted-syntax - for (const key in window.toasts) { - if (!!options.id && key === options.id) { - toastExists = true; - window.toasts[key].update(params); - break; - } - } - - if (!toastExists) { + const toastID = params.id; + const toast = !!toastID && window.toasts.get(toastID); + if (toast) { + window.toasts.get(toastID).update(params); + } else { // Make new Toast - window.toasts[toastID] = new Whisper.SessionToastView({ - el: window.$('#session-toast-container'), - }); + window.toasts.set( + toastID, + new Whisper.SessionToastView({ + el: $('#session-toast-container'), + }) + ); - window.toasts[toastID].render(); - window.toasts[toastID].update(params); + window.toasts.get(toastID).render(); + window.toasts.get(toastID).update(params); } // Remove some toasts if too many exist const maxToasts = 6; - const numToasts = window.toasts.length; - - if (numToasts > maxToasts) { - const finalToastID = window.toasts.keys[window.toasts.length]; - window.toasts[finalToastID].fadeToast(); + while (window.toasts.size > maxToasts) { + const finalToastID = window.toasts.keys().next().value; + window.toasts.get(finalToastID).fadeToast(); } return toastID; diff --git a/js/models/conversations.js b/js/models/conversations.js index dce4e3dd7..667af34da 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -2648,8 +2648,11 @@ copyPublicKey() { clipboard.writeText(this.id); - window.Whisper.events.trigger('showToast', { - message: i18n('copiedPublicKey'), + + window.pushToast({ + title: i18n('copiedPublicKey'), + type: 'success', + id: 'copiedPublicKey', }); }, diff --git a/js/models/messages.js b/js/models/messages.js index 4bdf62f14..8cfd7133d 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -1021,8 +1021,11 @@ } else { clipboard.writeText(this.OUR_NUMBER); } - window.Whisper.events.trigger('showToast', { - message: i18n('copiedPublicKey'), + + window.pushToast({ + title: i18n('copiedPublicKey'), + type: 'success', + id: 'copiedPublicKey', }); }, @@ -1037,12 +1040,16 @@ const success = await channelAPI.banUser(source); if (success) { - window.Whisper.events.trigger('showToast', { - message: i18n('userBanned'), + window.pushToast({ + title: i18n('userBanned'), + type: 'success', + id: 'userBanned', }); } else { - window.Whisper.events.trigger('showToast', { - message: i18n('userBanFailed'), + window.pushToast({ + title: i18n('userBanFailed'), + type: 'error', + id: 'userBanFailed', }); } }, @@ -1074,8 +1081,11 @@ copyText() { clipboard.writeText(this.get('body')); - window.Whisper.events.trigger('showToast', { - message: i18n('copiedMessage'), + + window.pushToast({ + title: i18n('copiedMessage'), + type: 'success', + id: 'copiedMessage', }); }, diff --git a/js/views/add_server_dialog_view.js b/js/views/add_server_dialog_view.js index 718a154c4..ae05bb84e 100644 --- a/js/views/add_server_dialog_view.js +++ b/js/views/add_server_dialog_view.js @@ -53,8 +53,10 @@ this.showError(result.errorCode); return; } - window.Whisper.events.trigger('showToast', { - message: i18n('connectToServerSuccess'), + window.pushToast({ + title: i18n('connectToServerSuccess'), + type: 'success', + id: 'connectToServerSuccess', }); this.close(); }); diff --git a/js/views/session_toast_view.js b/js/views/session_toast_view.js index d8e94b9b4..3579a7f69 100644 --- a/js/views/session_toast_view.js +++ b/js/views/session_toast_view.js @@ -1,4 +1,4 @@ -/* global Whisper, $ */ +/* global Whisper */ // eslint-disable-next-line func-names (function() { @@ -9,8 +9,8 @@ Whisper.SessionToastView = Whisper.View.extend({ initialize(options) { this.props = { - el: $('#session-toast-container'), title: options.title, + id: options.id, description: options.description, fadeToast: this.fadeToast.bind(this), closeToast: this.closeToast.bind(this), @@ -29,13 +29,14 @@ 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.props.id = options.id; + this.props.description = options.description || ''; + this.props.type = options.type || ''; this.toastView.update(this.props); this.showToast(); + clearTimeout(this.timer); this.timer = setTimeout(this.fadeToast.bind(this), 4000); }, @@ -45,22 +46,22 @@ }, fadeToast() { + this.removeToast(); this.toastView.$el.fadeOut(500, () => { - this.removeToast(); + this.toastView.remove(); }); }, closeToast() { + this.removeToast(); this.toastView.$el.fadeOut(125, () => { - this.removeToast(); + this.toastView.remove(); }); }, removeToast() { - this.toastView.remove(); - if (this.props.id) { - delete window.toasts[this.props.id]; + window.toasts.delete(this.props.id); } }, }); diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 8128eb7fc..730ab25e0 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -307,51 +307,50 @@ $session_message-container-border-radius: 5px; padding-top: 5px; } -.odule-message__container { +.module-message__container { border-radius: $session_message-container-border-radius; +} +label { + user-select: none; +} - label { - user-select: none; - } +.module-message__attachment-container, +.module-image--curved-bottom-right, +.module-image--curved-bottom-left { + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-left-radius: $session_message-container-border-radius; + border-bottom-right-radius: $session_message-container-border-radius; +} - .module-message__attachment-container, - .module-image--curved-bottom-right, - .module-image--curved-bottom-left { - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-left-radius: $session_message-container-border-radius; - border-bottom-right-radius: $session_message-container-border-radius; - } +.conversation-header .session-icon-button { + @include standard-icon-button(); +} - .conversation-header .session-icon-button { - @include standard-icon-button(); - } +.module-conversation-header, +.message-selection-overlay { + height: $session-conversation-header-height; +} - .module-conversation-header, - .message-selection-overlay { - height: $session-conversation-header-height; - } +.message-selection-overlay { + position: absolute; + left: 15px; + right: 15px; + display: none; - .message-selection-overlay { - position: absolute; - left: 15px; - right: 15px; - display: none; - - .close-button { - float: left; - margin-top: 17px; - margin-left: 7px; - } - } - .message-selection-overlay div[role='button'] { - display: inline-block; + .close-button { + float: left; + margin-top: 17px; + margin-left: 7px; } +} +.message-selection-overlay div[role='button'] { + display: inline-block; +} - .message-selection-overlay .button-group { - float: right; - margin-top: 13.5px; - } +.message-selection-overlay .button-group { + float: right; + margin-top: 13.5px; } .hidden { @@ -427,10 +426,6 @@ $session_message-container-border-radius: 5px; flex-direction: row; justify-content: flex-start; - &:nth-child(n + 6) { - display: none; - } - .toast-icon, .toast-info { display: flex; diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 921567478..8c071bb0d 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -317,12 +317,6 @@ export class ConversationHeader extends React.Component {
- - { - public static defaultProps = { - id: '', - }; - constructor(props: any) { super(props); } @@ -38,7 +34,9 @@ export class SessionToast extends React.PureComponent { const toastType = type ? type : SessionToastType.Info; const toastDesc = description ? description : ''; - const toastIconSize = toastDesc ? SessionIconSize.Large : SessionIconSize.Medium; + const toastIconSize = toastDesc + ? SessionIconSize.Large + : SessionIconSize.Medium; let toastIcon; switch (type) { @@ -58,14 +56,10 @@ export class SessionToast extends React.PureComponent { toastIcon = SessionIconType.Info; } - return (
- +