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(''+(header_list?egw.lang('more')+' ...':'')+admin_setting+''); + this.actionbox.append(''+(header_list?egw.lang('more')+' ...':'')+admin_setting+''); 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;