From c3f4ace7e9a742d8ee1378ca7ec98b97c5953d59 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 9 Mar 2018 18:01:12 +0100 Subject: [PATCH] Option to switch layout template easily via the dashboard scss --- src/app/dashboard/dashboard.component.html | 8 +- src/app/dashboard/dashboard.component.scss | 223 ++++++--------------- 2 files changed, 63 insertions(+), 168 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index d18fd75..77a906f 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,7 +1,7 @@
-
-
-
-
+
+
+
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 5dc2f36..202ae6b 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,152 +1,58 @@ // -// Spaces +// Variables // - $space: 24px; -$sxlarge: 9 * $space; -$xxxlarge: 6 * $space; -$xxlarge: 4 * $space; -$xlarge: 2 * $space; -$large: 1.5 * $space; -$medium: $space; -$small: 0.75 * $space; -$tiny: 0.5 * $space; -$hair: 0.25 * $space; -$nano: 0.125 * $space; - -// Color system - -// Tao blue palette -$tao-blue-50: #F2F7FE; -$tao-blue-100: #C9DFFA; -$tao-blue-200: #A0C6F7; -$tao-blue-300: #77AEF3; -$tao-blue-400: #4E95EF; -$tao-blue-500: #277EEC; -$tao-blue-600: #2170B7; -$tao-blue-700: #195684; -$tao-blue-800: #103B5B; -$tao-blue-900: #081A2B; - -// Tao sky palette -$tao-sky-50: #F1FAFD; -$tao-sky-100: #C5E9F5; -$tao-sky-200: #9AD8EE; -$tao-sky-300: #6EC7E6; -$tao-sky-400: #42B7DF; -$tao-sky-500: #19A7D8; -$tao-sky-600: #0E8BA8; -$tao-sky-700: #04647A; -$tao-sky-800: #004251; -$tao-sky-900: #002028; - -// Tao phtalo palette -$tao-phtalo-50: #F2FBFC; -$tao-phtalo-100: #C8EDF1; -$tao-phtalo-200: #9FDFE6; -$tao-phtalo-300: #75D1DB; -$tao-phtalo-400: #4CC3D0; -$tao-phtalo-500: #24B6C6; -$tao-phtalo-600: #16989E; -$tao-phtalo-700: #0C7575; -$tao-phtalo-800: #034C4F; -$tao-phtalo-900: #002426; - -// Tao turqoise palette -$tao-turqoise-50: #F1FBFB; -$tao-turqoise-100: #C3EFEF; -$tao-turqoise-200: #96E3E3; -$tao-turqoise-300: #68D7D7; -$tao-turqoise-400: #3BCBCB; -$tao-turqoise-500: #10BFBF; -$tao-turqoise-600: #079995; -$tao-turqoise-700: #00726F; -$tao-turqoise-800: #004C4A; -$tao-turqoise-900: #002625; - -// Tao bright green palette -$tao-bright-green-50: #effbf7; -$tao-bright-green-100: #c5f2e4; -$tao-bright-green-200: #a0ead3; -$tao-bright-green-300: #7ae2c2; -$tao-bright-green-400: #55d9b0; -$tao-bright-green-500: #2fd19f; -$tao-bright-green-600: #2ab587; -$tao-bright-green-700: #248e63; -$tao-bright-green-800: #1c6844; -$tao-bright-green-900: #114431; - -// Tao warm yellow palette -$tao-warm-yellow-50: #FFF8EB; -$tao-warm-yellow-100: #FFEDCE; -$tao-warm-yellow-200: #FFE0A9; -$tao-warm-yellow-300: #FFD283; -$tao-warm-yellow-400: #FFC55E; -$tao-warm-yellow-500: #FFB83B; -$tao-warm-yellow-600: #E59C3C; -$tao-warm-yellow-700: #CC8B36; -$tao-warm-yellow-800: #B2762F; -$tao-warm-yellow-900: #996526; - -// Tao plum palette -$tao-plum-50: #F6F8FD; -$tao-plum-100: #DADFF8; -$tao-plum-200: #BEC7F3; -$tao-plum-300: #A2AFED; -$tao-plum-400: #8797E8; -$tao-plum-500: #6C80E3; -$tao-plum-600: #5E77BF; -$tao-plum-700: #4B5E99; -$tao-plum-800: #384672; $tao-plum-900: #272F4C; - -// Tao pink palette -$tao-pink-50: #FFF0F7; -$tao-pink-100: #FFBFDF; -$tao-pink-200: #FF8FC6; -$tao-pink-300: #FF5EAE; -$tao-pink-400: #FF2E95; -$tao-pink-500: #FF007E; -$tao-pink-600: #D8007C; -$tao-pink-700: #B20066; -$tao-pink-800: #8C0050; -$tao-pink-900: #66003A; - -// Tao red palette -$tao-red-50: #FFF5F5; -$tao-red-100: #FFD4D4; -$tao-red-200: #FFB3B3; -$tao-red-300: #FF9292; -$tao-red-400: #FF7171; -$tao-red-500: #FF5252; -$tao-red-600: #E54848; -$tao-red-700: #CC3636; -$tao-red-800: #B22424; -$tao-red-900: #991919; - -// Tao gray palette $tao-gray-50: #FAFAFA; -$tao-gray-100: #F2F2F2; -$tao-gray-200: #D6D6D6; -$tao-gray-300: #A0A0A0; -$tao-gray-400: #777777; -$tao-gray-500: #555555; -$tao-gray-600: #323232; -$tao-gray-700: #232323; -$tao-gray-800: #0C0C0C; -$tao-gray-900: #000000; $tao-navbar-height: 67px; + // // Layouts // +$layout-template: "raw"; // Change this to switch template -// Default messages, webide, terminal, web component -@mixin position($col-start, $col-end, $row-start, $row-end) { - grid-column: $col-start / $col-end; - grid-row: $row-start / $row-end; +$default-layout: ( + 'messages': (1, 2, 1, 4), + 'webide': (4, -1, 1, -1), + 'terminal': (1, 4, 4, -1), + 'web': (2, 4, 1, 4) +); + +$raw-layout: ( + 'messages': (1, 2, 1, -1), + 'webide': (4, -1, 1, -1), + 'terminal': (2, 4, 1, -1), + 'web': (), +); + +$layout: ( + "default": $default-layout, + "raw": $raw-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); + } + } + } + } } .tao-grid-main-components { @@ -159,35 +65,24 @@ $tao-navbar-height: 67px; justify-content: center; align-content: center; grid-template-columns: repeat(5, 1fr); - grid-template-rows: repeat(5, 1fr) -} + grid-template-rows: repeat(5, 1fr); -.tao-web-component { - padding: $space; - @include position(2, 4, 1, 4); - grid-column: 2 / 4; - grid-row: 1 / 4; -} + @include position-grid-items(map_get($layout,$layout-template),'.tfw-'); -.tao-messages-component { - padding: $space; - background-color: $tao-gray-50; - @include position(1, 2, 1, 4); - grid-column: 1 / 2; - grid-row: 1 / 4; + .tfw-web { + padding: $space; + } + + .tfw-messages { + padding: $space; + background-color: $tao-gray-50; + } + + .tfw-webide { + background-color: $tao-plum-900; + } + + .tfw-terminal { + } } - -.tao-webide-component { - background-color: $tao-plum-900; - @include position(4, -1, 1, -1); - grid-column: 4 / -1; - grid-row: 1 / -1; - -} - -.tao-terminal-component { - @include position(1, 4, 4, -1); - grid-row: 4 / -1; - grid-column: 1 / 4; -}