Add sidebar component that is ready to be designed and instrumented

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { AceEditorModule } from 'ng2-ace-editor';
 import { AppComponent } from './app.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HeaderComponent } from './header/header.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
 import { LoginComponent } from './web/web.component';
 import { MarkdownService } from './services/markdown.service';
 import { TerminadoService } from './services/terminado.service';
@@ -27,6 +28,7 @@ import { DeploymentNotificationService } from './services/deployment-notificatio
   declarations: [
     AppComponent,
     HeaderComponent,
+    SidebarComponent,
     LoginComponent,
     WebideComponent,
     MessagesComponent,

src/app/dashboard/dashboard.component.html

@@ -1,17 +1,23 @@
-<div class="tfw-grid-main-components">
-  <div class="tfw-header"><app-header></app-header></div>
-  <div class="tfw-messages"><app-messages></app-messages></div>
-  <div class="tfw-web tao-grid-top-left"
-       [ngClass]="{ 'deploy-blur': deploying }">
-    <div class="iframe-container">
-      <iframe class="iframe"
-              scrolling="yes" frameborder="0"
-              src="about:blank"></iframe>
+<div [attr.tfw-layout]="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>
+    <div class="tfw-web tao-grid-top-left"
+         [ngClass]="{ 'deploy-blur': deploying }">
+      <div class="iframe-container">
+        <iframe class="iframe"
+                scrolling="yes" frameborder="0"
+                src="about:blank"></iframe>
+      </div>
     </div>
+    <div class="tfw-webide"><app-webide></app-webide></div>
+    <div class="tfw-terminal">
+        <app-terminal></app-terminal>
+    </div>
+    <div class="tfw-sidebar">
+      <app-sidebar></app-sidebar>
+    </div>
+
+    <div class="tfw-terminal-footer"></div>
   </div>
-  <div class="tfw-webide"><app-webide></app-webide></div>
-  <div class="tfw-terminal">
-      <app-terminal></app-terminal>
-  </div>
-  <div class="tfw-terminal-footer"></div>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -11,11 +11,9 @@
   grid-template-columns: repeat($grid-columns-count, 1fr);
   grid-template-rows: repeat($grid-rows-count, 1fr);
 
-  @include position-grid-items(map_get($layout,$layout-template),'.tfw-');
-
   .tfw-header,
   .tfw-messages {
-    @if ($layout-template == 'default') {
+    @if (str_slice($layout-key, 0, str_length('default')) == 'default') {
       border: 2px solid $tao-gray-100;
       border-top: 0;
       border-left: 0;
@@ -34,7 +32,7 @@
     background-color: $tao-gray-50;
     overflow-y: scroll;
 
-    @if ($layout-template != 'default') {
+    @if (str_slice($layout-key, 0, str_length('default')) != 'default') {
       max-height: 95vmin;
     }
     @else {
@@ -61,14 +59,23 @@
     background-color: $tao-plum-900;
   }
 
+  .tfw-sidebar {
+    background-color: $tao-turqoise-800;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+  }
+
   .tfw-terminal {
     overflow-y: hidden;
     border: 1px solid $tao-plum-100;
     border-bottom: 0;
     background-color: $tao-gray-800;
-
-    @if ($layout-template != 'vraw') {
+    @if (str_slice($layout-key, 0, str_length('vraw')) == 'vraw') {
       border-left: 0;
+      border-top: 0;
     }
   }
 }
@@ -76,4 +83,3 @@
 .deploy-blur {
   filter: blur(3px);
 }
-

src/app/dashboard/dashboard.component.ts

@@ -14,6 +14,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   deploying = false;
   deploymentNotificationSubscription: Subscription;
   layout: string = config.dashboard.defaultLayout;
+  layout = 'vraw-closed';
   command_handlers = {'layout': this.layoutHandler.bind(this)};
 
   constructor(private deploymentNotificationService: DeploymentNotificationService,
@@ -34,7 +35,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
   layoutHandler(data: LayoutCommand) {
     if (data.layout.match('vraw-open|vraw-closed|hraw|default-open|default-closed')) {
       this.layout = data.layout;
-    } else {
+    }
+    else {
       console.log('Invalid webide layout "' + data.layout + '" received!');
     }
   }

src/app/messages/messages.component.html

@@ -1,7 +1,7 @@
 <div class="tfw-messages-main">
   <div class="tfw-grid-messages-header">
     <div class="tao-grid-top-left"><span>Instructions</span></div>
-    <div class="tao-grid-center-right"><button *ngIf="showNextButton" class="tao-btn-rainbow">Next</button></div>
+    <div class="tao-grid-center-right"><button class="tao-btn-rainbow">Next</button></div>
   </div>
   <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
     <div class="tfw-grid-message-header">

src/app/sidebar/sidebar.component.html

@@ -0,0 +1 @@
+<div> IDE </div>

src/app/sidebar/sidebar.component.scss

@@ -0,0 +1,6 @@
+@import "../../assets/scss/variables.scss";
+
+.tfw-webide-pin{
+
+
+}

src/app/sidebar/sidebar.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/terminal/terminal.component.scss

@@ -2,8 +2,6 @@
 @import "../../app/dashboard/dashboard.component.scss";
 
 
-
-
 .tfw-xterm {
   max-height: 100%;
   height: 100%;

src/app/webide/webide.component.scss

@@ -1,4 +1,5 @@
 @import "../../assets/scss/variables.scss";
+
 .tfw-grid-webide-statusbar {
   display: grid;
   height: $tao-navbar-height;