From 577bd59b6cc94810e851ad544f8234e25a4e6e27 Mon Sep 17 00:00:00 2001
From: KernelDeimos <eric.alex.dube@gmail.com>
Date: Thu, 30 May 2024 16:11:13 -0400
Subject: [PATCH] feat(ui): add new components

This commit adds the following components:
- ActionCard
- Frame
- NotifCard
---
 src/UI/Components/ActionCard.js | 39 +++++++++++++++++++++++++++++++++
 src/UI/Components/Frame.js      | 20 +++++++++++++++++
 src/UI/Components/NotifCard.js  | 25 +++++++++++++++++++++
 src/css/style.css               |  4 ++++
 src/init_async.js               |  3 +++
 5 files changed, 91 insertions(+)
 create mode 100644 src/UI/Components/ActionCard.js
 create mode 100644 src/UI/Components/Frame.js
 create mode 100644 src/UI/Components/NotifCard.js

diff --git a/src/UI/Components/ActionCard.js b/src/UI/Components/ActionCard.js
new file mode 100644
index 00000000..8c65b911
--- /dev/null
+++ b/src/UI/Components/ActionCard.js
@@ -0,0 +1,39 @@
+const Component = use('util.Component');
+
+export default def(class ActionCard extends Component {
+    static ID = 'ui.component.ActionCard';
+    static RENDER_MODE = Component.NO_SHADOW;
+
+    static PROPERTIES = {
+        title: {
+            value: 'Title'
+        },
+        info: {},
+        button_text: {},
+        button_style: {},
+        on_click: {},
+        style: {},
+    }
+
+    create_template ({ template }) {
+        $(template).html(/*html*/`
+            <div class="settings-card ${ this.get('style') ? this.get('style') : '' }">
+                <div>
+                    <strong style="display: block">${ this.get('title') }</strong>
+                    <span style="display: block margin-top: 5px">${
+                        this.get('info')
+                    }</span>
+                </div>
+                <div style="flex-grow: 1">
+                    <button class="button ${ this.get('button_style') }" style="float: right;">${
+                        this.get('button_text')
+                    }</button>
+                </div>
+            </div>
+        `);
+    }
+
+    on_ready ({ listen }) {
+        $(this.dom_).find('button').on('click', this.get('on_click') || (() => {}));
+    }
+});
diff --git a/src/UI/Components/Frame.js b/src/UI/Components/Frame.js
new file mode 100644
index 00000000..446f4f16
--- /dev/null
+++ b/src/UI/Components/Frame.js
@@ -0,0 +1,20 @@
+const Component = use('util.Component');
+
+export default def(class Frame extends Component {
+    static ID = 'ui.component.Frame';
+    static RENDER_MODE = Component.NO_SHADOW;
+
+    static PROPERTIES = {
+        component: {},
+    }
+
+    on_ready ({ listen }) {
+        listen('component', component => {
+            this.dom_.innerHTML = '';
+            if ( ! component ) {
+                return;
+            }
+            component.attach(this.dom_);
+        });
+    }
+});
diff --git a/src/UI/Components/NotifCard.js b/src/UI/Components/NotifCard.js
new file mode 100644
index 00000000..737904e2
--- /dev/null
+++ b/src/UI/Components/NotifCard.js
@@ -0,0 +1,25 @@
+const Component = use('util.Component');
+
+export default def(class NotifCard extends Component {
+    static ID = 'ui.component.NotifCard';
+    static RENDER_MODE = Component.NO_SHADOW;
+
+    static PROPERTIES = {
+        text: { value: 'no text' },
+        style: {},
+    }
+
+    create_template ({ template }) {
+        $(template).html(/*html*/`
+            <div class="settings-card thin-card ${ this.get('style') ? this.get('style') : '' }">
+                <div>
+                    ${ this.get('text') }
+                </div>
+            </div>
+        `);
+    }
+
+    on_ready ({ listen }) {
+        $(this.dom_).find('button').on('click', this.get('on_click') || (() => {}));
+    }
+});
diff --git a/src/css/style.css b/src/css/style.css
index 2c272663..7306345b 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -3708,6 +3708,10 @@ fieldset[name=number-code] {
     height: 45px;
 }
 
+.thin-card {
+    padding: 0 15px;
+}
+
 .settings-card strong {
     font-weight: 500;
 }
diff --git a/src/init_async.js b/src/init_async.js
index b738b9aa..40aca629 100644
--- a/src/init_async.js
+++ b/src/init_async.js
@@ -3,7 +3,10 @@ logger.info('start -> async initialization');
 
 import './util/TeePromise.js';
 import './util/Component.js';
+import './UI/Components/Frame.js';
 import './UI/Components/Glyph.js';
+import './UI/Components/ActionCard.js';
+import './UI/Components/NotifCard.js';
 
 logger.info('end -> async initialization');
 globalThis.init_promise.resolve();