diff options
| -rw-r--r-- | resources/assets/javascripts/bootstrap/actionmenu.js | 9 | ||||
| -rw-r--r-- | resources/assets/javascripts/lib/actionmenu.js | 18 | ||||
| -rw-r--r-- | resources/assets/stylesheets/scss/actionmenu.scss | 2 |
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; |