holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP replacing jQuery-ui: fix et2_toolbar styling with new details tag

Browse Source
This commit is contained in:
Hadi Nategh 2022-04-26 11:18:43 +02:00
parent 9a478aac9a
commit a835d5bc6e
5 changed files with 64 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -248,14 +248,13 @@ export 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>': '';
const header_list = this.options.header_list == 'more'?true:false;
this.actionbox.append('<summary class="ui-toolbar-menulistHeader'+(!header_list?' header_list-short':' ')+'">'+(header_list?egw.lang('more')+' ...':'')+admin_setting+'</summary>');
const list_header = this.options.list_header == 'more'?true:false;
this.actionbox.append('<summary class="ui-toolbar-menulistHeader'+(!list_header?' list_header-short':' ')+'">'+(list_header?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)
{
this.actionbox.find('.toolbar-admin-pref').click(function(e){
e.stopImmediatePropagation();
egw.json('EGroupware\\Api\\Etemplate\\Widget\\Toolbar::ajax_get_default_prefs', [that.options.preference_app, that.options.preference_id], function(_prefs){
let prefs = [];
for (let p in _prefs)
@ -264,7 +263,9 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
}
that._admin_settings_dialog.call(that, actions, prefs);
}).sendRequest(true);
return false;
});
this.actionbox.addClass('admin');
}
let pref = (!egwIsMobile())? egw.preference(this.options.preference_id, this.options.preference_app): undefined;

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

@ -2721,35 +2721,32 @@ div.ui-dialog div.ui-dialog-content > div {
div.et2_toolbar.ui-widget-header {
background: none;
}
.et2_toolbar_more summary.ui-toolbar-menulistHeader.header_list-short {
background-image: url(pixelegg/images/dots.svg);
.et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short {
background-image: url(../../../pixelegg/images/dots.svg);
background-size: 16px;
height: 24px;
width: 20px;
margin-top: 0px;
background-repeat: no-repeat;
background-position: center;
}
.et2_toolbar_more summary.ui-toolbar-menulistHeader.header_list-short {
.et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short {
padding: 0px !important;
width: 40px;
height: 24px;
margin-top: 0px;
}
.et2_toolbar_more summary.ui-toolbar-menulistHeader.header_list-short::marker {
.et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short::marker {
top: 0px;
left: auto;
content: '';
}
.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 details.et2_toolbar_more.admin .ui-toolbar-menulistHeader.list_header-short {
background-position: left;
}
.et2_toolbar .et2_toolbar_more summary .toolbar-admin-pref {
background-image: url(../../../pixelegg/images/setup.svg);
background-repeat: no-repeat;
@ -2757,10 +2754,8 @@ div.et2_toolbar.ui-widget-header {
width: 20px;
height: 100%;
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
background-position: center;
float: right;
}
.et2_toolbar .et2_toolbar_more summary .toolbar-admin-pref:hover {
@ -2768,19 +2763,29 @@ div.et2_toolbar.ui-widget-header {
}
.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;
border: 1px solid silver;
border-radius: 3px;
background-color: #fafafa;
font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
font-size: 9pt;
font-weight: normal;
height: 17px;
margin-top: 1px;
padding-left: 5px;
padding-right: 5px;
align-items: end;
padding-top: 5px;
}
.et2_toolbar details[open].et2_toolbar_more .ui-toolbar-menulistHeader {
.et2_toolbar details[open].et2_toolbar_more .ui-toolbar-menulistHeader.list_header-short {
background-image: url(../../../pixelegg/images/arrow_down.svg);
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.et2_toolbar details[open].et2_toolbar_more.admin .ui-toolbar-menulistHeader.list_header-short {
background-position: left;
}
.et2_toolbar .et2_toolbar_actionlist span[data-group]:not(:first-child) > button.et2_button:first-child {
margin-left: 7px;
}
@ -3073,7 +3078,7 @@ div.ui-toolbar-menulist {
.ui-toolbar-menulistHeader {
font-size: xx-small;
height: 100%;
margin-top: 2px;
margin-top: 1px;
direction: ltr;
}

66
pixelegg/css/pixelegg.css
View File

@ -178,31 +178,29 @@
/**
* Top level
*/
.et2_container {
padding: 0px;
background-color: transparent;
}
.et2_container > div:not([class]) {
height: 100%;
}
/**
* Basic rules
*/
/**
* img gray filter
*/
img.et2_appicon,
.et2_appicon img,
table.egwGridView_grid img.et2_appicon {
/*filter grey*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-moz-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-ms-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-o-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
.et2_container {
padding: 0px;
background-color: transparent;
}
.et2_container > div:not([class]) {
height: 100%;
}
/**
* Basic rules
*/
/**
* img gray filter
*/
img.et2_appicon,
.et2_appicon img,
table.egwGridView_grid img.et2_appicon {
/*filter grey*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-moz-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-ms-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-o-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
/*filter: url(grayscale.svg); Firefox 4+ */
filter: gray;
/* IE 6-9 */
@ -1067,7 +1065,7 @@
.ui-toolbar-menulistHeader {
font-size: xx-small;
height: 100%;
margin-top: 2px;
margin-top: 1px;
direction: ltr;
}
.et2_toolbar_more {
@ -3078,14 +3076,14 @@ div.selectbox-wrapper ul li {
cursor: pointer;
}
select {
position: relative;
padding-right: 20px !important;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
position: relative;
padding-right: 20px !important;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
}
select:active {
background: #ffffff url(../images/arrow_up.svg) no-repeat center right;

2
pixelegg/less/etemplate2.less
View File

@ -917,7 +917,7 @@ div.ui-toolbar-menulist{
.ui-toolbar-menulistHeader{
font-size: xx-small;
height:100%;
margin-top: 2px;
margin-top: 1px;
direction: ltr;
}
.et2_toolbar_more{

4
pixelegg/mobile/fw_mobile.less
View File

@ -1281,10 +1281,10 @@
}
div.et2_toolbar_more {
position:inherit;
h.ui-state-hover {
.ui-state-hover {
background:none;
}
h.ui-toolbar-menulistHeader {
.ui-toolbar-menulistHeader {
color:transparent;
border: none;
height: 46px;