fix opening of action menu and position of icon when reversed, fixes #6373biest-6373

3 files changed, 21 insertions, 8 deletions

diff --git a/resources/assets/javascripts/bootstrap/actionmenu.js b/resources/assets/javascripts/bootstrap/actionmenu.js
index 0baff56..f39ffb2 100644
--- a/resources/assets/javascripts/bootstrap/actionmenu.js
+++ b/resources/assets/javascripts/bootstrap/actionmenu.js
@@ -4,7 +4,11 @@
     var last = null;
 
     // Open action menu on click on the icon
-    $(document).on('click', '.action-menu-icon', function () {
+    $(document).on('click', '.action-menu-icon', function (event) {
+        // Stop event so the following close event will not be fired
+        event.stopImmediatePropagation();
+        event.preventDefault();
+
         // Choose correct root element if menu was positioned absolutely
         let root_element = $(this).closest('.action-menu');
         if ($(this).closest('.action-menu-wrapper').length > 0) {
@@ -23,9 +27,6 @@
         }
 
         STUDIP.ActionMenu.create(root_element, position).toggle();
-
-        // Stop event so the following close event will not be fired
-        return false;
     });
 
     // Close action menu on click outside
diff --git a/resources/assets/javascripts/lib/actionmenu.js b/resources/assets/javascripts/lib/actionmenu.js
index 8127c80..7a7eec4 100644
--- a/resources/assets/javascripts/lib/actionmenu.js
+++ b/resources/assets/javascripts/lib/actionmenu.js
@@ -3,7 +3,7 @@
  * @type {[type]}
  */
 function determineBreakpoint(element) {
-    return $(element).closest('.ui-dialog-content').length > 0 ? '.ui-dialog-content' : '#content';
+    return $(element).closest('.ui-dialog-content').length > 0 ? '.ui-dialog-content' : 'body';
 }
 
 /**
@@ -116,7 +116,14 @@ class ActionMenu
                     $('.action-menu-item button:not([form])', this.element).attr('form', id);
                 }
 
-                this.menu = $('<div class="action-menu-wrapper">').append(this.content);
+                this.menu = $('<div class="action-menu-wrapper">')
+                    .css({
+                        position: 'absolute',
+                        visibility: 'hidden',
+                        top: 0,
+                        left: 0
+                    })
+                    .append(this.content);
                 $('.action-menu-icon', element).clone().data('action-menu-element', element).prependTo(this.menu);
 
                 this.menu
@@ -219,7 +226,12 @@ class ActionMenu
         }
 
         const offset = this.element.offset();
-        requestAnimationFrame(() => this.menu.offset(offset));
+        requestAnimationFrame(() => {
+            this.menu.offset(offset);
+            this.menu.css({
+                visibility: '',
+            });
+        });
     }
 
     /**
diff --git a/resources/assets/stylesheets/scss/actionmenu.scss b/resources/assets/stylesheets/scss/actionmenu.scss
index decaf32..fe9e828 100644
--- a/resources/assets/stylesheets/scss/actionmenu.scss
+++ b/resources/assets/stylesheets/scss/actionmenu.scss
@@ -184,7 +184,7 @@ $action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow);
     &.is-reversed {
         .action-menu-content {
             top: auto;
-            bottom: -4px;
+            bottom: -8px;
 
             .action-menu-list .action-menu-item:last-of-type {
                 padding-right: 20px;