extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-07 16:44:20 +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);
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)=>{

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