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

Volumes and log home widget.

This commit is contained in:
Sean Li 2015-06-08 13:56:21 -07:00
parent 2d26a66521
commit 29c277babe
8 changed files with 87 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,7 @@ var ContainerHome = React.createClass({
}, },
handleResize: function () { handleResize: function () {
$('.left .wrapper').height(window.innerHeight - 240); $('.left .wrapper').height(window.innerHeight - 105);
$('.right .wrapper').height(window.innerHeight / 2 - 100); $('.right .wrapper').height(window.innerHeight / 2 - 100);
}, },
@ -93,10 +93,10 @@ var ContainerHome = React.createClass({
<div className="details-panel home"> <div className="details-panel home">
<div className="content"> <div className="content">
<div className="left"> <div className="left">
<ContainerHomePreview ports={this.props.ports} defaultPort={this.props.defaultPort} /> <ContainerHomeLogs container={this.props.container}/>
</div> </div>
<div className="right"> <div className="right">
<ContainerHomeLogs container={this.props.container}/> <ContainerHomePreview ports={this.props.ports} defaultPort={this.props.defaultPort} />
<ContainerHomeFolders container={this.props.container} /> <ContainerHomeFolders container={this.props.container} />
</div> </div>
</div> </div>

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

@ -64,7 +64,7 @@ var ContainerHomeFolder = React.createClass({
} }
var folders = _.map(this.props.container.Volumes, (val, key) => { var folders = _.map(this.props.container.Volumes, (val, key) => {
var firstFolder = key.split(path.sep)[1]; var firstFolder = key;
return ( return (
<div key={key} className="folder" onClick={this.handleClickFolder.bind(this, val, key)}> <div key={key} className="folder" onClick={this.handleClickFolder.bind(this, val, key)}>
<RetinaImage src="folder.png" /> <RetinaImage src="folder.png" />
@ -76,10 +76,14 @@ var ContainerHomeFolder = React.createClass({
if (this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running) { if (this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running) {
return ( return (
<div className="folders wrapper"> <div className="folders wrapper">
<h4>Edit Files</h4>
<div className="widget"> <div className="widget">
<div className="top-bar">
<div className="text">Edit Files</div>
</div>
<div className="folders-list">
{folders} {folders}
</div> </div>
</div>
<div className="subtext" onClick={this.handleClickChangeFolders}>Change Folders</div> <div className="subtext" onClick={this.handleClickChangeFolders}>Change Folders</div>
</div> </div>
); );

12
src/components/ContainerHomeLogs.react.js
View File

@ -69,14 +69,22 @@ module.exports = React.createClass({
if (logs.length === 0) { if (logs.length === 0) {
logs = "No logs for this container."; logs = "No logs for this container.";
} }
var tempDisp = (
<div className="mini-logs-overlay" onClick={this.handleClickLogs}>
<span className="icon icon-expand"></span>
<div className="text">View Logs</div>
</div>
);
return ( return (
<div className="mini-logs wrapper"> <div className="mini-logs wrapper">
<h4>Logs</h4>
<div className="widget"> <div className="widget">
<div className="top-bar">
<div className="text">Container Logs</div>
</div>
<div className="logs"> <div className="logs">
{logs} {logs}
</div> </div>
<div className="mini-logs-overlay" onClick={this.handleClickLogs}><span className="icon icon-scale-spread-1"></span><div className="text">View Logs</div></div> </div> </div>
</div> </div>
); );
} }

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

@ -51,8 +51,10 @@ var ContainerHomePreview = React.createClass({
var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'}); var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'});
preview = ( preview = (
<div className="web-preview wrapper"> <div className="web-preview wrapper">
<h4>Web Preview</h4>
<div className="widget"> <div className="widget">
<div className="top-bar">
<div className="text">WEB PREVIEW</div>
</div>
{frame} {frame}
<div className="frame-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div> <div className="frame-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
</div> </div>
@ -73,8 +75,10 @@ var ContainerHomePreview = React.createClass({
preview = ( preview = (
<div className="web-preview wrapper"> <div className="web-preview wrapper">
<h4>IP &amp; Ports</h4>
<div className="widget"> <div className="widget">
<div className="top-bar">
<div className="text">IP & PORTS</div>
</div>
<p>You can access this container using the following IP address and port:</p> <p>You can access this container using the following IP address and port:</p>
<div className="table ports"> <div className="table ports">
<div className="table-labels"> <div className="table-labels">

61
styles/container-home.less
View File

@ -5,11 +5,11 @@
display: flex; display: flex;
flex: 1 auto; flex: 1 auto;
flex-direction: row; flex-direction: row;
padding: 10px 27px; padding: 1rem;
.left { .left {
width: 60%; width: 60%;
flex-direction: column; flex-direction: column;
margin-right: 30px; margin-right: 1rem;
} }
.right { .right {
width: 40%; width: 40%;
@ -29,8 +29,9 @@
.widget { .widget {
.widget-style(); .widget-style();
background-color: white; background-color: white;
padding: 0.5rem;
width: 100%; width: 100%;
height: 95%; height: 100%;
p { p {
font-size: 13px; font-size: 13px;
color: @gray-normal; color: @gray-normal;
@ -94,7 +95,7 @@
left: -100%; left: -100%;
top: -100%; top: -100%;
height: 400%; height: 400%;
width: 401%; width: 400%;
transform: scale(0.5); transform: scale(0.5);
} }
.frame-overlay { .frame-overlay {
@ -125,24 +126,30 @@
} }
} }
.mini-logs { .mini-logs {
margin-bottom: 50px;
.widget { .widget {
.widget-style(); .widget-style();
.top-bar {
.widget-bar-style();
background-color: darken(@gray-darkest, 3%);
border-bottom: 1px solid rgba(255,255,255,0.1);
color: white;
}
height: 100%;
.logs {
background-color: @gray-darkest; background-color: @gray-darkest;
color: @gray-lightest; color: @gray-lightest;
height: 100%;
padding: 10px;
font-family: @font-code; font-family: @font-code;
font-size: 7px; font-size: 9px;
white-space: pre; white-space: pre-wrap;
.logs { -webkit-user-select: text;
overflow: hidden; padding: 1.2rem;
overflow: auto;
height: 100%; height: 100%;
} }
p { p {
margin-bottom: 0px; margin-bottom: 0px;
} }
.mini-logs-overlay { /*.mini-logs-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -167,29 +174,37 @@
background-color: @gray-darkest; background-color: @gray-darkest;
opacity: 0.75; opacity: 0.75;
} }
} }*/
} }
} }
.folders { .folders {
.widget { .widget {
.widget-style(); .widget-style();
padding: 10px 5px;
background-color: white; background-color: white;
display: flex; .top-bar {
.widget-bar-style();
}
.folders-list {
.folder { .folder {
width: 110px; display: flex;
padding: 5px; padding: 1rem;
border-bottom: 1px solid @color-divider;
&:hover { &:hover {
background-color: darken(@color-background, 2%); background-color: @color-box-button;
border-radius: 10px;
} }
img { img {
display: block; width: 32px;
margin: 0 auto; min-width: 32px;
height: 25px;
} }
.text { .text {
margin-top: 4px; margin-top: 0.3rem;
text-align: center; margin-left: 1rem;
width: 180px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
} }
} }
} }

15
styles/mixins.less
View File

@ -23,12 +23,23 @@
} }
.widget-style() { .widget-style() {
border-radius: 4px; border-radius: @border-radius;
border: 1px solid @gray-lighter; border: 1px solid @color-divider;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.widget-bar-style() {
height: 40px;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
padding: 1.1rem;
background-color: white;
color: @gray-light;
border-bottom: 1px solid @color-divider;
}
.fade-in() { .fade-in() {
opacity: 0; opacity: 0;
-webkit-animation: fadein ease-in 1; -webkit-animation: fadein ease-in 1;

3
styles/new-container.less
View File

@ -141,7 +141,8 @@
.results-filter-title { .results-filter-title {
color: @gray-lighter; color: @gray-lighter;
font-weight: 500; font-weight: 500;
padding-top: 0.7rem; position: relative;
top: 1px;
margin-right: 0.7rem; margin-right: 0.7rem;
} }
} }

3
styles/right-panel.less
View File

@ -111,7 +111,7 @@
color: @gray-light; color: @gray-light;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
text-align: center; text-align: center;
min-width: 28px; min-width: 20px;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
&.active { &.active {
color: @gray-darkest; color: @gray-darkest;
@ -121,7 +121,6 @@
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
color: @gray-light; color: @gray-light;
border-bottom: 3px solid transparent;
} }
} }
&:hover { &:hover {