diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index bf44859..f6f4a38 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -13,17 +13,16 @@ --mageforge-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mageforge-color-white: #ffffff; --mageforge-color-blue: #3b82f6; - --mageforge-color-blue-dark: #2563eb; --mageforge-color-green: #10b981; - --mageforge-color-green-dark: #059669; --mageforge-color-green-alpha-15: rgba(16, 185, 129, 0.15); --mageforge-color-green-alpha-35: rgba(16, 185, 129, 0.35); --mageforge-color-red: #ef4444; --mageforge-color-red-alpha-15: rgba(239, 68, 68, 0.15); --mageforge-color-red-alpha-35: rgba(239, 68, 68, 0.35); - --mageforge-color-slate-200: #e2e8f0; --mageforge-color-slate-400: #94a3b8; --mageforge-color-orange: #fb923c; + --mageforge-color-pink: #C850C0; + --mageforge-color-amber: #edb04d; --mageforge-bg-dark: rgba(15, 23, 42, 0.98); --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98); --mageforge-border-color: rgba(148, 163, 184, 0.15); @@ -34,12 +33,10 @@ --mageforge-shadow-lg: rgba(0, 0, 0, 0.4); --mageforge-burger-bg: rgba(15, 23, 42, 0.85); --mageforge-burger-bg-hover: rgba(30, 41, 59, 0.95); - --mageforge-toolbar-burger-active-bg: #10b981; - --mageforge-toolbar-burger-active-border: #10b981; --mageforge-toggle-bg-off: rgba(255, 255, 255, 0.15); --mageforge-toggle-bg-off-light: rgba(0, 0, 0, 0.15); - --gradient-brand: linear-gradient(43deg, #3b82f6 0%, #C850C0 50%, #edb04d 100%); - --gradient-brand-hover: linear-gradient(43deg, #3b82f6 0%, #C850C0 70%, #edb04d 100%); + --gradient-brand: linear-gradient(43deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-pink) 50%, var(--mageforge-color-amber) 100%); + --gradient-brand-hover: linear-gradient(43deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-pink) 70%, var(--mageforge-color-amber) 100%); } .mageforge-toolbar *, @@ -56,11 +53,11 @@ .mageforge-toolbar { position: fixed; - bottom: 1rem; - left: 1rem; + bottom: 16px; + left: 16px; display: flex; align-items: center; - gap: 0.5rem; + gap: 8px; z-index: 9999998; pointer-events: auto; } @@ -92,7 +89,6 @@ transform: translateY(-2px); box-shadow: 0 8px 20px var(--mageforge-shadow-lg), 0 4px 8px var(--mageforge-shadow-md); background-image: var(--gradient-brand-hover); - cursor: pointer; } .mageforge-toolbar-burger:active { @@ -100,8 +96,7 @@ } .mageforge-toolbar-burger.mageforge-active { - background: var(--mageforge-toolbar-burger-active-bg); - border-color: var(--mageforge-toolbar-burger-active-border); + background: var(--mageforge-color-green); } .mageforge-toolbar-burger-icon { @@ -180,7 +175,6 @@ } } - .mageforge-toolbar-menu-title { display: flex; align-items: center; @@ -192,13 +186,11 @@ .mageforge-toolbar-menu-title-text { font-family: var(--mageforge-font-family); - font-size: 1.25rem; + font-size: 20px; font-weight: 700; letter-spacing: 0.08em; - padding-bottom: 0.5rem; + padding-bottom: 8px; color: transparent; - background-color: #4158D0; - text-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); background-image: var(--gradient-brand); background-clip: text; -webkit-background-clip: text; @@ -266,7 +258,7 @@ font-size: 16px; flex-shrink: 0; width: 10%; - min-width: 2rem; + min-width: 32px; display: flex; align-items: center; justify-content: center; @@ -387,7 +379,7 @@ .mageforge-toolbar-menu-group-label { font-family: var(--mageforge-font-family); - font-size: 0.7rem; + font-size: 11px; font-weight: 600; text-transform: uppercase; transition: color 0.15s ease; @@ -423,7 +415,7 @@ .mageforge-audit-overlay { position: fixed; pointer-events: none; - background-color: rgba(239, 68, 68, 0.35); + background-color: var(--mageforge-color-red-alpha-35); outline: 3px solid var(--mageforge-color-red); outline-offset: 0; z-index: 9999997; @@ -594,9 +586,16 @@ bottom: 10px; left: 10px; } - + .mageforge-toolbar-menu { + min-width: 300px; + max-height: calc(100vh - 60px); + overflow: auto; + } + .mageforge-toolbar-burger-label { + display: none; + } .mageforge-toolbar-burger { height: 32px; - width: 32px; + width: auto; } } diff --git a/src/view/frontend/web/js/toolbar.js b/src/view/frontend/web/js/toolbar.js index 518260c..1aeac02 100644 --- a/src/view/frontend/web/js/toolbar.js +++ b/src/view/frontend/web/js/toolbar.js @@ -45,14 +45,8 @@ function _registerMageforgeToolbar() { }, destroy() { - if (this._outsideClickHandler) { - document.removeEventListener('click', this._outsideClickHandler); - this._outsideClickHandler = null; - } - if (this.container) { - this.container.remove(); - this.container = null; - } + this.deactivateAllAudits(); + this.destroyToolbar(); }, // ==================================================================== diff --git a/src/view/frontend/web/js/toolbar/audits.js b/src/view/frontend/web/js/toolbar/audits.js index eb3cd0e..5422089 100644 --- a/src/view/frontend/web/js/toolbar/audits.js +++ b/src/view/frontend/web/js/toolbar/audits.js @@ -51,7 +51,6 @@ export const auditMethods = { if (audit) audit.run(this, false); this.setAuditActive(key, false); }); - this.activeAudits.clear(); this.updateToggleAllButton(); }, @@ -88,7 +87,10 @@ export const auditMethods = { if (!this.menu) return; const group = this.menu.querySelector(`[data-group-key="${key}"]`); if (group) { - group.classList.toggle('mageforge-toolbar-menu-group--collapsed', this.collapsedGroups.has(key)); + const isCollapsed = this.collapsedGroups.has(key); + group.classList.toggle('mageforge-toolbar-menu-group--collapsed', isCollapsed); + const header = group.querySelector('.mageforge-toolbar-menu-group-header'); + if (header) header.setAttribute('aria-expanded', String(!isCollapsed)); } }, diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index d9c188b..29cef72 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -86,6 +86,8 @@ export const uiMethods = { this.burgerButton.className = 'mageforge-toolbar-burger'; this.burgerButton.type = 'button'; this.burgerButton.title = 'Audit tools'; + this.burgerButton.setAttribute('aria-label', 'MageForge Toolbar'); + this.burgerButton.setAttribute('aria-expanded', 'false'); this.burgerButton.innerHTML = ` @@ -131,6 +133,7 @@ export const uiMethods = { const header = document.createElement('button'); header.type = 'button'; header.className = 'mageforge-toolbar-menu-group-header'; + header.setAttribute('aria-expanded', String(!this.collapsedGroups.has(key))); header.onclick = (e) => { e.preventDefault(); e.stopPropagation(); @@ -265,12 +268,14 @@ export const uiMethods = { this.menuOpen = true; this.menu.classList.add('mageforge-menu-open'); this.burgerButton.classList.add('mageforge-active'); + this.burgerButton.setAttribute('aria-expanded', 'true'); }, closeMenu() { this.menuOpen = false; this.menu.classList.remove('mageforge-menu-open'); this.burgerButton.classList.remove('mageforge-active'); + this.burgerButton.setAttribute('aria-expanded', 'false'); }, destroyToolbar() { @@ -281,5 +286,10 @@ export const uiMethods = { if (this.container && this.container.parentNode) { this.container.parentNode.removeChild(this.container); } + this.container = null; + this.menu = null; + this.burgerButton = null; + this.toggleAllButton = null; + this.menuOpen = false; }, };