docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Aligned container progress.

This commit is contained in:
Sean Li 2015-05-23 07:41:46 -07:00
parent 436af76d55
commit 5d3ef1af8e
5 changed files with 35 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/ContainerHome.react.js
View File

@ -53,7 +53,6 @@ var ContainerHome = React.createClass({
} else if (this.props.container && this.props.container.State.Downloading) { } else if (this.props.container && this.props.container.State.Downloading) {
if (this.props.container.Progress !== undefined) { if (this.props.container.Progress !== undefined) {
let fields = [];
let values = []; let values = [];
let sum = 0.0; let sum = 0.0;
@ -65,15 +64,15 @@ var ContainerHome = React.createClass({
sum = sum / this.props.container.Progress.amount; sum = sum / this.props.container.Progress.amount;
fields.push(<h2>{Math.round(sum*100)/100}%</h2>)
fields.push(<ContainerProgress pBar1={values[0]} pBar2={values[1]} pBar3={values[2]} pBar4={values[3]} />);
body = ( body = (
<div className="details-progress"> <div className="details-progress">
<h2>Downloading Image</h2> <h2>Downloading Image</h2>
{fields} <h2>{Math.round(sum*100)/100}%</h2>
<div className="container-progress-wrapper">
<ContainerProgress pBar1={values[0]} pBar2={values[1]} pBar3={values[2]} pBar4={values[3]} />
</div> </div>
); </div>
);
} else if (this.props.container.State.Waiting) { } else if (this.props.container.State.Waiting) {
body = ( body = (

8
src/components/ContainerProgress.react.js
View File

@ -22,16 +22,16 @@ var ContainerProgress = React.createClass({
return ( return (
<div className="container-progress"> <div className="container-progress">
<div className="bar-1 bar-bg"> <div className="bar-1 bar-bg">
<div className="bar-1 bar-fg" style={pBar4Style}></div> <div className="bar-fg" style={pBar4Style}></div>
</div> </div>
<div className="bar-2 bar-bg"> <div className="bar-2 bar-bg">
<div className="bar-2 bar-fg" style={pBar3Style}></div> <div className="bar-fg" style={pBar3Style}></div>
</div> </div>
<div className="bar-3 bar-bg"> <div className="bar-3 bar-bg">
<div className="bar-3 bar-fg" style={pBar2Style}></div> <div className="bar-fg" style={pBar2Style}></div>
</div> </div>
<div className="bar-4 bar-bg"> <div className="bar-4 bar-bg">
<div className="bar-4 bar-fg" style={pBar1Style}></div> <div className="bar-fg" style={pBar1Style}></div>
</div> </div>
</div> </div>
); );

6
src/utils/DockerUtil.js
View File

@ -378,7 +378,7 @@ export default {
let layersToLoad = _.keys(layerProgress).length; let layersToLoad = _.keys(layerProgress).length;
console.log("nbLayers:" + layersToLoad) console.log("nbLayers:" + layersToLoad);
// Split the loading in a few columns for more feedback // Split the loading in a few columns for more feedback
let columns = {}; let columns = {};
@ -388,7 +388,7 @@ export default {
for (let i = 0; i < columns.amount; i++) for (let i = 0; i < columns.amount; i++)
{ {
let layerAmount = Math.ceil(layersToLoad / (columns.amount - i)) let layerAmount = Math.ceil(layersToLoad / (columns.amount - i));
layersToLoad -= layerAmount; layersToLoad -= layerAmount;
columns.progress[i] = { layerIDs:[], nbLayers:0 , maxLayers:layerAmount , value:0.0 }; columns.progress[i] = { layerIDs:[], nbLayers:0 , maxLayers:layerAmount , value:0.0 };
} }
@ -414,6 +414,8 @@ export default {
if (data.status === 'Already exists') { if (data.status === 'Already exists') {
console.log("Already exists.");
//layerProgress[data.id].current = 1; //layerProgress[data.id].current = 1;
//layerProgress[data.id].total = 1; //layerProgress[data.id].total = 1;

10
styles/container-progress.less
View File

@ -1,4 +1,14 @@
.container-progress-wrapper {
margin-left: 37%;
}
.container-progress { .container-progress {
display: inline-block;
position: relative;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
width: 100px; width: 100px;
height: 100px; height: 100px;
border: 4px solid @brand-primary; border: 4px solid @brand-primary;

2
styles/right-panel.less
View File

@ -126,10 +126,10 @@
} }
.details-progress { .details-progress {
margin: 20% auto 0; margin: 20% auto 0;
text-align: center;
width: 400px; width: 400px;
h2 { h2 {
margin-bottom: 20px; margin-bottom: 20px;
text-align: center;
} }
} }
.details-panel { .details-panel {