From e01fe8c5e6d9850fd2d7ab78f92a7c6551e4c6a8 Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Thu, 30 Mar 2023 09:08:32 +0000
Subject: [PATCH] Style and dialog WIP (#27)

Reviewed-on: https://codeberg.org/macchiato/pages/pulls/27
---
 app.js                  |  2 ++
 components/dialog.js    | 32 ++++++++++++++++++++++++++++++++
 components/page-menu.js |  4 ++++
 sw.js                   |  3 ++-
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 components/dialog.js

diff --git a/app.js b/app.js
index 4de2874..702ede3 100644
--- a/app.js
+++ b/app.js
@@ -3,12 +3,14 @@ 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"
 
 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)
 
 class Setup {
   async run() {
diff --git a/components/dialog.js b/components/dialog.js
new file mode 100644
index 0000000..4f55a63
--- /dev/null
+++ b/components/dialog.js
@@ -0,0 +1,32 @@
+export class Dialog extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.windowEl = document.createElement('div')
+    this.windowEl.classList.add('window')
+    this.headerEl = document.createElement('div')
+    this.headerEl.classList.add('header')
+    this.bodyEl = document.createElement('div')
+    this.bodyEl.classList.add('body')
+    this.footerEl = document.createElement('div')
+    this.footerEl.classList.add('footer')
+    this.windowEl.replaceChildren(
+      this.headerEl, this.bodyEl, this.footerEl
+    )
+    this.shadowRoot.appendChild(this.windowEl)
+  }
+
+  connectedCallback() {
+    this.textArea.value = this.body
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+      }
+    `
+    this.shadowRoot.append(style)
+  }
+}
\ No newline at end of file
diff --git a/components/page-menu.js b/components/page-menu.js
index a433bda..e071eca 100644
--- a/components/page-menu.js
+++ b/components/page-menu.js
@@ -3,10 +3,14 @@ export class PageMenu extends HTMLElement {
 
   textEn = {
     download: 'Download',
+    rename: 'Rename',
+    delete: 'Delete',
   }
 
   textEs = {
     download: 'Descargar',
+    rename: 'Renombrar',
+    delete: 'Borrar',
   }
 
   constructor() {
diff --git a/sw.js b/sw.js
index ffe4987..dd11f50 100644
--- a/sw.js
+++ b/sw.js
@@ -9,7 +9,8 @@ async function initCache() {
     '/components/header.js',
     '/components/nav-menu.js',
     '/components/page-menu.js',
-  ]) //4b20465c5f
+    '/components/dialog.js',
+  ])
 }
 
 self.addEventListener("install", event => {