WIP replacing jQuery-ui:

- Replace accordion with html details

api/js/etemplate/et2_widget_toolbar.ts

@@ -119,7 +119,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 			this.options.preference_app = this.egw().app_name();
 		}
 
-		this.actionbox = jQuery(document.createElement('div'))
+		this.actionbox = jQuery(document.createElement('details'))
 			.addClass("et2_toolbar_more")
 			.attr('id',this.id +'-'+ 'actionbox');
 
@@ -249,7 +249,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 		this.actionlist.empty();
 		let admin_setting = this.options.is_admin ? '<span class="toolbar-admin-pref" title="'+egw.lang('Admin settings')+' ..."></span>': '';
 		const header_list = this.options.header_list == 'more'?true:false;
-		this.actionbox.append('<h class="ui-toolbar-menulistHeader'+(!header_list?' header_list-short':' ')+'">'+(header_list?egw.lang('more')+' ...':'')+admin_setting+'</h>');
+		this.actionbox.append('<summary class="ui-toolbar-menulistHeader'+(!header_list?' header_list-short':' ')+'">'+(header_list?egw.lang('more')+' ...':'')+admin_setting+'</summary>');
 		this.actionbox.append('<div id="' + this.id + '-menulist' +'" class="ui-toolbar-menulist" ></div>');
 		let that = this;
 		if (this.options.is_admin)
@@ -500,43 +500,6 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 				that._build_menu(actions);
 			}
 		});
-		toolbox.accordion({
-			heightStyle:"fill",
-			collapsible: true,
-			active:'none',
-			animate: 10,
-			activate: function (event, ui) {
-				var menubox = jQuery(event.target);
-				if (ui.oldHeader.length == 0)
-				{
-					jQuery('html').on('click.outsideOfMenu', function (event){
-						if (menubox.accordion('instance'))
-						{
-							menubox.accordion( "option", "active", 2);
-						}
-						jQuery(this).unbind(event);
-						// Remove the focus class, user clicked elsewhere
-						menubox.children().removeClass('ui-state-focus');
-					});
-				}
-			},
-			create: function (event, ui) {
-				jQuery('html').unbind('click.outsideOfMenu');
-			},
-			beforeActivate: function ()
-			{
-				if (egwIsMobile())
-				{
-					menulist.height(screen.availHeight - 50);
-				}
-				else
-				{
-					menulist.css({height:'inherit'})
-				}
-				// Nothing to show in menulist
-				if (menulist.children().length == 0)	return false;
-			}
-		});
 	}
 
 	/**

api/templates/default/etemplate2.css

@@ -2721,35 +2721,36 @@ div.ui-dialog div.ui-dialog-content > div {
 div.et2_toolbar.ui-widget-header {
     background: none;
 }
-
+.et2_toolbar_more summary.ui-toolbar-menulistHeader.header_list-short {
-div.et2_toolbar_more h.ui-accordion-header.header_list-short span.ui-accordion-header-icon.ui-icon.ui-icon-triangle-1-e {
+    background-image: url(pixelegg/images/dots.svg);
-    background-image: url(../../../pixelegg/images/dots.svg);
     background-size: 16px;
     height: 24px;
     width: 20px;
     margin-top: 0px;
+    background-repeat: no-repeat;
 }
 
-div.et2_toolbar_more h.ui-accordion-header.header_list-short {
+.et2_toolbar_more summary.ui-toolbar-menulistHeader.header_list-short {
     padding: 0px !important;
     width: 40px;
     height: 24px;
     margin-top: 0px;
 }
 
-div.et2_toolbar_more h.ui-accordion-header.header_list-short span.ui-accordion-header-icon.ui-icon.ui-icon-triangle-1-e {
+.et2_toolbar_more summary.ui-toolbar-menulistHeader.header_list-short::marker {
     top: 0px;
     left: auto;
+    content: '';
 }
 
-.et2_toolbar_more .ui-accordion-header-active.header_list-short.ui-state-active span.ui-accordion-header-icon {
+.et2_toolbar details[open].et2_toolbar_more .ui-toolbar-menulistHeader.header_list-short{
     background-position: bottom !important;
     margin-top: 2px;
     left: 0;
     top: 0;
 }
 
-.et2_toolbar .et2_toolbar_more h .toolbar-admin-pref {
+.et2_toolbar .et2_toolbar_more summary .toolbar-admin-pref {
     background-image: url(../../../pixelegg/images/setup.svg);
     background-repeat: no-repeat;
     background-size: 12px;
@@ -2762,18 +2763,18 @@ div.et2_toolbar_more h.ui-accordion-header.header_list-short span.ui-accordion-h
     background-position: center;
 }
 
-.et2_toolbar .et2_toolbar_more h .toolbar-admin-pref:hover {
+.et2_toolbar .et2_toolbar_more summary .toolbar-admin-pref:hover {
     background-color: #ffd555;
 }
 
-.et2_toolbar .et2_toolbar_more span.ui-accordion-header-icon {
+.et2_toolbar .et2_toolbar_more .ui-toolbar-menulistHeader {
     background-image: url(../../../pixelegg/images/arrow_right.svg);
     background-position: center;
     background-size: 12px;
     background-repeat: no-repeat;
 }
 
-.et2_toolbar .et2_toolbar_more .ui-toolbar-menulistHeader.ui-accordion-header-active.ui-state-active span.ui-accordion-header-icon {
+.et2_toolbar details[open].et2_toolbar_more .ui-toolbar-menulistHeader {
     background-image: url(../../../pixelegg/images/arrow_down.svg);
     background-size: 12px;
     background-position: center;