From ffb2ade67c30d30bcce66b254e481b8dcc34a1ac Mon Sep 17 00:00:00 2001 From: Sean Li Date: Thu, 5 Feb 2015 21:41:16 -0800 Subject: [PATCH 1/4] Improved container home page. --- src/ContainerHome.react.js | 24 +++++++++++-- styles/containers.less | 70 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+), 3 deletions(-) diff --git a/src/ContainerHome.react.js b/src/ContainerHome.react.js index a5660cee25..52d930a802 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 052b3d5c40..f74a8b113a 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; From a14469e8e5f7705ea80c63f49c2d2087aa6666e8 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Thu, 5 Feb 2015 21:44:17 -0800 Subject: [PATCH 2/4] Minor UI tweaks on mini logs. --- src/ContainerHome.react.js | 2 +- styles/containers.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ContainerHome.react.js b/src/ContainerHome.react.js index 52d930a802..72eae2ec0d 100644 --- a/src/ContainerHome.react.js +++ b/src/ContainerHome.react.js @@ -86,7 +86,7 @@ var ContainerHome = React.createClass({

Logs

{this.props.logs} -
Full Logs
+
View Logs
diff --git a/styles/containers.less b/styles/containers.less index f74a8b113a..1609bb0fd2 100644 --- a/styles/containers.less +++ b/styles/containers.less @@ -705,7 +705,7 @@ color: @gray-lightest; height: 100%; padding: 10px; - overflow: scroll; + overflow: hidden; font-family: Menlo; font-size: 8px; white-space: pre-wrap; From 459ca9c6e53c1aef328c59016640b006001956ba Mon Sep 17 00:00:00 2001 From: Sean Li Date: Thu, 5 Feb 2015 21:55:47 -0800 Subject: [PATCH 3/4] Restyle. --- src/ContainerDetails.react.js | 3 +-- src/NewContainer.react.js | 1 + styles/containers.less | 8 +++++++- styles/theme.less | 5 +++++ 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/ContainerDetails.react.js b/src/ContainerDetails.react.js index 39183fc230..900ceb04b5 100644 --- a/src/ContainerDetails.react.js +++ b/src/ContainerDetails.react.js @@ -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'); @@ -418,7 +417,7 @@ var ContainerDetails = React.createClass({ if (this.state.progress) { body = (
-

Downloading

+

Downloading

); diff --git a/src/NewContainer.react.js b/src/NewContainer.react.js index 3fbe6ac05c..671b8028fc 100644 --- a/src/NewContainer.react.js +++ b/src/NewContainer.react.js @@ -77,6 +77,7 @@ var NewContainer = React.createClass({ if (err) { throw err; } + $(document.body).find('.new-container-item').parent().fadeOut(); }.bind(this)); }, handleDropdownClick: function (name) { diff --git a/styles/containers.less b/styles/containers.less index 1609bb0fd2..30dca5f810 100644 --- a/styles/containers.less +++ b/styles/containers.less @@ -585,6 +585,9 @@ &.stopped { color: @gray-lighter; } + &.downloading { + color: @brand-action; + } } /*.details-header-actions { @@ -618,9 +621,12 @@ } .details-progress { - margin: 26% auto 0; + margin: 20% auto 0; text-align: center; width: 300px; + h2 { + margin-bottom: 20px; + } } .details-panel { diff --git a/styles/theme.less b/styles/theme.less index 132faa7545..2a404974b3 100644 --- a/styles/theme.less +++ b/styles/theme.less @@ -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; From 8c66ff9b79e6feb2a17d3ea30bb1d4661e3dd0fb Mon Sep 17 00:00:00 2001 From: Sean Li Date: Thu, 5 Feb 2015 22:07:26 -0800 Subject: [PATCH 4/4] Added KI logo. --- images/logo.png | Bin 0 -> 571 bytes images/logo@2x.png | Bin 0 -> 1039 bytes src/Header.react.js | 3 +++ styles/header.less | 8 ++++++++ 4 files changed, 11 insertions(+) create mode 100644 images/logo.png create mode 100644 images/logo@2x.png diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e7817078cd41fa115c4713a9dc0d51b6527c4bc0 GIT binary patch literal 571 zcmV-B0>u4^P)Px$^+`lQR5%fRRJ%$;K@i=&hFmnhKm`rzHJ}n3{~?V^6dO^n5y93U5F51-#6k=8 z8^lJzR;(0+fW*c}j9j92f`UbSBs-o-+_=k)8QAR1nX@M|likQnE_We_hQzN)rRMr$ zu|p2;eSeW0XC1EmP4o7dC+e>kVoyjpVcPQ+RuN%IZVro=7ALh$}f3M3=RV+i#CXlhs(6OvXiiQs=5wsB_kiTQF?_ zItYhH@Qb(TkOhM+3h{`!ZD>+y$DK>1QVkYX4rWZOTFb>E(d@TUdnOUz8foe1u-fK! z!Kt*%{9uJdJ8{oD8;Zqz3^#3x!nfOY-BFC9+2jN*)z5QvT{J{%mj+a|KwWiAW; zZ$zaxZ4esJ_BhAY+GV_^;6PvBB{(@I8dk2#b;tPq8+ggBDaZ^JY&)4wrz1!O+GTzS z4}1kLp_>CX_@`yB{7Fjf;xFt)W0Px&$w@>(R9FekSWRdXK@^_d{1n847YjhCMR!GLb{2dDTF-QscGkU=5(RZr%-wsHq~Lruu`LlUnHh^G7=8IN>5HE zVeBheT?CVm2Yw9hR1{^q$Pe}|p6!!i97du$L{WS^yIqG#OfM+P#ENblW41!JPr~kA zk})psoO#LUCQRgVdlgk3gpVgU_?SgPPPFOz7Zx+3X+xCK8%&mIH3Li;#x~XOAI9`I z%Oo&O^Ga0HUf6x#jg0hznb&rmNUjOs*x1;nprQ-`T$3oEL;q}-u3vTNNFtFaE}G^s zLg`nh&Doa*m`oTEwQSG@1<%>StA2bNgKv#tlY)&Fb|2+^U>z!Q4cT6jH0;? zki#Nh8Gs$A*n6S?9Q|NK*Y9%lA{G5Z$SLecgXh2ix}HZc`r#up5$rZB8DKh{Zo=vx`XaSQQ~{j$y8=EeDX& zpG91c;_>(*3y!P!Q~bEDybR42y@c#{0Iujt0R*_SExMjx9oZ5JeFnO>t9`-mZoC$> z3T&1d^a`tYb(|+a6huB64zufhWutUGXm+KSCG-S{g7{X6tkio_lEi`#!24`AgvxNG zmxc8PC`gWbTneVNz-*~eC^5Wdw()!#d_JinS~EZ^sRYgN;{u_QXJuUgmk3!C&8b{Y z1HE0mm38Xs0ysD@@CKLEX=hM-A2hdt=9pa$0?Kl)=9KQc|`v-&GEtT9pP4WN$002ov JPDHLkV1o2B-%S7j literal 0 HcmV?d00001 diff --git a/src/Header.react.js b/src/Header.react.js index e91bf9beaa..69b20baf08 100644 --- a/src/Header.react.js +++ b/src/Header.react.js @@ -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({
+ ); } else { @@ -53,6 +55,7 @@ var Header = React.createClass({
+ ); } diff --git a/styles/header.less b/styles/header.less index a55c503aab..58337f4a67 100644 --- a/styles/header.less +++ b/styles/header.less @@ -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;