From e5d9226fd7ff36b74f21934d0e81be1b43c18910 Mon Sep 17 00:00:00 2001 From: Kirill Merkushev Date: Mon, 21 Aug 2017 16:40:23 +0300 Subject: [PATCH] show vnc and log cards horizontally --- web/src/components/Log/LogInfo.js | 15 ------- web/src/components/Log/index.js | 5 --- web/src/components/Log/style.scss | 7 ++- web/src/components/Session/index.js | 39 +++++++++++----- web/src/components/Session/style.scss | 13 ++++++ web/src/components/Sessions/style.scss | 2 +- web/src/components/VncCard/index.js | 6 +-- web/src/components/VncCard/style.scss | 61 +++++++++++++++++++------- 8 files changed, 92 insertions(+), 56 deletions(-) delete mode 100644 web/src/components/Log/LogInfo.js diff --git a/web/src/components/Log/LogInfo.js b/web/src/components/Log/LogInfo.js deleted file mode 100644 index f294f54d..00000000 --- a/web/src/components/Log/LogInfo.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -const LogInfo = ({session}) => { - return ( -
-
- LOG - :: - {session.substring(0, 8)} -
-
- ); -}; - -export default LogInfo diff --git a/web/src/components/Log/index.js b/web/src/components/Log/index.js index c2c567c3..780e3fd6 100644 --- a/web/src/components/Log/index.js +++ b/web/src/components/Log/index.js @@ -6,8 +6,6 @@ import "xterm/dist/xterm.css"; import "./style.scss"; import colors from "ansi-256-colors"; -import LogInfo from "./LogInfo"; - export default class Log extends Component { componentDidMount() { const {session, origin} = this.props; @@ -84,14 +82,11 @@ export default class Log extends Component { } render() { - const {session} = this.props; - return (
-
diff --git a/web/src/components/Log/style.scss b/web/src/components/Log/style.scss index d248a384..c4584ba8 100644 --- a/web/src/components/Log/style.scss +++ b/web/src/components/Log/style.scss @@ -12,11 +12,10 @@ $light-font: #999; flex-wrap: wrap; justify-content: center; align-items: center; - margin: 20px 0; .log-card { height: 450px; - width: 800px; + width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; @@ -30,8 +29,8 @@ $light-font: #999; background-color: $background-color-lighter; .control { - width: 12px; - height: 12px; + width: 15px; + height: 15px; border-radius: 50%; background-color: $color-disconnected; text-align: center; diff --git a/web/src/components/Session/index.js b/web/src/components/Session/index.js index 613d48ee..cda835c3 100644 --- a/web/src/components/Session/index.js +++ b/web/src/components/Session/index.js @@ -16,20 +16,37 @@ export default class Session extends Component { browser }}/> - - - +
+ +
+ +
+
); } } +function VncContainer({origin, session, browser = {}}) { + if (browser.caps && !browser.caps.enableVNC) { + return + } + + return
+ +
; +} + diff --git a/web/src/components/Session/style.scss b/web/src/components/Session/style.scss index cdc494eb..da8188ac 100644 --- a/web/src/components/Session/style.scss +++ b/web/src/components/Session/style.scss @@ -8,6 +8,19 @@ $background-color-lighter: #3d444c; width: 100%; margin-top: 90px; + &__interactive { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + .session-interactive-card { + max-width: 800px; + width: 45%; + min-width: 450px; + margin: 20px; + } + .session-info { color: #fff; padding: 0 30px; diff --git a/web/src/components/Sessions/style.scss b/web/src/components/Sessions/style.scss index 4544f2b9..8b5362af 100644 --- a/web/src/components/Sessions/style.scss +++ b/web/src/components/Sessions/style.scss @@ -74,7 +74,7 @@ $color-session-name: #555f6a; &__with-vnc { background-color: $color-accent; padding: 0 10px; - line-height: 26px; + line-height: 30px; width: 45px; text-align: center; } diff --git a/web/src/components/VncCard/index.js b/web/src/components/VncCard/index.js index 4f4181b0..a96a02ce 100644 --- a/web/src/components/VncCard/index.js +++ b/web/src/components/VncCard/index.js @@ -49,8 +49,8 @@ export default class VncCard extends Component { } function Back() { - return - + return +
X
; } @@ -76,6 +76,6 @@ function Connection(props) { function Fullscreen(props) { const {handleFullscreen, fullscreen} = props; return
- +
; } diff --git a/web/src/components/VncCard/style.scss b/web/src/components/VncCard/style.scss index e01f9115..0683d2e8 100644 --- a/web/src/components/VncCard/style.scss +++ b/web/src/components/VncCard/style.scss @@ -1,8 +1,8 @@ $color-disconnected: #ff6e59; $color-connecting: #6883d3; $color-disconnecting: #ca9eff; -$color-fullscreen: #555f6a; -$color-base-control: #59a781; +$color-base-control: #555f6a; +$color-fullscreen: #59a781; $background-color-lighter: #3d444c; .vnc { @@ -13,10 +13,11 @@ $background-color-lighter: #3d444c; &_fullscreen { position: absolute; - height: 110%; + height: 100%; width: 100%; z-index: 2; top: 0; + left: 0; } .vnc-connection-status { @@ -53,9 +54,9 @@ $background-color-lighter: #3d444c; .vnc-card { height: 450px; - width: 800px; + width: 100%; display: flex; - flex-wrap: wrap; + flex-direction: column; box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .12); &_fullscreen { @@ -65,40 +66,66 @@ $background-color-lighter: #3d444c; } &_small { - height: 160px; - width: 80px; + height: 30px; + width: 65px; } &__controls { - width: 80px; + height: 30px; + width: 100%; display: flex; - flex-direction: column; align-items: center; background-color: $background-color-lighter; .control { - width: 100%; - line-height: 70px; - padding-top: 10px; - font-size: 2em; - background-color: $color-base-control; + width: 15px; + height: 15px; + line-height: 15px; + border-radius: 50%; + background-color: $color-disconnected; text-align: center; text-decoration: none; + margin-left: 10px; + font-size: 10px; color: #fff; transition: background-color 0.5s ease-out 0s; &_fullscreen { cursor: pointer; background-color: $color-fullscreen; - color: #ccc; + color: $color-fullscreen; + + &:hover { + color: #fff; + } + } + + &_back { + cursor: pointer; + background-color: $color-disconnected; + color: $color-disconnected; + + &:hover { + color: #fff; + } } &_disconnected { background-color: $color-disconnected; + height: 30px; + width: 30px; + line-height: 30px; + font-size: 1em; + border-radius: 0; } &_connecting { background-color: $color-connecting; + height: 30px; + width: 30px; + line-height: 30px; + font-size: 1em; + border-radius: 0; } &_connected { @@ -112,8 +139,8 @@ $background-color-lighter: #3d444c; } &__content { - width: calc(100% - 80px); - height: 100%; + width: 100%; + height: calc(100% - 30px); display: flex; flex-direction: column; background-color: #000;