Expose layout mixins to a new file and use it accordingly to have control over component positioning from shadow DOM elements

src/app/dashboard/dashboard.component.html

@@ -1,13 +1,16 @@
 <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="tfw-web tao-grid-top-left"
-    <div class="row-container">
+       [ngClass]="{ 'deploy-blur': deploying }">
-      <iframe class="iframe-row"
+    <div class="iframe-container">
+      <iframe class="iframe"
               scrolling="yes" frameborder="0"
               src="http://localhost:9999"></iframe>
     </div>
   </div>
   <div class="tfw-webide"><app-webide></app-webide></div>
-  <div class="tfw-terminal"><app-terminal></app-terminal></div>
+  <div class="tfw-terminal">
+      <app-terminal></app-terminal>
+  </div>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -1,73 +1,8 @@
 @import "../../assets/scss/variables.scss";
+@import "../../assets/scss/mixins/layout.scss";
 
 
-// Change this to switch template. Options: 'default', 'vraw', 'hraw'
-$layout-template: 'default';
-
-$grid-columns-count: 5;
-$grid-rows-count: 15;
-
-$default-layout: (
-  'header': (1, 2, 1, 2),
-  'messages': (1, 2, 2, 10),
-  'webide': (4, -1, 1, -1),
-  'terminal': (1, 4, 10, -1),
-  'web': (2, 4, 1, 10)
-);
-
-$vraw-layout: (
-  'header': (1, 2, 1, 2),
-  'messages': (1, 2, 2, -1),
-  'webide': (4, -1, 1, -1),
-  'terminal': (2, 4, 1, -1),
-  'web': (),
-);
-
-$hraw-layout: (
-  'header': (1, 2, 1, -1),
-  'messages': (1, 2, 2, -1),
-  'webide': (2, -1, 1, 10),
-  'terminal': (2, -1, 10, -1),
-  'web': (),
-);
-
-$layout: (
-  'default': $default-layout,
-  'vraw': $vraw-layout,
-  'hraw': $hraw-layout
-);
-
-@mixin position-grid-items($map, $sel) {
-  $sel: if($sel == '' and &, &, $sel);
-  @debug $sel;
-
-  #{$sel} {
-    @each $k, $v in $map {
-      @at-root #{$sel}#{$k} {
-        @if (length($v) == 0) {
-          display: none
-        }
-        @else {
-          grid-column-start: nth($v, 1);
-          grid-column-end: nth($v, 2);
-          grid-row-start: nth($v, 3);
-          grid-row-end: nth($v, 4);
-        }
-      }
-    }
-  }
-}
-
-@mixin set-web-component-size() {
-  $web-columns-count: nth(map_get($default-layout, 'web'),2) - nth(map_get($default-layout, 'web'),1);
-  $web-rows-count: nth(map_get($default-layout, 'web'),4) - nth(map_get($default-layout, 'web'),3);
-
-  min-width: #{$web-columns-count / $grid-columns-count * 100}vw;
-  min-height: #{$web-rows-count / $grid-rows-count * 100}vh;
-}
-
 .tfw-grid-main-components {
- // overflow-y: visible;
   display: grid;
   width: 100vw;
   height: 100vh;
@@ -78,6 +13,16 @@ $layout: (
 
   @include position-grid-items(map_get($layout,$layout-template),'.tfw-');
 
+  .tfw-header,
+  .tfw-messages {
+    @if ($layout-template == 'default') {
+      border: 2px solid $tao-plum-100;
+      border-top: 0;
+      border-left: 0;
+      border-bottom: 0;
+    }
+  }
+
   .tfw-header {
     padding: $small;
     background-color: $tao-gray-50;
@@ -97,18 +42,17 @@ $layout: (
   }
 
   .tfw-web {
-
+    .iframe-container {
-    .row-container {
       display: flex;
       overflow: hidden;
-      @include set-web-component-size();
+      @include set-component-size('web');
     }
 
-    .iframe-row {
+    .iframe {
       flex-grow: 1;
       border: none;
       margin: 0;
-      padding: 0;
+      padding: $small;
     }
   }
 
@@ -121,13 +65,7 @@ $layout: (
     border-left: 0;
     border-right: 0;
     border-bottom: 0;
-
+    background-color: black;
-    .xterm .xterm-viewport {
-      height: 100vmin;
-    }
-
-
-
   }
 }
 

src/app/terminal/terminal.component.html

@@ -1 +1 @@
-<div #xterm class="tfw-xterm" (window:resize)="fit()"></div>
+<div #xterm class="tfw-xterm"></div>

src/app/terminal/terminal.component.scss

@@ -0,0 +1,8 @@
+@import "../../assets/scss/mixins/layout.scss";
+
+
+.tfw-xterm {
+  .xterm {
+    @include set-component-size('terminal');
+  }
+}

src/app/web/web.component.html

@@ -34,6 +34,6 @@
   </div>
 </div>
 -->
-<div class="row-container">
+<div class="iframe-container">
 
 </div>

src/app/webide/webide.component.scss

@@ -1,5 +1,4 @@
 @import "../../assets/scss/variables.scss";
-
 .tfw-grid-webide-statusbar {
   display: grid;
   height: $tao-navbar-height;
@@ -29,7 +28,10 @@
   .disabled,
   &:disabled {
     background-color: $tao-plum-200;
+    font-weight: 500;
+    font-style: italic;
     color: black;
+    border: 0;
   }
 }
 

src/assets/scss/_variables.scss

@@ -159,3 +159,6 @@ $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

@@ -0,0 +1,62 @@
+$grid-columns-count: 5;
+$grid-rows-count: 15;
+
+$default-layout: (
+  'header': (1, 2, 1, 2),
+  'messages': (1, 2, 2, 10),
+  'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
+  'terminal': (1, 4, 10,$grid-rows-count+1),
+  'web': (2, 4, 1, 10)
+);
+
+$vraw-layout: (
+  'header': (1, 2, 1, 2),
+  'messages': (1, 2, 2,$grid-rows-count+1),
+  'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
+  'terminal': (2, 4, 1,$grid-rows-count+1),
+  'web': (),
+);
+
+$hraw-layout: (
+  'header': (1, 2, 1,$grid-rows-count+1),
+  'messages': (1, 2, 2,$grid-rows-count+1),
+  'webide': (2,$grid-rows-count+1, 1, 10),
+  'terminal': (2,$grid-rows-count+1, 10,$grid-rows-count+1),
+  'web': (),
+);
+
+$layout: (
+  'default': $default-layout,
+  'vraw': $vraw-layout,
+  'hraw': $hraw-layout
+);
+
+
+@mixin position-grid-items($map, $sel) {
+  $sel: if($sel == '' and &, &, $sel);
+  @debug $sel;
+
+  #{$sel} {
+    @each $k, $v in $map {
+      @at-root #{$sel}#{$k} {
+        @if (length($v) == 0) {
+          display: none
+        }
+        @else {
+          grid-column-start: nth($v, 1);
+          grid-column-end: nth($v, 2);
+          grid-row-start: nth($v, 3);
+          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);
+  $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;
+  min-height: #{$rows-count / $grid-rows-count * 100}vh;
+}