mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-03 08:28:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement toast notifications for user actions and enhance UI feedback

Browse Source
This commit is contained in:
mr. M
2025-02-15 11:23:44 +01:00
committed by mr. m
parent 8372671b70
commit 3649d7f111
6 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/browser/base/content/ZenUIManager.mjs
View File

@@ -14,6 +14,10 @@ var gZenUIManager = {
return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
});
ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
return document.getElementById('zen-toast-container');
});
new ResizeObserver(this.updateTabsToolbar.bind(this)).observe(document.getElementById('TabsToolbar'));
new ResizeObserver(
@@ -209,6 +213,38 @@ var gZenUIManager = {
}
}
},
// Section: Notification messages
_createToastElement(messageId, options) {
const element = document.createXULElement('vbox');
const label = document.createXULElement('label');
document.l10n.setAttributes(label, messageId, options);
element.appendChild(label);
if (options.descriptionId) {
const description = document.createXULElement('label');
description.classList.add('description');
document.l10n.setAttributes(description, options.descriptionId, options);
element.appendChild(description);
}
element.classList.add('zen-toast');
return element;
},
async showToast(messageId, options = {}) {
const toast = this._createToastElement(messageId, options);
this._toastContainer.removeAttribute('hidden');
this._toastContainer.appendChild(toast);
await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', duration: 0.3 });
await new Promise((resolve) => setTimeout(resolve, 3000));
await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
const toastHeight = toast.getBoundingClientRect().height;
// 5 for the separation between toasts
await this.motion.animate(toast, { marginBottom: [0, `-${toastHeight + 5}px`] }, { duration: 0.2 });
toast.remove();
if (!this._toastContainer.hasChildNodes()) {
this._toastContainer.setAttribute('hidden', 'true');
}
},
};
var gZenVerticalTabsManager = {