Modal & theming

2021-11-26 23:26:46 -06:00
parent cf1f436b3c
commit 00fa0067aa
7 changed files with 967 additions and 9 deletions
--- a/src/layout/Modal.component.ts
+++ b/src/layout/Modal.component.ts
@@ -0,0 +1,122 @@
+import {ExComponent} from '../ExComponent.js'
+import {Attribute, Component, Element, Renders} from '../decorators.js'
+
+@Component('ex-modal')
+export class ModalComponent extends ExComponent {
+    protected static html = `
+        <style>
+            :root {
+                display: none;
+            }
+
+            .container {
+                --modal-color: var(--color-accent);
+                top: 0;
+                left: 0;
+                width: 100vw;
+                height: 100vh;
+                z-index: 2000;
+                position: fixed;
+                background-color: rgba(0, 0, 0, 0.7);
+                padding-top: 2%;
+            }
+
+            .ex-modal {
+                width: 95vw;
+                max-height: min(90vh, 700px);
+                max-width: 600px;
+                position: relative;
+                overflow: hidden;
+                border-radius: 7px;
+                margin: 0 auto;
+                background-color: var(--color-background);
+                display: flex;
+                flex-direction: column;
+            }
+
+            .ex-modal header {
+                min-height: 40px;
+                height: 40px;
+                color: var(--color-text);
+                background-color: var(--color-background-darkened);
+                display: grid;
+                padding-left: 14px;
+                align-items: center;
+                grid-template-columns: auto 40px;
+            }
+
+            .ex-modal header h4 {
+                margin: 0;
+                text-align: left;
+            }
+
+            .ex-modal header span {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
+                width: 100%;
+                font-size: 20px;
+                opacity: 0.8;
+                cursor: pointer;
+            }
+
+            .ex-modal header span:hover {
+                opacity: 1;
+            }
+
+            .ex-modal .main {
+                flex: 1;
+                text-align: left;
+                overflow: auto;
+                padding: 14px;
+            }
+
+            .ex-modal footer {
+                height: auto;
+                text-align: right;
+                padding: 14px;
+                background-color: var(--color-background-darkened);
+            }
+
+            .ex-modal footer button, .ex-modal footer input {
+                margin: 0;
+            }
+
+            .ex-modal footer button:not(:last-child), .ex-modal footer input:not(:last-child) {
+                margin-right: 14px;
+            }
+        </style>
+        
+        <div class="container">
+            <div class="ex-modal" tabindex="0">
+                <header>
+                    <h4 class="modal-title"></h4>
+                    <span>&#10006;</span>
+                </header>
+                <div class="main">
+                    <slot></slot>
+                </div>
+                <footer>
+                    <slot name="footer"></slot>
+                </footer>
+            </div>
+        </div>
+    `
+
+    @Attribute()
+    public header = ''
+
+    @Renders()
+    public shown = false
+
+    @Element('h4.modal-title')
+    protected headerEl!: HTMLHeadingElement
+
+    render(): void {
+        super.render()
+
+        this.headerEl.innerText = this.header
+        this.style.display = this.shown ? 'unset' : 'none'
+    }
+}