diff --git a/src/ContainerHome.react.js b/src/ContainerHome.react.js index a5660cee..52d930a8 100644 --- a/src/ContainerHome.react.js +++ b/src/ContainerHome.react.js @@ -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({

Web Preview

- + +
Open in Browser
+
Not showing correctly?
); } 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 ( -
+
{firstFolder}
@@ -70,6 +86,7 @@ var ContainerHome = React.createClass({

Logs

{this.props.logs} +
Full Logs
@@ -77,6 +94,7 @@ var ContainerHome = React.createClass({
{folders}
+
Change Folders
diff --git a/styles/containers.less b/styles/containers.less index 052b3d5c..f74a8b11 100644 --- a/styles/containers.less +++ b/styles/containers.less @@ -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;