extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-03 04:29:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP replacing jQuery-ui:

Browse Source 
- Replace accordion with html details
This commit is contained in:
Hadi Nategh 2022-04-25 17:24:29 +02:00
parent 65c683b9a2
commit ca794817eb
2 changed files with 13 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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