feat(ui): add new components

This commit adds the following components:
- ActionCard
- Frame
- NotifCard

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') || (() => {}));
+    }
+});

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_);
+        });
+    }
+});

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') || (() => {}));
+    }
+});

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;
 }

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();