From 30da3bb9232c78daf1b6c44576ac160ccca8a017 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 13 Jun 2022 11:22:52 +0200
Subject: [PATCH] Make toolbar dropdown menu a dropzone

---
 api/js/etemplate/et2_widget_toolbar.ts | 69 +++++++++++++-------------
 api/templates/default/etemplate2.css   | 11 ++--
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/api/js/etemplate/et2_widget_toolbar.ts b/api/js/etemplate/et2_widget_toolbar.ts
index 02c3bbe76d..69706dac6d 100644
--- a/api/js/etemplate/et2_widget_toolbar.ts
+++ b/api/js/etemplate/et2_widget_toolbar.ts
@@ -454,8 +454,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 		this.actionbox.appendTo(this.div);
 
 		let toolbar = this.actionlist.find('span[data-group]'),
-			toolbox = this.actionbox,
-			menulist = jQuery(this.actionbox.children()[1]);
+			toolbox = this.actionbox;
 		this.actionlist[0].classList.add(`et2_toolbar_dropzone_list${this.id}`);
 		this.actionbox[0].classList.add(`et2_toolbar_dropzone_more${this.id}`);
 
@@ -517,41 +516,43 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 				e.target.classList.remove('et2_toolbarDropArea');
 			}
 		});
+		const menulist = [`.et2_toolbar_dropzone_more${this.id}`, `#${this.id}-menulist`];
+		menulist.forEach(_item => {
+			interact(_item).unset();
+			interact(_item).dropzone({
+				checker: function (
+					dragEvent,         // related dragmove or dragend
+					event,             // Touch, Pointer or Mouse Event
+					dropped,           // bool default checker result
+					dropzone,          // dropzone Interactable
+					dropzoneElement,   // dropzone element
+					draggable,         // draggable Interactable
+					draggableElement   // draggable element
+				) {
+					console.log(dragEvent);
 
-		interact(`.et2_toolbar_dropzone_more${this.id}`).unset();
-		interact(`.et2_toolbar_dropzone_more${this.id}`).dropzone({
-			checker: function (
-				dragEvent,         // related dragmove or dragend
-				event,             // Touch, Pointer or Mouse Event
-				dropped,           // bool default checker result
-				dropzone,          // dropzone Interactable
-				dropzoneElement,   // dropzone element
-				draggable,         // draggable Interactable
-				draggableElement   // draggable element
-			) {
-				console.log(dragEvent);
-
-				return dropped && !dropzoneElement.contains(draggableElement);
-			},
-			accept: `.et2_toolbar_draggable${this.id}`,
-			ondrop: function(e)
-			{
-				that.set_prefered(e.draggable.target.id.replace(that.id + '-', ''), true);
-				if (that.actionlist.find(`.et2_toolbar_draggable${that.id}`).length == 0)
+					return dropped && !dropzoneElement.contains(draggableElement);
+				},
+				accept: `.et2_toolbar_draggable${this.id}`,
+				ondrop: function(e)
 				{
-					that.preference = {};
-					egw.set_preference(that.options.preference_app,that.options.preference_id,that.preference);
+					that.set_prefered(e.draggable.target.id.replace(that.id + '-', ''), true);
+					if (that.actionlist.find(`.et2_toolbar_draggable${that.id}`).length == 0)
+					{
+						that.preference = {};
+						egw.set_preference(that.options.preference_app,that.options.preference_id,that.preference);
+					}
+					that._build_menu(that.actions);
+				},
+				ondragenter: function(e)
+				{
+					e.target.classList.add('et2_toolbarDropArea');
+				},
+				ondragleave: function(e)
+				{
+					e.target.classList.remove('et2_toolbarDropArea');
 				}
-				that._build_menu(that.actions);
-			},
-			ondragenter: function(e)
-			{
-				e.target.classList.add('et2_toolbarDropArea');
-			},
-			ondragleave: function(e)
-			{
-				e.target.classList.remove('et2_toolbarDropArea');
-			}
+			});
 		});
 
 		toolbox.on('toggle', (e)=>{
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 9d8c3d9558..92b99e9ae9 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -2856,6 +2856,7 @@ et2-button.transparent-button::part(container) {
     padding-left: 26px;
     padding-right: 5px;
     color: #5B5B5B;
+    z-index: 1000;
 }
 
 .et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_onlyCaption {
@@ -3132,11 +3133,11 @@ div.et2_toolbar_more h.ui-accordion-header {
 }
 
 .et2_toolbarDropArea {
-    border: 2px dashed #d3d3d3;
-    padding: 0px;
-    background: #effaff;
-    border-radius: 3px;
-    padding-bottom: 2px;
+    border: 2px dashed #d3d3d3 !important;
+    padding: 0px !important;
+    background: #effaff !important;
+    border-radius: 3px !important;
+    padding-bottom: 2px !important;
 }
 
 .et2_label > input.et2_checkbox {