Add an option to configure toolbar's list header style

This commit is contained in:
Hadi Nategh 2021-09-07 16:30:53 +02:00
parent 78d7f20ed8
commit 91d74767fe
2 changed files with 23 additions and 1 deletions

View File

@ -44,6 +44,12 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
"type": "boolean", "type": "boolean",
"default": true, "default": true,
"description": "Define whether the actions with children should be shown as dropdown or flat list" "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 ..."
} }
}; };
@ -218,7 +224,8 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
this.actionbox.empty(); this.actionbox.empty();
this.actionlist.empty(); this.actionlist.empty();
let admin_setting = this.options.is_admin ? '<span class="toolbar-admin-pref" title="'+egw.lang('Admin settings')+' ..."></span>': ''; 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>'); this.actionbox.append('<div id="' + this.id + '-menulist' +'" class="ui-toolbar-menulist" ></div>');
let that = this; let that = this;
if (this.options.is_admin) if (this.options.is_admin)

View File

@ -2296,6 +2296,21 @@ div.ui-dialog div.ui-dialog-content > div {
padding: 0 !important; padding: 0 !important;
} }
div.et2_toolbar.ui-widget-header {background: none;} 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: 20px;
height: 30px;
width: 20px;
margin-top: 0px;
}
div.et2_toolbar_more h.ui-accordion-header.header_list-short {
padding: 0px !important;
width: 40px;
height: 30px;
margin-top: 0px;
}
.et2_toolbar .et2_toolbar_more h .toolbar-admin-pref { .et2_toolbar .et2_toolbar_more h .toolbar-admin-pref {
background-image: url(../../../pixelegg/images/setup.svg); background-image: url(../../../pixelegg/images/setup.svg);
background-repeat: no-repeat; background-repeat: no-repeat;