etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CLOUDSTACK-5532: Tag UI: Truncate long tag key/value

This commit is contained in:
Brian Federle 2013-12-17 11:14:36 -08:00
parent fa2f18d2a2
commit 7e4407d3dd
2 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/css/cloudstack3.css
View File

@ -10296,6 +10296,11 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
color: #000000;
}
.tagger ul li span.label span.value {
max-width: 100px;
overflow: hidden;
}
.tagger ul li span.label {
font-size: 10px;
position: relative;
@ -10307,11 +10312,35 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
left: 6px;
}
.tagger ul li span.label > span {
float: left;
display: block;
margin-top: 2px;
}
.tagger ul li span.label > span.key {
font-weight: bold;
max-width: 134px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 15px;
margin-right: 5px;
}
.tagger ul li span.label > span.value {
max-width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 6px;
}
.tagger ul li span.remove {
width: 15px !important;
overflow: hidden !important;
height: 11px !important;
background: #DFDFDF url(../images/sprites.png) no-repeat -596px -1183px;
background: #DFDFDF;
display: block;
top: 0px !important;
left: -3px !important;

6
ui/scripts/ui/widgets/tagger.js
View File

@ -95,9 +95,13 @@
},
tagItem: function(title, onRemove, data) {
var $li = $('<li>');
var $label = $('<span>').addClass('label').html(_s(title));
var $label = $('<span>').addClass('label');
var $remove = $('<span>').addClass('remove').html('X');
var $key = $('<span>').addClass('key').html(_s(data.key));
var $value = $('<span>').addClass('value').html(_s(data.value));
$label.append($key, '<span>=</span>', $value);
$label.attr('title', title);
$remove.click(function() {
if (onRemove) onRemove($li, data);
});