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

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

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
this.taglist = $j('<div/>').prependTo(this.div);
this.taglist = $j('<div/>').appendTo(this.div);
this.taglist_options = jQuery.extend( {
// 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
.on('expand', jQuery.proxy(function(c) {
var taglist = this.taglist;
this.div.addClass('expanded');
var background = this.taglist.combobox.css('background');
var wrapper = jQuery(document.createElement('div'))
// 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() {
wrapper.remove();
widget.div.removeClass('expanded');
})
},this));
@ -512,6 +514,12 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
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
* 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;
// Switch to multiple if allowed and more than 1 value
this._set_multiple(this.options.multiple ? values.length > 1 : false);
this.taglist.setSelection(values);
},

View File

@ -1004,7 +1004,7 @@ ul.et2_link_string {
font-weight: bold;
}
/* 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;
}
/* Toggle single / multiple */
@ -1012,8 +1012,12 @@ ul.et2_link_string {
}
.et2_taglist_toggle > div.ms-ctn {
display: inline-block;
width: calc(100% - 40px);
padding-right: 2px
width: calc(100% - 16px);
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 {
/* height: 100%;*/
@ -1025,17 +1029,25 @@ ul.et2_link_string {
margin-left: -1px;
float: right;
width: 23px;
width: 25px;
height: 23px;
position: relative;
z-index: 5;
border: 1px solid #BBB;
background-color: white;
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.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");
display: block;
}
.et2_taglist_toggle:not(.et2_taglist_single) .ms-trigger {
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 {
max-width: 100%;
width: 100%;
display: inline-block;
overflow: hidden;
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 {
position: relative;
top: 0px;
right: 5px;
right: 10px;
float: none;
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) '';
text-align: right;
position: absolute;
z-index: 1;
z-index: 10;
top: 1px;
bottom: 0px;
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%;
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 {
max-width: calc(100% - 43px);
width: 100%;
}
.et2_taglist_toggle.et2_taglist_small::before {
right: 25px;
}
.et2_taglist_small.ui-state-hover,
.et2_taglist_small.ui-state-active {
max-height: none;
max-width: 25em;
min-width: 15em;
background: white;
z-index: 5;

View File

@ -1000,7 +1000,7 @@
background-image: url("../images/minus.svg");
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-size: 50%;
}

View File

@ -939,7 +939,7 @@
background-image: url("../images/minus.svg");
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-size: 50%;
}

View File

@ -910,7 +910,7 @@ textarea.description {
background-image: url("../images/minus.svg");
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-size: 50%;
}

View File

@ -1011,7 +1011,7 @@
background-image: url("../images/minus.svg");
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-size: 50%;
}