Author: nathangray
New Revision: 55258
URL: http://svn.stylite.de/viewvc/egroupware?rev=55258&view=rev
Log:
Add “toggle” as an option for taglist multiple attribute
Added:
trunk/pixelegg/images/minus.svg
Modified:
trunk/etemplate/js/et2_widget_taglist.js
trunk/etemplate/templates/default/etemplate2.css
trunk/phpgwapi/js/jquery/magicsuggest/magicsuggest.js
trunk/pixelegg/css/mobile.css
trunk/pixelegg/css/pixelegg.css
trunk/pixelegg/less/etemplate2.less
trunk/pixelegg/mobile/fw_mobile.css
— trunk/etemplate/js/et2_widget_taglist.js (original)
+++ trunk/etemplate/js/et2_widget_taglist.js Fri Mar 4 16:36:05 2016
@@ -98,7 +98,11 @@
“description”: “The maximum number of items the user can select if multiple selection is allowed.”
},
// Selectbox attributes that are not applicable
-
"multiple": {
-
type: 'any', // boolean or 'toggle'
-
default: true,
-
description: "True, false or 'toggle'"
-
},
"rows": { ignore: true},
"tags": { ignore: true},
useCommaKey: {
@@ -122,6 +126,13 @@
// jQuery wrapped DOM node
this.div = jQuery("
").addClass(‘et2_taglist’);
-
this.multiple_toggle = jQuery("<div></div>")
-
.addClass('toggle')
-
.on('click', jQuery.proxy(function() {
-
this._set_multiple(!this._multiple);
-
},this))
-
.appendTo(this.div);
-
// magicSuggest object
this.taglist = null;
@@ -152,6 +163,11 @@
this.egw().debug(‘warn’, 'Invalid autocomplete_params: '+_attrs.autocomplete_params );
}
}
+
-
if(_attrs.multiple !== 'toggle')
-
{
-
_attrs.multiple = et2_evalBool(_attrs.multiple);
-
}
},
doLoadingFinished: function() {
@@ -167,7 +183,7 @@
}
// MagicSuggest would replaces our div, so add a wrapper instead
@@ -179,7 +195,7 @@
displayField: “label”,
invalidCls: ‘invalid ui-state-error’,
placeholder: this.options.empty_label,
-
hideTrigger: this.options.multiple === true ? true : false,
noSuggestionText: this.egw().lang("No suggestions"),
required: this.options.required,
allowFreeEntries: this.options.allowFreeEntries,
@@ -189,7 +205,7 @@
editable: !(this.options.disabled || this.options.readonly),
selectionRenderer: jQuery.proxy(this.options.tagRenderer || this.selectionRenderer,this),
renderer: jQuery.proxy(this.options.listRenderer || this.selectionRenderer,this),
-
maxSelection: this.options.multiple ? this.options.maxSelection : 1,
maxSelectionRenderer: jQuery.proxy(function(v) { this.egw().lang('You can not choose more then %1 item(s)!', v); }, this),
width: this.options.width, // propagate width
highlight: false, // otherwise renderer have to return strings
@@ -208,6 +224,8 @@
this.taglist.addToSelection(this.options.value,true);
}
@@ -419,6 +437,34 @@
},
/**
-
- Set whether the widget accepts only 1 value, many, or allows the user
-
- to toggle between the two.
-
-
-
@param {boolean|string} multiple true, false, or ‘toggle’
- */
- set_multiple: function set_multiple(multiple) {
-
if(multiple != this.options.multiple)
-
{
-
this.options.multiple = multiple;
-
if(this.taglist !== null)
-
{
-
this._set_multiple(multiple);
-
}
-
}
- },
-
- _set_multiple: function(multiple) {
-
this._multiple = multiple === true ? true : false;
-
this.div.toggleClass('et2_taglist_single', !this._multiple);
-
this.div.toggleClass('et2_taglist_toggle', this.options.multiple === 'toggle');
-
this.taglist.setMaxSelection(this._multiple ? this.options.maxSelection : 1);
-
if(!this._multiple && this.taglist.getValue().length > 1)
-
{
-
this.set_value(this.taglist.getValue()[0]);
-
}
- },
-
- /**
- Set value(s) of taglist, add them automatic to select-options, if allowFreeEntries
-
-
@param value (array of) ids
@@ -513,10 +559,11 @@
‘default’: ‘accounts’,
type: ‘string’,
description: ‘Limit type of accounts. One of {accounts,groups,both,owngroups}.’
-
minChars: 2,
-
toggleOnClick: true
},
init:function ()
— trunk/etemplate/templates/default/etemplate2.css (original)
+++ trunk/etemplate/templates/default/etemplate2.css Fri Mar 4 16:36:05 2016
@@ -905,6 +905,9 @@
content: “\2212”;
}
+/**
-
-
/
.et2_taglist_ro ul {
margin: 0px;
padding: 0px;
@@ -921,6 +924,54 @@
.et2_taglist > div {
min-height: 2em;
}
+/ Toggle single / multiple */
+.et2_taglist_toggle {
- white-space: nowrap;
+}
+.et2_taglist_toggle > div.ms-ctn {
- display: inline-block;
- width: calc(100% - 40px);
- padding-right: 2px
+}
+.et2_taglist_toggle.et2_taglist_single > div.ms-ctn {
- padding-right: 7px
+}
+.et2_taglist_toggle > div:last-child {
- margin-left: -1px;
- float: right;
-
- width: 23px;
- height: 23px;
- position: relative;
-
- border: 1px solid #BBB;
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url("…/…/…/phpgwapi/templates/default/images/foldertree_nolines_minus.gif");
+}
+.et2_taglist_toggle.et2_taglist_single > div:last-child {
- background-image: url("…/…/…/phpgwapi/templates/default/images/foldertree_nolines_plus.gif");
+}
+.et2_taglist_toggle:not(.et2_taglist_single) .ms-trigger {
- display: none;
+}
+/* Single select */
+.et2_taglist_single .ms-ctn {
- padding: 0px 7px;
+}
+.et2_taglist_single div.ms-ctn .ms-sel-item + input {
- display: none;
+}
+.et2_taglist_single .ms-ctn .ms-trigger .ms-trigger-ico {
- margin-top: 9px;
+}
+div .et2_taglist_single div.ms-sel-ctn div.ms-sel-item {
- border: none;
- background: inherit;
- width: calc(100% - 43px);
- margin-bottom: 0px;
- padding-bottom: 6px;
+}
/* Taglist category /
.et2_taglist_category span[class=“cat_”] {
@@ -928,6 +979,10 @@
width: 6px;
margin: -3px -6px;
float: left;
+}
+.et2_taglist_category.et2_taglist_single span[class*=“cat_”] {
- height: 2em;
- margin-bottom: -6px
}
.et2_taglist_category .ms-res-item > span {
margin-left: 3px;
— trunk/phpgwapi/js/jquery/magicsuggest/magicsuggest.js (original)
+++ trunk/phpgwapi/js/jquery/magicsuggest/magicsuggest.js Fri Mar 4 16:36:05 2016
@@ -568,6 +568,15 @@
self._processSuggestions();
};
-
/**
-
* Set the maximum allowed selections
-
* @param {integer} name
-
*/
-
this.setMaxSelection = function(max)
-
{
-
cfg.maxSelection = max;
-
};
-
/**
* Sets the name for the input field so it can be fetched in the form
* @param name
— trunk/pixelegg/css/mobile.css (original)
+++ trunk/pixelegg/css/mobile.css Fri Mar 4 16:36:05 2016
@@ -996,6 +996,14 @@
/**
- .et2_taglist_toggle > div:last-child {
- background-image: url("…/images/minus.svg");
- background-size: 50%;
- }
- .et2_taglist_toggle.et2_taglist_single > div:last-child {
- background-image: url("…/images/plus.svg");
- background-size: 50%;
- }
/**
— trunk/pixelegg/css/pixelegg.css (original)
+++ trunk/pixelegg/css/pixelegg.css Fri Mar 4 16:36:05 2016
@@ -985,6 +985,14 @@
/**
- .et2_taglist_toggle > div:last-child {
- background-image: url("…/images/minus.svg");
- background-size: 50%;
- }
- .et2_taglist_toggle.et2_taglist_single > div:last-child {
- background-image: url("…/images/plus.svg");
- background-size: 50%;
- }
/**
— trunk/pixelegg/images/minus.svg (added)
+++ trunk/pixelegg/images/minus.svg Fri Mar 4 16:36:05 2016
@@ -1,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+
+<?xml-stylesheet type="text/css" href="../less/svg.css" ?><svg
- xmlns:dc=“http://purl.org/dc/elements/1.1/”
- xmlns:cc=“http://creativecommons.org/ns#”
- xmlns:rdf=“http://www.w3.org/1999/02/22-rdf-syntax-ns#”
- xmlns:svg=“http://www.w3.org/2000/svg”
- xmlns=“http://www.w3.org/2000/svg”
- xmlns:sodipodi=“http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd”
- xmlns:inkscape=“http://www.inkscape.org/namespaces/inkscape”
- version=“1.1”
- id=“pixelegg_plus”
- x=“0px”
- y=“0px”
- width=“32px”
- height=“32px”
- viewBox=“0 0 32 32”
- enable-background=“new 0 0 32 32”
- xml:space=“preserve”
- inkscape:version=“0.48.4 r9939”
- sodipodi:docname=“plus.svg”><metadata
-
id="metadata13"><rdf:RDF><cc:Work
-
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
-
id="defs11" /><sodipodi:namedview
-
pagecolor="#ffffff"
-
bordercolor="#666666"
-
borderopacity="1"
-
objecttolerance="10"
-
gridtolerance="10"
-
guidetolerance="10"
-
inkscape:pageopacity="0"
-
inkscape:pageshadow="2"
-
inkscape:window-width="1920"
-
inkscape:window-height="1056"
-
id="namedview9"
-
showgrid="false"
-
inkscape:zoom="26.763184"
-
inkscape:cx="16"
-
inkscape:cy="16"
-
inkscape:window-x="0"
-
inkscape:window-y="85"
-
inkscape:window-maximized="1"
-
inkscape:current-layer="g5" /><g
-
id="g3"><g
-
id="g5"><path
-
stroke-miterlimit="10"
-
d="m 31.31,19.861 -11.351,0 c -15.1202596,0 7.513399,0 -7.562,0 l -11.345,0 0,-7.562 c 0,0 7.5633333,0 11.345,0 2.520667,0 5.041333,0 7.562,0 3.783667,0 11.351,0 11.351,0 z"
-
id="path7"
-
inkscape:connector-curvature="0"
-
style="fill:#696969;stroke:#e6e6e6;stroke-miterlimit:10"
-
sodipodi:nodetypes="cssccaacc" /></g></g></svg>
— trunk/pixelegg/less/etemplate2.less (original)
+++ trunk/pixelegg/less/etemplate2.less Fri Mar 4 16:36:05 2016
@@ -924,7 +924,14 @@
/**
+.et2_taglist_toggle > div:last-child {
- background-image: url("…/images/minus.svg");
- background-size: 50%;
+}
+.et2_taglist_toggle.et2_taglist_single > div:last-child {
- background-image: url("…/images/plus.svg");
- background-size: 50%;
+}
/**
— trunk/pixelegg/mobile/fw_mobile.css (original)
+++ trunk/pixelegg/mobile/fw_mobile.css Fri Mar 4 16:36:05 2016
@@ -1007,6 +1007,14 @@
/**
- .et2_taglist_toggle > div:last-child {
- background-image: url("…/images/minus.svg");
- background-size: 50%;
- }
- .et2_taglist_toggle.et2_taglist_single > div:last-child {
- background-image: url("…/images/plus.svg");
- background-size: 50%;
- }
/**
Site24x7 APM Insight: Get Deep Visibility into Application Performance
APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month
Monitor end-to-end web transactions and take corrective actions now
Troubleshoot faster and improve end-user experience. Signup Now!
http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140
eGroupWare-cvs mailing list
eGroupWare-cvs@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-cvs