From 7e4407d3dddc1117a1dc150761883e04f044494b Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Tue, 17 Dec 2013 11:14:36 -0800
Subject: [PATCH] CLOUDSTACK-5532: Tag UI: Truncate long tag key/value

---
 ui/css/cloudstack3.css          | 31 ++++++++++++++++++++++++++++++-
 ui/scripts/ui/widgets/tagger.js |  6 +++++-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 4fb9098ac26..b1811f1ff18 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -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;
diff --git a/ui/scripts/ui/widgets/tagger.js b/ui/scripts/ui/widgets/tagger.js
index 4a02d8ba804..673bd43ce6a 100644
--- a/ui/scripts/ui/widgets/tagger.js
+++ b/ui/scripts/ui/widgets/tagger.js
@@ -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);
             });