mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-05 12:16:53 +02:00
Code Issues Projects Releases Wiki Activity

Remove the count indicator from toasts (#31718)

Browse Source
This commit is contained in:
Andy Balaam 2026-01-14 09:57:00 +00:00 committed by GitHub
parent 33764d39ba
commit 9640c330e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 1 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

7
res/css/structures/_ToastContainer.pcss
View File

@ -78,13 +78,6 @@ Please see LICENSE files in the repository root for full details.
display: inline;
width: auto;
}
.mx_Toast_title_countIndicator {
font-size: $font-12px;
line-height: $font-22px;
color: $secondary-content;
margin-inline-start: auto; /* on the end side of the div */
}
}
.mx_Toast_body {

9
src/components/structures/ToastContainer.tsx
View File

@ -15,7 +15,6 @@ import ToastStore, { type IToast } from "../../stores/ToastStore";
interface IState {
toasts: IToast<any>[];
countSeen: number;
}
export default class ToastContainer extends React.Component<EmptyObject, IState> {
@ -23,7 +22,6 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
super(props);
this.state = {
toasts: ToastStore.sharedInstance().getToasts(),
countSeen: ToastStore.sharedInstance().getCountSeen(),
};
}
@ -39,7 +37,6 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
private onToastStoreUpdate = (): void => {
this.setState({
toasts: ToastStore.sharedInstance().getToasts(),
countSeen: ToastStore.sharedInstance().getCountSeen(),
});
};
@ -61,11 +58,6 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
});
const content = React.createElement(component, toastProps);
let countIndicator;
if ((title && isStacked) || this.state.countSeen > 0) {
countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
}
let titleElement;
if (title) {
titleElement = (
@ -73,7 +65,6 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
<Text size="lg" weight="semibold" as="h2">
{title}
</Text>
<span className="mx_Toast_title_countIndicator">{countIndicator}</span>
</div>
);
}

16
src/stores/ToastStore.ts
View File

@ -30,9 +30,6 @@ export interface IToast<C extends ComponentClass> {
*/
export default class ToastStore extends EventEmitter {
private toasts: IToast<any>[] = [];
// 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;
public static sharedInstance(): ToastStore {
if (!window.mxToastStore) window.mxToastStore = new ToastStore();
@ -41,7 +38,6 @@ export default class ToastStore extends EventEmitter {
public reset(): void {
this.toasts = [];
this.countSeen = 0;
}
/**
@ -68,18 +64,10 @@ export default class ToastStore extends EventEmitter {
}
public dismissToast(key: string): void {
if (this.toasts[0] && this.toasts[0].key === key) {
this.countSeen++;
}
const length = this.toasts.length;
this.toasts = this.toasts.filter((t) => t.key !== key);
if (length !== this.toasts.length) {
logger.info(`Removed toast with key '${key}'`);
if (this.toasts.length === 0) {
this.countSeen = 0;
}
this.emit("update");
}
}
@ -87,8 +75,4 @@ export default class ToastStore extends EventEmitter {
public getToasts(): IToast<any>[] {
return this.toasts;
}
public getCountSeen(): number {
return this.countSeen;
}
}

34
test/unit-tests/stores/ToastStore-test.ts
View File

@ -71,7 +71,6 @@ describe("ToastStore", () => {
store.dismissToast("whatever");
expect(store.getCountSeen()).toEqual(0);
expect(emitSpy).not.toHaveBeenCalled();
});
@ -85,43 +84,13 @@ describe("ToastStore", () => {
store.dismissToast(toastA.key);
expect(store.getCountSeen()).toEqual(0);
expect(emitSpy).toHaveBeenCalledWith("update");
expect(store.getToasts()).toEqual([toastB]);
});
it("increments countSeen when toast has bottom priority", () => {
const store = new ToastStore();
const toastA = makeToast(1, "a");
const toastB = makeToast(3, "b");
const toastC = makeToast(99, "c");
store.addOrReplaceToast(toastA);
store.addOrReplaceToast(toastC);
store.addOrReplaceToast(toastB);
const emitSpy = jest.spyOn(store, "emit");
store.dismissToast(toastC.key);
expect(store.getCountSeen()).toEqual(1);
expect(emitSpy).toHaveBeenCalledWith("update");
});
it("resets countSeen when no toasts remain", () => {
const store = new ToastStore();
const toastA = makeToast(1, "a");
const toastB = makeToast(3, "b");
store.addOrReplaceToast(toastA);
store.addOrReplaceToast(toastB);
store.dismissToast(toastB.key);
expect(store.getCountSeen()).toEqual(1);
store.dismissToast(toastA.key);
expect(store.getCountSeen()).toEqual(0);
});
});
describe("reset()", () => {
it("clears countseen and toasts", () => {
it("clears toasts", () => {
const store = new ToastStore();
const toastA = makeToast(1, "a");
const toastB = makeToast(3, "b");
@ -131,7 +100,6 @@ describe("ToastStore", () => {
store.dismissToast(toastB.key);
store.reset();
expect(store.getCountSeen()).toEqual(0);
expect(store.getToasts()).toEqual([]);
});
});

3
test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
View File

@ -30,9 +30,6 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
>
New login. Was this you?
</h2>
<span
class="mx_Toast_title_countIndicator"
/>
</div>
<div
class="mx_Toast_body"