extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 07:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make toolbar dropdown menu a dropzone

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
api/js/etemplate/et2_widget_toolbar.ts
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,41 +516,43 @@ 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`];
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(); return dropped && !dropzoneElement.contains(draggableElement);
interact(`.et2_toolbar_dropzone_more${this.id}`).dropzone({ },
checker: function ( accept: `.et2_toolbar_draggable${this.id}`,
dragEvent, // related dragmove or dragend ondrop: function(e)
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)
{ {
that.preference = {}; that.set_prefered(e.draggable.target.id.replace(that.id + '-', ''), true);
egw.set_preference(that.options.preference_app,that.options.preference_id,that.preference); 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)=>{ toolbox.on('toggle', (e)=>{

11
api/templates/default/etemplate2.css
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 {