From 6e88dead8ee302c36c7f9efab58441232cb3de39 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Thu, 9 Sep 2021 16:20:08 +0200 Subject: [PATCH] Add an option to configure toolbar's list header style --- api/js/etemplate/et2_widget_toolbar.js | 18 ++++++++++++++---- api/js/etemplate/et2_widget_toolbar.ts | 19 +++++++++++++++---- api/templates/default/etemplate2.css | 22 +++++++++++++++++++++- 3 files changed, 50 insertions(+), 9 deletions(-) diff --git a/api/js/etemplate/et2_widget_toolbar.js b/api/js/etemplate/et2_widget_toolbar.js index ed2abbbdac..55e761ddf7 100644 --- a/api/js/etemplate/et2_widget_toolbar.js +++ b/api/js/etemplate/et2_widget_toolbar.js @@ -173,7 +173,8 @@ var et2_toolbar = /** @class */ (function (_super) { this.actionbox.empty(); this.actionlist.empty(); var admin_setting = this.options.is_admin ? '' : ''; - this.actionbox.append('' + egw.lang('more') + ' ...' + admin_setting + ''); + var header_list = this.options.header_list == 'more' ? true : false; + this.actionbox.append('' + (header_list ? egw.lang('more') + ' ...' : '') + admin_setting + ''); this.actionbox.append('
'); var that = this; if (this.options.is_admin) { @@ -382,14 +383,17 @@ var et2_toolbar = /** @class */ (function (_super) { heightStyle: "fill", collapsible: true, active: 'none', + animate: 10, activate: function (event, ui) { - var menubox = event.target; + var menubox = jQuery(event.target); if (ui.oldHeader.length == 0) { jQuery('html').on('click.outsideOfMenu', function (event) { - jQuery(menubox).accordion("option", "active", 2); + if (menubox.accordion('instance')) { + menubox.accordion("option", "active", 2); + } jQuery(this).unbind(event); // Remove the focus class, user clicked elsewhere - jQuery(menubox).children().removeClass('ui-state-focus'); + menubox.children().removeClass('ui-state-focus'); }); } }, @@ -676,6 +680,12 @@ var et2_toolbar = /** @class */ (function (_super) { "type": "boolean", "default": true, "description": "Define whether the actions with children should be shown as dropdown or flat list" + }, + "list_header": { + "name": "list header style", + "type": "string", + "default": "more", + "description": "Define a style for list header (more ...), which can get short 3dots with no caption or bigger button with caption more ..." } }; /** diff --git a/api/js/etemplate/et2_widget_toolbar.ts b/api/js/etemplate/et2_widget_toolbar.ts index 4725fcb006..fb178d9523 100644 --- a/api/js/etemplate/et2_widget_toolbar.ts +++ b/api/js/etemplate/et2_widget_toolbar.ts @@ -42,6 +42,12 @@ class et2_toolbar extends et2_DOMWidget implements et2_IInput "type": "boolean", "default": true, "description": "Define whether the actions with children should be shown as dropdown or flat list" + }, + "list_header": { + "name": "list header style", + "type": "string", + "default": "more", + "description": "Define a style for list header (more ...), which can get short 3dots with no caption or bigger button with caption more ..." } }; @@ -216,7 +222,8 @@ class et2_toolbar extends et2_DOMWidget implements et2_IInput this.actionbox.empty(); this.actionlist.empty(); let admin_setting = this.options.is_admin ? '': ''; - this.actionbox.append(''+egw.lang('more')+' ...'+admin_setting+''); + const header_list = this.options.header_list == 'more'?true:false; + this.actionbox.append(''+(header_list?egw.lang('more')+' ...':'')+admin_setting+''); this.actionbox.append('
'); let that = this; if (this.options.is_admin) @@ -470,15 +477,19 @@ class et2_toolbar extends et2_DOMWidget implements et2_IInput heightStyle:"fill", collapsible: true, active:'none', + animate: 10, activate: function (event, ui) { - var menubox = event.target; + var menubox = jQuery(event.target); if (ui.oldHeader.length == 0) { jQuery('html').on('click.outsideOfMenu', function (event){ - jQuery(menubox).accordion( "option", "active", 2); + if (menubox.accordion('instance')) + { + menubox.accordion( "option", "active", 2); + } jQuery(this).unbind(event); // Remove the focus class, user clicked elsewhere - jQuery(menubox).children().removeClass('ui-state-focus'); + menubox.children().removeClass('ui-state-focus'); }); } }, diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 0fb0080d99..9b81f5f2db 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -2292,6 +2292,26 @@ div.ui-dialog div.ui-dialog-content > div[id] { margin: 0 !important; padding: 0 !important; } +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); + background-size: 16px; + height: 24px; + width: 20px; + margin-top: 0px; +} + +div.et2_toolbar_more h.ui-accordion-header.header_list-short { + padding: 0px !important; + width: 40px; + height: 24px; + margin-top: 0px; +} +.et2_toolbar_more .ui-accordion-header-active.header_list-short.ui-state-active span.ui-accordion-header-icon { + background-position: bottom !important; + margin-top: 2px; +} .et2_toolbar .et2_toolbar_more h .toolbar-admin-pref { background-image: url(../../../pixelegg/images/setup.svg); background-repeat: no-repeat; @@ -3347,4 +3367,4 @@ span.et2_countdown_seconds { } .et2_audio audio { outline: none; -} \ No newline at end of file +}