Merge pull request 'Use button group for styled buttons' (#34) from button-group into main

Reviewed-on: https://codeberg.org/macchiato/pages/pulls/34

app.js

@@ -1,9 +1,10 @@
-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 { 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"
 
 customElements.define('m-layout', Layout)
 customElements.define('m-page', Page)
@@ -11,6 +12,9 @@ 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
+)
 
 class Setup {
   async run() {

components/dialog.js

@@ -51,6 +51,11 @@ export class Dialog extends HTMLElement {
       dialog.closing::backdrop {
         visibility: visible;
       }
+      .header, .footer, .body {
+        display: flex;
+        align-items: stretch;
+        flex-direction: column;
+      }
     `
     this.shadowRoot.append(style)
     this.headerEl.setAttribute('part', 'header')

components/header.js

@@ -150,7 +150,6 @@ export class Header extends HTMLElement {
       }
       m-dialog::part(footer) {
         padding-top: 15px;
-        text-align: right;
       }
     `
     this.shadowRoot.append(style)
@@ -219,23 +218,19 @@ export class Header extends HTMLElement {
       input.value = this.path
       input.style.minWidth = '300px'
       dialog.bodyEl.appendChild(input)
-      const cancelBtn = document.createElement('button')
-      cancelBtn.innerText = this.text.cancel
-      cancelBtn.addEventListener('click', () => {
-        dialog.close()
-      })
-      const confirmBtn = document.createElement('button')
-      confirmBtn.innerText = this.text.rename
-      confirmBtn.style.marginLeft = '3px'
       let errorEl
-      confirmBtn.addEventListener('click', () => {
+      const bGroup = document.createElement(
+        'm-forms-button-group'
+      )
+      bGroup.addPrimary(this.text.rename, () => {
         const newPath = input.value
         const v = localStorage.getItem(newPath)
         if (v !== null || newPath === this.path) {
           if (!errorEl) {
             errorEl = document.createElement('p')
             errorEl.style.color = 'red'
-            errorEl.innerText = this.text.alreadyExists
+            const errText = this.text.alreadyExists
+            errorEl.innerText = errText
             dialog.bodyEl.appendChild(errorEl)
           }
           return
@@ -248,9 +243,10 @@ export class Header extends HTMLElement {
         dialog.close()
         location.hash = newPath
       })
-      dialog.footerEl.replaceChildren(
-        cancelBtn, confirmBtn
-      )
+      bGroup.addCancel(this.text.cancel, () => {
+        dialog.close()
+      })
+      dialog.footerEl.appendChild(bGroup)
       dialog.open()
     })
     this.pageMenu.add(this.text.delete, () => {
@@ -261,22 +257,19 @@ export class Header extends HTMLElement {
         JSON.stringify(this.path)
       )
       dialog.bodyEl.appendChild(p)
-      const cancelBtn = document.createElement('button')
-      cancelBtn.innerText = this.text.cancel
-      cancelBtn.addEventListener('click', () => {
-        dialog.close()
-      })
-      const confirmBtn = document.createElement('button')
-      confirmBtn.innerText = this.text.delete
-      confirmBtn.style.marginLeft = '3px'
-      confirmBtn.addEventListener('click', () => {
+
+      const bGroup = document.createElement(
+        'm-forms-button-group'
+      )
+      bGroup.addPrimary(this.text.delete, () => {
         localStorage.removeItem(this.path)
         location.hash = '/'
         dialog.close()
       })
-      dialog.footerEl.replaceChildren(
-        cancelBtn, confirmBtn
-      )
+      bGroup.addCancel(this.text.cancel, () => {
+        dialog.close()
+      })
+      dialog.footerEl.appendChild(bGroup)
       dialog.open()
     })
     this.pageMenu.addEventListener('close-menu', () => {
@@ -325,22 +318,18 @@ export class Header extends HTMLElement {
     input.value = '/'
     input.style.minWidth = '300px'
     dialog.bodyEl.appendChild(input)
-    const cancelBtn = document.createElement('button')
-    cancelBtn.innerText = this.text.cancel
-    cancelBtn.addEventListener('click', () => {
-      dialog.close()
-    })
-    const confirmBtn = document.createElement('button')
-    confirmBtn.innerText = this.text.createPage
-    confirmBtn.style.marginLeft = '3px'
-    confirmBtn.addEventListener('click', () => {
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.createPage, () => {
       const newPath = this.encodePath(input.value)
       location.hash = newPath
       dialog.close()
     })
-    dialog.footerEl.replaceChildren(
-      cancelBtn, confirmBtn
-    )
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
     dialog.open()
   }
 

sw.js

@@ -10,7 +10,8 @@ async function initCache() {
     '/components/nav-menu.js',
     '/components/page-menu.js',
     '/components/dialog.js',
-  ]) //7
+    '/forms/button-group.js,
+  ])
 }
 
 self.addEventListener("install", event => {