diff --git a/images/button-restart.png b/images/button-restart.png new file mode 100644 index 0000000000..988cdbcd80 Binary files /dev/null and b/images/button-restart.png differ diff --git a/images/button-restart@2x.png b/images/button-restart@2x.png new file mode 100644 index 0000000000..f4e3151525 Binary files /dev/null and b/images/button-restart@2x.png differ diff --git a/images/button-run.png b/images/button-run.png new file mode 100644 index 0000000000..1d03b2c5fc Binary files /dev/null and b/images/button-run.png differ diff --git a/images/button-run@2x.png b/images/button-run@2x.png new file mode 100644 index 0000000000..a5b8a22f69 Binary files /dev/null and b/images/button-run@2x.png differ diff --git a/images/button-terminal.png b/images/button-terminal.png new file mode 100644 index 0000000000..d988e3a569 Binary files /dev/null and b/images/button-terminal.png differ diff --git a/images/button-terminal@2x.png b/images/button-terminal@2x.png new file mode 100644 index 0000000000..e96502aa66 Binary files /dev/null and b/images/button-terminal@2x.png differ diff --git a/src/ContainerDetails.react.js b/src/ContainerDetails.react.js index 04907f9edd..fc09f889e7 100644 --- a/src/ContainerDetails.react.js +++ b/src/ContainerDetails.react.js @@ -14,6 +14,7 @@ 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'); var ContainerDetails = React.createClass({ mixins: [Router.State, Router.Navigation], @@ -270,6 +271,30 @@ var ContainerDetails = React.createClass({ } }.bind(this)); }, + handleItemMouseEnterRun: function () { + var $action = $(this.getDOMNode()).find('.action .run'); + $action.css("visibility", "visible"); + }, + handleItemMouseLeaveRun: function () { + var $action = $(this.getDOMNode()).find('.action .run'); + $action.css("visibility", "hidden"); + }, + handleItemMouseEnterRestart: function () { + var $action = $(this.getDOMNode()).find('.action .restart'); + $action.css("visibility", "visible"); + }, + handleItemMouseLeaveRestart: function () { + var $action = $(this.getDOMNode()).find('.action .restart'); + $action.css("visibility", "hidden"); + }, + handleItemMouseEnterTerminal: function () { + var $action = $(this.getDOMNode()).find('.action .terminal'); + $action.css("visibility", "visible"); + }, + handleItemMouseLeaveTerminal: function () { + var $action = $(this.getDOMNode()).find('.action .terminal'); + $action.css("visibility", "hidden"); + }, render: function () { var self = this; @@ -544,17 +569,17 @@ var ContainerDetails = React.createClass({
-
- - Run +
+ + Run
-
- - Restart +
+ + Restart
-
- - Terminal +
+ + Terminal
diff --git a/src/ContainerHome.react.js b/src/ContainerHome.react.js index 8f3a2a7304..673fc3b954 100644 --- a/src/ContainerHome.react.js +++ b/src/ContainerHome.react.js @@ -2,8 +2,25 @@ var $ = require('jquery'); var React = require('react/addons'); var ContainerHome = React.createClass({ + handleResize: function () { + $('.web-preview').height(window.innerHeight - 240); + $('.mini-logs').height(window.innerHeight / 2 - 100); + $('.folders').height(window.innerHeight / 2 - 150); + }, + componentDidMount: function() { + $('.web-preview').height(window.innerHeight - 240); + $('.mini-logs').height(window.innerHeight / 2 - 100); + $('.folders').height(window.innerHeight / 2 - 150); + window.addEventListener('resize', this.handleResize); + }, + componentWillUnmount: function() { + window.removeEventListener('resize', this.handleResize); + }, componentDidUpdate: function () { // Scroll logs to bottom + $('.web-preview').height(window.innerHeight - 240); + $('.mini-logs').height(window.innerHeight / 2 - 100); + $('.folders').height(window.innerHeight / 2 - 150); var parent = $('.mini-logs'); if (parent.length) { if (parent.scrollTop() >= this._oldHeight) { @@ -17,18 +34,33 @@ var ContainerHome = React.createClass({ var preview; if (this.props.defaultPort) { preview = ( - +
+

Web Preview

+
+ +
+
); } return (
-

Web Preview

-
+
{preview}
-
- {this.props.logs} +
+
+

Logs

+
+ {this.props.logs} +
+
+
+

Edit Files

+
+

Buncha folders

+
+
diff --git a/styles/containers.less b/styles/containers.less index 11afe4eeb8..8336abd233 100644 --- a/styles/containers.less +++ b/styles/containers.less @@ -288,12 +288,6 @@ .btn-delete { font-size: 24px; color: white; - opacity: 0.8; - transition: all 0.25s; - &:hover { - opacity: 1; - color: white; - } } .state-new { .at2x('container-white.png', 20px, 20px); @@ -367,10 +361,6 @@ .btn-delete { font-size: 24px; color: @gray-lighter; - transition: all 0.25s; - &:hover { - color: @brand-action; - } } } @@ -510,31 +500,30 @@ .details-header-actions { flex: 1 auto; text-align: left; - margin-top: -5px; + margin-top: -12px; .action { display: inline-block; .action-icon { - &.icon:before { - text-align: center; - } color: @gray-normal; font-size: 30px; - margin-right: 30px; - transition: all 0.25s; - &:hover { - color: @brand-action; - /*background: linear-gradient(-180deg, darken(#24B8EB, 10%) 4%, darken(#24A3EB, 10%) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent;*/ - } + margin-right: 20px; } .btn-label { position: relative; - top: -9px; + top: 0px; display: block; color: @brand-action; font-size: 10px; - display: none; + &.run { + left: 8px; + } + &.restart { + left: 1px; + } + &.terminal { + left: -2px; + } + visibility: hidden; } } } @@ -543,7 +532,7 @@ flex: 1 auto; text-align: right; margin-right: 3px; - margin-top: 6px; + margin-top: 3px; .tab { margin-left: 16px; padding: 6px 10px; @@ -635,27 +624,58 @@ background-color: #FFF; &.home { background-color: #F9F9F9; - flex: 1; - .widget { - border-radius: 4px; - border: 1px solid @gray-lightest; - &.web-preview { - iframe { - border: 0; - border-radius: 4px; + .content { + display: flex; + flex: 1 auto; + flex-direction: row; + padding: 10px 27px; + .left { + width: 60%; + flex-direction: column; + .web-preview { + margin-right: 30px; + .widget { + background-color: white; + width: 100%; + height: 100%; + border-radius: 4px; + border: 1px solid @gray-lightest; + iframe { + border: 0; + border-radius: 4px; + width: 100%; + height: 100%; + } + } } } - &.mini-logs { - background-color: @gray-darkest; - color: @gray-lightest; - padding: 10px; - width: 300px; - height: 300px; - overflow: hidden; - font-family: Menlo; - font-size: 8px; - p { - margin-bottom: 5px; + .right { + width: 40%; + flex-direction: column; + .mini-logs { + margin-bottom: 50px; + .widget { + border-radius: 4px; + border: 1px solid @gray-lightest; + background-color: @gray-darkest; + color: @gray-lightest; + height: 100%; + padding: 10px; + overflow: scroll; + font-family: Menlo; + font-size: 8px; + white-space: pre-wrap; + p { + margin-bottom: 0px; + } + } + } + .folders { + .widget { + background-color: white; + border-radius: 4px; + border: 1px solid @gray-lightest; + } } } } @@ -669,7 +689,7 @@ color: @gray-lightest; white-space: pre-wrap; p { - margin-bottom: 8px; + margin-bottom: 0px; } } .settings { diff --git a/styles/theme.less b/styles/theme.less index b9fb909e2d..132faa7545 100644 --- a/styles/theme.less +++ b/styles/theme.less @@ -122,7 +122,7 @@ input[type="text"] { background-color: transparent; color: @gray-normal; border: 1px solid @gray-normal; - border-radius: 25px; + border-radius: 40px; box-shadow: none; font-weight: 400; text-shadow: none; @@ -173,6 +173,7 @@ input[type="text"] { &.only-icon { padding: 6px 7px 6px 7px; &.small { + width: 22px; padding: 2px 5px 3px 5px; } }