centersl/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-04-12 14:25:46 +07:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'jmorgan-merge-restyle' of github.com:kitematic/kitematic into jmorgan-merge-restyle

Browse Source 
Conflicts:
	src/ContainerDetails.react.js
This commit is contained in:
Jeffrey Morgan
2015-02-06 12:09:04 -05:00
parent 30fb489edd 8c66ff9b79
commit 24f8062f06
9 changed files with 116 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 B

BIN
images/logo@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/ContainerDetails.react.js
View File

@@ -11,7 +11,6 @@ var dialog = remote.require('dialog');
var ContainerStore = require('./ContainerStore');
var ContainerUtil = require('./ContainerUtil');
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');

24
src/ContainerHome.react.js
View File

@@ -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">View 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>

3
src/Header.react.js
View File

@@ -1,5 +1,6 @@
var React = require('react/addons');
var remote = require('remote');
var RetinaImage = require('react-retina-image');
var Header = React.createClass({
getInitialState: function () {
@@ -43,6 +44,7 @@ var Header = React.createClass({
<div className="button button-minimize yellow disabled"></div>
<div className="button button-fullscreenclose green enabled" onClick={this.handleFullscreen}></div>
</div>
<RetinaImage className="logo" src="logo.png"/>
</div>
);
} else {
@@ -53,6 +55,7 @@ var Header = React.createClass({
<div className="button button-minimize yellow enabled" onClick={this.handleMinimize}></div>
<div className="button button-fullscreen green enabled" onClick={this.handleFullscreen}></div>
</div>
<RetinaImage className="logo" src="logo.png"/>
</div>
);
}

1
src/NewContainer.react.js
View File

@@ -78,6 +78,7 @@ var NewContainer = React.createClass({
if (err) {
throw err;
}
$(document.body).find('.new-container-item').parent().fadeOut();
}.bind(this));
},
handleDropdownClick: function (name) {

80
styles/containers.less
View File

@@ -598,6 +598,9 @@
&.stopped {
color: @gray-lighter;
}
&.downloading {
color: @brand-action;
}
}
/*.details-header-actions {
@@ -631,9 +634,12 @@
}
.details-progress {
margin: 26% auto 0;
margin: 20% auto 0;
text-align: center;
width: 300px;
h2 {
margin-bottom: 20px;
}
}
.details-panel {
@@ -642,6 +648,7 @@
background-color: #FFF;
&.home {
background-color: #F9F9F9;
overflow: hidden;
.content {
display: flex;
flex: 1 auto;
@@ -652,17 +659,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;
}
}
}
}
@@ -673,22 +717,54 @@
.mini-logs {
margin-bottom: 50px;
.widget {
position: relative;
border-radius: 4px;
border: 1px solid @gray-lightest;
background-color: @gray-darkest;
color: @gray-lightest;
height: 100%;
padding: 10px;
overflow: scroll;
overflow: hidden;
font-family: Menlo;
font-size: 8px;
white-space: pre-wrap;
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;

8
styles/header.less
View File

@@ -13,6 +13,14 @@
-webkit-app-region: no-drag;
}
.logo {
position: relative;
float: right;
top: 10px;
right: 10px;
z-index: 1000;
}
.buttons {
display: inline-block;
position: relative;

5
styles/theme.less
View File

@@ -5,6 +5,11 @@
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
h2 {
font-size: 18px;
color: @gray-normal;
}
h3 {
font-size: 14px;
color: @gray-darkest;