Duh

rberenguel · Nov 30, 2024 · 54d5200 · 54d5200
1 parent 289e2dd
commit 54d5200
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 47 deletions.
diff --git a/pwa/index.html b/pwa/index.html
@@ -11,12 +11,12 @@
   <body>
     <div id="radial-menu">
       <div class="radial">
-        <a href="" class="fa-solid fa-arrow-up" data-handler="arrow"></a>
-        <a href="" class="fa-solid fa-square" data-handler="rect"></a>
-        <a href="" class="fa-solid fa-highlighter" data-handler="highlight"></a>
-        <a href="" class="fa-solid fa-i-cursor" data-handler="text"></a>
-        <a href="" class="fa-solid fa-circle" data-handler="ellipse"></a>
-        <a href="" class="fa-solid fa-icons" data-handler="memes"></a>
+         <i href="" class="fa-solid fa-arrow-up" data-handler="arrow"></i>
+        <i href="" class="fa-solid fa-square" data-handler="rect"></i>
+        <i href="" class="fa-solid fa-highlighter" data-handler="highlight"></i>
+        <i href="" class="fa-solid fa-i-cursor" data-handler="text"></i>
+        <i href="" class="fa-solid fa-circle" data-handler="ellipse"></i>
+        <i href="" class="fa-solid fa-icons" data-handler="memes"></i>
       </div>
       <input type="text" id="hidden-input" />
     </div>

diff --git a/src/screenshot.html b/src/screenshot.html
@@ -10,12 +10,12 @@
   <body>
     <div id="radial-menu">
       <div class="radial">
-        <a href="" class="fa-solid fa-arrow-up" data-handler="arrow"></a>
-        <a href="" class="fa-solid fa-square" data-handler="rect"></a>
-        <a href="" class="fa-solid fa-highlighter" data-handler="highlight"></a>
-        <a href="" class="fa-solid fa-i-cursor" data-handler="text"></a>
-        <a href="" class="fa-solid fa-circle" data-handler="ellipse"></a>
-        <a href="" class="fa-solid fa-icons" data-handler="memes"></a>
+        <i href="" class="fa-solid fa-arrow-up" data-handler="arrow"></i>
+        <i href="" class="fa-solid fa-square" data-handler="rect"></i>
+        <i href="" class="fa-solid fa-highlighter" data-handler="highlight"></i>
+        <i href="" class="fa-solid fa-i-cursor" data-handler="text"></i>
+        <i href="" class="fa-solid fa-circle" data-handler="ellipse"></i>
+        <i href="" class="fa-solid fa-icons" data-handler="memes"></i>
       </div>
       <input type="text" id="hidden-input" />
     </div>

diff --git a/src/screenshot.js b/src/screenshot.js
@@ -227,15 +227,14 @@ const setupAllTheThings = (testImage, basepath) => () => {
 
   hiddenInput.addEventListener("focus", (e) => console.log("got focus"));
   hiddenInput.addEventListener("blur", (e) => console.log("lost focus"));
-  //const menuItems = radialMenu.querySelectorAll("li");
 
   const kev = (letter) =>
     new KeyboardEvent("keydown", {
       key: letter,
       code: "Key" + letter.toUpperCase(),
     });
 
-  const menuItems = document.querySelectorAll(".radial a");
+  const menuItems = document.querySelectorAll(".radial i");
 
   for (var i = 0, l = menuItems.length; i < l; i++) {
     const item = menuItems[i];
@@ -259,6 +258,8 @@ const setupAllTheThings = (testImage, basepath) => () => {
 
     item.addEventListener("mouseup", (ev) => {
       fromMenu = true;
+      radialMenu.classList.remove("show");
+      document.querySelector(".radial").classList.remove("open");
       document.dispatchEvent(
         kev(reverseShortcuts[item.dataset["handler"].trim()]),
       );
@@ -273,7 +274,6 @@ const setupAllTheThings = (testImage, basepath) => () => {
       const y = ev.clientY;
 
       // Position the radial menu
-      console.log(bbox);
       radialMenu.style.left = x - bbox.width / 2 + "px";
       radialMenu.style.top = y - bbox.height / 2 + "px";
 
@@ -284,33 +284,6 @@ const setupAllTheThings = (testImage, basepath) => () => {
       document.querySelector(".radial").classList.add("open");
     });
 
-  menuItems.forEach((item) => {
-    item.addEventListener("mouseup", function (event) {
-      // Get the command from the menu item (e.g., using data attributes or text content)
-      const command = item.textContent.trim(); // Or use item.dataset.command if you have data attributes
-
-      // Perform the action based on the command
-      switch (command) {
-        case "Text":
-          // Code to execute the "Text" command
-          console.log("Text command executed");
-          break;
-        case "Arrow":
-          // Code to execute the "Arrow" command
-          console.log("Arrow command executed");
-          break;
-        case "Rect":
-          // Code to execute the "Rect" command
-          console.log("Rect command executed");
-          break;
-      }
-
-      // Hide the radial menu after a command is executed
-      radialMenu.classList.remove("show");
-      document.querySelector(".radial").classList.remove("open");
-    });
-  });
-
   /** End WIP */
 
   document.addEventListener("paste", (event) => {
@@ -726,7 +699,7 @@ const setupAllTheThings = (testImage, basepath) => () => {
 
     if (radialMenu.classList.contains("show")) {
       radialMenu.classList.remove("show");
-      document.querySelector(".circle").classList.remove("open");
+      document.querySelector(".radial").classList.remove("open");
     }
 
     lastClick = event;

diff --git a/src/style.css b/src/style.css
@@ -207,11 +207,11 @@ svg {
   margin: 0 auto;
   position: absolute;
   z-index: 1000;
-  backdrop-filter: blur(5px) sepia(0.5);
+  backdrop-filter: invert(0.2) blur(8px);
   border-radius: 50%;
+  border: 1px solid #ccc;
   opacity: 0;
   user-select: none;
-  color: #c60 !important;
 }
 
 #radial-menu.show {
@@ -240,10 +240,10 @@ svg {
   transform: scale(1);
 }
 
-.radial a {
+.radial i {
   text-decoration: none;
-  color: #c60;
   display: block;
+  color: black;
   height: 40px;
   width: 40px;
   line-height: 40px;