From ad7c81391730fa542ba763b191eafbda8d2a9025 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Sun, 14 Jul 2024 00:34:48 -0700
Subject: [PATCH] Add delay to dashboard shortcuts to wait for menu to close
 fully.

---
 modules/menus/DropdownMenu.js              | 17 ++++++++++++++---
 modules/menus/dashboard/shortcuts/index.js | 19 +++++++++++--------
 scss/main.scss                             | 15 +++++++++++++++
 scss/menus/media.scss                      |  2 +-
 scss/menus/menu.scss                       |  4 ++--
 style.css                                  |  6 +++---
 6 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/modules/menus/DropdownMenu.js b/modules/menus/DropdownMenu.js
index b005de7..7c51b6e 100644
--- a/modules/menus/DropdownMenu.js
+++ b/modules/menus/DropdownMenu.js
@@ -44,6 +44,16 @@ const moveBoxToCursor = (self, fixed) => {
   });
 };
 
+// NOTE: We make the window visible for 2 seconds (on startup) so the child
+// elements can allocat their proper dimensions.
+// Otherwise the width that we rely on for menu positioning is set improperly
+// for the first time we open a menu of each type.
+const initRender = Variable(true);
+
+setTimeout(() => {
+  initRender.value = false;
+}, 2000);
+
 export default ({
   name,
   child,
@@ -57,7 +67,7 @@ export default ({
     name,
     class_names: [name, "dropdown-menu"],
     setup: (w) => w.keybind("Escape", () => App.closeWindow(name)),
-    visible: true,
+    visible: initRender.bind("value"),
     keymode: "on-demand",
     exclusivity,
     layer: "top",
@@ -67,10 +77,11 @@ export default ({
       on_primary_click: () => App.closeWindow(name),
       on_secondary_click: () => App.closeWindow(name),
       child: Widget.Box({
+        class_name: "top-eb",
         vertical: true,
         children: [
           Widget.EventBox({
-            class_name: "event-top-padding",
+            class_name: "mid-eb event-top-padding",
             hexpand: true,
             vexpand: false,
             can_focus: false,
@@ -81,7 +92,7 @@ export default ({
             },
           }),
           Widget.EventBox({
-            class_name: "menu-event-box",
+            class_name: "in-eb menu-event-box",
             on_primary_click: () => {
               return true;
             },
diff --git a/modules/menus/dashboard/shortcuts/index.js b/modules/menus/dashboard/shortcuts/index.js
index 7de8457..af8f17a 100644
--- a/modules/menus/dashboard/shortcuts/index.js
+++ b/modules/menus/dashboard/shortcuts/index.js
@@ -15,15 +15,18 @@ const Shortcuts = () => {
   });
   const handleClick = (action, resolver) => {
     App.closeWindow("dashboardmenu");
-    Utils.execAsync(action)
-      .then((res) => {
-        if (typeof resolver === "function") {
-          return resolver(res);
-        }
 
-        return res;
-      })
-      .catch((err) => err);
+    setTimeout(() => {
+      Utils.execAsync(action)
+        .then((res) => {
+          if (typeof resolver === "function") {
+            return resolver(res);
+          }
+
+          return res;
+        })
+        .catch((err) => err);
+    }, 250);
   };
 
   const recordingDropdown = Widget.Menu({
diff --git a/scss/main.scss b/scss/main.scss
index ab89e88..1b7915c 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -40,3 +40,18 @@
 
 //notifications
 @import "notifications/popups";
+
+// Eventbox styling for debugging purposes
+// .parent-event {
+//   background-color: $red;
+// }
+// .mid-eb {
+//   background-color: $red;
+// }
+// .in-eb {
+//   background-color: $red;
+// }
+// .main-eb {
+//   background-color: $red;
+// }
+//
diff --git a/scss/menus/media.scss b/scss/menus/media.scss
index 9f24cb1..2603284 100644
--- a/scss/menus/media.scss
+++ b/scss/menus/media.scss
@@ -1,7 +1,7 @@
 @import "../colors";
 
 .menu-items-container.media {
-  min-width: 25em;
+  min-width: 23em;
   min-height: 10em;
 
   .menu-section-container {
diff --git a/scss/menus/menu.scss b/scss/menus/menu.scss
index 35fa0d0..a922a88 100644
--- a/scss/menus/menu.scss
+++ b/scss/menus/menu.scss
@@ -94,14 +94,14 @@ tooltip label {
     background: $crust;
     border: .13em solid $surface0;
     border-radius: .7rem;
-    min-width: 20em;
+    min-width: 18em;
     color: $text;
 }
 
 .menu-items-container {
     border-radius: 0.4em;
     font-size: 1.3em;
-    min-width: 20em;
+    min-width: 18em;
 }
 
 .menu-section-container {
diff --git a/style.css b/style.css
index e44db86..69add87 100644
--- a/style.css
+++ b/style.css
@@ -512,14 +512,14 @@ tooltip label {
   background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.7rem;
-  min-width: 20em;
+  min-width: 18em;
   color: #cdd6f4;
 }
 
 .menu-items-container {
   border-radius: 0.4em;
   font-size: 1.3em;
-  min-width: 20em;
+  min-width: 18em;
 }
 
 .menu-section-container {
@@ -1036,7 +1036,7 @@ window#powermenu .powermenu.box {
 }
 
 .menu-items-container.media {
-  min-width: 25em;
+  min-width: 23em;
   min-height: 10em;
 }
 .menu-items-container.media .menu-section-container {