Detail view UI: Support for text action buttons

bfederle · bfederle · commit 2a971d7c1bf5 · 2012-07-12T15:29:15.000-07:00
Currently, only icons are rendered on detail 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: {
    ...
  }
}
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
@@ -1671,6 +1671,35 @@ div.detail-group.actions td {
   height: 26px;
 }
 
+.detail-group table td.detail-actions .action.text {
+  padding: 4px 6px 4px 7px;
+  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;
+}
+
+.detail-group table td.detail-actions .action.text .label {
+  font-size: 12px;
+  /*+placement:shift -1px 8px;*/
+  position: relative;
+  left: -1px;
+  top: 8px;
+}
+
+.detail-group table td.detail-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;
+}
+
 .detail-group table td.detail-actions div.buttons {
   /*+placement:shift 6px 0px;*/
   position: relative;
diff --git a/ui/scripts/ui/widgets/detailView.js b/ui/scripts/ui/widgets/detailView.js
@@ -641,6 +641,14 @@
               )
               .appendTo($action);
 
+        if (value.textLabel) {
+          $action
+            .addClass('text')
+            .prepend(
+              $('<span>').addClass('label').html(_l(value.textLabel))
+            );
+        }
+
         return true;
       });
 
@@ -1091,8 +1099,8 @@
     }
 
     // Detail action
-    if ($target.closest('div.detail-view [detail-action]').size()) {
-      var $action = $target.closest('div.detail-view [detail-action]');
+    if ($target.closest('div.detail-view [detail-action], div.detail-view .action.text').size()) {
+      var $action = $target.closest('.action').find('[detail-action]');
       var actionName = $action.attr('detail-action');
       var actionCallback = $action.data('detail-view-action-callback');
       var detailViewArgs = $action.closest('div.detail-view').data('view-args');
