diff --git a/api/js/etemplate/et2_widget_toolbar.ts b/api/js/etemplate/et2_widget_toolbar.ts
index e004236273..e7e797d8b0 100644
--- a/api/js/etemplate/et2_widget_toolbar.ts
+++ b/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 ? '': '';
const header_list = this.options.header_list == 'more'?true:false;
- this.actionbox.append('');
+ this.actionbox.append('');
this.actionbox.append('
');
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;
- }
- });
}
/**
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index ef5212d29e..21193a33e8 100644
--- a/api/templates/default/etemplate2.css
+++ b/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;
}
-
-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);
+.et2_toolbar_more summary.ui-toolbar-menulistHeader.header_list-short {
+ 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;