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);
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,9 +516,10 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
e.target.classList.remove('et2_toolbarDropArea');
}
});
interact(`.et2_toolbar_dropzone_more${this.id}`).unset();
interact(`.et2_toolbar_dropzone_more${this.id}`).dropzone({
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
@ -553,6 +553,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
e.target.classList.remove('et2_toolbarDropArea');
}
});
});
toolbox.on('toggle', (e)=>{
const details = <HTMLDetailsElement>e.target;

View File

@ -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 {