зеркало из https://github.com/docker/kitematic.git
Improved container home page.
This commit is contained in:
Sean Li
Родитель
aba7590ee3
Коммит
ffb2ade67c
|
|
@ -3,6 +3,7 @@ var $ = require('jquery');
|
|||
var React = require('react/addons');
|
||||
var RetinaImage = require('react-retina-image');
|
||||
var path = require('path');
|
||||
var exec = require('exec');
|
||||
|
||||
var ContainerHome = React.createClass({
|
||||
handleResize: function () {
|
||||
|
|
@ -33,6 +34,18 @@ var ContainerHome = React.createClass({
|
|||
this._oldHeight = parent[0].scrollHeight - parent.height();
|
||||
}
|
||||
},
|
||||
handleClickFolder: function (path) {
|
||||
exec(['open', path], function (err) {
|
||||
if (err) { throw err; }
|
||||
});
|
||||
},
|
||||
handleClickPreview: function () {
|
||||
if (this.props.defaultPort) {
|
||||
exec(['open', this.props.ports[this.props.defaultPort].url], function (err) {
|
||||
if (err) { throw err; }
|
||||
});
|
||||
}
|
||||
},
|
||||
render: function () {
|
||||
var preview;
|
||||
if (this.props.defaultPort) {
|
||||
|
|
@ -40,19 +53,22 @@ var ContainerHome = React.createClass({
|
|||
<div className="web-preview">
|
||||
<h4>Web Preview</h4>
|
||||
<div className="widget">
|
||||
<iframe name="disable-x-frame-options" src={this.props.ports[this.props.defaultPort].url}></iframe>
|
||||
<iframe sandbox="allow-same-origin allow-scripts" src={this.props.ports[this.props.defaultPort].url} scrolling="no"></iframe>
|
||||
<div className="iframe-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
|
||||
</div>
|
||||
<div className="subtext">Not showing correctly?</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
console.log(this.props.container.Volumes);
|
||||
var folders = _.map(this.props.container.Volumes, function (val, key) {
|
||||
var self = this;
|
||||
var folders = _.map(self.props.container.Volumes, function (val, key) {
|
||||
var firstFolder = key.split(path.sep)[1];
|
||||
if (!val || val.indexOf(process.env.HOME) === -1) {
|
||||
return;
|
||||
} else {
|
||||
return (
|
||||
<div key={key} className="folder">
|
||||
<div key={key} className="folder" onClick={self.handleClickFolder.bind(self, val)}>
|
||||
<RetinaImage src="folder.png" />
|
||||
<div className="text">{firstFolder}</div>
|
||||
</div>
|
||||
|
|
@ -70,6 +86,7 @@ var ContainerHome = React.createClass({
|
|||
<h4>Logs</h4>
|
||||
<div className="widget">
|
||||
{this.props.logs}
|
||||
<div className="mini-logs-overlay"><span className="icon icon-scale-spread-1"></span><div className="text">Full Logs</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="folders">
|
||||
|
|
@ -77,6 +94,7 @@ var ContainerHome = React.createClass({
|
|||
<div className="widget">
|
||||
{folders}
|
||||
</div>
|
||||
<div className="subtext">Change Folders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -629,6 +629,7 @@
|
|||
background-color: #FFF;
|
||||
&.home {
|
||||
background-color: #F9F9F9;
|
||||
overflow: hidden;
|
||||
.content {
|
||||
display: flex;
|
||||
flex: 1 auto;
|
||||
|
|
@ -639,17 +640,54 @@
|
|||
flex-direction: column;
|
||||
.web-preview {
|
||||
margin-right: 30px;
|
||||
.subtext {
|
||||
text-align: right;
|
||||
color: @gray-lightest;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.widget {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid @gray-lightest;
|
||||
position: relative;
|
||||
iframe {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
/*width: 100%;
|
||||
height: 100%;*/
|
||||
position: relative;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
.iframe-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
color: transparent;
|
||||
transition: all 0.25s;
|
||||
.icon {
|
||||
margin-top: 40%;
|
||||
display: block;
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.text {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: @gray-darkest;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -660,6 +698,7 @@
|
|||
.mini-logs {
|
||||
margin-bottom: 50px;
|
||||
.widget {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border: 1px solid @gray-lightest;
|
||||
background-color: @gray-darkest;
|
||||
|
|
@ -673,9 +712,40 @@
|
|||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.mini-logs-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
color: transparent;
|
||||
transition: all 0.25s;
|
||||
.icon {
|
||||
margin-top: 25%;
|
||||
display: block;
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.text {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: @gray-darkest;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.folders {
|
||||
.subtext {
|
||||
text-align: right;
|
||||
color: @gray-lightest;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.widget {
|
||||
padding: 20px 10px;
|
||||
background-color: white;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче