diff --git a/app.js b/app.js index 553b230..3efca83 100644 --- a/app.js +++ b/app.js @@ -2,19 +2,21 @@ import { Layout } from "/components/layout.js" import { Page } from "/components/page.js" import { Header } from "/components/header.js" import { NavMenu } from "/components/nav-menu.js" -import { PageMenu } from "/components/page-menu.js" import { Dialog } from "/components/dialog.js" import { ButtonGroup } from "/forms/button-group.js" +import { Dropdown } from "/menu/dropdown.js" customElements.define('m-layout', Layout) customElements.define('m-page', Page) customElements.define('m-header', Header) customElements.define('m-nav-menu', NavMenu) -customElements.define('m-page-menu', PageMenu) customElements.define('m-dialog', Dialog) customElements.define( 'm-forms-button-group', ButtonGroup ) +customElements.define( + 'm-menu-dropdown', Dropdown +) class Setup { async run() { diff --git a/components/header.js b/components/header.js index b998063..43fe0a3 100644 --- a/components/header.js +++ b/components/header.js @@ -47,11 +47,14 @@ export class Header extends HTMLElement { this.language = navigator.language this.editing = false this.attachShadow({mode: 'open'}) + this.appBar = document.createElement('div') + this.appBar.classList.add('app-bar') + this.shadowRoot.appendChild(this.appBar) this.addButton(this.icons.menu, 'nav', () => { this.menu.pages = this.getPages() this.menuPanel.classList.add('open') this.overlay.classList.add('open') - }) + }).classList.add('left-end') this.addButton(this.icons.add, 'add', () => { this.addPage() }) @@ -61,12 +64,16 @@ export class Header extends HTMLElement { 'click-edit', {bubbles: true} )) }) - this.addButton(this.icons.dot, 'page', () => { - this.pageMenuPanel.classList.add('open') - this.overlay.classList.add('open') - }) - this.addMenu() + this.pageButton = this.addButton( + this.icons.dot, + 'page', + () => { + this.pageMenu.open(this.pageButton) + } + ) + this.pageButton.classList.add('right-end') this.addPageMenu() + this.addMenu() this.dialogWrap = document.createElement('div') this.shadowRoot.appendChild(this.dialogWrap) } @@ -77,9 +84,17 @@ export class Header extends HTMLElement { :host { background: #111; color: #ddd; - display: grid; - grid-template-columns: min-content min-content 1fr min-content min-content; - padding: 0 4px; + display: flex; + flex-direction: column; + align-items: stretch; + } + div.app-bar { + display: flex; + flex-direction: row; + padding: 0; + } + div.divider { + flex-grow: 1; } button { border: none; @@ -88,6 +103,12 @@ export class Header extends HTMLElement { font-size: 30px; padding: 0 8px; } + button.left-end { + padding-right: 12px; + } + button.right-end { + padding-right: 12px; + } div.menu { position: fixed; top: 0; @@ -117,37 +138,10 @@ export class Header extends HTMLElement { left: 0; opacity: 15%; } - button.page { - position: relative; - } - div.page-menu { - position: fixed; - top: 34px; - right: 0; - display: flex; - align-items: flex-end; - margin-right: 0; - display: none; - } - div.page-menu.open { - display: block; - } svg { width: 20px; height: 20px; } - div.dialog-panel { - position: fixed; - top: 34px; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: flex-end; - } - div.page-menu.open { - display: block; - } m-dialog::part(footer) { padding-top: 15px; } @@ -163,7 +157,7 @@ export class Header extends HTMLElement { const b = document.createElement('button') b.innerHTML = html b.classList.add(cls) - this.shadowRoot.appendChild(b) + this.appBar.appendChild(b) if (onClick) { b.addEventListener('click', onClick) } @@ -173,7 +167,7 @@ export class Header extends HTMLElement { addDivider() { const d = document.createElement('div') d.classList.add('divider') - this.shadowRoot.appendChild(d) + this.appBar.appendChild(d) } addMenu() { @@ -194,7 +188,9 @@ export class Header extends HTMLElement { } addPageMenu() { - this.pageMenu = document.createElement('m-page-menu') + this.pageMenu = document.createElement( + 'm-menu-dropdown' + ) this.pageMenu.add(this.text.download, () => { const text = localStorage.getItem(this.path) const sp = this.path.split('/') @@ -212,7 +208,9 @@ export class Header extends HTMLElement { this.shadowRoot.removeChild(el) }) this.pageMenu.add(this.text.rename, () => { - const dialog = document.createElement('m-dialog') + const dialog = document.createElement( + 'm-dialog' + ) this.dialogWrap.replaceChildren(dialog) const input = document.createElement('input') input.value = this.path @@ -241,7 +239,7 @@ export class Header extends HTMLElement { ) localStorage.removeItem(this.path) dialog.close() - location.hash = newPath + vlocation.hash = newPath }) bGroup.addCancel(this.text.cancel, () => { dialog.close() @@ -250,7 +248,9 @@ export class Header extends HTMLElement { dialog.open() }) this.pageMenu.add(this.text.delete, () => { - const dialog = document.createElement('m-dialog') + const dialog = document.createElement( + 'm-dialog' + ) this.dialogWrap.replaceChildren(dialog) const p = document.createElement('p') p.innerText = this.text.confirmDelete( @@ -263,7 +263,7 @@ export class Header extends HTMLElement { ) bGroup.addPrimary(this.text.delete, () => { localStorage.removeItem(this.path) - location.hash = '/' + vlocation.hash = '/' dialog.close() }) bGroup.addCancel(this.text.cancel, () => { @@ -272,21 +272,13 @@ export class Header extends HTMLElement { dialog.footerEl.appendChild(bGroup) dialog.open() }) - this.pageMenu.addEventListener('close-menu', () => { - this.close() - }) - - this.pageMenuPanel = document.createElement('div') - this.pageMenuPanel.appendChild(this.pageMenu) - this.pageMenuPanel.classList.add('page-menu') - this.shadowRoot.appendChild(this.pageMenuPanel) + this.shadowRoot.appendChild(this.pageMenu) } close() { this.overlay.classList.add('closing') this.overlay.classList.remove('open') this.menuPanel.classList.remove('open') - this.pageMenuPanel.classList.remove('open') setTimeout(() => { this.overlay.classList.remove('closing') }, 250) @@ -323,7 +315,7 @@ export class Header extends HTMLElement { ) bGroup.addPrimary(this.text.createPage, () => { const newPath = this.encodePath(input.value) - location.hash = newPath + vlocation.hash = newPath dialog.close() }) bGroup.addCancel(this.text.cancel, () => { diff --git a/components/page-menu.js b/components/page-menu.js deleted file mode 100644 index e4df343..0000000 --- a/components/page-menu.js +++ /dev/null @@ -1,42 +0,0 @@ -export class PageMenu extends HTMLElement { - constructor() { - super() - this.attachShadow({mode: 'open'}) - } - - connectedCallback() { - const style = document.createElement('style') - style.textContent = ` - :host { - background: #222; - color: #ddd; - padding: 3px; - display: flex; - flex-direction: column; - align-items: stretch; - min-width: 180px; - } - button { - background: #222; - font-size: 120%; - border: none; - color: inherit; - padding: 4px 10px; - text-align: left; - } - ` - this.shadowRoot.append(style) - } - - add(text, handler) { - const btn = document.createElement('button') - btn.innerText = text - this.shadowRoot.appendChild(btn) - btn.addEventListener('click', () => { - this.dispatchEvent(new CustomEvent( - 'close-menu', {bubbles: true} - )) - handler() - }) - } -} \ No newline at end of file diff --git a/sw.js b/sw.js index 1b1ac2c..17f268d 100644 --- a/sw.js +++ b/sw.js @@ -8,9 +8,9 @@ async function initCache() { '/components/layout.js', '/components/header.js', '/components/nav-menu.js', - '/components/page-menu.js', '/components/dialog.js', - '/forms/button-group.js', + '/forms/button-group.js, + '/menu/dropdown.js, ]) }