extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-18 03:48:55 +01:00
Code Issues 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.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>': '';
const header_list = this.options.header_list == 'more'?true:false; const list_header = this.options.list_header == 'more'?true:false;
this.actionbox.append('<summary class="ui-toolbar-menulistHeader'+(!header_list?' header_list-short':' ')+'">'+(header_list?egw.lang('more')+' ...':'')+admin_setting+'</summary>'); 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>'); 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)
{ {
this.actionbox.find('.toolbar-admin-pref').click(function(e){ 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){ egw.json('EGroupware\\Api\\Etemplate\\Widget\\Toolbar::ajax_get_default_prefs', [that.options.preference_app, that.options.preference_id], function(_prefs){
let prefs = []; let prefs = [];
for (let p in _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); that._admin_settings_dialog.call(that, actions, prefs);
}).sendRequest(true); }).sendRequest(true);
return false;
}); });
this.actionbox.addClass('admin');
} }
let pref = (!egwIsMobile())? egw.preference(this.options.preference_id, this.options.preference_app): undefined; 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 { div.et2_toolbar.ui-widget-header {
background: none; background: none;
} }
.et2_toolbar_more summary.ui-toolbar-menulistHeader.header_list-short { .et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short {
background-image: url(pixelegg/images/dots.svg); background-image: url(../../../pixelegg/images/dots.svg);
background-size: 16px; background-size: 16px;
height: 24px; height: 24px;
width: 20px; width: 20px;
margin-top: 0px; margin-top: 0px;
background-repeat: no-repeat; 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; padding: 0px !important;
width: 40px; width: 40px;
height: 24px; height: 24px;
margin-top: 0px; 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; top: 0px;
left: auto; left: auto;
content: ''; content: '';
} }
.et2_toolbar details[open].et2_toolbar_more .ui-toolbar-menulistHeader.header_list-short{ .et2_toolbar details.et2_toolbar_more.admin .ui-toolbar-menulistHeader.list_header-short {
background-position: bottom !important; background-position: left;
margin-top: 2px;
left: 0;
top: 0;
} }
.et2_toolbar .et2_toolbar_more summary .toolbar-admin-pref { .et2_toolbar .et2_toolbar_more summary .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;
@ -2757,10 +2754,8 @@ div.et2_toolbar.ui-widget-header {
width: 20px; width: 20px;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
position: absolute;
right: 0px;
top: 0px;
background-position: center; background-position: center;
float: right;
} }
.et2_toolbar .et2_toolbar_more summary .toolbar-admin-pref:hover { .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 { .et2_toolbar .et2_toolbar_more .ui-toolbar-menulistHeader {
background-image: url(../../../pixelegg/images/arrow_right.svg); border: 1px solid silver;
background-position: center; border-radius: 3px;
background-size: 12px; background-color: #fafafa;
background-repeat: no-repeat; 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-image: url(../../../pixelegg/images/arrow_down.svg);
background-size: 12px; background-size: 12px;
background-position: center; background-position: center;
background-repeat: no-repeat; 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 { .et2_toolbar .et2_toolbar_actionlist span[data-group]:not(:first-child) > button.et2_button:first-child {
margin-left: 7px; margin-left: 7px;
} }
@ -3073,7 +3078,7 @@ div.ui-toolbar-menulist {
.ui-toolbar-menulistHeader { .ui-toolbar-menulistHeader {
font-size: xx-small; font-size: xx-small;
height: 100%; height: 100%;
margin-top: 2px; margin-top: 1px;
direction: ltr; direction: ltr;
} }

66
pixelegg/css/pixelegg.css
View File

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

4
pixelegg/mobile/fw_mobile.less
View File

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