Updated Branches: refs/heads/master 2f2bb6b31 -> 231c4b5b1
CLOUDSTACK-2716: Truncate long values For cases such as in global setting values, truncate long text if new option 'truncate: true' is specified in field properties. This will reduce td's max-width and add ellipses. Edit field on truncate: true columns will overflow into action column, to prevent input area from being too cramped. Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/231c4b5b Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/231c4b5b Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/231c4b5b Branch: refs/heads/master Commit: 231c4b5b10849edfc06a884bfb8d4f6cc7453536 Parents: 2f2bb6b Author: Brian Federle <brian.fede...@citrix.com> Authored: Tue Jun 18 15:16:32 2013 -0700 Committer: Brian Federle <brian.fede...@citrix.com> Committed: Tue Jun 18 15:16:35 2013 -0700 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 19 ++++++++++++++++++- ui/scripts/globalSettings.js | 2 +- ui/scripts/ui/widgets/listView.js | 4 ++++ 3 files changed, 23 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/231c4b5b/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index e145603..7113dbc 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -140,6 +140,17 @@ table tbody td.loading { border-top: 1px solid #FBFBFB; } +table tbody td.truncated { + overflow: visible; + max-width: 88px; +} + +table tbody td.truncated > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + /** Actions table cell*/ table tbody td.actions { width: 130px; @@ -441,7 +452,7 @@ body.login { div.list-view table tbody td span { display: block; float: left; - max-width: 100%; + max-width: 89%; word-wrap: break-word; text-indent: 0; margin-left: 12px; @@ -3457,6 +3468,12 @@ div.view table td.editable div.edit { top: 0px; } +div.view table td.truncated.editable div.edit { + top: 1px; + width: 285px; + left: 1px; +} + div.view table td.editable div.edit input { float: left; width: 66%; http://git-wip-us.apache.org/repos/asf/cloudstack/blob/231c4b5b/ui/scripts/globalSettings.js ---------------------------------------------------------------------- diff --git a/ui/scripts/globalSettings.js b/ui/scripts/globalSettings.js index 2687fca..1ae73b7 100644 --- a/ui/scripts/globalSettings.js +++ b/ui/scripts/globalSettings.js @@ -57,7 +57,7 @@ fields: { name: { label: 'label.name', id: true }, description: { label: 'label.description' }, - value: { label: 'label.value', editable: true } + value: { label: 'label.value', editable: true, truncate: true } }, dataProvider: function(args) { var data = { http://git-wip-us.apache.org/repos/asf/cloudstack/blob/231c4b5b/ui/scripts/ui/widgets/listView.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js index 8dbc2f6..bc68a72 100644 --- a/ui/scripts/ui/widgets/listView.js +++ b/ui/scripts/ui/widgets/listView.js @@ -949,6 +949,10 @@ .appendTo($tr); var content = dataItem[key]; + if (field.truncate) { + $td.addClass('truncated'); + } + if (field.indicator) { $td.addClass('state').addClass(field.indicator[content]);
