зеркало из https://github.com/docker/kitematic.git
Added Container Progress component.
This commit is contained in:
Родитель
75229d6711
Коммит
2ccee4a505
|
@ -0,0 +1,41 @@
|
|||
var React = require('react');
|
||||
|
||||
/*
|
||||
|
||||
Usage: <ContainerProgress pBar1={20} pBar2={70} pBar3={100} pBar4={20} />
|
||||
|
||||
*/
|
||||
var ContainerProgress = React.createClass({
|
||||
render: function () {
|
||||
var pBar1Style = {
|
||||
height: this.props.pBar1 + '%'
|
||||
};
|
||||
var pBar2Style = {
|
||||
height: this.props.pBar2 + '%'
|
||||
};
|
||||
var pBar3Style = {
|
||||
height: this.props.pBar3 + '%'
|
||||
};
|
||||
var pBar4Style = {
|
||||
height: this.props.pBar4 + '%'
|
||||
};
|
||||
return (
|
||||
<div className="container-progress">
|
||||
<div className="bar-1 bar-bg">
|
||||
<div className="bar-1 bar-fg" style={pBar4Style}></div>
|
||||
</div>
|
||||
<div className="bar-2 bar-bg">
|
||||
<div className="bar-2 bar-fg" style={pBar3Style}></div>
|
||||
</div>
|
||||
<div className="bar-3 bar-bg">
|
||||
<div className="bar-3 bar-fg" style={pBar2Style}></div>
|
||||
</div>
|
||||
<div className="bar-4 bar-bg">
|
||||
<div className="bar-4 bar-fg" style={pBar1Style}></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = ContainerProgress;
|
|
@ -0,0 +1,35 @@
|
|||
.container-progress {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 4px solid @brand-primary;
|
||||
border-radius: 10px;
|
||||
transform: rotate(180deg);
|
||||
.bar-bg {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 22px;
|
||||
background-color: @gray-lightest;
|
||||
width: 4px;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bar-fg {
|
||||
background-color: @brand-primary;
|
||||
width: 4px;
|
||||
height: 0px;
|
||||
border-radius: 10px;
|
||||
transition: 0.3 all;
|
||||
}
|
||||
.bar-1 {
|
||||
left: 21px;
|
||||
}
|
||||
.bar-2 {
|
||||
left: 32px;
|
||||
}
|
||||
.bar-3 {
|
||||
left: 43px;
|
||||
}
|
||||
.bar-4 {
|
||||
left: 54px;
|
||||
}
|
||||
}
|
|
@ -16,6 +16,7 @@
|
|||
@import "container-logs.less";
|
||||
@import "container-settings.less";
|
||||
@import "animation.less";
|
||||
@import "container-progress.less";
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
|
Загрузка…
Ссылка в новой задаче