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

api/js/etemplate/et2_widget_toolbar.ts

@@ -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;
+		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>');
 		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;

api/templates/default/etemplate2.css

@@ -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 {
+.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;
     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{
+.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 {
     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);
+    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-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;
 }
 

pixelegg/css/pixelegg.css

@@ -182,11 +182,9 @@
     padding: 0px;
     background-color: transparent;
   }
-
   .et2_container > div:not([class]) {
     height: 100%;
   }
-
   /**
  * Basic rules
  */
@@ -1067,7 +1065,7 @@
   .ui-toolbar-menulistHeader {
     font-size: xx-small;
     height: 100%;
-    margin-top: 2px;
+    margin-top: 1px;
     direction: ltr;
   }
   .et2_toolbar_more {

pixelegg/less/etemplate2.less

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

pixelegg/mobile/fw_mobile.less

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