extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-21 10:27:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Better handling for taglist overflow - ellipsis, better hiding, better layout handling

Browse Source
This commit is contained in:
Nathan Gray 2016-03-09 00:42:33 +00:00
parent b9fc5e26df
commit 04e33f4d19
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
etemplate/js/et2_widget_taglist.js
View File

@ -526,7 +526,11 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
} }
if(_rows) if(_rows)
{ {
var max = (25 * _rows) + _rows; var border = this.taglist !== null ?
this.div.outerHeight(true) - this.taglist.container.innerHeight() :
0;
var max = (25 * _rows) + _rows + border;
css['max-height'] = max+'px'; css['max-height'] = max+'px';
if(this._multiple) if(this._multiple)
{ {
@ -729,6 +733,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
if(min_width === null) return; if(min_width === null) return;
min_width += (this.options.multiple === 'toggle' ? $j('.toggle',this.div).outerWidth() : 0); min_width += (this.options.multiple === 'toggle' ? $j('.toggle',this.div).outerWidth() : 0);
min_width += this.taglist.trigger ? this.taglist.trigger.outerWidth(true) : 0;
// Not enough for one // Not enough for one
if(min_width > this.div.width() || if(min_width > this.div.width() ||

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

@ -966,11 +966,15 @@ ul.et2_link_string {
line-height: 13px; line-height: 13px;
font-size: 11px; font-size: 11px;
cursor: default; cursor: default;
word-break: break-all; word-break: break-word;
white-space: normal;
max-width: calc(100% - 30px);
} }
.et2_taglist.ui-state-hover, .et2_taglist.ui-state-hover,
.et2_taglist.ui-state-active { .et2_taglist.ui-state-active {
font-weight: inherit; font-weight: inherit;
border: inherit;
background: inherit;
} }
.et2_taglist div.ms-ctn { .et2_taglist div.ms-ctn {
background-color: white; background-color: white;
@ -1005,13 +1009,15 @@ ul.et2_link_string {
} }
/* Toggle single / multiple */ /* Toggle single / multiple */
.et2_taglist_toggle { .et2_taglist_toggle {
white-space: nowrap;
} }
.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% - 40px);
padding-right: 2px padding-right: 2px
} }
.et2_taglist_toggle:not(.et2_taglist_single) .ms-ctn {
/* height: 100%;*/
}
.et2_taglist_toggle.et2_taglist_single > div.ms-ctn { .et2_taglist_toggle.et2_taglist_single > div.ms-ctn {
padding-right: 7px padding-right: 7px
} }
@ -1048,12 +1054,30 @@ ul.et2_link_string {
div .et2_taglist_single div.ms-sel-ctn div.ms-sel-item { div .et2_taglist_single div.ms-sel-ctn div.ms-sel-item {
border: none; border: none;
background: inherit; background: inherit;
width: calc(100% - 43px);
margin-bottom: 0px; margin-bottom: 0px;
padding-bottom: 6px; padding-bottom: 6px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
div .et2_taglist_single:not(.et2_taglist_small) div.ms-sel-ctn div.ms-sel-item {
width: calc(100% - 43px);
}
.et2_taglist_single div.ms-sel-item > span:first-child {
max-width: 100%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.et2_taglist_toggle.et2_taglist_small.et2_taglist_single::before {
display: none;
}
.et2_taglist_single div.ms-sel-ctn .ms-close-btn {
position: relative;
top: 0px;
right: 5px;
float: none;
display: inline-block;
}
/* Taglist that is limited in size - does not grow */ /* Taglist that is limited in size - does not grow */
.et2_taglist.et2_taglist_small .ms-ctn, .et2_taglist.et2_taglist_small .ms-ctn,
@ -1081,18 +1105,20 @@ div .et2_taglist_single 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%);
} }
div .et2_taglist_small.et2_taglist_single div.ms-sel-ctn div.ms-sel-item {
max-width: calc(100% - 43px);
}
.et2_taglist_toggle.et2_taglist_small::before { .et2_taglist_toggle.et2_taglist_small::before {
right: 25px; 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 {
position: absolute;
max-height: none; max-height: none;
max-width: 25em; max-width: 25em;
min-width: 15em; min-width: 15em;
background: white; background: white;
z-index: 5; z-index: 5;
margin-top: -14px; margin-top: 0px;
transition-duration: 0s; transition-duration: 0s;
font-weight: normal; font-weight: normal;
overflow: visible; overflow: visible;
@ -1105,9 +1131,6 @@ div .et2_taglist_single div.ms-sel-ctn div.ms-sel-item {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.et2_taglist_toggle.et2_taglist_small.et2_taglist_single::before {
right: 51px;
}
/* Taglist category */ /* Taglist category */
.et2_taglist_category span[class*="cat_"] { .et2_taglist_category span[class*="cat_"] {