Clean up header styles

components/header.js

@@ -15,6 +15,18 @@ export class Header extends HTMLElement {
 </svg>`,
   }
 
+  textEn = {
+    download: 'Download',
+    rename: 'Rename',
+    delete: 'Delete',
+  }
+
+  textEs = {
+    download: 'Descargar',
+    rename: 'Renombrar',
+    delete: 'Borrar',
+  }
+
   constructor() {
     super()
     this.editing = false
@@ -36,6 +48,94 @@ export class Header extends HTMLElement {
     })
     this.addMenu()
     this.addPageMenu()
+    //this.addDialogPanel()
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        background: #111;
+        color: #ddd;
+        display: flex;
+        flex-direction: row;
+        padding: 0 4px;
+      }
+      button {
+        border: none;
+        background: inherit;
+        color: inherit;
+        font-size: 30px;
+        width: 32px;
+      }
+      div.divider {
+        flex-grow: 1;
+      }
+      div.menu {
+        position: fixed;
+        top: 0;
+        left: -90vw;
+        height: 100vh;
+        width: 90vw;
+        background-color: #fff;
+        transition: left .25s ease-in-out;
+      }
+      div.menu.open {
+        left: 0;
+      }
+      div.overlay {
+        position: fixed;
+        top: 0;
+        left: -100vw;
+        height: 100vh;
+        width: 100vw;
+        opacity: 0%;
+        transition: opacity .25s ease-in;
+        background: #777;
+      }
+      div.overlay.closing {
+        left: 0;
+      }
+      div.overlay.open {
+        left: 0;
+        opacity: 15%;
+      }
+      div.overlay.open.dialog {
+        opacity: 50%;
+      }
+      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;
+      }
+    `
+    this.shadowRoot.append(style)
   }
 
   addButton(html, cls, onClick) {
@@ -90,15 +190,36 @@ export class Header extends HTMLElement {
       el.click()
       this.shadowRoot.removeChild(el)
     })
+    /*this.pageMenu.add('rename', () => {
+      const dialog = document.createElement('m-dialog')
+      dialog.title = this.text.rename
+      this.showDialog(dialog)
+    })
+    this.pageMenu.add('delete', () => {
+      
+    })*/
     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)
   }
 
+  addDialogPanel() {
+    this.dialogPanel = document.createElement('div')
+    this.dialogPanel.classList.add('dialog-panel')
+    this.shadowRoot.appendChild(this.dialogPanel)
+  }
+
+  showDialog(dialog) {
+    this.overlay.classList.add('open', 'dialog')
+    this.dialogPanel.replaceChildren(dialog)
+    this.dialogPanel.classList.add('open')
+  }
+
   close() {
     this.overlay.classList.add('closing')
     this.overlay.classList.remove('open')
@@ -109,78 +230,6 @@ export class Header extends HTMLElement {
     }, 250)
   }
 
-  connectedCallback() {
-    const style = document.createElement('style')
-    style.textContent = `
-      :host {
-        width: 100%;
-        background: #111;
-        color: #ddd;
-        display: flex;
-        flex-direction: row;
-      }
-      button {
-        border: none;
-        background: inherit;
-        color: inherit;
-        font-size: 24px;
-        width: 30px;
-      }
-      div.divider {
-        flex-grow: 1;
-      }
-      div.menu {
-        position: fixed;
-        top: 0;
-        left: -90vw;
-        height: 100vh;
-        width: 90vw;
-        background-color: #fff;
-        transition: left .25s ease-in-out;
-      }
-      div.menu.open {
-        left: 0;
-      }
-      div.overlay {
-        position: fixed;
-        top: 0;
-        left: -100vw;
-        height: 100vh;
-        width: 100vw;
-        opacity: 0%;
-        transition: opacity .25s ease-in;
-        background: #777;
-      }
-      div.overlay.closing {
-        left: 0;
-      }
-      div.overlay.open {
-        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;
-      }
-    `
-    this.shadowRoot.append(style)
-  }
-
   getPages() {
     return Object.keys(localStorage).slice().sort()
   }
@@ -199,4 +248,17 @@ export class Header extends HTMLElement {
   get editIcon() {
     return this.editing ? this.icons.check : this.icons.edit
   }
+
+  get language() {
+    return this._language
+  }
+
+  set language(language) {
+    this._language = language
+    this.text = this.langEs ? this.textEs : this.textEn
+  }
+
+  get langEs() {
+    return /^es\b/.test(this.language)
+  }
 }