Browse Source

enhance user interface

b3z 6 months ago
parent
commit
8b698d3a9e
3 changed files with 135 additions and 20 deletions
  1. 98 10
      index.css
  2. 12 9
      index.html
  3. 25 1
      index.js

+ 98 - 10
index.css

@@ -10,7 +10,7 @@ body {
   font-family: -apple-system, "Helvetica Neue", Helvetica, sans-serif;
   /* TODO change fonts on redesign */
   /* background-color: #272C35; /* night blue */
-  background-color: #323232;
+  background-color: rgb(50, 50, 50);
   /* night gray */
 }
 
@@ -30,12 +30,18 @@ body {
   height: 100px;
   position: absolute;
   bottom: 25px;
-  font-size: 18px;
-  color: #333;
-
+  font-size: 16px;
+  color: #FFFFFF;
+  background-color: rgb(50, 50, 50, 0.7);
+  backdrop-filter: blur(3px);
+  padding: 5px;
   border: 0px;
+}
 
-
+.editor:focus {
+  outline: none !important;
+  border: 0px;
+  box-shadow: 0 0 10px #000000;
 }
 
 /* Status Bar */
@@ -73,15 +79,97 @@ body {
   /* remove dots of list cause they suck */
   position: fixed;
   /* Sit on top of the page content */
-  width: 100%;
   /* Full width (cover the whole page) */
-  height: 100%;
+  height: calc(100% - 130px);
   /* Full height (cover the whole page) */
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
-  /* Specify a stack order in case you're using a different order for other elements */
+
   cursor: pointer;
-  /* Add a pointer on hover */
+  margin-left: -30px;
+  margin-top: 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 2px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(0, 0, 0, 0);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(255, 255, 255, 1);
+}
+
+
+li {
+  margin-bottom: 15px;
+  margin-top: 15px;
+  margin-right: 10px;
+  background-color: rgb(0, 116, 208, 1);
+  /*background: rgba(50, 50, 50, 0.3);*/
+  backdrop-filter: blur(5px);
+  border-radius: 6px;
+  padding: 5px;
+
+
+  /* Bubbles
+  display: inline-block;*/
+  /*Makes them stick to the left*/
+  display: table;
+  word-break: break-all;
+
+
+
+}
+
+li a {
+  color: rgb(255, 255, 255);
+}
+
+li a:hover {
+  color: rgb(200, 200, 200);
+}
+
+#view {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.blur {
+  animation: blur 2s;
+  animation-fill-mode: forwards;
+}
+
+
+
+@keyframes blur {
+  0% {
+    backdrop-filter: blur(0px);
+  }
+
+  25% {
+    backdrop-filter: blur(1px);
+  }
+
+  50% {
+
+    backdrop-filter: blur(3px);
+  }
+
+  100% {
+    backdrop-filter: blur(4px);
+
+  }
 }

+ 12 - 9
index.html

@@ -9,23 +9,26 @@
 
 <body>
   <center>
-    <img height="80%" width="80%" class="backgroundImage" src="assets/background/background.png">
+    <img width="100%" class="backgroudImage" src="assets/background/background.png">
     <!-- loading animation -->
-    <!--
+    <!---
     <svg xmlns="http://www.w3.org/2000/svg" width="169" height="169">
       <circle fill="#076BFF" stroke="#076BFF" stroke-width="5" cx="84" cy="84" r="20" />
       <circle fill="#076BFF" stroke="#076BFF" stroke-width="5" cx="35" cy="113" r="9">
         <animateTransform attributeName="transform" begin="0s" dur="1.5s" type="rotate" from="0 84 84" to="360 84 84"
           repeatCount="indefinite" />
-        </circle>
-        <ellipse fill="none" stroke="#076BFF" stroke-width="6" cx="84" cy="84" rx="58" ry="57" />
-      </svg>
-    -->
+      </circle>
+      <ellipse fill="none" stroke="#076BFF" stroke-width="6" cx="84" cy="84" rx="58" ry="57" />
+    </svg>-->
+
   </center>
-  <ul class="resultList" id="resultList">
-    <!-- DISPLAY LIST ITEMS HERE -->
-  </ul>
+  <div id="view">
+
+    <ul class="resultList" id="resultList">
+      <!-- DISPLAY LIST ITEMS HERE -->
+    </ul>
 
+  </div>
 
   <textarea class="editor" type="text" id="editor"></textarea>
   <div class="statusBar" id="statusBar"></div>

+ 25 - 1
index.js

@@ -3,6 +3,8 @@ const {
     ipcRenderer
 } = electron;
 
+
+
 const statusBar = document.getElementById("statusBar")
 const editor = document.getElementById('editor');
 const list = document.getElementById('resultList');
@@ -46,10 +48,21 @@ editor.addEventListener("keyup", (e) => {
     }
 });
 
+let listBGActive = false
 // list result management
 // called by index.ts in an webcontents js execution
 ipcRenderer.on('list:update', (e, res) => {
     list.innerHTML = ''; // clear list
+
+    if (res.length < 1 && listBGActive) {
+        toggle(document.getElementById('view'), "blur")
+
+        listBGActive = false
+    } else if (res.length > 0 && !listBGActive) {
+        toggle(document.getElementById('view'), "blur")
+        listBGActive = true
+    }
+
     for (let i in res) {
         let li = document.createElement('li');
         li.innerHTML = res[i];
@@ -59,4 +72,15 @@ ipcRenderer.on('list:update', (e, res) => {
 
 ipcRenderer.on('editor:clear', (e) => {
     editor.value = '';
-})
+});
+
+function toggle(e, c) {
+    let classes = e.className.split(" ");
+    let i = classes.indexOf(c);
+
+    if (i >= 0)
+        classes.splice(i, 1);
+    else
+        classes.push(c);
+    e.className = classes.join(" ");
+}