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 2013/10/02 21:06:59 UTC
git commit: updated refs/heads/ui-restyle to c2151ee
Updated Branches:
refs/heads/ui-restyle 427c9cec6 -> c2151eec3
Style list view
-Remove usage of dataTable widget -- It is too confusing working with a
separate widget, and dataTable's split header causes lots of alignment
issues -- this will be re-implemented in listView
-Style table and quick-view column
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/c2151eec
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/c2151eec
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/c2151eec
Branch: refs/heads/ui-restyle
Commit: c2151eec3a51cb4ed3342d33b843255026022845
Parents: 427c9ce
Author: Brian Federle <br...@citrix.com>
Authored: Wed Oct 2 12:05:31 2013 -0700
Committer: Brian Federle <br...@citrix.com>
Committed: Wed Oct 2 12:05:31 2013 -0700
----------------------------------------------------------------------
ui/scripts/ui/widgets/listView.js | 33 ++++----------------------
ui/stylesheets/cloudstack.scss | 2 +-
ui/stylesheets/csui/_dialog.scss | 4 ++--
ui/stylesheets/csui/_list.scss | 43 ++++++++++++++++++++++++++++++----
4 files changed, 45 insertions(+), 37 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/c2151eec/ui/scripts/ui/widgets/listView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index 22b4fdd..632a954 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -553,7 +553,6 @@
$label.fadeOut('fast', function() {
$edit.fadeIn();
$editInput.focus();
- $instanceRow.closest('div.data-table').dataTable('refresh');
});
};
@@ -585,7 +584,6 @@
success: function(args) {
$edit.hide();
$label.fadeIn();
- $instanceRow.closest('div.data-table').dataTable('refresh');
if (options.success) options.success(args);
},
@@ -596,7 +594,6 @@
});
$edit.hide(),
$label.html(_s(oldVal)).fadeIn();
- $instanceRow.closest('div.data-table').dataTable('refresh');
if (options.error) options.error(args);
}
@@ -610,7 +607,6 @@
var oldVal = $label.html();
$edit.hide();
$label.fadeIn();
- $instanceRow.closest('div.data-table').dataTable('refresh');
$editInput.val(_s(oldVal));
return false;
}
@@ -652,12 +648,6 @@
var rowActions = {
_std: function($tr, action) {
action();
-
- $tr.closest('.data-table').dataTable('refresh');
-
- setTimeout(function() {
- $tr.closest('.data-table').dataTable('selectRow', $tr.index());
- }, 0);
},
moveTop: function($tr) {
@@ -1176,7 +1166,6 @@
$tr.closest('tbody').find('tr').each(function() {
sort($(this), action);
});
- $tr.closest('.data-table').dataTable('selectRow', $tr.index());
return false;
});
@@ -1292,8 +1281,6 @@
} else {
$select.hide();
}
-
- $listView.find('.data-table').dataTable('refresh');
}
}
});
@@ -1401,6 +1388,8 @@
}
);
}
+
+ $tr.find('td:first').addClass('first');
});
return rows;
@@ -1451,7 +1440,6 @@
var uiCustom = viewArgs.listView ? viewArgs.listView.uiCustom : false;
setLoading($table, function(setLoadingArgs) {
- $table.dataTable();
$.extend(loadArgs, {
context: options.context,
response: {
@@ -1466,27 +1454,17 @@
'multiSelect': options.multiSelect,
noActionCol: options.noActionCol
});
- $table.dataTable(null, {
- noSelect: uiCustom
- });
if (args.data &&
args.data.length < pageSize &&
options.setEndTable) {
options.setEndTable();
}
-
- setTimeout(function() {
- $table.dataTable('refresh');
- });
},
error: function(args) {
setLoadingArgs.loadingCompleted();
addTableRows(preFilter, fields, [], $tbody, actions);
$table.find('td:first').html(_l('ERROR'));
- $table.dataTable(null, {
- noSelect: uiCustom
- });
}
}
});
@@ -1965,14 +1943,14 @@
var id = $target.closest('tr').data('list-view-item-id');
var jsonObj = $target.closest('tr').data('jsonObj');
var detailViewArgs;
- var detailViewPresent = ($target.closest('div.data-table tr td.first').size() &&
+ var detailViewPresent = ($target.closest('table tr td.first').size() &&
listViewData.detailView && !$target.closest('div.edit').size());
var uiCustom = args.uiCustom == true ? true : false;
// Click on first item will trigger detail view (if present)
if (detailViewPresent && !uiCustom && !$target.closest('.empty, .loading').size()) {
var $loading = $('<div>').addClass('loading-overlay');
- $target.closest('div.data-table').prepend($loading); //overlay the whole listView, so users can't click another row until click-handling for this row is done (e.g. API response is back)
+ $target.closest('table').prepend($loading); //overlay the whole listView, so users can't click another row until click-handling for this row is done (e.g. API response is back)
listViewData.detailView.$browser = args.$browser;
detailViewArgs = {
@@ -2109,8 +2087,6 @@
noActionCol: targetArgs.noActionCol
}
)[0];
- listView.find('table').dataTable('refresh');
-
$tr.addClass('loading').find('td:last').prepend($('<div>').addClass('loading'));
$tr.find('.action').remove();
@@ -2146,7 +2122,6 @@
$newRow.data('json-obj', data);
$row.replaceWith($newRow);
- $table.dataTable('refresh');
if (after) after($newRow);
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/c2151eec/ui/stylesheets/cloudstack.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/cloudstack.scss b/ui/stylesheets/cloudstack.scss
index b347d40..fcd6684 100644
--- a/ui/stylesheets/cloudstack.scss
+++ b/ui/stylesheets/cloudstack.scss
@@ -200,7 +200,7 @@ body {
}
.notification-box, #user-options, .region-selector {
- @include dialog;
+ @include csui-dialog;
display: none;
}
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/c2151eec/ui/stylesheets/csui/_dialog.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/csui/_dialog.scss b/ui/stylesheets/csui/_dialog.scss
index d376ba4..043027b 100644
--- a/ui/stylesheets/csui/_dialog.scss
+++ b/ui/stylesheets/csui/_dialog.scss
@@ -14,7 +14,7 @@
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.
-@mixin dialog {
+@mixin csui-dialog {
background: white;
box-shadow: 0px 2px 10px black;
position: absolute;
@@ -59,6 +59,6 @@
// Defaults
.ui-dialog { // jqUI dialog
- @include dialog;
+ @include csui-dialog;
@include animation-duration(300ms);
}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/c2151eec/ui/stylesheets/csui/_list.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/csui/_list.scss b/ui/stylesheets/csui/_list.scss
index 3a16297..7f02453 100644
--- a/ui/stylesheets/csui/_list.scss
+++ b/ui/stylesheets/csui/_list.scss
@@ -17,27 +17,60 @@
@mixin csui-list {
table {
width: 100%;
- margin-top: 20px;
+ th, tr td {
+ padding: 7px;
+ }
+
th {
text-align: left;
border: 1px solid #b9b9b9;
- padding: 7px;
background: #e8e8e8;
font-size: 11px;
color: #474747;
- white-space: nowrap;
+
@include linear-gradient(#ffffff, #e2e2e2);
}
tr td {
- padding: 7px;
+ padding: 5px;
border-bottom: 1px solid #ccc;
font-size: 11px;
+ white-space: nowrap;
+
+ span {
+ float: left;
+ }
+ }
+
+ th.quick-view, td.quick-view {
+ width: 40px;
+ }
+
+ td.quick-view {
+ height: 50px;
+ }
+
+ td.first {
+ cursor: pointer;
+
+ &:hover {
+ color: #237AD7;
+ }
}
&.body {
margin-top: 0px;
}
}
-}
\ No newline at end of file
+}
+
+.quick-view-tooltip {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ background: white;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}