mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-01-27 00:09:13 +01:00
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
This commit is contained in:
Hadi Nategh
parent
1eb64136ce
commit
6e94639b0a
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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) {
|
||||
|
||||
1065
api/templates/default/css/flags.css
Normal file
1065
api/templates/default/css/flags.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
|
||||
BIN
api/templates/default/images/flags.png
Normal file
BIN
api/templates/default/images/flags.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@ -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
|
||||
*
|
||||
|
||||
@ -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
|
||||
*
|
||||
|
||||
@ -26,17 +26,14 @@
|
||||
//width: auto !important;
|
||||
|
||||
}
|
||||
.chzn-container .chzn-drop {
|
||||
width: auto;
|
||||
|
||||
}
|
||||
.chzn-container .chzn-drop {}
|
||||
.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 .chzn-single {}
|
||||
.chzn-container {width: 100% !important;}
|
||||
.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 {}
|
||||
|
||||
@ -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
|
||||
*
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -79,4 +79,6 @@ tr.prefRow:hover .prefHelp {
|
||||
|
||||
.prefValueColumn select.prefValue {
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
#preferences_settings_country_chzn {width:49% !important;}
|
||||
@ -100,6 +100,9 @@ textarea.prefValue {
|
||||
.prefValueColumn select.prefValue {
|
||||
white-space: pre-line;
|
||||
}
|
||||
#preferences_settings_country_chzn {
|
||||
width: 49% !important;
|
||||
}
|
||||
/* #############################################################################
|
||||
// iframe
|
||||
// Rahmen + padding**/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user