Implement flags indication for country-select widget:

- Migrate AB country selector to select-country tags
- Migrate Country selector in preferences to use select-country tags

addressbook/templates/default/edit.xet

@@ -84,7 +84,7 @@
 					<description for="adr_one_countryname" value="country"/>
 					<vbox width="100%">
 						<menulist class="et2_fullWidth">
-							<menupopup type="select-country" class="countrySelect et2_fullWidth" id="adr_one_countrycode" tabindex="15" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="country"/>
+							<menupopup type="select-country" tags="true" class="countrySelect et2_fullWidth" id="adr_one_countrycode" tabindex="15" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="country"/>
 						</menulist>
 						<textbox id="adr_one_countryname" class="custom_country et2_fullWidth" autocomplete="country-name"/>
 					</vbox>

api/js/etemplate/et2_widget_selectbox.js

@@ -235,6 +235,25 @@ var et2_selectbox = (function(){ "use strict"; return et2_inputWidget.extend(
 		}
 	},
 
+	change: function(_node, _widget, _value) {
+		var valid = this._super.apply(this, arguments);
+		var selected = this.input.siblings().find('a.chzn-single');
+		if (selected && selected.length == 1 && _value && _value.selected)
+		{
+			selected.removeClass (function (index, className) {
+				return (className.match (/(^|\s)flag-\S+/g) || []).join(' ');
+			});
+			selected.find('span.img').remove();
+			selected.prepend('<span class="img"></span>');
+			selected.addClass('et2_country-select flag-'+ _value.selected.toLowerCase());
+		}
+		else if(selected)
+		{
+			selected.removeClass('et2_country-select');
+		}
+		return valid;
+	},
+
 	/**
 	 * Add an option to regular drop-down select
 	 *
@@ -256,9 +275,19 @@ var et2_selectbox = (function(){ "use strict"; return et2_inputWidget.extend(
 		var option = jQuery(document.createElement("option"))
 			.attr("value", _value)
 			.text(_label+"");
-		if (this.options.tags && this._type == 'select-cat')
+		if (this.options.tags)
 		{
-			option.addClass('cat_'+_value);
+			switch (this._type)
+			{
+				case 'select-cat':
+					option.addClass('cat_'+_value);
+					break;
+				case 'select-country':
+				//	jQuery(document.createElement("span")).addClass('et2_country-select').appenTo(option);
+					option.addClass('et2_country-select flag-'+_value.toLowerCase())
+					break;
+			}
+
 		}
 		if (typeof _title != "undefined" && _title)
 		{
@@ -720,7 +749,18 @@ var et2_selectbox = (function(){ "use strict"; return et2_inputWidget.extend(
 				allow_single_deselect: this.options.allow_single_deselect,
 				no_results_text: this.egw().lang('No results match')
 			});
-
+			if (this._type == 'select-country' && this.getValue()) {
+				var selected = this.input.siblings().find('a.chzn-single');
+				if (selected && selected.length == 1)
+				{
+					selected.removeClass (function (index, className) {
+						return (className.match (/(^|\s)flag-\S+/g) || []).join(' ');
+					});
+					selected.find('span.img').remove();
+					selected.prepend('<span class="img"></span>');
+					selected.addClass('et2_country-select flag-'+ this.getValue().toLowerCase());
+				}
+			}
 			if(this.options.onchange)
 			{
 				// Unbind change handler of widget's ancestor to stop it from bubbling

api/js/jquery/chosen/chosen.jquery.js

@@ -250,7 +250,7 @@
         classes.push(option.classes);
       }
       style = option.style.cssText !== "" ? " style=\"" + option.style + "\"" : "";
-      return "<li class=\"" + (classes.join(' ')) + "\"" + style + " data-option-array-index=\"" + option.array_index + "\">" + option.search_text + "</li>";
+      return "<li class=\"" + (classes.join(' ')) + "\"" + style + " data-option-array-index=\"" + option.array_index + "\"><span class=\"img\"></span>" + option.search_text + "</li>";
     };
 
     AbstractChosen.prototype.result_add_group = function(group) {

api/templates/default/etemplate2.css

@@ -15,6 +15,7 @@
 /*@import url("../../js/egw_action/test/skins/dhtmlxmenu_egw.css");*/
 /*@import url("../../js/etemplate/lib/jsdifflib/diffview.css");*/
 /*@import url("../../../vendor/bower-asset/cropper/dist/cropper.min.css");*/
+/*@import url("css/flags.css");*/
 
 /**
  * Top level

pixelegg/css/mobile.css

@@ -2623,14 +2623,8 @@ button[id="add"]:active {
 .chzn-container {
   color: #808080;
 }
-.chzn-container .chzn-drop {
-  width: auto;
-}
 /* @end */
 /* @group Single Chosen */
-.chzn-container-single .chzn-single span {
-  width: auto;
-}
 /* @end */
 /* @group Results */
 .chzn-container .chzn-results {
@@ -2684,6 +2678,27 @@ button[id="add"]:active {
 /**
  * Egw customizations for Chosen widget
  */
+.chzn-container {
+  width: 100% !important;
+}
+.chzn-container-single .chzn-single {
+  border: 1px solid #e5e5e5;
+  border-radius: 0;
+  background: none !important;
+  box-shadow: none !important;
+  color: #26537C;
+  height: 22px;
+}
+.chzn-container-single .et2_country-select.chzn-single span {
+  display: inline-block;
+}
+.chzn-single.chzn-single-with-deselect.et2_country-select span.img {
+  top: -4px;
+  color: transparent;
+}
+.chzn-container-single.chzn-container-active.chzn-with-drop:hover {
+  transition: none;
+}
 /**
  * EGroupware: Stylite Pixelegg template
  *

pixelegg/css/pixelegg.css

@@ -2612,14 +2612,8 @@ button[id="add"]:active {
 .chzn-container {
   color: #808080;
 }
-.chzn-container .chzn-drop {
-  width: auto;
-}
 /* @end */
 /* @group Single Chosen */
-.chzn-container-single .chzn-single span {
-  width: auto;
-}
 /* @end */
 /* @group Results */
 .chzn-container .chzn-results {
@@ -2673,6 +2667,27 @@ button[id="add"]:active {
 /**
  * Egw customizations for Chosen widget
  */
+.chzn-container {
+  width: 100% !important;
+}
+.chzn-container-single .chzn-single {
+  border: 1px solid #e5e5e5;
+  border-radius: 0;
+  background: none !important;
+  box-shadow: none !important;
+  color: #26537C;
+  height: 22px;
+}
+.chzn-container-single .et2_country-select.chzn-single span {
+  display: inline-block;
+}
+.chzn-single.chzn-single-with-deselect.et2_country-select span.img {
+  top: -4px;
+  color: transparent;
+}
+.chzn-container-single.chzn-container-active.chzn-with-drop:hover {
+  transition: none;
+}
 /**
  * EGroupware: Stylite Pixelegg template
  *

pixelegg/less/layout_chosen.less

@@ -26,17 +26,14 @@
 //width: auto !important;
 
 }
-.chzn-container .chzn-drop {
+.chzn-container .chzn-drop {}
-	width: auto;
-
-}
 .chzn-container.chzn-with-drop .chzn-drop {}
 
 /* @end */
 /* @group Single Chosen */
 .chzn-container-single .chzn-single {}
 .chzn-container-single .chzn-default {}
-.chzn-container-single .chzn-single span { width: auto;}
+.chzn-container-single .chzn-single span {}
 .chzn-container-single .chzn-single-with-deselect span {}
 .chzn-container-single .chzn-single abbr {}
 .chzn-container-single .chzn-single abbr:hover {}
@@ -143,8 +140,31 @@
 /**
  * Egw customizations for Chosen widget
  */
-.chzn-container {}
+.chzn-container {width: 100% !important;}
-.chzn-container .chzn-single {}
+.chzn-container .chzn-single {
+
+}
+.chzn-container-single .chzn-single {
+	border: 1px solid #e5e5e5;
+	border-radius: 0;
+	background: none !important;
+	box-shadow: none !important;
+	color: #26537C;
+	height: 22px;
+}
+.chzn-container-single .et2_country-select.chzn-single span {
+	display: inline-block;
+}
+.chzn-single.chzn-single-with-deselect.et2_country-select span.img {
+	top:-4px;
+	color: transparent;
+}
+.chzn-container-single.chzn-container-active.chzn-with-drop {
+	&:hover {transition: none;}
+}
+.chzn-container .chzn-single.chzn-single-with-deselect {
+
+}
 .chzn-container .chzn-results {}
 .chzn-container .chzn-results li {}
 .chzn-container-multi .chzn-choices .search-field input {}

pixelegg/mobile/fw_mobile.css

@@ -2634,14 +2634,8 @@ button[id="add"]:active {
 .chzn-container {
   color: #808080;
 }
-.chzn-container .chzn-drop {
-  width: auto;
-}
 /* @end */
 /* @group Single Chosen */
-.chzn-container-single .chzn-single span {
-  width: auto;
-}
 /* @end */
 /* @group Results */
 .chzn-container .chzn-results {
@@ -2695,6 +2689,27 @@ button[id="add"]:active {
 /**
  * Egw customizations for Chosen widget
  */
+.chzn-container {
+  width: 100% !important;
+}
+.chzn-container-single .chzn-single {
+  border: 1px solid #e5e5e5;
+  border-radius: 0;
+  background: none !important;
+  box-shadow: none !important;
+  color: #26537C;
+  height: 22px;
+}
+.chzn-container-single .et2_country-select.chzn-single span {
+  display: inline-block;
+}
+.chzn-single.chzn-single-with-deselect.et2_country-select span.img {
+  top: -4px;
+  color: transparent;
+}
+.chzn-container-single.chzn-container-active.chzn-with-drop:hover {
+  transition: none;
+}
 /**
  * EGroupware: Stylite Pixelegg template
  *

preferences/inc/class.preferences_hooks.inc.php

@@ -255,14 +255,16 @@ class preferences_hooks
 				'default'=> $lang,
 			),
 			'country' => array(
-				'type'   => 'select',
+				'type'   => 'select-country',
 				'label'  => 'Country',
 				'name'   => 'country',
-				'values' => Api\Country::countries(),
 				'help'   => 'In which country are you. This is used to set certain defaults for you.',
 				'xmlrpc' => True,
 				'admin'  => False,
 				'default'=> strtoupper($country),
+				'attributes' => array (
+					'tags' => true
+				)
 			),
 			'tz' => array(
 				'type'   => 'select',

preferences/templates/default/app.css

@@ -79,4 +79,6 @@ tr.prefRow:hover .prefHelp {
 
 .prefValueColumn select.prefValue {
 	white-space: pre-line;
-}
+}
+
+#preferences_settings_country_chzn {width:49% !important;}

preferences/templates/pixelegg/app.css

@@ -100,6 +100,9 @@ textarea.prefValue {
 .prefValueColumn select.prefValue {
   white-space: pre-line;
 }
+#preferences_settings_country_chzn {
+  width: 49% !important;
+}
 /* #############################################################################
 // iframe
 // Rahmen + padding**/