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 [attr.tfw-layout]="layout">
-  <div class="tfw-header"><app-header></app-header></div>
+  <div class="tfw-grid-main-components">
-  <div class="tfw-messages"><app-messages></app-messages></div>
+    <div class="tfw-header"><app-header></app-header></div>
-  <div class="tfw-web tao-grid-top-left"
+    <div class="tfw-messages"><app-messages></app-messages></div>
-       [ngClass]="{ 'deploy-blur': deploying }">
+    <div class="tfw-web tao-grid-top-left"
-    <div class="iframe-container">
+         [ngClass]="{ 'deploy-blur': deploying }">
-      <iframe class="iframe"
+      <div class="iframe-container">
-              scrolling="yes" frameborder="0"
+        <iframe class="iframe"
-              src="about:blank"></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 (str_slice($layout-key, 0, str_length('vraw')) == 'vraw') {
-    @if ($layout-template != '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;

src/assets/scss/_variables.scss

@@ -158,7 +158,3 @@ $font-size-h5:            floor(($font-size-base * 1.1));
 
 $tao-navbar-height: 67px;
 $company-logo-width: 130px;
-
-
-// Change this to switch template. Options: 'default', 'vraw', 'hraw'
-$layout-template: 'default';

src/assets/scss/mixins/_layout.scss

@@ -1,62 +1,121 @@
-$grid-columns-count: 5;
+$grid-columns-count: 25;
-$grid-rows-count: 15;
+$grid-rows-count: 25;
 
-$default-layout: (
+$layout-key: 'vraw-open';
-  'header': (1, 2, 1, 2),
+
-  'messages': (1, 2, 2, 10),
+$default-open-layout: (
-  'webide': (4,$grid-rows-count+1, 1, $grid-rows-count+1),
+  'header': (1, 6, 1, 2),
-  'terminal': (1, 4, 10, $grid-rows-count+1),
+  'messages': (1, 6, 2, 10),
-  'web': (2, 4, 1, 10)
+  'webide': (15,$grid-columns-count+1, 1, $grid-rows-count+1),
+  'terminal': (1, 15, 10, $grid-rows-count+1),
+  'web': (6, 15, 1, 10),
+  'sidebar': ()
 );
 
-$vraw-layout: (
+$default-closed-layout: (
-  'header': (1, 2, 1, 2),
+  'header': (1, 6, 1, 2),
-  'messages': (1, 2, 2,$grid-rows-count+1),
+  'messages': (1, 6, 2, 10),
-  'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
+  'webide': (16,$grid-columns-count+1, 1, $grid-rows-count+1),
-  'terminal': (2, 4, 1,$grid-rows-count+1),
+  'terminal': (1, 16, 10, $grid-rows-count+1),
+  'web': (6, 15, 1, 10),
+  'sidebar': ()
+);
+
+$vraw-open-layout: (
+  'header': (1, 6, 1, 2),
+  'messages': (1, 6, 2,$grid-rows-count+1),
+  'webide': (16, $grid-columns-count+1, 1,$grid-rows-count+1),
+  'terminal': (6, 16, 1, $grid-rows-count+1),
   'web': (),
+  'sidebar': (),
+);
+
+$vraw-closed-layout: (
+  'header': (1, 6, 1, 2),
+  'messages': (1, 6, 2,$grid-rows-count+1),
+  'webide': (),
+  'terminal': (6, $grid-columns-count, 1,$grid-rows-count+1),
+  'web': (),
+  'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
 );
 
 $hraw-layout: (
-  'header': (1, 2, 1,$grid-rows-count+1),
+  'header': (1, 4, 1,$grid-rows-count+1),
-  'messages': (1, 2, 2,$grid-rows-count+1),
+  'messages': (1, 4, 2,$grid-rows-count+1),
-  'webide': (2,$grid-rows-count+1, 1, 10),
+  'webide': (4,$grid-columns-count+1, 1, 10),
-  'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count+1),
+  'terminal': (4, $grid-columns-count+1, 10, $grid-rows-count+1),
   'web': (),
+  'sidebar': (),
 );
 
-$layout: (
+$layouts: (
-  'default': $default-layout,
+  'default-open': $default-open-layout,
-  'vraw': $vraw-layout,
+  'default-closed': $default-closed-layout,
+  'vraw-open': $vraw-open-layout,
+  'vraw-closed': $vraw-closed-layout,
   'hraw': $hraw-layout
 );
 
+@mixin set-layout($layout_key) {
+  @if(index(map_keys($layouts), $layout_key)) {
+    $layout: map_get($layouts, $layout_key)
+  }
+  @else {
+    @error 'Invalid layout value: "#{$layout_key}"'
+  }
+}
+
+@function get-layout(){
+  @return map_get($layouts, $layout_key);
+}
 
 @mixin position-grid-items($map, $sel) {
   $sel: if($sel == '' and &, &, $sel);
-  @debug $sel;
 
-  #{$sel} {
+  @each $k, $v in $map {
-    @each $k, $v in $map {
+    #{$sel}#{$k} {
-      @at-root #{$sel}#{$k} {
+      @if (length($v) == 0) {
-        @if (length($v) == 0) {
+        display: none
-          display: none
+      }
-        }
+      @else {
-        @else {
+        grid-column-start: nth($v, 1);
-          grid-column-start: nth($v, 1);
+        grid-column-end: nth($v, 2);
-          grid-column-end: nth($v, 2);
+        grid-row-start: nth($v, 3);
-          grid-row-start: nth($v, 3);
+        grid-row-end: nth($v, 4);
-          grid-row-end: nth($v, 4);
-        }
       }
     }
   }
 }
 
 @mixin set-component-size($key) {
-  $columns-count: nth(map_get($default-layout, $key),2) - nth(map_get($default-layout, $key),1);
+  $tfw-component: map_get(get-layout(), $key);
-  $rows-count: nth(map_get($default-layout, $key),4) - nth(map_get($default-layout, $key),3);
 
-  min-width: #{$columns-count / $grid-columns-count * 100}vw;
+  @if (length($tfw-component) > 0) {
-  min-height: #{$rows-count / $grid-rows-count * 100}vh;
+    $columns-count: nth($tfw-component,2) - nth($tfw-component,1);
+    $rows-count: nth($tfw-component,4) - nth($tfw-component,3);
+
+    min-width: #{$columns-count / $grid-columns-count * 100}vw;
+    min-height: #{$rows-count / $grid-rows-count * 100}vh;
+  }
+}
+
+
+[tfw-layout='vraw-open'] {
+  @include position-grid-items(map_get($layouts,'vraw-open'),'.tfw-');
+}
+
+[tfw-layout='vraw-closed'] {
+  @include position-grid-items(map_get($layouts,'vraw-closed'),'.tfw-');
+}
+
+[tfw-layout='hraw'] {
+  @include position-grid-items(map_get($layouts,'hraw'),'.tfw-');
+}
+
+[tfw-layout='default-open'] {
+  @include position-grid-items(map_get($layouts, 'default-open'),'.tfw-');
+}
+
+[tfw-layout='default-closed'] {
+  @include position-grid-items(map_get($layouts,'default-closed'),'.tfw-');
 }

src/assets/scss/shared/_buttons.scss

@@ -41,14 +41,23 @@
 .tao-btn-rainbow {
   @extend .tao-btn-primary;
   background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 70%,$tao-bright-green-300 100%);
-  transition: all 2s ease;
+  transition: all 0.18s ease;
   color: white;
   border: none;
   text-decoration: none !important;
+  box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
+
+
+  &:active {
+    box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09);
+    background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
+    color: white;
+    padding: 5px 18px;
+  }
 
   &:hover {
-    box-shadow: none;
     background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
+    box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
     color: white;
   }
 }