close button (ui/ux)

rept0id · rept0id · commit 31cdc54407b1 · 2024-05-28T19:02:30.000+03:00
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -10,4 +10,40 @@
 
 body {
     overflow: hidden;
+}
+
+#close-btn {
+    right: 0;
+    top: 0;
+    position: absolute;
+    display: none;
+}
+body:hover #close-btn {
+    display: block;
+}
+
+.close {
+    width: 20px;
+    height: 20px;
+    border: none;
+    background-color: transparent;
+    position: relative;
+    cursor: pointer;
+    z-index: 9999999;
+}
+.close:before,
+.close:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 2px;
+    height: 12px;
+    background-color: #cb3837;
+}
+.close:before {
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+.close:after {
+    transform: translate(-50%, -50%) rotate(-45deg);
 }
diff --git a/index.html b/index.html
@@ -9,6 +9,21 @@
     <script src="libs/js/clippy/build/clippy.min.js"></script>
   </head>
   <body>
+    <button id="close-btn" class="close"></button>
+
+    <script>
+      let longPressTimeout;
+      document.querySelector("body").addEventListener('mousedown', function(event) {
+        longPressTimeout = setTimeout(function() {
+          document.querySelector("#close-btn").style.display = "block";
+        }, 1000);
+      });
+
+      document.querySelector("body").addEventListener('mouseup', function(event) {
+        clearTimeout(longPressTimeout);
+      });
+    </script>
+
     <script>
       clippy.load();
       clippy.load('Clippy', function(agent){
diff --git a/index.js b/index.js
@@ -13,6 +13,7 @@ const msgWelcome = `
   <br>
   <h5>Give the double-click a whirl to set the animation in motion and toggle the opening/closing of this modal.</h5>
   <h5>A single click sets the animation in motion.</h5>
+  <h5>Gently guiding your mouse over Clippy or giving it a jolly good press reveals the close button.</h5>
 `;
 
 /*** * * ***/
diff --git a/package.json b/package.json
@@ -8,9 +8,7 @@
     "start": "electron .",
     "compile_win": "electron-builder --win",
     "compile_win2": "electron-builder --win portable",
-    "compile_mac": "electron-packager . --platform=darwin --ignore=/dist --icon=build/icon.icns --overwrite",
-    "compile_mac_2": "electron-packager . --platform=mas --ignore=/dist",
-    "compile_linux": "electron-packager . --platform=linux --ignore=/dist"
+    "compile_linux": "electron-packager . --platform=linux --ignore=/dist --icon=resources/app/build/icon.ico"
   },
   "author": "Rantouan Achmet",
   "license": "GPL-3.0",
diff --git a/preload.js b/preload.js
@@ -17,4 +17,8 @@ window.addEventListener('DOMContentLoaded', () => {
     ipcRenderer.invoke('dblclick');
   });
 
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    ipcRenderer.invoke('quit-app');
+  });
+
 })
