Make toolbar dropdown menu a dropzone

This commit is contained in:
Hadi Nategh 2022-06-13 11:22:52 +02:00
parent f6471eabb1
commit 30da3bb923
2 changed files with 41 additions and 39 deletions

View File

@ -454,8 +454,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
this.actionbox.appendTo(this.div); this.actionbox.appendTo(this.div);
let toolbar = this.actionlist.find('span[data-group]'), let toolbar = this.actionlist.find('span[data-group]'),
toolbox = this.actionbox, toolbox = this.actionbox;
menulist = jQuery(this.actionbox.children()[1]);
this.actionlist[0].classList.add(`et2_toolbar_dropzone_list${this.id}`); this.actionlist[0].classList.add(`et2_toolbar_dropzone_list${this.id}`);
this.actionbox[0].classList.add(`et2_toolbar_dropzone_more${this.id}`); this.actionbox[0].classList.add(`et2_toolbar_dropzone_more${this.id}`);
@ -517,9 +516,10 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
e.target.classList.remove('et2_toolbarDropArea'); e.target.classList.remove('et2_toolbarDropArea');
} }
}); });
const menulist = [`.et2_toolbar_dropzone_more${this.id}`, `#${this.id}-menulist`];
interact(`.et2_toolbar_dropzone_more${this.id}`).unset(); menulist.forEach(_item => {
interact(`.et2_toolbar_dropzone_more${this.id}`).dropzone({ interact(_item).unset();
interact(_item).dropzone({
checker: function ( checker: function (
dragEvent, // related dragmove or dragend dragEvent, // related dragmove or dragend
event, // Touch, Pointer or Mouse Event event, // Touch, Pointer or Mouse Event
@ -553,6 +553,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
e.target.classList.remove('et2_toolbarDropArea'); e.target.classList.remove('et2_toolbarDropArea');
} }
}); });
});
toolbox.on('toggle', (e)=>{ toolbox.on('toggle', (e)=>{
const details = <HTMLDetailsElement>e.target; const details = <HTMLDetailsElement>e.target;

View File

@ -2856,6 +2856,7 @@ et2-button.transparent-button::part(container) {
padding-left: 26px; padding-left: 26px;
padding-right: 5px; padding-right: 5px;
color: #5B5B5B; color: #5B5B5B;
z-index: 1000;
} }
.et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_onlyCaption { .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 { .et2_toolbarDropArea {
border: 2px dashed #d3d3d3; border: 2px dashed #d3d3d3 !important;
padding: 0px; padding: 0px !important;
background: #effaff; background: #effaff !important;
border-radius: 3px; border-radius: 3px !important;
padding-bottom: 2px; padding-bottom: 2px !important;
} }
.et2_label > input.et2_checkbox { .et2_label > input.et2_checkbox {