openstack/horizon
Code Issues Proposed changes

Material: Progress Bars should allow text

Browse Source 
Material progress bars are so thin, that when you add text to them, its
unplesant. We need to support a progress bar type containing text that
is bigger by default.

Used this opportunity to align other progress bar experiences, and in
addition, generalize the text progress bar and progress loader bar for
general use everywhere.

Change-Id: I3d51c6a4582e3dc043f30632b6635a9ff17f5fbf
Closes-bug: #1602880
This commit is contained in:
Diana Whitten 2016-07-13 16:27:43 -07:00
parent 14c1188f7b
commit 1af2a966c5
11 changed files with 77 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,7 @@ horizon.datatables = {
if ($new_row.hasClass('status_unknown')) {
var $container = $(document.createElement('div'))
.addClass('horizon-pending-bar');
.addClass('progress-text horizon-loading-bar');
var $progress = $(document.createElement('div'))
.addClass('progress progress-striped active')
@ -73,14 +73,13 @@ horizon.datatables = {
$(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')
.addClass('fa fa-question-circle progress-bar-text')
.appendTo($container);
}
$new_row.find("td.status_unknown:last").prepend($container);

25
openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
View File

@ -1165,6 +1165,31 @@
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
</div>
<h3 translate id="progress-info">Text</h3>
<div class="bs-component">
<div class="progress-text">
<div class="progress">
<div class="progress-bar" style="width: 10%;"></div>
</div>
<span class="progress-bar-text" translate>10%</span>
</div>
<div class="progress-text">
<div class="progress">
<div class="progress-bar" style="width: 75%;"></div>
</div>
<span class="progress-bar-text" translate>75%</span>
</div>
</div>
<h3 translate id="progress-info">Loading</h3>
<div class="bs-component">
<div class="horizon-loading-bar">
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>

4
openstack_dashboard/dashboards/project/containers/templates/containers/_container_loader.html
View File

@ -1,5 +1,5 @@
<div class="horizon-pending-bar container-pending-bar">
<div class="horizon-loading-bar container-pending-bar">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 100%"></div>
<div class="progress-bar"></div>
</div>
</div>

4
openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html
View File

@ -30,9 +30,9 @@
</div>
</accordion-heading>
<div ng-if="!container.is_fetched" class="horizon-pending-bar container-pending-bar">
<div ng-if="!container.is_fetched" class="horizon-loading-bar container-pending-bar">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 100%"></div>
<div class="progress-bar"></div>
</div>
</div>
<ul ng-if="container.is_fetched" class="hz-object-detail">

18
openstack_dashboard/static/dashboard/scss/components/_pending_bar.scss
View File

@ -1,18 +0,0 @@
.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);
}
&.container-pending-bar .progress {
margin-bottom: 0;
}
}

41
openstack_dashboard/static/dashboard/scss/components/_progress_bars.scss Normal file
View File

@ -0,0 +1,41 @@
.progress-text {
position: relative;
color: $text-color;
.progress {
margin-bottom: $padding-small-vertical;
height: 1.5em;
}
.progress-bar-text {
bottom: 0;
line-height: 1.5em;
position: absolute;
z-index: 1;
&,
& span {
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
@include text-overflow();
}
}
&.container-pending-bar .progress {
margin-bottom: 0;
}
}
.file-upload .progress-bar {
transition: width 0.1s ease 0s;
}
.horizon-loading-bar .progress {
height: 1.5em;
.progress-bar {
width: 100%;
}
}

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

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

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

@ -32,8 +32,8 @@
@import "components/modals";
@import "components/navbar";
@import "components/network_topology";
@import "components/pending_bar";
@import "components/pie_charts";
@import "components/progress_bars";
@import "components/quota";
@import "components/resource_browser";
@import "components/resource_topology";

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

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

1
openstack_dashboard/themes/material/static/horizon/_styles.scss
View File

@ -7,6 +7,7 @@
@import "components/magic_search";
@import "components/messages";
@import "components/navbar";
@import "components/progress_bars";
@import "components/selects";
@import "components/sidebar";

3
openstack_dashboard/themes/material/static/horizon/components/_progress_bars.scss Normal file
View File

@ -0,0 +1,3 @@
.progress-text {
color: $body-bg;
}