ui: Added modal component, added a logging you in/out to try it.

2018-09-16 18:34:20 +02:00
parent ff4f4549e4
commit bde67f5617
6 changed files with 91 additions and 5 deletions
@@ -0,0 +1,5 @@
+module.exports = class {
+  closeModal() {
+    this.emit("close")
+  }
+}
@@ -0,0 +1,11 @@
+<if(input.enabled)>
+  <div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
+    <div class="overlay-options color-menu">
+      <div if(input.closable) on-click("closeModal")>X</div>
+    </div>
+    <h1 class="color-primary" if(input.title)>${input.title}</h1>
+    <div class="modal color-text">
+      <include(input.renderBody) />
+    </div>
+  </div>
+</if>
@@ -0,0 +1,47 @@
+div.overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding-top: 4em;
+  z-index: 999;
+
+  background-color: rgba(0, 0, 0, 0.75);
+
+  overflow-y: auto;
+
+  h1 {
+    text-align: center;
+  }
+  
+  div.modal {
+    width: 60ch;
+    max-width: 95%;
+    margin: auto;
+  }
+
+  div.overlay-options {
+    width: 60ch;
+    max-width: 95%;
+    margin: auto;
+    text-align: right;
+
+    div {
+      opacity: 0.75;
+      user-select: none;
+      cursor: pointer;
+    }
+    div:hover {
+      opacity: 1;
+    }
+  }
+}
+
+div.overlay.notification-overlay {
+  padding-top: 20%;
+
+  div.modal {
+    text-align: center;
+  }
+}