From 29c277babe2b46e732bf55645e5ed56226a742a4 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Mon, 8 Jun 2015 13:56:21 -0700 Subject: [PATCH] Volumes and log home widget. --- src/components/ContainerHome.react.js | 6 +- src/components/ContainerHomeFolders.react.js | 10 ++- src/components/ContainerHomeLogs.react.js | 12 +++- src/components/ContainerHomePreview.react.js | 8 ++- styles/container-home.less | 75 ++++++++++++-------- styles/mixins.less | 15 +++- styles/new-container.less | 3 +- styles/right-panel.less | 3 +- 8 files changed, 87 insertions(+), 45 deletions(-) diff --git a/src/components/ContainerHome.react.js b/src/components/ContainerHome.react.js index 6b63bab4b3..35656de7dc 100644 --- a/src/components/ContainerHome.react.js +++ b/src/components/ContainerHome.react.js @@ -27,7 +27,7 @@ var ContainerHome = React.createClass({ }, handleResize: function () { - $('.left .wrapper').height(window.innerHeight - 240); + $('.left .wrapper').height(window.innerHeight - 105); $('.right .wrapper').height(window.innerHeight / 2 - 100); }, @@ -93,10 +93,10 @@ var ContainerHome = React.createClass({
- +
- +
diff --git a/src/components/ContainerHomeFolders.react.js b/src/components/ContainerHomeFolders.react.js index 4f769ce766..0d7206f214 100644 --- a/src/components/ContainerHomeFolders.react.js +++ b/src/components/ContainerHomeFolders.react.js @@ -64,7 +64,7 @@ var ContainerHomeFolder = React.createClass({ } var folders = _.map(this.props.container.Volumes, (val, key) => { - var firstFolder = key.split(path.sep)[1]; + var firstFolder = key; return (
@@ -76,9 +76,13 @@ var ContainerHomeFolder = React.createClass({ if (this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running) { return (
-

Edit Files

- {folders} +
+
Edit Files
+
+
+ {folders} +
Change Folders
diff --git a/src/components/ContainerHomeLogs.react.js b/src/components/ContainerHomeLogs.react.js index d31a4df92e..5f088df827 100644 --- a/src/components/ContainerHomeLogs.react.js +++ b/src/components/ContainerHomeLogs.react.js @@ -69,14 +69,22 @@ module.exports = React.createClass({ if (logs.length === 0) { logs = "No logs for this container."; } + var tempDisp = ( +
+ +
View Logs
+
+ ); return (
-

Logs

+
+
Container Logs
+
{logs}
-
View Logs
+
); } diff --git a/src/components/ContainerHomePreview.react.js b/src/components/ContainerHomePreview.react.js index 69bba09568..e5c9e6425b 100644 --- a/src/components/ContainerHomePreview.react.js +++ b/src/components/ContainerHomePreview.react.js @@ -51,8 +51,10 @@ var ContainerHomePreview = React.createClass({ var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'}); preview = (
-

Web Preview

+
+
WEB PREVIEW
+
{frame}
Open in Browser
@@ -73,8 +75,10 @@ var ContainerHomePreview = React.createClass({ preview = (
-

IP & Ports

+
+
IP & PORTS
+

You can access this container using the following IP address and port:

diff --git a/styles/container-home.less b/styles/container-home.less index e13bc06256..227cc5c096 100644 --- a/styles/container-home.less +++ b/styles/container-home.less @@ -5,11 +5,11 @@ display: flex; flex: 1 auto; flex-direction: row; - padding: 10px 27px; + padding: 1rem; .left { width: 60%; flex-direction: column; - margin-right: 30px; + margin-right: 1rem; } .right { width: 40%; @@ -29,8 +29,9 @@ .widget { .widget-style(); background-color: white; + padding: 0.5rem; width: 100%; - height: 95%; + height: 100%; p { font-size: 13px; color: @gray-normal; @@ -94,7 +95,7 @@ left: -100%; top: -100%; height: 400%; - width: 401%; + width: 400%; transform: scale(0.5); } .frame-overlay { @@ -125,24 +126,30 @@ } } .mini-logs { - margin-bottom: 50px; .widget { .widget-style(); - background-color: @gray-darkest; - color: @gray-lightest; + .top-bar { + .widget-bar-style(); + background-color: darken(@gray-darkest, 3%); + border-bottom: 1px solid rgba(255,255,255,0.1); + color: white; + } height: 100%; - padding: 10px; - font-family: @font-code; - font-size: 7px; - white-space: pre; .logs { - overflow: hidden; + background-color: @gray-darkest; + color: @gray-lightest; + font-family: @font-code; + font-size: 9px; + white-space: pre-wrap; + -webkit-user-select: text; + padding: 1.2rem; + overflow: auto; height: 100%; } p { margin-bottom: 0px; } - .mini-logs-overlay { + /*.mini-logs-overlay { position: absolute; top: 0; left: 0; @@ -167,29 +174,37 @@ background-color: @gray-darkest; opacity: 0.75; } - } + }*/ } } .folders { .widget { .widget-style(); - padding: 10px 5px; background-color: white; - display: flex; - .folder { - width: 110px; - padding: 5px; - &:hover { - background-color: darken(@color-background, 2%); - border-radius: 10px; - } - img { - display: block; - margin: 0 auto; - } - .text { - margin-top: 4px; - text-align: center; + .top-bar { + .widget-bar-style(); + } + .folders-list { + .folder { + display: flex; + padding: 1rem; + border-bottom: 1px solid @color-divider; + &:hover { + background-color: @color-box-button; + } + img { + width: 32px; + min-width: 32px; + height: 25px; + } + .text { + margin-top: 0.3rem; + margin-left: 1rem; + width: 180px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } } } } diff --git a/styles/mixins.less b/styles/mixins.less index 5ccf6772c8..c076054771 100644 --- a/styles/mixins.less +++ b/styles/mixins.less @@ -23,12 +23,23 @@ } .widget-style() { - border-radius: 4px; - border: 1px solid @gray-lighter; + border-radius: @border-radius; + border: 1px solid @color-divider; position: relative; overflow: hidden; } +.widget-bar-style() { + height: 40px; + text-transform: uppercase; + font-size: 12px; + font-weight: 500; + padding: 1.1rem; + background-color: white; + color: @gray-light; + border-bottom: 1px solid @color-divider; +} + .fade-in() { opacity: 0; -webkit-animation: fadein ease-in 1; diff --git a/styles/new-container.less b/styles/new-container.less index 01a3f2b70b..95efb3246a 100644 --- a/styles/new-container.less +++ b/styles/new-container.less @@ -141,7 +141,8 @@ .results-filter-title { color: @gray-lighter; font-weight: 500; - padding-top: 0.7rem; + position: relative; + top: 1px; margin-right: 0.7rem; } } diff --git a/styles/right-panel.less b/styles/right-panel.less index fd8d8d2749..04a2cb928e 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -111,7 +111,7 @@ color: @gray-light; border-bottom: 3px solid transparent; text-align: center; - min-width: 28px; + min-width: 20px; padding-bottom: 0.2rem; &.active { color: @gray-darkest; @@ -121,7 +121,6 @@ opacity: 0.5; &:hover { color: @gray-light; - border-bottom: 3px solid transparent; } } &:hover {