From dfdb8a967e65ec45ae6a1491ee332ca870183834 Mon Sep 17 00:00:00 2001
From: Brian Federle <bfederle@gmail.com>
Date: Tue, 4 Jun 2013 16:06:27 -0700
Subject: [PATCH] CLOUDSTACK-1742: Better text labels for secondary IP UI

---
 .../classes/resources/messages.properties     |  2 +
 ui/css/cloudstack3.css                        | 37 +++++++++++++++++--
 ui/dictionary.jsp                             |  2 +
 ui/scripts/instances.js                       |  1 +
 ui/scripts/network.js                         |  6 +--
 ui/scripts/ui/widgets/detailView.js           |  7 +++-
 6 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/client/WEB-INF/classes/resources/messages.properties b/client/WEB-INF/classes/resources/messages.properties
index 0de4cfff7d0..2b173596b73 100644
--- a/client/WEB-INF/classes/resources/messages.properties
+++ b/client/WEB-INF/classes/resources/messages.properties
@@ -14,6 +14,7 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
+label.view.secondary.ips=View secondary IPs
 message.acquire.ip.nic=Please confirm that you would like to acquire a new secondary IP for this NIC.<br/>NOTE: You need to manually configure the newly-acquired secondary IP inside the virtual machine.
 message.select.affinity.groups=Please select any affinity groups you want this VM to belong to:
 message.no.affinity.groups=You do not have any affinity groups. Please continue to the next step.
@@ -54,6 +55,7 @@ label.account.specific=Account-Specific
 label.account=Account
 label.accounts=Accounts
 label.acquire.new.ip=Acquire New IP
+label.acquire.new.secondary.ip=Acquire new secondary IP
 label.action.attach.disk.processing=Attaching Disk....
 label.action.attach.disk=Attach Disk
 label.action.attach.iso.processing=Attaching ISO....
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index c2d0526910c..a86b2a25ca5 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -1762,22 +1762,51 @@ div.list-view td.state.off span {
 .detail-group .main-groups table td.value .view-all {
   cursor: pointer;
   /*[empty]height:;*/
-  border-left: 1px solid #9FA2A5;
   /*+border-radius:4px 0 0 4px;*/
   -moz-border-radius: 4px 0 0 4px;
   -webkit-border-radius: 4px 0 0 4px;
   -khtml-border-radius: 4px 0 0 4px;
   border-radius: 4px 0 0 4px;
-  background: url(../images/sprites.png) no-repeat 100% -398px;
   float: right;
-  margin: 1px 0 0;
-  padding: 8px 33px 6px 15px;
+  margin: 7px 0 0;
+  padding: 0px;
+}
+
+.detail-group .main-groups table td.value .view-all span {
+  display: block;
+  float: left;
+  padding: 5px 2px 8px 4px;
+  background: url(../images/gradients.png) repeat-x 0px -529px;
+  border-left: 1px solid #9FA2A6;
+  /*+border-radius:4px 0 0 4px;*/
+  -moz-border-radius: 4px 0 0 4px;
+  -webkit-border-radius: 4px 0 0 4px;
+  -khtml-border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px;
+  margin-top: -5px;
+}
+
+.detail-group .main-groups table td.value .view-all .end {
+  background: url(../images/sprites.png) no-repeat 100% -397px;
+  float: right;
+  width: 22px;
+  height: 25px;
+  padding: 0px;
+  margin: -6px 0px 0px;
 }
 
 .detail-group .main-groups table td.value .view-all:hover {
   background-position: 100% -431px;
 }
 
+.detail-group .main-groups table td.value .view-all:hover span {
+  background-position: 0px -566px;
+}
+
+.detail-group .main-groups table td.value .view-all:hover div.end {
+  background-position: -618px -430px;
+}
+
 .detail-view .detail-group .button.add {
   clear: both;
   margin: 0px 21px 13px 0 !important;
diff --git a/ui/dictionary.jsp b/ui/dictionary.jsp
index e1f9a30d5d4..a5f0662e0bf 100644
--- a/ui/dictionary.jsp
+++ b/ui/dictionary.jsp
@@ -25,6 +25,8 @@ under the License.
 <% long now = System.currentTimeMillis(); %>
 <script language="javascript">
 dictionary = {
+'label.acquire.new.secondary.ip': '<fmt:message key="label.acquire.new.secondary.ip" />',
+'label.view.secondary.ips': '<fmt:message key="label.view.secondary.ips" />',
 'message.acquire.ip.nic': '<fmt:message key="message.acquire.ip.nic" />',
 'message.select.affinity.groups': '<fmt:message key="message.select.affinity.groups" />',
 'message.no.affinity.groups': '<fmt:message key="message.no.affinity.groups" />',
diff --git a/ui/scripts/instances.js b/ui/scripts/instances.js
index 29e4ac3e29d..71498156730 100644
--- a/ui/scripts/instances.js
+++ b/ui/scripts/instances.js
@@ -1576,6 +1576,7 @@
             viewAll: {
               path: 'network.secondaryNicIps',
               attachTo: 'ipaddress',
+              label: 'label.view.secondary.ips',
               title: function(args) {
                 var title = _l('label.menu.ipaddresses') + ' - ' + args.context.nics[0].name;
                 
diff --git a/ui/scripts/network.js b/ui/scripts/network.js
index 6ab15c320ad..050b75c49ff 100755
--- a/ui/scripts/network.js
+++ b/ui/scripts/network.js
@@ -1547,10 +1547,10 @@
           },
           actions: {
             add: {
-              label: 'label.acquire.new.ip',
+              label: 'label.acquire.new.secondary.ip',
               addRow: 'true',
               createForm: {
-                title: 'label.acquire.new.ip',
+                title: 'label.acquire.new.secondary.ip',
                 desc: 'message.acquire.ip.nic',
                 fields: {
                   ipaddr: { label: 'label.ip.address' }
@@ -1558,7 +1558,7 @@
               },
               messages: {
                 notification: function(args) {
-                  return 'label.acquire.new.ip';
+                  return 'label.acquire.new.secondary.ip';
                 }
               },
               action: function(args) {
diff --git a/ui/scripts/ui/widgets/detailView.js b/ui/scripts/ui/widgets/detailView.js
index 11e82b35f1c..ab1fe9bb20a 100644
--- a/ui/scripts/ui/widgets/detailView.js
+++ b/ui/scripts/ui/widgets/detailView.js
@@ -1096,7 +1096,12 @@
                   .filter('.' + tabData.viewAll.attachTo).find('td.value')
                   .append(
                     $('<div>').addClass('view-all').append(
-                      $('<span>').html(_l('label.view.all'))
+                      $('<span>').html(
+                        tabData.viewAll.label ?
+                          _l(tabData.viewAll.label) :
+                          _l('label.view.all')
+                      ),
+                      $('<div>').addClass('end')
                     ).click(function() {
                       viewAll(
                         tabData.viewAll.path,