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

@@ -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;
 }

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');