Context menu fixes

MercuryWorkshop · Jan 17, 2024 · f4b982c · f4b982c
1 parent 1567e68
commit f4b982c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/src/anura.css b/src/anura.css
@@ -103,9 +103,9 @@ nav li {
     position: absolute;
     border: 1px solid #000000;
     background-color: rgba(0, 0, 0, 0.7);
-    border-radius: 20px;
-    padding: 10px 0;
-    width: 300px;
+    border-radius: 5px;
+    padding: 5px 0;
+    width: 150px;
     box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
 
     z-index: 10000;
@@ -116,6 +116,7 @@ nav li {
     color: #ffffff;
     cursor: pointer;
     user-select: none;
+    font-size: 14px;
 }
 .custom-menu-item:hover {
     background-color: rgba(255, 255, 255, 0.1);
@@ -127,7 +128,7 @@ nav li {
 .custom-menu-item {
     display: flex;
     align-items: center;
-    padding: 8px 12px;
+    padding: 4px 12px;
     color: #ffffff;
     cursor: pointer;
     user-select: none;

diff --git a/src/api/ContextMenuAPI.tsx b/src/api/ContextMenuAPI.tsx
@@ -35,12 +35,34 @@ class ContextMenuAPI {
         );
     }
     show(x: number, y: number) {
+        // Reset out of bound fixes
+        this.#element.style.bottom = "";
+        this.#element.style.right = "";
+
         this.#element.style.top = y.toString() + "px";
         this.#element.style.left = x.toString() + "px";
         document.body.appendChild(this.#element);
         this.#isShown = true;
         this.#element.focus();
 
+        // Check for bounding and fix if necessary
+        console.log(this.#element.getBoundingClientRect());
+        console.log(document.body.getBoundingClientRect());
+        if (
+            this.#element.getBoundingClientRect().bottom >=
+            document.body.getBoundingClientRect().bottom
+        ) {
+            this.#element.style.top = "";
+            this.#element.style.bottom = 0;
+        }
+        if (
+            this.#element.getBoundingClientRect().right >=
+            document.body.getBoundingClientRect().right
+        ) {
+            this.#element.style.left = "";
+            this.#element.style.right = 0;
+        }
+
         return this.#element;
     }
     hide() {

diff --git a/src/coreapps/XFrogApp.tsx b/src/coreapps/XFrogApp.tsx
@@ -67,8 +67,8 @@ class XFrogApp extends App {
             if (this.activeWin && this.activeWin != win) {
                 const newImg = document.createElement("img");
 
-                const blob: any = await new Promise(
-                    (resolve) => anura.x86?.vgacanvas.toBlob(resolve),
+                const blob: any = await new Promise((resolve) =>
+                    anura.x86?.vgacanvas.toBlob(resolve),
                 )!;
                 const url = URL.createObjectURL(blob);
                 newImg.src = url;