openstack/horizon
Code Issues Proposed changes

Themeable loader/progress bar for tables

Browse Source 
Replace outdated animated loading.gif and action_required.png with
themeable Bootstrap progress bars

Screenshots of comparison/changes: http://imgur.com/a/uDOhm

Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Co-Authored-By: Diana Whitten <hurgleburgler@gmail.com>
Change-Id: I3f3d10171122f4d6017e0906c1df0669151dfe6c
This commit is contained in:
Brian Tully 2016-01-13 18:43:42 -05:00 committed by Ryan Peters
parent d4c7b8f813
commit 4c4294dbda
6 changed files with 44 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
horizon/static/horizon/js/horizon.tables.js
View File

@ -65,16 +65,26 @@ horizon.datatables = {
var $new_row = $(data);
if ($new_row.hasClass('status_unknown')) {
var spinner_elm = $new_row.find("td.status_unknown:last");
var imagePath = $new_row.find('.btn-action-required').length > 0 ?
"dashboard/img/action_required.png":
"dashboard/img/loading.gif";
var $container = $(document.createElement('div'))
.addClass('horizon-pending-bar');
imagePath = window.STATIC_URL + imagePath;
spinner_elm.prepend(
$("<div>")
.addClass("loading_gif")
.append($("<img>").attr("src", imagePath)));
var $progress = $(document.createElement('div'))
.addClass('progress progress-striped active')
.appendTo($container);
$(document.createElement('div'))
.addClass('progress-bar')
.css("width", "100%")
.appendTo($progress);
// if action/confirm is required, show progress-bar with "?"
// icon to indicate user action is required
if ($new_row.find('.btn-action-required').length > 0) {
$(document.createElement('span'))
.addClass('fa fa-question-circle horizon-pending-bar-icon')
.appendTo($container);
}
$new_row.find("td.status_unknown:last").prepend($container);
}
// Only replace row if the html content has changed

BIN
openstack_dashboard/static/dashboard/img/action_required.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 631 B

14
openstack_dashboard/static/dashboard/scss/components/_pending_bar.scss Normal file
View File

@ -0,0 +1,14 @@
.horizon-pending-bar {
position: relative;
.progress {
margin-bottom: $padding-small-vertical;
}
.horizon-pending-bar-icon {
position: absolute;
z-index: 1;
left: calc(50% - .5em);
bottom: calc(50% - .5em);
}
}

5
openstack_dashboard/static/dashboard/scss/components/_tables.scss
View File

@ -129,3 +129,8 @@
.nowrap-col {
white-space: nowrap;
}
// Specialness for table pending bars
.status_unknown .horizon-pending-bar-icon {
color: $text-color;
}

1
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

@ -27,6 +27,7 @@
@import "components/workflow";
@import "components/network_topology";
@import "components/context_selection";
@import "components/pending_bar";
@import "components/pie_charts";
@import "components/bar_charts";
@import "components/quota";

5
openstack_dashboard/themes/default/horizon/components/_tables.scss
View File

@ -44,3 +44,8 @@
opacity: .25;
right: $padding-small-vertical;
}
// Specialness for table pending bars
.status_unknown .horizon-pending-bar-icon {
color: $body-bg;
}