Detail view UI: Support for text action buttons
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: {
...
}
}
Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo
Commit:
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/2a971d7c
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/2a971d7c
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/2a971d7c
Branch: refs/heads/vpc
Commit: 2a971d7c1bf5dc3c3dbdfaa104df1690d2ee703b
Parents: 9b039d9
Author: Brian Federle <[email protected]>
Authored: Thu Jul 12 15:14:57 2012 -0700
Committer: Brian Federle <[email protected]>
Committed: Thu Jul 12 15:29:15 2012 -0700
----------------------------------------------------------------------
ui/css/cloudstack3.css | 29 +++++++++++++++++++++++++++++
ui/scripts/ui/widgets/detailView.js | 12 ++++++++++--
2 files changed, 39 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/2a971d7c/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index caf225f..2af3c47 100644
--- 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;
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/2a971d7c/ui/scripts/ui/widgets/detailView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/detailView.js
b/ui/scripts/ui/widgets/detailView.js
index 1ac609f..f703395 100644
--- 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');
