Merge pull request #24 from beyluta/development

fix issues and update UI style
beyluta · Sep 20, 2022 · cdfdd18 · cdfdd18
2 parents b4802b3 + 809610d
commit cdfdd18
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 83 deletions.
diff --git a/Assets/config.json b/Assets/config.json
@@ -1,4 +1,4 @@
 {
-  "version": "1.1.4",
+  "version": "1.1.5",
   "remoteResources": "https://7xdeveloper.com/api/AccessEndpoint.php?endpoint=getappconfigs&id=resources"
 }
diff --git a/Assets/index.html b/Assets/index.html
@@ -58,21 +58,6 @@
               />
             </svg>
           </div>
-
-          <div class="sideicon">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="30px"
-              viewBox="0 0 512 512"
-              id="update"
-              tab="update"
-              onclick="changeTab(this)"
-            >
-              <path
-                d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z"
-              />
-            </svg>
-          </div>
         </div>
       </div>
 
@@ -122,22 +107,6 @@ <h3 id="nextwindowtitle">Browse Widgets</h3>
         </div>
 
         <div class="settings flex-row" id="options">
-          <div class="settingscard">
-            <h3>Application</h3>
-            <div class="setting flex-row">
-              <div
-                class="switch flex-row"
-                onclick="changeSwitch(this)"
-                setting="startup"
-              >
-                <div class="circle"></div>
-              </div>
-              <p>Run the application on startup</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="updates flex-column" id="updates">
           <div class="update flex-column" id="uptodate">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -177,6 +146,19 @@ <h3>Newer versions of this software exists</h3>
               <p>Update now</p>
             </div>
           </div>
+          <div class="settingscard">
+            <h3>Application</h3>
+            <div class="setting flex-row">
+              <div
+                class="switch flex-row"
+                onclick="changeStartup(this)"
+                setting="startup"
+              >
+                <div class="circle"></div>
+              </div>
+              <p>Run the application on startup</p>
+            </div>
+          </div>
         </div>
 
         <div class="development flex-column" id="development-container">
@@ -246,7 +228,7 @@ <h3>4- Open WinWidgets and choose your widget</h3>
             <div class="instruction">
               <h2>Native Keycapture API</h2>
               <p>
-                Define the function <span style="background: var(--lightgray); padding: 0 10px; border-radius: 4px;">
+                Define the function <span style="padding: 0 10px;border-radius: 4px;border: solid 1px rgba(1,1,1,0.08);">
                 <span style="color: var(--purple)">onNativeKeyEvents </span><span style="color: var(--blue)">(</span><span style="color: var(--orange)">key</span><span style="color: var(--blue)">)</span></span> in your front-end JavaScript code and receive global keypresses 
                 from your computer.
               </p>

diff --git a/Assets/script.js b/Assets/script.js
@@ -24,17 +24,14 @@ function changeText(id, text) {
 function changeTab(element) {
   const dashboard = document.getElementById("dashboard");
   const settings = document.getElementById("settings");
-  const update = document.getElementById("update");
   const development = document.getElementById("development");
   dashboard.style.fill = "var(--gray)";
   settings.style.fill = "var(--gray)";
-  update.style.fill = "var(--gray)";
   development.style.fill = "var(--gray)";
   element.style.fill = "var(--black)";
 
   switch (element.getAttribute("tab")) {
     case "dashboard":
-      document.getElementById("updates").style.display = "none";
       document.getElementById("widgets").style.display = "flex";
       document.getElementById("options").style.display = "none";
       document.getElementById("searchcontainer").style.display = "flex";
@@ -43,13 +40,21 @@ function changeTab(element) {
       document.getElementById("development-container").style.display = "none";
       break;
 
-    case "update":
-      document.getElementById("updates").style.display = "flex";
+    case "development":
       document.getElementById("widgets").style.display = "none";
       document.getElementById("options").style.display = "none";
       document.getElementById("searchcontainer").style.display = "none";
       document.getElementById("nextwindowtitle").style.display = "none";
-      document.getElementById("windowtitle").innerHTML = "Check for updates";
+      document.getElementById("windowtitle").innerHTML = "Development";
+      document.getElementById("development-container").style.display = "flex";
+      break;
+
+    case "settings":
+      document.getElementById("widgets").style.display = "none";
+      document.getElementById("options").style.display = "flex";
+      document.getElementById("searchcontainer").style.display = "none";
+      document.getElementById("nextwindowtitle").style.display = "none";
+      document.getElementById("windowtitle").innerHTML = "Settings";
       document.getElementById("development-container").style.display = "none";
 
       if (isUpToDate) {
@@ -74,36 +79,19 @@ function changeTab(element) {
         };
       }
       break;
-
-    case "development":
-      document.getElementById("updates").style.display = "none";
-      document.getElementById("widgets").style.display = "none";
-      document.getElementById("options").style.display = "none";
-      document.getElementById("searchcontainer").style.display = "none";
-      document.getElementById("nextwindowtitle").style.display = "none";
-      document.getElementById("windowtitle").innerHTML = "Development";
-      document.getElementById("development-container").style.display = "flex";
-      break;
-
-    case "settings":
-      document.getElementById("updates").style.display = "none";
-      document.getElementById("widgets").style.display = "none";
-      document.getElementById("options").style.display = "flex";
-      document.getElementById("searchcontainer").style.display = "none";
-      document.getElementById("nextwindowtitle").style.display = "none";
-      document.getElementById("windowtitle").innerHTML = "Settings";
-      document.getElementById("development-container").style.display = "none";
-      break;
   }
 }
 
-function changeSwitch(element) {
+function setSwitchState(element) {
   if (element.classList.contains("switchon")) {
     element.classList.remove("switchon");
   } else {
     element.classList.add("switchon");
   }
+}
 
+function changeStartup(element) {
+  setSwitchState(element);
   CefSharp.PostMessage(element.getAttribute("setting"));
 }
 

diff --git a/Assets/style.css b/Assets/style.css
@@ -2,7 +2,7 @@
 
 :root {
   --black: #323232;
-  --lightgray: #e0e0e0;
+  --lightgray: #f1f1f1;
   --gray: #b9b9b9;
   --darkgray: #b8b8b8;
   --blue: #18a8fa;
@@ -16,7 +16,7 @@ html {
   margin: 0;
   padding: 0;
   overflow-y: hidden;
-  font-family: "Jaldi", sans-serif;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   color: var(--black);
 }
 
@@ -46,7 +46,7 @@ svg {
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  border-right: solid 1px var(--lightgray);
+  border-right: solid 1px rgba(1, 1, 1, 0.08);
   gap: 80px;
 }
 
@@ -57,7 +57,7 @@ svg {
 
 .logo {
   padding-top: 30px;
-  border-bottom: solid 1px var(--lightgray);
+  border-bottom: solid 1px rgba(1, 1, 1, 0.08);
   padding-bottom: 15px;
 }
 
@@ -88,13 +88,13 @@ svg {
 
 @keyframes loadingwidget {
   0% {
-    background: var(--gray);
+    background: var(white);
   }
   50% {
     background: var(--lightgray);
   }
   100% {
-    background: var(--gray);
+    background: var(white);
   }
 }
 
@@ -113,14 +113,13 @@ svg {
   width: 300px;
   height: 200px;
   flex-grow: 1;
-  background-color: var(--gray);
-  border-radius: 20px;
+  border-radius: 4px;
   animation: loadingwidget 2s linear infinite;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
   transition: all 0.2s ease-in-out;
+  border: solid 1px rgba(1, 1, 1, 0.08);
 }
 
 .widget:hover {
@@ -144,10 +143,10 @@ svg {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
-  border-radius: 15px;
+  border-radius: 4px;
   height: 50px;
   margin-top: 20px;
+  border: solid 1px rgba(1, 1, 1, 0.08);
 }
 
 .search {
@@ -170,7 +169,8 @@ svg {
 }
 
 .folder {
-  margin-right: 25px;
+  margin: 0 25px 0 0;
+  height: 20px;
 }
 
 .updates {
@@ -179,13 +179,13 @@ svg {
 }
 
 .update {
-  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
   max-width: 100%;
   padding: 50px 0 50px 0;
   width: 100%;
-  border-radius: 20px;
+  border-radius: 4px;
   justify-content: center;
   align-items: center;
+  border: solid 1px rgba(1, 1, 1, 0.08);
 }
 
 .update > svg {
@@ -234,17 +234,20 @@ svg {
 .setting {
   align-items: center;
   gap: 15px;
+  flex-direction: row-reverse;
+  justify-content: space-between;
 }
 
 .switch {
-  width: 50px;
-  height: 20px;
+  width: 39px;
+  height: 23px;
   border-radius: 20px;
   background-color: var(--darkgray);
   justify-content: flex-start;
   align-items: center;
   transition: all 0.2s ease-in-out;
   cursor: pointer;
+  padding: 0 5px;
 }
 
 .switchon {
@@ -253,20 +256,20 @@ svg {
 }
 
 .circle {
-  width: 25px;
-  height: 25px;
+  width: 15px;
+  height: 15px;
   border-radius: 100%;
-  background-color: var(--lightgray);
+  background-color: white;
   z-index: 999;
 }
 
 .settingscard {
-  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
   width: max-content;
   padding: 10px 30px;
-  border-radius: 25px;
+  border-radius: 4px;
   flex-grow: 1;
   height: max-content;
+  border: solid 1px rgba(1, 1, 1, 0.08);
 }
 
 .development {
@@ -296,8 +299,9 @@ svg {
 }
 
 .code-blocks > .code {
-  background-color: var(--lightgray);
+  width: calc(100% - 50px);
   color: var(--black);
   padding: 10px;
   border-radius: 4px;
+  border: solid 1px rgba(1, 1, 1, 0.08);
 }
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 <p align="center">
   <a href="https://github.com/beyluta/WinWidgets">
-    <img src="https://img.shields.io/badge/Version-1.1.4-green" alt="WinWidgets version" />
+    <img src="https://img.shields.io/badge/Version-1.1.5-green" alt="WinWidgets version" />
   </a>
 </p>
 
@@ -119,3 +119,4 @@ Many thanks to these projects for their super useful resources 😄
 - [HTML Agility Pack](https://html-agility-pack.net/)
 - [Chromium](https://www.chromium.org/)
 - [CefSharp](https://cefsharp.github.io/)
+- [Json.NET](https://www.newtonsoft.com/json)