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
+
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 (
-
+
@@ -70,6 +86,7 @@ var ContainerHome = React.createClass({
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;