extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-29 01:59:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add an option to configure toolbar's list header style

Browse Source
This commit is contained in:
Hadi Nategh 2021-09-09 16:20:08 +02:00
parent 93aa346090
commit 6e88dead8e
3 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
api/js/etemplate/et2_widget_toolbar.js
View File

@ -173,7 +173,8 @@ var et2_toolbar = /** @class */ (function (_super) {
this.actionbox.empty();
this.actionlist.empty();
var admin_setting = this.options.is_admin ? '<span class="toolbar-admin-pref" title="' + egw.lang('Admin settings') + ' ..."></span>' : '';
this.actionbox.append('<h class="ui-toolbar-menulistHeader">' + egw.lang('more') + ' ...' + admin_setting + '</h>');
var 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('<div id="' + this.id + '-menulist' + '" class="ui-toolbar-menulist" ></div>');
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 ..."
}
};
/**

19
api/js/etemplate/et2_widget_toolbar.ts
View File

@ -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 ? '<span class="toolbar-admin-pref" title="'+egw.lang('Admin settings')+' ..."></span>': '';
this.actionbox.append('<h class="ui-toolbar-menulistHeader">'+egw.lang('more')+' ...'+admin_setting+'</h>');
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('<div id="' + this.id + '-menulist' +'" class="ui-toolbar-menulist" ></div>');
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');
});
}
},

22
api/templates/default/etemplate2.css
View File

@ -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;
}
}