From 35d93a66ad368abf2744e70950f1806e995eaa3c Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Thu, 12 Jul 2012 13:43:54 -0700
Subject: [PATCH] List view UI: Support for text action buttons

Currently, only icons are rendered on list view actions. This change
adds support for showing a text label next to specified actions, which
has a button appearance. This is to allow certain actions to be more
visible, in the case where an icon isn't clear enough.

To make an action have a text label, add a 'textLabel' attribute to
the action properties:

editVpc: {
  label: 'Edit VPC',

  // textLabel property
  textLabel: 'label.configure',

  action: {
   ...
  }
}
---
 ui/css/cloudstack3.css            | 28 ++++++++++++++++++++++++++++
 ui/scripts/ui/widgets/listView.js | 10 +++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 73b11a69136..7b0016fc62d 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -2817,6 +2817,34 @@ table tr.even td.actions .action.disabled .icon {
   background-color: #DFE1E3;
 }
 
+table tr td.actions .action.text {
+  cursor: pointer;
+  display: inline-block;
+  border: 1px solid #C2C2C2;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  background: url(../images/bg-gradients.png) repeat-x 0px -83px;
+}
+
+table tr td.actions .action.text:hover {
+  /*+box-shadow:inset 0px 1px 3px #171717;*/
+  -moz-box-shadow: inset 0px 1px 3px #171717;
+  -webkit-box-shadow: inset 0px 1px 3px #171717;
+  -o-box-shadow: inset 0px 1px 3px #171717;
+  box-shadow: inset 0px 1px 3px #171717;
+}
+
+table tr td.actions .action.text .label {
+  padding: 4px 0 0 4px;
+}
+
+table tr td.actions .action.text .icon {
+  padding-bottom: 4px;
+}
+
 table tr.selected td.actions .action.disabled .icon {
   background-color: #CBDDF3;
 }
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index a1eac64d214..87c3e421424 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -685,13 +685,21 @@
       var $action = $('<div></div>')
             .addClass('action')
             .addClass(actionName)
-            .append($('<span>').addClass('icon'))
+            .append($('<span>').addClass('icon').html('&nbsp;'))
             .attr({
               alt: _l(action.label),
               title: _l(action.label)
             })
             .data('list-view-action-id', actionName);
 
+      if (action.textLabel) {
+        $action
+          .addClass('text')
+          .prepend(
+            $('<span>').addClass('label').html(_l(action.textLabel))
+          );
+      }
+
       // Disabled appearance/behavior for filtered actions
       if (allowedActions && $.inArray(actionName, allowedActions) == -1) {
         $action.addClass('disabled');