Change multi-select header styling:

- Change icons from jQueryUI to egw
- Stop hiding header when not needed, always show
- Don't visually distinguish header
- Don't float right icons, leave them between checkbox and label

etemplate/inc/class.etemplate_widget_menupopup.inc.php

@@ -655,7 +655,7 @@ class etemplate_widget_menupopup extends etemplate_widget
 		if($show_type) {
 			$info = array(
 				'label'	=> $info,
-				'icon' => $acc['account_type'] == 'g' ? 'addressbook/group' : 'users'
+				'icon' => $acc['account_type'] == 'g' ? 'addressbook/group' : 'user'
 			);
 		}
 		return $info;

etemplate/js/et2_widget_selectbox.js

@@ -394,27 +394,6 @@ var et2_selectbox = et2_inputWidget.extend(
 
 		}
 		
-		// Hide the header, only show it on hover / focus, but show it out of flow, above
-		// the list of options so it doesn't reflow the page
-		var hide_header = !this.options.empty_label && !this.options.label;
-		if(hide_header)
-		{
-			// Hide header
-			header.hide();
-
-			// Show / hide again
-			node.on('mouseenter focusin', function(e) {
-				// Don't show if dragging goes over
-				if(e.which != 0) return;
-				
-				header.show();
-				header.css("width", options.innerWidth() - (header.outerWidth() - header.width()) + 'px');
-				header.css("position", "fixed");
-				header.css("top", options.offset().top - header.outerHeight());
-			});
-			node.on('mouseleave focusout', function() {if(hide_header) header.hide();});
-		}
-
 		this.setDOMNode(node[0]);
 	},
 

etemplate/templates/default/etemplate2.css

@@ -256,6 +256,9 @@ button.et2_button_text:focus, input[type=button]:focus {
 .et2_selectbox .ui-widget-header {
 	padding: 0px 6px 0px 6px;
 	text-align: center;
+	background: white;
+	border:none;
+	color: inherit;
 }
 .et2_selectbox .ui-widget-header ul {
 	float: left;
@@ -269,6 +272,7 @@ button.et2_button_text:focus, input[type=button]:focus {
 .et2_selectbox .ui-widget-header li>span.ui-icon {
 	float: left;
 	margin-top: -2px;
+	background-size: 1.0em;
 }
 .et2_selectbox .ui-widget-header li>div.et2_link_entry {
 	/* Shrink search box to same size as header */
@@ -287,7 +291,7 @@ button.et2_button_text:focus, input[type=button]:focus {
 .et2_selectbox .ui-multiselect-checkboxes li {
 	margin: 0px;
 	clear: both;
-	padding-left: 26px;
+	padding-left: 22px;
 	padding-right: 3px;
 	text-decoration: none;
 	list-style-image: none;
@@ -314,8 +318,7 @@ button.et2_button_text:focus, input[type=button]:focus {
 	margin: 3px;
 }
 .et2_selectbox .ui-multiselect-checkboxes img {
-	float: right;
+	height: 1.0em;
-	height: 1.8em;
 }
 
 .et2_selectbox .ui-multiselect-checkboxes div.ui-icon-close {
@@ -1202,6 +1205,19 @@ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
 	width: 100%;
 }
 
+/**
+ * egroupware has its own icons for these - override the images
+ */
+
+span.ui-icon-check, div.ui-icon-check, .ui-widget-header .ui-icon-check {
+	background-image: url(images/check.png);
+	background-position: 0px;
+}
+span.ui-icon-search, div.ui-icon-search, .ui-widget-header .ui-icon-search  {
+	background-image: url(images/search.png);
+	background-position: 0px;
+}
+
 /**
 * et2_taglist
 */