You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by al...@apache.org on 2012/07/13 22:52:12 UTC
[5/11] git commit: List view UI: Support for text action buttons
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: {
...
}
}
Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/9b039d9a
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/9b039d9a
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/9b039d9a
Branch: refs/heads/vpc
Commit: 9b039d9a8d0f46861e79901482b81e1dd441b115
Parents: 79c7da0
Author: Brian Federle <br...@citrix.com>
Authored: Thu Jul 12 13:43:54 2012 -0700
Committer: Brian Federle <br...@citrix.com>
Committed: Thu Jul 12 13:46:19 2012 -0700
----------------------------------------------------------------------
ui/css/cloudstack3.css | 28 ++++++++++++++++++++++++++++
ui/scripts/ui/widgets/listView.js | 10 +++++++++-
2 files changed, 37 insertions(+), 1 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/9b039d9a/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 3f08f00..caf225f 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;
}
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/9b039d9a/ui/scripts/ui/widgets/listView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index 9ba5730..b01d01e 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -689,13 +689,21 @@
var $action = $('<div></div>')
.addClass('action')
.addClass(actionName)
- .append($('<span>').addClass('icon'))
+ .append($('<span>').addClass('icon').html(' '))
.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');