mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-21 22:22:15 +01:00
WIP replacing jQuery-ui: fix et2_toolbar styling with new details tag
This commit is contained in:
Hadi Nategh
parent
9a478aac9a
commit
a835d5bc6e
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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{
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user