show vnc and log cards horizontally

aerokube · Aug 21, 2017 · e5d9226 · e5d9226
1 parent 88b3f41
commit e5d9226
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 56 deletions.
diff --git a/web/src/components/Log/LogInfo.js b/web/src/components/Log/LogInfo.js
diff --git 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 (
             <div className="log">
                 <div className="log-card">
                     <div className="log-card__header">
                         <Back/>
-                        <LogInfo session={session}/>
                     </div>
 
                     <div className="log-card__content">

diff --git 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
@@ -16,20 +16,37 @@ export default class Session extends Component {
                     browser
                 }}/>
 
-                <Log { ... {
-                    origin,
-                    session,
-                    browser
-                }} />
-
-                <VncCard { ... {
-                    origin,
-                    session,
-                    browser
-                }}/>
+                <div className="session__interactive">
+                    <VncContainer {... {
+                        origin,
+                        session,
+                        browser
+                    }}/>
+                    <div className="session-interactive-card">
+                        <Log {... {
+                            origin,
+                            session,
+                            browser
+                        }} />
+                    </div>
 
+                </div>
             </div>
         );
     }
 }
 
+function VncContainer({origin, session, browser = {}}) {
+    if (browser.caps && !browser.caps.enableVNC) {
+        return <span/>
+    }
+
+    return <div className="session-interactive-card">
+        <VncCard {... {
+            origin,
+            session,
+            browser
+        }}/>
+    </div>;
+}
+
diff --git 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
@@ -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
@@ -49,8 +49,8 @@ export default class VncCard extends Component {
 }
 
 function Back() {
-    return <Link className="control" to="/sessions/">
-        <span title="Back" className="icon dripicons-arrow-thin-left"/>
+    return <Link className="control control_back" to="/sessions/">
+        <div title="Back">X</div>
     </Link>;
 }
 
@@ -76,6 +76,6 @@ function Connection(props) {
 function Fullscreen(props) {
     const {handleFullscreen, fullscreen} = props;
     return <div className="control control_fullscreen" onClick={handleFullscreen}>
-        <span title="Fullscreen" className={'icon dripicons-' + (fullscreen ? 'contract' : 'expand')}/>
+        <div title="Fullscreen" className={'icon dripicons-' + (fullscreen ? 'chevron-down' : 'chevron-up')}/>
     </div>;
 }
diff --git 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;