diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx index 9440aa3463..c88c830d59 100644 --- a/src/components/structures/ToastContainer.tsx +++ b/src/components/structures/ToastContainer.tsx @@ -15,12 +15,12 @@ limitations under the License. */ import * as React from "react"; -import { _t } from '../../languageHandler'; import ToastStore, {IToast} from "../../stores/ToastStore"; import classNames from "classnames"; interface IState { toasts: IToast[]; + countSeen: number; } export default class ToastContainer extends React.Component<{}, IState> { @@ -28,6 +28,7 @@ export default class ToastContainer extends React.Component<{}, IState> { super(props, context); this.state = { toasts: ToastStore.sharedInstance().getToasts(), + countSeen: ToastStore.sharedInstance().getCountSeen(), }; // Start listening here rather than in componentDidMount because @@ -42,7 +43,10 @@ export default class ToastContainer extends React.Component<{}, IState> { } _onToastStoreUpdate = () => { - this.setState({toasts: ToastStore.sharedInstance().getToasts()}); + this.setState({ + toasts: ToastStore.sharedInstance().getToasts(), + countSeen: ToastStore.sharedInstance().getCountSeen(), + }); }; render() { @@ -56,7 +60,11 @@ export default class ToastContainer extends React.Component<{}, IState> { "mx_Toast_hasIcon": icon, [`mx_Toast_icon_${icon}`]: icon, }); - const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null; + + let countIndicator; + if (isStacked || this.state.countSeen > 0) { + countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`; + } const toastProps = Object.assign({}, props, { key, diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 8ac05bf429..812ce826fc 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2083,7 +2083,6 @@ "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.", "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.", "Failed to load timeline position": "Failed to load timeline position", - " (1/%(totalCount)s)": " (1/%(totalCount)s)", "Guest": "Guest", "Your profile": "Your profile", "Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others", diff --git a/src/stores/ToastStore.ts b/src/stores/ToastStore.ts index 23317a0ad3..e963ecd736 100644 --- a/src/stores/ToastStore.ts +++ b/src/stores/ToastStore.ts @@ -32,6 +32,9 @@ export interface IToast[] = []; + // The count of toasts which have been seen & dealt with in this stack + // where the count resets when the stack of toasts clears. + private countSeen = 0; static sharedInstance() { if (!window.mx_ToastStore) window.mx_ToastStore = new ToastStore(); @@ -40,6 +43,7 @@ export default class ToastStore extends EventEmitter { reset() { this.toasts = []; + this.countSeen = 0; } /** @@ -67,6 +71,12 @@ export default class ToastStore extends EventEmitter { const length = this.toasts.length; this.toasts = this.toasts.filter(t => t.key !== key); if (length !== this.toasts.length) { + if (this.toasts.length === 0) { + this.countSeen = 0; + } else { + this.countSeen++; + } + this.emit('update'); } } @@ -74,4 +84,8 @@ export default class ToastStore extends EventEmitter { getToasts() { return this.toasts; } + + getCountSeen() { + return this.countSeen; + } }