✨ Feat: Modals & Shell container design overhaul

Integrate propjockey/augmented-ui
GitSquared · Sep 10, 2019 · 077b28c · 077b28c
1 parent 0d5ec42
commit 077b28c
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 10 deletions.
diff --git a/src/_renderer.js b/src/_renderer.js
@@ -102,6 +102,10 @@ window._loadTheme = theme => {
         --color_black: ${theme.colors.black};
         --color_light_black: ${theme.colors.light_black};
         --color_grey: ${theme.colors.grey};
+
+        /* Used for error and warning modals */
+        --color_red: ${theme.colors.red || "red"};
+        --color_yellow: ${theme.colors.yellow || "yellow"};
     }
 
     body {
@@ -315,7 +319,7 @@ async function initUI() {
     document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
         <h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
     </section>
-    <section id="main_shell" style="height:0%;width:0%;opacity:0;margin-bottom:30vh;">
+    <section id="main_shell" style="height:0%;width:0%;opacity:0;margin-bottom:30vh;" augmented-ui="bl-clip tr-clip exe">
         <h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
         <h1 id="main_shell_greeting"></h1>
     </section>

diff --git a/src/assets/css/main_shell.css b/src/assets/css/main_shell.css
@@ -2,8 +2,12 @@ section#main_shell {
     width: 65%;
     height: 60.3%;
     padding: 0.74vh;
-    border: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
-    border-radius: 0.278vh;
+    /* border: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5); */
+    /* border-radius: 0.278vh; */
+
+    --aug-border: 0.18vh;
+    --aug-border-bg: rgb(var(--color_r), var(--color_g), var(--color_b));
+    --aug-border-opacity: 0.5;
 
     display: flex;
     flex-direction: column;

diff --git a/src/assets/css/modal.css b/src/assets/css/modal.css
@@ -1,21 +1,39 @@
 div.modal_popup {
     position: absolute;
-    min-width: 30vw;
+    min-width: 38vh;
     background: var(--color_light_black);
-    border-color: rgb(var(--color_r), var(--color_g), var(--color_b));;
-    border-radius: 0.278vh;
+    border-color: rgb(var(--color_r), var(--color_g), var(--color_b));
     padding: 2vh;
     padding-bottom: 0vh;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     cursor: default;
+
+    --aug-border: 0.2vh;
+    --aug-border-bg: rgb(var(--color_r), var(--color_g), var(--color_b));
+    --aug-inset: 5px;
+    --aug-inset-bg: var(--color_light_black);
 }
 
-div.modal_popup.error {border-width: 0.7vh; border-style: double;}
-div.modal_popup.warning {border-width: 0.5vh; border-style: solid;}
-div.modal_popup.info {border-width: 0.2vh; border-style: solid;}
+div.modal_popup.error {
+    --aug-bl-height: 3vh;
+    --aug-bl-width: 30%;
+    border-top: 0.2vh solid var(--color_red);
+    border-bottom: 0.2vh solid transparent;
+    padding-bottom: 0.2vh;
+}
+div.modal_popup.warning {
+    --aug-b-width: 20%;
+    --aug-b-origin-x: 30%;
+    border-top: 0.2vh solid var(--color_yellow);
+    border-bottom: 0.2vh solid transparent;
+    padding-bottom: 0.2vh;
+}
+div.modal_popup.info {
+    --aug-border: 0.2vh;
+}
 
 div.modal_popup.focus {
     z-index: 2500 !important;

diff --git a/src/classes/modal.class.js b/src/classes/modal.class.js
@@ -14,6 +14,7 @@ class Modal {
         this.onclose = onclose;
         this.classes = "modal_popup";
         let buttons = [];
+        let augs = [];
         let zindex = 0;
 
         // Reserve a slot in window.modals
@@ -24,26 +25,30 @@ class Modal {
                 this.classes += " error";
                 zindex = 1500;
                 buttons.push({label:"PANIC", action:"window.modals['"+this.id+"'].close();"}, {label:"RELOAD", action:"window.location.reload(true);"});
+                augs.push("tr-clip", "bl-rect", "r-clip");
                 break;
             case "warning":
                 this.classes += " warning";
                 zindex = 1000;
                 buttons.push({label:"OK", action:"window.modals['"+this.id+"'].close();"});
+                augs.push("bl-clip", "tr-clip", "r-rect", "b-rect");
                 break;
             case "custom":
                 this.classes += " info custom";
                 zindex = 500;
                 buttons = options.buttons || [];
                 buttons.push({label:"Close", action:"window.modals['"+this.id+"'].close();"});
+                augs.push("tr-clip", "bl-clip");
                 break;
             default:
                 this.classes += " info";
                 zindex = 500;
                 buttons.push({label:"OK", action:"window.modals['"+this.id+"'].close();"});
+                augs.push("tr-clip", "bl-clip");
                 break;
         }
 
-        let DOMstring = `<div id="modal_${this.id}" class="${this.classes}" style="z-index:${zindex+Object.keys(window.modals).length};">
+        let DOMstring = `<div id="modal_${this.id}" class="${this.classes}" style="z-index:${zindex+Object.keys(window.modals).length};" augmented-ui="${augs.join(" ")} exe">
             <h1>${this.title}</h1>
             ${this.type === "custom" ? options.html : "<h5>"+this.message+"</h5>"}
             <div>`;

diff --git a/src/package-lock.json b/src/package-lock.json
diff --git a/src/package.json b/src/package.json
@@ -24,6 +24,7 @@
   "homepage": "https://github.com/GitSquared/edex-ui#readme",
   "dependencies": {
     "@wcjiang/whereis": "^1.0.0",
+    "augmented-ui": "1.1.0",
     "color": "3.1.2",
     "geolite2": "1.2.1",
     "howler": "2.1.2",

diff --git a/src/ui.html b/src/ui.html
@@ -6,6 +6,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>eDEX-UI</title>
 
+        <!-- Load dependency css -->
+        <link rel="stylesheet" href="node_modules/augmented-ui/augmented.css" />
         <!-- Load main css -->
         <link rel="stylesheet" href="assets/css/main.css" />
         <link rel="stylesheet" href="assets/css/modal.css" />