You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2014/03/28 18:18:30 UTC
git commit: updated refs/heads/4.4 to 6d7978e
Repository: cloudstack
Updated Branches:
refs/heads/4.4 0d897f65a -> 6d7978ea4
CLOUDSTACK-6227 (Add copy-paste support for detail view fields):
DetailView widget now supports bool isCopyPaste property that can be set
for fields. If this is set to true, the text of this field is displayed
using ellipsis formatting* and a copy-paste icon is available right next
to it. On clicking this icon, the full text is displayed
*: tooltip is also enabled showing the original non-ellipsed value
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/6d7978ea
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/6d7978ea
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/6d7978ea
Branch: refs/heads/4.4
Commit: 6d7978ea457404bd41149bd9d9666a4960fe8c61
Parents: 0d897f6
Author: Gabor Apati-Nagy <ga...@citrix.com>
Authored: Fri Mar 28 14:18:10 2014 +0000
Committer: Brian Federle <br...@citrix.com>
Committed: Fri Mar 28 10:17:31 2014 -0700
----------------------------------------------------------------------
ui/css/cloudstack3.css | 52 +++++++++++++++++++++++++++++++
ui/images/sprites.png | Bin 212064 -> 194105 bytes
ui/scripts/accounts.js | 6 ++--
ui/scripts/ui/widgets/detailView.js | 37 ++++++++++++++++++++--
4 files changed, 91 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6d7978ea/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 9789eda..bcb82d3 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -1835,6 +1835,58 @@ div.list-view td.state.off span {
float: left;
width: 245px;
}
+.detail-group .main-groups table td.value > span.copypasteenabledvalue {
+ text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.detail-group .main-groups table td.value > .copypasteactive {
+ display: auto;
+ white-space: nowrap;
+ overflow: none;
+}
+
+div.copypasteicon {
+ background: url("../images/sprites.png") no-repeat scroll -271px -65px;
+ float: left;
+ height: 21px;
+ margin-left: 6px;
+ margin-top: 0px;
+ width: 18px;
+}
+
+div.copypasteicon:hover {
+ background: url("../images/sprites.png") no-repeat scroll -271px -646px;
+}
+
+.detail-group .main-groups table td.value > span.copypasteenabledvalue {
+ text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.detail-group .main-groups table td.value > .copypasteactive {
+ display: auto;
+ white-space: nowrap;
+ overflow: none;
+}
+
+div.copypasteicon {
+ background: url("../images/sprites.png") no-repeat scroll -271px -65px;
+ float: left;
+ height: 21px;
+ margin-left: 6px;
+ margin-top: 0px;
+ width: 18px;
+}
+
+div.copypasteicon:hover {
+ background: url("../images/sprites.png") no-repeat scroll -271px -646px;
+}
+
.detail-group .main-groups table td.value > span select {
width: 100% !important;
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6d7978ea/ui/images/sprites.png
----------------------------------------------------------------------
diff --git a/ui/images/sprites.png b/ui/images/sprites.png
old mode 100644
new mode 100755
index ee64047..1a6eaa5
Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6d7978ea/ui/scripts/accounts.js
----------------------------------------------------------------------
diff --git a/ui/scripts/accounts.js b/ui/scripts/accounts.js
index aff780e..2b83f1a 100644
--- a/ui/scripts/accounts.js
+++ b/ui/scripts/accounts.js
@@ -1375,10 +1375,12 @@
label: 'label.state'
},
apikey: {
- label: 'label.api.key'
+ label: 'label.api.key',
+ isCopyPaste: true
},
secretkey: {
- label: 'label.secret.key'
+ label: 'label.secret.key',
+ isCopyPaste: true
},
account: {
label: 'label.account.name'
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6d7978ea/ui/scripts/ui/widgets/detailView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/detailView.js b/ui/scripts/ui/widgets/detailView.js
index 4c5aeea..e083878 100644
--- a/ui/scripts/ui/widgets/detailView.js
+++ b/ui/scripts/ui/widgets/detailView.js
@@ -456,6 +456,13 @@
tooltip: '.tooltip-box'
});
+ var removeCopyPasteIcons = function() {
+ $detailView.find('.copypasteactive').removeClass('copypasteactive').addClass('copypasteenabledvalue');
+ $detailView.find('td.value .copypasteicon').hide();
+ };
+
+ removeCopyPasteIcons();
+
var convertInputs = function($inputs) {
// Save and turn back into labels
$inputs.each(function() {
@@ -606,11 +613,12 @@
return false;
}
}
+ restoreCopyPasteIcons();
applyEdits($inputs, $editButton);
} else { // Cancel
+ restoreCopyPasteIcons();
cancelEdits($inputs, $editButton);
}
-
return true;
});
@@ -625,6 +633,9 @@
tooltip: '.tooltip-box'
});
+ var restoreCopyPasteIcons = function() {
+ $detailView.find('td.value .copypasteicon').show();
+ };
$detailView.find('td.value span').each(function() {
var name = $(this).closest('tr').data('detail-view-field');
@@ -931,7 +942,6 @@
$(fields).each(function() {
var fieldGroup = this;
-
var $detailTable = $('<tbody></tbody>').appendTo(
$('<table></table>').appendTo(
$('<div></div>').addClass('detail-group').appendTo($detailGroups.find('.main-groups'))
@@ -979,10 +989,33 @@
$name.html(_l(value.label));
$value.html(_s(content));
+ $value.attr('title', _s(content));
// Set up validation metadata
$value.data('validation-rules', value.validation);
+ //add copypaste icon
+ if (value.isCopyPaste) {
+ var $copyicon = $('<div>').addClass('copypasteicon').insertAfter($value);
+ $value.addClass('copypasteenabledvalue');
+
+ //set up copypaste eventhandler
+ $copyicon.click(function() {
+ //reset other values' formatting
+ $(this).closest('table').find('span.copypasteactive').removeClass('copypasteactive').addClass('copypasteenabledvalue');
+ //find the corresponding value
+ var $correspValue = $(this).closest('tr').find('.value').find('span');
+ $value.removeClass("copypasteenabledvalue").addClass("copypasteactive");
+ var correspValueElem = $correspValue.get(0);
+ //select the full value
+ var range = document.createRange();
+ range.selectNodeContents(correspValueElem);
+ var selection = window.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+ });
+ }
+
// Set up editable metadata
if (typeof(value.isEditable) == 'function')
$value.data('detail-view-is-editable', value.isEditable(context));