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

Homepage styling.

This commit is contained in:
Sean Li 2015-02-04 17:45:26 -08:00
parent c54792ea26
commit 9845d86d15
10 changed files with 138 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/button-restart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/button-restart@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
images/button-run.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1023 B

BIN
images/button-run@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
images/button-terminal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1018 B

BIN
images/button-terminal@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

43
src/ContainerDetails.react.js
View File

@ -14,6 +14,7 @@ var boot2docker = require('./Boot2Docker');
var ProgressBar = require('react-bootstrap/ProgressBar');
var ContainerDetailsHeader = require('./ContainerDetailsHeader.react');
var ContainerHome = require('./ContainerHome.react');
var RetinaImage = require('react-retina-image');
var ContainerDetails = React.createClass({
mixins: [Router.State, Router.Navigation],
@ -270,6 +271,30 @@ var ContainerDetails = React.createClass({
}
}.bind(this));
},
handleItemMouseEnterRun: function () {
var $action = $(this.getDOMNode()).find('.action .run');
$action.css("visibility", "visible");
},
handleItemMouseLeaveRun: function () {
var $action = $(this.getDOMNode()).find('.action .run');
$action.css("visibility", "hidden");
},
handleItemMouseEnterRestart: function () {
var $action = $(this.getDOMNode()).find('.action .restart');
$action.css("visibility", "visible");
},
handleItemMouseLeaveRestart: function () {
var $action = $(this.getDOMNode()).find('.action .restart');
$action.css("visibility", "hidden");
},
handleItemMouseEnterTerminal: function () {
var $action = $(this.getDOMNode()).find('.action .terminal');
$action.css("visibility", "visible");
},
handleItemMouseLeaveTerminal: function () {
var $action = $(this.getDOMNode()).find('.action .terminal');
$action.css("visibility", "hidden");
},
render: function () {
var self = this;
@ -544,17 +569,17 @@ var ContainerDetails = React.createClass({
<ContainerDetailsHeader container={this.props.container} />
<div className="details-subheader">
<div className="details-header-actions">
<div className="action">
<span className="icon icon-play-2 action-icon run-icon" onClick={this.handleView}></span>
<span className="btn-label">Run</span>
<div className="action" onMouseEnter={this.handleItemMouseEnterRun} onMouseLeave={this.handleItemMouseLeaveRun}>
<span className="action-icon" onClick={this.handleView}><RetinaImage src="button-run.png"/></span>
<span className="btn-label run">Run</span>
</div>
<div className="action">
<span className="icon icon-refresh action-icon" onClick={this.handleRestart}></span>
<span className="btn-label">Restart</span>
<div className="action" onMouseEnter={this.handleItemMouseEnterRestart} onMouseLeave={this.handleItemMouseLeaveRestart}>
<span className="action-icon" onClick={this.handleRestart}><RetinaImage src="button-restart.png"/></span>
<span className="btn-label restart">Restart</span>
</div>
<div className="action">
<span className="icon icon-window-code-3 action-icon" onClick={this.handleTerminal}></span>
<span className="btn-label">Terminal</span>
<div className="action" onMouseEnter={this.handleItemMouseEnterTerminal} onMouseLeave={this.handleItemMouseLeaveTerminal}>
<span className="action-icon" onClick={this.handleTerminal}><RetinaImage src="button-terminal.png"/></span>
<span className="btn-label terminal">Terminal</span>
</div>
</div>
<div className="details-subheader-tabs">

42
src/ContainerHome.react.js
View File

@ -2,8 +2,25 @@ var $ = require('jquery');
var React = require('react/addons');
var ContainerHome = React.createClass({
handleResize: function () {
$('.web-preview').height(window.innerHeight - 240);
$('.mini-logs').height(window.innerHeight / 2 - 100);
$('.folders').height(window.innerHeight / 2 - 150);
},
componentDidMount: function() {
$('.web-preview').height(window.innerHeight - 240);
$('.mini-logs').height(window.innerHeight / 2 - 100);
$('.folders').height(window.innerHeight / 2 - 150);
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
componentDidUpdate: function () {
// Scroll logs to bottom
$('.web-preview').height(window.innerHeight - 240);
$('.mini-logs').height(window.innerHeight / 2 - 100);
$('.folders').height(window.innerHeight / 2 - 150);
var parent = $('.mini-logs');
if (parent.length) {
if (parent.scrollTop() >= this._oldHeight) {
@ -17,18 +34,33 @@ var ContainerHome = React.createClass({
var preview;
if (this.props.defaultPort) {
preview = (
<iframe src={this.props.ports[this.props.defaultPort].url}></iframe>
<div className="web-preview">
<h4>Web Preview</h4>
<div className="widget">
<iframe src={this.props.ports[this.props.defaultPort].url}></iframe>
</div>
</div>
);
}
return (
<div className="details-panel home">
<div className="content">
<h4>Web Preview</h4>
<div className="widget web-preview">
<div className="left">
{preview}
</div>
<div className="widget mini-logs">
{this.props.logs}
<div className="right">
<div className="mini-logs">
<h4>Logs</h4>
<div className="widget">
{this.props.logs}
</div>
</div>
<div className="folders">
<h4>Edit Files</h4>
<div className="widget">
<p>Buncha folders</p>
</div>
</div>
</div>
</div>
</div>

110
styles/containers.less
View File

@ -288,12 +288,6 @@
.btn-delete {
font-size: 24px;
color: white;
opacity: 0.8;
transition: all 0.25s;
&:hover {
opacity: 1;
color: white;
}
}
.state-new {
.at2x('container-white.png', 20px, 20px);
@ -367,10 +361,6 @@
.btn-delete {
font-size: 24px;
color: @gray-lighter;
transition: all 0.25s;
&:hover {
color: @brand-action;
}
}
}
@ -510,31 +500,30 @@
.details-header-actions {
flex: 1 auto;
text-align: left;
margin-top: -5px;
margin-top: -12px;
.action {
display: inline-block;
.action-icon {
&.icon:before {
text-align: center;
}
color: @gray-normal;
font-size: 30px;
margin-right: 30px;
transition: all 0.25s;
&:hover {
color: @brand-action;
/*background: linear-gradient(-180deg, darken(#24B8EB, 10%) 4%, darken(#24A3EB, 10%) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
}
margin-right: 20px;
}
.btn-label {
position: relative;
top: -9px;
top: 0px;
display: block;
color: @brand-action;
font-size: 10px;
display: none;
&.run {
left: 8px;
}
&.restart {
left: 1px;
}
&.terminal {
left: -2px;
}
visibility: hidden;
}
}
}
@ -543,7 +532,7 @@
flex: 1 auto;
text-align: right;
margin-right: 3px;
margin-top: 6px;
margin-top: 3px;
.tab {
margin-left: 16px;
padding: 6px 10px;
@ -635,27 +624,58 @@
background-color: #FFF;
&.home {
background-color: #F9F9F9;
flex: 1;
.widget {
border-radius: 4px;
border: 1px solid @gray-lightest;
&.web-preview {
iframe {
border: 0;
border-radius: 4px;
.content {
display: flex;
flex: 1 auto;
flex-direction: row;
padding: 10px 27px;
.left {
width: 60%;
flex-direction: column;
.web-preview {
margin-right: 30px;
.widget {
background-color: white;
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid @gray-lightest;
iframe {
border: 0;
border-radius: 4px;
width: 100%;
height: 100%;
}
}
}
}
&.mini-logs {
background-color: @gray-darkest;
color: @gray-lightest;
padding: 10px;
width: 300px;
height: 300px;
overflow: hidden;
font-family: Menlo;
font-size: 8px;
p {
margin-bottom: 5px;
.right {
width: 40%;
flex-direction: column;
.mini-logs {
margin-bottom: 50px;
.widget {
border-radius: 4px;
border: 1px solid @gray-lightest;
background-color: @gray-darkest;
color: @gray-lightest;
height: 100%;
padding: 10px;
overflow: scroll;
font-family: Menlo;
font-size: 8px;
white-space: pre-wrap;
p {
margin-bottom: 0px;
}
}
}
.folders {
.widget {
background-color: white;
border-radius: 4px;
border: 1px solid @gray-lightest;
}
}
}
}
@ -669,7 +689,7 @@
color: @gray-lightest;
white-space: pre-wrap;
p {
margin-bottom: 8px;
margin-bottom: 0px;
}
}
.settings {

3
styles/theme.less
View File

@ -122,7 +122,7 @@ input[type="text"] {
background-color: transparent;
color: @gray-normal;
border: 1px solid @gray-normal;
border-radius: 25px;
border-radius: 40px;
box-shadow: none;
font-weight: 400;
text-shadow: none;
@ -173,6 +173,7 @@ input[type="text"] {
&.only-icon {
padding: 6px 7px 6px 7px;
&.small {
width: 22px;
padding: 2px 5px 3px 5px;
}
}