Use fix sidebar to instrument and control layout changes

src/app/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<div [attr.tfw-layout]="layout">
+<div [attr.class]="layout">
   <div class="tfw-grid-main-components">
     <div class="tfw-header"><app-header></app-header></div>
     <div class="tfw-messages"><app-messages></app-messages></div>
@@ -10,7 +10,9 @@
                 src="about:blank"></iframe>
       </div>
     </div>
-    <div class="tfw-webide"><app-webide></app-webide></div>
+    <div class="tfw-ide">
+      <app-ide></app-ide>
+    </div>
     <div class="tfw-terminal">
         <app-terminal></app-terminal>
     </div>

src/app/dashboard/dashboard.component.scss

@@ -2,6 +2,24 @@
 @import "../../assets/scss/mixins/layout.scss";
 
 
+@mixin set-tfw-web($layouts-key) {
+
+  .tfw-web {
+    .iframe-container {
+      display: flex;
+      overflow: hidden;
+      @include set-component-size($layouts-key, 'web');
+    }
+
+    .iframe {
+      flex-grow: 1;
+      border: none;
+      margin: 0;
+      padding: $small;
+    }
+  }
+}
+
 .tfw-grid-main-components {
   display: grid;
   width: 100vw;
@@ -13,7 +31,9 @@
 
   .tfw-header,
   .tfw-messages {
-    @if (str_slice($layout-key, 0, str_length('default')) == 'default') {
+
+    // Check whether the layout contains a web component
+    div[class*="web"] & {
       border: 2px solid $tao-gray-100;
       border-top: 0;
       border-left: 0;
@@ -31,51 +51,34 @@
     padding-top: $hair;
     background-color: $tao-gray-50;
     overflow-y: scroll;
+    max-height: 55vmin;
 
-    @if (str_slice($layout-key, 0, str_length('default')) != 'default') {
+    div[class*="web"] & {
       max-height: 95vmin;
     }
-    @else {
-      max-height: 55vmin;
-    }
   }
 
-  .tfw-web {
-    .iframe-container {
-      display: flex;
-      overflow: hidden;
-      @include set-component-size('web');
-    }
-
-    .iframe {
-      flex-grow: 1;
-      border: none;
-      margin: 0;
-      padding: $small;
-    }
-  }
-
-  .tfw-webide {
+  .tfw-ide {
     background-color: $tao-plum-900;
   }
 
   .tfw-sidebar {
-    background-color: $tao-turqoise-800;
+    background-color: $tao-turqoise-300;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
+    padding-top: 75px;
+    border-left: 1px solid $tao-plum-500;
 
   }
 
   .tfw-terminal {
     overflow-y: hidden;
-    border: 1px solid $tao-plum-100;
-    border-bottom: 0;
     background-color: $tao-gray-800;
-    @if (str_slice($layout-key, 0, str_length('vraw')) == 'vraw') {
-      border-left: 0;
-      border-top: 0;
+
+    div[class*="web"] & {
+      border-top: 1px solid $tao-plum-100;
     }
   }
 }
@@ -83,3 +86,39 @@
 .deploy-blur {
   filter: blur(3px);
 }
+
+.terminal-ide-web {
+  @include set-tfw-web('terminal-ide-web');
+  @include position-grid-items(map_get($layouts, 'terminal-ide-web'),'.tfw-');
+}
+
+.terminal-web{
+  @include set-tfw-web('terminal-web');
+  @include position-grid-items(map_get($layouts,'terminal-web'),'.tfw-');
+}
+
+.terminal-ide-vertical {
+  @include position-grid-items(map_get($layouts,'terminal-ide-vertical'),'.tfw-');
+}
+
+.terminal-ide-horizontal {
+  @include position-grid-items(map_get($layouts,'terminal-ide-horizontal'),'.tfw-');
+}
+
+.ide-web-vertical {
+  @include set-tfw-web('ide-web-vertical');
+  @include position-grid-items(map_get($layouts,'ide-web-vertical'),'.tfw-');
+}
+
+.terminal-only {
+  @include position-grid-items(map_get($layouts,'terminal-only'),'.tfw-');
+}
+
+.ide-only {
+  @include position-grid-items(map_get($layouts,'ide-only'),'.tfw-');
+}
+
+.web-only {
+  @include set-tfw-web('web-only');
+  @include position-grid-items(map_get($layouts,'web-only'),'.tfw-');
+}

src/app/dashboard/dashboard.component.ts

@@ -13,8 +13,7 @@ import { config } from '../config';
 export class DashboardComponent implements OnInit, OnDestroy {
   deploying = false;
   deploymentNotificationSubscription: Subscription;
-  layout: string = config.dashboard.defaultLayout;
-  layout = 'vraw-closed';
+  layout: string = config.dashboard.defaultLayout ;
   command_handlers = {'layout': this.layoutHandler.bind(this)};
 
   constructor(private deploymentNotificationService: DeploymentNotificationService,
@@ -33,11 +32,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   layoutHandler(data: LayoutCommand) {
-    if (data.layout.match('vraw-open|vraw-closed|hraw|default-open|default-closed')) {
+    if (data.layout.match('terminal-ide-vertical|terminal-only|hraw|default-open|default-closed')) {
       this.layout = data.layout;
     }
     else {
-      console.log('Invalid webide layout "' + data.layout + '" received!');
+      console.log('Invalid ide layout "' + data.layout + '" received!');
     }
   }