Blur context menu items when mouse leaves

HeyPuter · Jun 16, 2024 · 0fea080 · 0fea080
1 parent 632c536
commit 0fea080
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/src/UI/UIContextMenu.js b/src/UI/UIContextMenu.js
@@ -200,11 +200,11 @@ function UIContextMenu(options){
         },
         // activates item when mouse enters depending on mouse position and direction
         activate: function (e) {
-            //activate items
+            // activate items
             let item = $(e).closest('.context-menu-item');
-            // mark other items as inactive
+            // mark other menu items as inactive
             $(contextMenu).find('.context-menu-item').removeClass('context-menu-item-active');
-            // mark this item as active
+            // mark this menu item as active
             $(item).addClass('context-menu-item-active');
             // close any submenu that doesn't belong to this item
             $(`.context-menu[data-parent-id="${menu_id}"]`).remove();
@@ -220,6 +220,8 @@ function UIContextMenu(options){
                     if($(`.context-menu[data-id="${menu_id}-${$(e).attr('data-action')}"]`).length === 0){
                         // close other submenus
                         $(`.context-menu[parent-element-id="${menu_id}"]`).remove();
+                        // add `has-open-context-menu-submenu` class to the parent menu item
+                        $(e).addClass('has-open-context-menu-submenu');
 
                         // Calculate the position for the submenu
                         let submenu_x_pos, submenu_y_pos;
@@ -246,13 +248,15 @@ function UIContextMenu(options){
                 }
             }, 300);
         },
-        //deactivates row when mouse leaves
+        // deactivates row when mouse leaves
         deactivate: function (e) {
             // disable submenu delay timer
             clearTimeout(submenu_delay_timer);
-            //deactivate submenu
+            // deactivate submenu
             if($(e).hasClass('context-menu-item-submenu')){
                 $(`.context-menu[data-id="${menu_id}-${$(e).attr('data-action')}"]`).remove();
+                // remove `has-open-context-menu-submenu` class from the parent menu item
+                $(e).removeClass('has-open-context-menu-submenu');
             }
         }
     });
@@ -318,6 +322,20 @@ window.select_ctxmenu_item = function ($ctxmenu_item){
     $($ctxmenu_item).addClass('context-menu-item-active');
 }
 
-export default UIContextMenu;
+$(document).on('mouseleave', '.context-menu', function(){
+    // when mouse leaves the context menu, remove active class from all items
+    $(this).find('.context-menu-item').removeClass('context-menu-item-active');
+})
 
+$(document).on('mouseenter', '.context-menu', function(e){
+    // when mouse enters the context menu, convert all items with submenu to active
+    $(this).find('.has-open-context-menu-submenu').each(function(){
+        $(this).addClass('context-menu-item-active');
+    })
+})
+
+$(document).on('mouseenter', '.context-menu-item', function(e){
+    select_ctxmenu_item(this);
+})
 
+export default UIContextMenu;
diff --git a/src/UI/UIWindowShare.js b/src/UI/UIWindowShare.js
@@ -43,7 +43,6 @@ async function UIWindowShare(items){
             uid: null,
             is_dir: false,
             body_content: h,
-            draggable_body: false,
             has_head: true,
             selectable_body: false,
             draggable_body: false,

diff --git a/src/css/style.css b/src/css/style.css
@@ -1507,8 +1507,7 @@ span.header-sort-icon img {
     padding: 3px 0;
     min-width: 200px;
     background-color: rgba(231, 238, 245, .98);
-    border: 1px solid #e4ebf3de;
-    border: 1px solid #CCC;
+    border: 1px solid #e6e4e466;
     box-shadow: 0px 0px 15px #00000066;
     padding-left: 6px;
     padding-right: 6px;
@@ -1575,11 +1574,16 @@ span.header-sort-icon img {
     display: none;
     pointer-events: none;
 }
-
+.context-menu .has-open-context-menu-submenu,
+.context-menu .context-menu-item-active {
+    border-radius: 4px;
+}
+.context-menu .has-open-context-menu-submenu{
+    background-color: #dfdfdf;
+}
 .context-menu .context-menu-item-active {
     background-color: var(--select-color);
     color: white;
-    border-radius: 4px;
 }
 
 .context-menu .context-menu-item-active-blurred {