holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change taglist toggle to tri-state where toggle button replaces dropdown trigger, instead of having a separate button

Browse Source
This commit is contained in:
Nathan Gray 2016-03-09 16:20:53 +00:00
parent 65a81bbaaa
commit d1b0c25ae4
6 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
etemplate/js/et2_widget_taglist.js
View File

@ -196,7 +196,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
} }
// MagicSuggest would replaces our div, so add a wrapper instead // MagicSuggest would replaces our div, so add a wrapper instead
this.taglist = $j('<div/>').prependTo(this.div); this.taglist = $j('<div/>').appendTo(this.div);
this.taglist_options = jQuery.extend( { this.taglist_options = jQuery.extend( {
// magisuggest can NOT work setting an empty autocomplete url, it will then call page url! // magisuggest can NOT work setting an empty autocomplete url, it will then call page url!
@ -280,6 +280,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
// Position absolute to break out of containers // Position absolute to break out of containers
.on('expand', jQuery.proxy(function(c) { .on('expand', jQuery.proxy(function(c) {
var taglist = this.taglist; var taglist = this.taglist;
this.div.addClass('expanded');
var background = this.taglist.combobox.css('background'); var background = this.taglist.combobox.css('background');
var wrapper = jQuery(document.createElement('div')) var wrapper = jQuery(document.createElement('div'))
// Keep any additional classes // Keep any additional classes
@ -313,6 +314,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
); );
this.$taglist.one('collapse', function() { this.$taglist.one('collapse', function() {
wrapper.remove(); wrapper.remove();
widget.div.removeClass('expanded');
}) })
},this)); },this));
@ -512,6 +514,12 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
disabled ? this.taglist.disable() : this.taglist.enable(); disabled ? this.taglist.disable() : this.taglist.enable();
}, },
set_width: function(_width)
{
this.div.width(_width);
this.options.width = _width;
},
/** /**
* Normally the widget will display 1 row (multiple off) or expand as needed * Normally the widget will display 1 row (multiple off) or expand as needed
* based on selected entries. Setting row will limit the max height. * based on selected entries. Setting row will limit the max height.
@ -706,6 +714,9 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
if(this.taglist == null) return; if(this.taglist == null) return;
// Switch to multiple if allowed and more than 1 value
this._set_multiple(this.options.multiple ? values.length > 1 : false);
this.taglist.setSelection(values); this.taglist.setSelection(values);
}, },

33
etemplate/templates/default/etemplate2.css
View File

@ -1004,7 +1004,7 @@ ul.et2_link_string {
font-weight: bold; font-weight: bold;
} }
/* min-height to fix calculations done while hidden */ /* min-height to fix calculations done while hidden */
.et2_taglist, .et2_taglist > div:first-child { .et2_taglist, .et2_taglist > div.ms-ctn {
min-height: 23px; min-height: 23px;
} }
/* Toggle single / multiple */ /* Toggle single / multiple */
@ -1012,8 +1012,12 @@ ul.et2_link_string {
} }
.et2_taglist_toggle > div.ms-ctn { .et2_taglist_toggle > div.ms-ctn {
display: inline-block; display: inline-block;
width: calc(100% - 40px); width: calc(100% - 16px);
padding-right: 2px padding-right: 2px;
}
.et2_taglist_toggle.ui-state-hover,
.et2_taglist_toggle.ui-state-active {
z-index: 1;
} }
.et2_taglist_toggle:not(.et2_taglist_single) .ms-ctn { .et2_taglist_toggle:not(.et2_taglist_single) .ms-ctn {
/* height: 100%;*/ /* height: 100%;*/
@ -1025,17 +1029,25 @@ ul.et2_link_string {
margin-left: -1px; margin-left: -1px;
float: right; float: right;
width: 23px; width: 25px;
height: 23px; height: 23px;
position: relative; position: relative;
z-index: 5;
border: 1px solid #BBB; border: 1px solid #BBB;
background-color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-image: url("../../../phpgwapi/templates/default/images/foldertree_nolines_minus.gif"); background-image: url("../../../phpgwapi/templates/default/images/foldertree_nolines_minus.gif");
} }
.et2_taglist_toggle.et2_taglist_single > div.toggle {
.et2_taglist_toggle.et2_taglist_single:not(.expanded) > div.toggle {
display: none;
}
.et2_taglist_toggle.et2_taglist_single.expanded > div.toggle {
background-image: url("../../../phpgwapi/templates/default/images/foldertree_nolines_plus.gif"); background-image: url("../../../phpgwapi/templates/default/images/foldertree_nolines_plus.gif");
display: block;
} }
.et2_taglist_toggle:not(.et2_taglist_single) .ms-trigger { .et2_taglist_toggle:not(.et2_taglist_single) .ms-trigger {
display: none; display: none;
@ -1064,6 +1076,7 @@ div .et2_taglist_single:not(.et2_taglist_small) div.ms-sel-ctn div.ms-sel-item {
} }
.et2_taglist_single div.ms-sel-item > span:first-child { .et2_taglist_single div.ms-sel-item > span:first-child {
max-width: 100%; max-width: 100%;
width: 100%;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -1074,7 +1087,7 @@ div .et2_taglist_single:not(.et2_taglist_small) div.ms-sel-ctn div.ms-sel-item {
.et2_taglist_single div.ms-sel-ctn .ms-close-btn { .et2_taglist_single div.ms-sel-ctn .ms-close-btn {
position: relative; position: relative;
top: 0px; top: 0px;
right: 5px; right: 10px;
float: none; float: none;
display: inline-block; display: inline-block;
} }
@ -1093,7 +1106,7 @@ div .et2_taglist_single:not(.et2_taglist_small) div.ms-sel-ctn div.ms-sel-item {
content: attr(data-content) ''; content: attr(data-content) '';
text-align: right; text-align: right;
position: absolute; position: absolute;
z-index: 1; z-index: 10;
top: 1px; top: 1px;
bottom: 0px; bottom: 0px;
right: 0; right: 0;
@ -1105,16 +1118,18 @@ div .et2_taglist_single:not(.et2_taglist_small) div.ms-sel-ctn div.ms-sel-item {
min-width: 25%; min-width: 25%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 25%); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 25%);
} }
.et2_taglist_small:not(.et2_taglist_single) {
border-bottom: 1px solid silver;
}
div .et2_taglist_small.et2_taglist_single div.ms-sel-ctn div.ms-sel-item { div .et2_taglist_small.et2_taglist_single div.ms-sel-ctn div.ms-sel-item {
max-width: calc(100% - 43px); max-width: calc(100% - 43px);
width: 100%;
} }
.et2_taglist_toggle.et2_taglist_small::before { .et2_taglist_toggle.et2_taglist_small::before {
right: 25px;
} }
.et2_taglist_small.ui-state-hover, .et2_taglist_small.ui-state-hover,
.et2_taglist_small.ui-state-active { .et2_taglist_small.ui-state-active {
max-height: none; max-height: none;
max-width: 25em;
min-width: 15em; min-width: 15em;
background: white; background: white;
z-index: 5; z-index: 5;

2
pixelegg/css/mobile.css
View File

@ -1000,7 +1000,7 @@
background-image: url("../images/minus.svg"); background-image: url("../images/minus.svg");
background-size: 50%; background-size: 50%;
} }
.et2_taglist_toggle.et2_taglist_single > div.toggle { .et2_taglist_toggle.et2_taglist_single.expanded > div.toggle {
background-image: url("../images/plus.svg"); background-image: url("../images/plus.svg");
background-size: 50%; background-size: 50%;
} }

2
pixelegg/css/pixelegg.css
View File

@ -939,7 +939,7 @@
background-image: url("../images/minus.svg"); background-image: url("../images/minus.svg");
background-size: 50%; background-size: 50%;
} }
.et2_taglist_toggle.et2_taglist_single > div.toggle { .et2_taglist_toggle.et2_taglist_single.expanded > div.toggle {
background-image: url("../images/plus.svg"); background-image: url("../images/plus.svg");
background-size: 50%; background-size: 50%;
} }

2
pixelegg/less/etemplate2.less
View File

@ -910,7 +910,7 @@ textarea.description {
background-image: url("../images/minus.svg"); background-image: url("../images/minus.svg");
background-size: 50%; background-size: 50%;
} }
.et2_taglist_toggle.et2_taglist_single > div.toggle { .et2_taglist_toggle.et2_taglist_single.expanded > div.toggle {
background-image: url("../images/plus.svg"); background-image: url("../images/plus.svg");
background-size: 50%; background-size: 50%;
} }

2
pixelegg/mobile/fw_mobile.css
View File

@ -1011,7 +1011,7 @@
background-image: url("../images/minus.svg"); background-image: url("../images/minus.svg");
background-size: 50%; background-size: 50%;
} }
.et2_taglist_toggle.et2_taglist_single > div.toggle { .et2_taglist_toggle.et2_taglist_single.expanded > div.toggle {
background-image: url("../images/plus.svg"); background-image: url("../images/plus.svg");
background-size: 50%; background-size: 50%;
} }