Use fix sidebar to instrument and control layout changes

src/app/app-routing.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { WebideComponent } from './webide/webide.component';
+import { IdeComponent } from './ide/ide.component';
 import { TerminalComponent } from './terminal/terminal.component';
 import { MessagesComponent } from './messages/messages.component';
 import { TestmessengerComponent } from './testmessenger/testmessenger.component';
@@ -11,7 +11,7 @@ import { config } from './config';
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full'},
   { path: config.dashboard.route, component: DashboardComponent},
-  { path: config.webide.route, component: WebideComponent },
+  { path: config.ide.route, component: IdeComponent },
   { path: config.terminal.route, component: TerminalComponent },
   { path: config.messages.route, component: MessagesComponent },
   { path: config.testmessenger.route, component: TestmessengerComponent }

src/app/app.module.ts

@@ -13,7 +13,7 @@ import { SidebarComponent } from './sidebar/sidebar.component';
 import { LoginComponent } from './web/web.component';
 import { MarkdownService } from './services/markdown.service';
 import { TerminadoService } from './services/terminado.service';
-import { WebideComponent } from './webide/webide.component';
+import { IdeComponent } from './ide/ide.component';
 import { MessagesComponent } from './messages/messages.component';
 import { WebSocketService } from './services/websocket.service';
 import { TerminalComponent } from './terminal/terminal.component';
@@ -30,7 +30,7 @@ import { DeploymentNotificationService } from './services/deployment-notificatio
     HeaderComponent,
     SidebarComponent,
     LoginComponent,
-    WebideComponent,
+    IdeComponent,
     MessagesComponent,
     TerminalComponent,
     DashboardComponent,

src/app/config.ts

@@ -1,24 +1,31 @@
 export const config = {
   dashboard: {
-    'route': 'dashboard',
-    'defaultLayout': 'vraw-open'
+    route: 'dashboard',
+    defaultLayout: 'terminal-ide-vertical',
+    enabledLayouts: [
+      'terminal-ide-vertical',
+      'terminal-ide-horizontal',
+      'terminal-only',
+      'ide-only'
+    ]
+
   },
-  webide: {
-    'route': 'webide',
-    'autoSaveInterval': 444,
-    'defaultCode': 'Loading your file...',
-    'defaultLanguage': 'text',
-    'deployProcessName': 'login',
-    'showDeployButton': true
+  ide: {
+    route: 'ide',
+    autoSaveInterval: 444,
+    defaultCode: 'Loading your file...',
+    defaultLanguage: 'text',
+    deployProcessName: 'login',
+    showDeployButton: true
   },
   terminal: {
-    'route': 'shell'
+    route: 'shell'
   },
   messages: {
-    'route': 'messages',
-    'showNextButton': false
+    route: 'messages',
+    showNextButton: false
   },
   testmessenger: {
-    'route': 'testmessenger'
+    route: 'testmessenger'
   }
 };

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!');
     }
   }
 

src/app/ide/ide.component.html

@@ -0,0 +1,44 @@
+<div class="tfw-grid-ide-statusbar">
+  <div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
+    <button *ngFor="let file of files"
+            class="btn tfw-tab-btn"
+            (click)="tabSwitchButtonHandler(file)"
+            [class.active]="filename === file"
+            [class.disabled]="filename === file"
+            [disabled]="filename === file"
+            [class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
+      <span *ngIf="filename !== file">{{file}}</span>
+      <span *ngIf="filename === file"
+            [class.underline]="codeState === 'DIRTY'">{{file}}</span>
+    </button>
+  </div>
+
+  <div class="btn-group-sm tfw-deploy-btn-group">
+    <button *ngIf="showDeployButton"
+            type="submit"
+            class="btn tfw-deploy-btn tao-grid-top-center"
+            (click)="sendCodeIfDirty(); deployCode()"
+            [disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
+            [class.deployed]="deployButtonState === 'DEPLOYED'"
+            [class.deploy]="deployButtonState === 'DEPLOYING'"
+            [class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
+            [class.failed]="deployButtonState === 'FAILED'"
+    >
+      <span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
+      <span *ngIf="deployButtonState === 'DEPLOYED'">
+        <img src="images/greentick_icon.svg"/>
+        <span>Deployed</span>
+      </span>
+      <span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
+      <span *ngIf="deployButtonState === 'FAILED'">Deployment failed. Retry</span></button>
+  </div>
+</div>
+
+<div (keyup)="setCodeState('DIRTY'); setDeployButtonState('TODEPLOY'); resetAutoSaveCountdown()"
+  ace-editor
+  [(text)]="code"
+  [mode]="language"
+  [theme]="theme"
+  class="tfw-ace-editor"
+>
+</div>

src/app/ide/ide.component.scss

@@ -0,0 +1,95 @@
+@import "../../assets/scss/variables.scss";
+
+.tfw-grid-ide-statusbar {
+  display: grid;
+  height: $tao-navbar-height;
+  grid-template-columns: 8fr 1fr;
+}
+
+.tfw-ace-editor {
+  height: calc(100% - 67px);
+  width: 100%;
+}
+
+.btn-group {
+  padding-left: 34px;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.tfw-tab-btn {
+  background-color: white;
+  border: 1px solid $tao-plum-900;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 100px;
+  padding: 5px 19px;
+  z-index: 200;
+
+  .tfw-tab-btn-saved,
+  .active,
+  .disabled,
+  &:disabled {
+    background-color: $tao-plum-200;
+    font-weight: 500;
+    font-style: italic;
+    color: black;
+    border: 0;
+  }
+}
+
+.tfw-deploy-btn-group {
+  margin: auto $tiny;
+
+  .tfw-deploy-btn {
+    background: $tao-bright-green-200;
+    border-radius: 100px;
+    padding: 6px 19px;
+
+    img {
+      position: relative;
+      bottom: 1px;
+      height: $small;
+    }
+
+    &.failed {
+      background-color: $tao-red-500;
+      color:white;
+    }
+
+    &:disabled,
+    &.disabled,
+    &.deployed,
+    &.deploy
+    {
+      background-color: $tao-bright-green-100;
+      color: black;
+    }
+
+    &.deploy {
+      background-color: $tao-warm-yellow-200;
+    }
+
+
+    .loader {
+      border: 2px solid $tao-warm-yellow-600;
+      border-radius: 50%;
+      border-top: 2px solid $tao-warm-yellow-200;
+      width: 15px;
+      height: 15px;
+      animation: spin 2s linear infinite;
+      display: inline-block;
+      margin-right: 5px;
+      position: relative;
+      top: 2px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+  }
+}

src/app/ide/ide.component.ts

@@ -0,0 +1,154 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+
+import * as brace from 'brace';
+import 'brace/ext/modelist';
+
+import 'brace/mode/c_cpp';
+import 'brace/mode/csharp';
+import 'brace/mode/java';
+import 'brace/mode/javascript';
+import 'brace/mode/json';
+import 'brace/mode/python';
+import 'brace/mode/sql';
+
+import 'brace/theme/cobalt';
+import { SourceCode } from './source-code';
+import { WebSocketService } from '../services/websocket.service';
+import { ProcessManagerService } from '../services/processmanager.service';
+import { DeploymentNotificationService } from '../services/deployment-notification.service';
+import { config } from '../config';
+
+const modelist = brace.acequire('ace/ext/modelist');
+
+@Component({
+  selector: 'app-ide',
+  templateUrl: './ide.component.html',
+  styleUrls: ['./ide.component.scss']
+})
+export class IdeComponent implements OnInit {
+  key_id = 'webide';
+  filename = '';
+  code: string = config.ide.defaultCode;
+  language: string = config.ide.defaultLanguage;
+  theme = 'cobalt';
+  directory = '';
+  files: string[];
+  codeState = 'SAVED';
+  deployButtonState = 'DEPLOYED';
+  showDeployButton: boolean = config.ide.showDeployButton;
+  autosave = null;
+  command_handlers = {'reload':    this.reloadHandler.bind(this),
+                      'read':      this.readHandler.bind(this),
+                      'select':    this.selectHandler.bind(this),
+                      'write':     this.writeHandler.bind(this),
+                      'selectdir': this.selectdirHandler.bind(this)};
+
+  constructor(private webSocketService: WebSocketService,
+              private changeDetectorRef: ChangeDetectorRef,
+              private processManagerService: ProcessManagerService,
+              private deploymentNotificationService: DeploymentNotificationService) { }
+
+  ngOnInit() {
+    this.webSocketService.connect();
+    this.subscribeWS();
+    this.requestCode();
+    this.processManagerService.init();
+    this.processManagerService.subscribeCallback(config.ide.deployProcessName, (event) => { this.setDeployButtonState('DEPLOYED'); });
+    this.processManagerService.subscribeErrorCallback(config.ide.deployProcessName, (event) => { this.setDeployButtonState('FAILED'); });
+    this.resetAutoSaveCountdown();
+  }
+
+  subscribeWS() {
+    this.webSocketService.observeKey<SourceCode>(this.key_id).subscribe((event) => {
+      this.command_handlers[event.data.command](event.data);
+      this.changeDetectorRef.detectChanges();
+    });
+  }
+
+  updateFileData(data: SourceCode) {
+    this.filename = data.filename;
+    this.directory = data.directory;
+    this.code = (data.content != null) ? data.content : this.code;
+    this.language = modelist.getModeForPath(this.filename).name;
+    this.files = data.files;
+  }
+
+  selectHandler(data: SourceCode) {
+    this.updateFileData(data);
+  }
+
+  reloadHandler(data: SourceCode) {
+    this.requestCode();
+  }
+
+  readHandler(data: SourceCode) {
+    if (this.codeState === 'SAVED') {
+      this.updateFileData(data);
+    }
+  }
+
+  writeHandler() {
+    this.setCodeState('SAVED');
+  }
+
+  selectdirHandler(data: SourceCode) {
+    this.updateFileData(data);
+  }
+
+  resetAutoSaveCountdown() {
+    if (this.autosave) {
+      clearInterval(this.autosave);
+    }
+    this.autosave = setInterval(() => { this.sendCodeIfDirty(); }, config.ide.autoSaveInterval);
+  }
+
+  tabSwitchButtonHandler(file) {
+    if (this.codeState === 'DIRTY') {
+      this.sendCodeContents();
+    }
+    this.selectCode(file);
+    this.requestCode();
+  }
+
+  setCodeState(state: string) {
+    if (state.match('SAVED|DIRTY')) {
+      this.codeState = state;
+    }
+  }
+
+  setDeployButtonState(state: string) {
+    this.deployButtonState = state;
+    this.deploymentNotificationService.deploying.next(state === 'DEPLOYING' ? true : false);
+  }
+
+  deployCode() {
+    this.processManagerService.restartProcess('login');
+    this.setDeployButtonState('DEPLOYING');
+  }
+
+  sendCodeIfDirty() {
+    if (this.codeState === 'DIRTY') {
+      this.sendCodeContents();
+    }
+  }
+
+  sendCodeContents() {
+    this.webSocketService.send(this.key_id, {
+      'command': 'write',
+      'content': this.code
+    });
+  }
+
+  requestCode() {
+    this.webSocketService.send(this.key_id, {
+      'command': 'read'
+    });
+  }
+
+  selectCode(filename: string) {
+    this.webSocketService.send(this.key_id, {
+      'command': 'select',
+      'filename': filename
+    });
+  }
+}

src/app/ide/source-code.ts

@@ -0,0 +1,7 @@
+export interface SourceCode {
+  filename: string;
+  content?: string;
+  files: string[];
+  directory: string;
+  command: string;
+}

src/app/sidebar/sidebar.component.html

@@ -1 +1,4 @@
-<div> IDE </div>
+<div class="tfw-ide-pin">
+  <img src="images/IDE.svg">
+  <img class="active" src="images/IDE_active.svg">
+</div>

src/app/sidebar/sidebar.component.scss

@@ -1,6 +1,16 @@
 @import "../../assets/scss/variables.scss";
+@import "../../assets/scss/mixins/layout.scss";
 
-.tfw-webide-pin{
-
-
+img {
+  width: 50px;
+  height: auto;
+}
+
+.tfw-ide-pin {
+
+  cursor: pointer;
+
+  & .active {
+    display: none;
+  }
 }

src/assets/scss/_variables.scss

@@ -158,3 +158,6 @@ $font-size-h5:            floor(($font-size-base * 1.1));
 
 $tao-navbar-height: 67px;
 $company-logo-width: 130px;
+
+
+

src/assets/scss/mixins/_layout.scss

@@ -1,72 +1,102 @@
 $grid-columns-count: 25;
 $grid-rows-count: 25;
 
-$layout-key: 'vraw-open';
-
-$default-open-layout: (
+$terminal-ide-web-layout: (
   'header': (1, 6, 1, 2),
-  'messages': (1, 6, 2, 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': ()
+  'messages': (1, 6, 2, 16),
+  'ide': (15,$grid-columns-count, 1, $grid-rows-count+1),
+  'terminal': (1, 15, 16, $grid-rows-count+1),
+  'web': (6, 15, 1, 16),
+  'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
 );
 
-$default-closed-layout: (
+$terminal-web-layout: (
   'header': (1, 6, 1, 2),
   'messages': (1, 6, 2, 10),
-  'webide': (16,$grid-columns-count+1, 1, $grid-rows-count+1),
-  'terminal': (1, 16, 10, $grid-rows-count+1),
+  'ide': (),
+  'terminal': (15, $grid-columns-count, 10, $grid-rows-count+1),
   'web': (6, 15, 1, 10),
-  'sidebar': ()
+  'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
 );
 
-$vraw-open-layout: (
+$terminal-ide-vertical-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),
+  'ide': (15, $grid-columns-count, 1,$grid-rows-count+1),
+  'terminal': (6, 15, 1, $grid-rows-count+1),
   'web': (),
-  'sidebar': (),
+  'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
 );
 
-$vraw-closed-layout: (
+$terminal-ide-horizontal-layout: (
   'header': (1, 6, 1, 2),
   'messages': (1, 6, 2,$grid-rows-count+1),
-  'webide': (),
+  'ide': (6,$grid-columns-count, 1, 16),
+  'terminal': (6, $grid-columns-count, 16, $grid-rows-count+1),
+  'web': (),
+  'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1),
+);
+
+$ide-web-vertical-layout: (
+  'header': (1, 6, 1, 2),
+  'messages': (1, 6, 2, $grid-rows-count+1),
+  'ide': (15, $grid-columns-count, 1,$grid-rows-count+1),
+  'terminal': (),
+  'web': (6, 15, 10, $grid-rows-count+1),
+  'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
+);
+
+
+$terminal-only-layout: (
+  'header': (1, 6, 1, 2),
+  'messages': (1, 6, 2,$grid-rows-count+1),
+  'ide': (),
   '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, 4, 1,$grid-rows-count+1),
-  'messages': (1, 4, 2,$grid-rows-count+1),
-  'webide': (4,$grid-columns-count+1, 1, 10),
-  'terminal': (4, $grid-columns-count+1, 10, $grid-rows-count+1),
+$ide-only-layout: (
+  'header': (1, 6, 1, 2),
+  'messages': (1, 6, 2,$grid-rows-count+1),
+  'ide': (6, $grid-columns-count,  1,$grid-rows-count+1),
+  'terminal': (),
   'web': (),
-  'sidebar': (),
+  'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
 );
 
+$web-only-layout: (
+  'header': (1, 6, 1, 2),
+  'messages': (1, 6, 2,$grid-rows-count+1),
+  'ide': (),
+  'terminal': (),
+  'web': (6, $grid-columns-count, 1,$grid-rows-count+1),
+  'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
+);
+
+
 $layouts: (
-  'default-open': $default-open-layout,
-  'default-closed': $default-closed-layout,
-  'vraw-open': $vraw-open-layout,
-  'vraw-closed': $vraw-closed-layout,
-  'hraw': $hraw-layout
+  'terminal-ide-web': $terminal-ide-web-layout,
+  'terminal-web': $terminal-web-layout,
+  'terminal-ide-vertical': $terminal-ide-vertical-layout,
+  'terminal-ide-horizontal': $terminal-ide-horizontal-layout,
+  'ide-web-vertical': $ide-web-vertical-layout,
+  'terminal-only': $terminal-only-layout,
+  'ide-only': $ide-only-layout,
+  'web-only': $web-only-layout
 );
 
-@mixin set-layout($layout_key) {
-  @if(index(map_keys($layouts), $layout_key)) {
-    $layout: map_get($layouts, $layout_key)
+@mixin set-layout($layouts-key) {
+  @if(index(map_keys($layouts), $layouts-key)) {
+    $layout: map_get($layouts, $layouts-key)
   }
   @else {
-    @error 'Invalid layout value: "#{$layout_key}"'
+    @error 'Invalid layout value: "#{$layouts-key}"'
   }
 }
 
-@function get-layout(){
-  @return map_get($layouts, $layout_key);
+@function get-layout($layouts-key){
+  @return map_get($layouts, $layouts-key);
 }
 
 @mixin position-grid-items($map, $sel) {
@@ -87,8 +117,8 @@ $layouts: (
   }
 }
 
-@mixin set-component-size($key) {
-  $tfw-component: map_get(get-layout(), $key);
+@mixin set-component-size($layouts-key, $layout-key) {
+  $tfw-component: map_get(get-layout($layouts-key), $layout-key);
 
   @if (length($tfw-component) > 0) {
     $columns-count: nth($tfw-component,2) - nth($tfw-component,1);
@@ -100,22 +130,3 @@ $layouts: (
 }
 
 
-[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-');
-}