diff --git a/.angular-cli.json b/.angular-cli.json
index 2787769..bf3f2d6 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -8,9 +8,10 @@
"root": "src",
"outDir": "dist",
"assets": [
- "assets",
- "favicon.ico"
- ],
+ { "glob": "*(fonts|images|icons)/**/*",
+ "input": "./assets/",
+ "output": "./" }
+ ],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
old mode 100644
new mode 100755
index 8420599..8522578
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,12 +1,7 @@
-
-
-
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
old mode 100644
new mode 100755
index 9d68c22..54934be
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -1,5 +1,79 @@
-.tfw-first-row {
- height: 40vh;
+$space: 24px;
+
+$tao-plum-900: #272F4C;
+$tao-gray-50: #FAFAFA;
+
+$tao-navbar-height: 67px;
+
+$layout-template: "default"; // Change this to switch template
+
+$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);
+ }
+ }
+ }
+ }
}
-.tfw-second-row {}
+.tfw-grid-main-components {
+ overflow-y: hidden;
+ display: grid;
+ padding-top: $tao-navbar-height;
+ width: 100vw;
+ height: 100vh;
+ justify-content: center;
+ align-content: center;
+ grid-template-columns: repeat(5, 1fr);
+ grid-template-rows: repeat(5, 1fr);
+
+ @include position-grid-items(map_get($layout,$layout-template),'.tfw-');
+
+ .tfw-web {
+ padding: $space;
+ }
+
+ .tfw-messages {
+ padding: $space;
+ background-color: $tao-gray-50;
+ }
+
+ .tfw-webide {
+ background-color: $tao-plum-900;
+ }
+
+ .tfw-terminal {
+ }
+
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
old mode 100644
new mode 100755
index b96b5f7..51cec9c
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,8 +1,11 @@
-
-
Tutorial framework Demo
-
- Powered by Angular
-
-
-
-
+
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
old mode 100644
new mode 100755
index 1920a5b..81d80bb
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,33 +1,57 @@
-@keyframes heartbeat
-{
- 0%
- {
- transform: scale( .75 );
- }
- 20%
- {
- transform: scale( 1 );
- }
- 40%
- {
- transform: scale( .75 );
- }
- 60%
- {
- transform: scale( 1 );
- }
- 80%
- {
- transform: scale( .75 );
- }
- 100%
- {
- transform: scale( .75 );
- }
+$tao-blue-500: #277EEC;
+$font-size-base: 14px;
+$font-size-h3: floor(($font-size-base * 1.3));
+
+$tao-navbar-height: 67px;
+
+$company-logo-width: 130px;
+
+.tfw-header-title {
+ color: $tao-blue-500;
+ font-size: $font-size-h3;
}
-.logo {
- animation: heartbeat 1s infinite;
+.tfw-navbar {
+ background-color: rgba(255, 255, 255, 0.96);
+ min-height: $tao-navbar-height;
+ box-shadow: 0px 1px 6px 0px #888;
+ margin-bottom: 12px;
+ border: 1px solid #e7e7e7;
+}
+
+.tfw-grid-navbar {
+ display: grid;
+ grid-template-columns: $company-logo-width 1fr;
+ grid-column-gap: 8px;
+ width: 100%;
+}
+
+.tfw-company-logo {
+ display: block;
+ width: $company-logo-width;
+}
+
+.tfw-company-logo-mobile {
+ display: none;
+ width: 130px;
+}
+
+@media (max-width: 767px) {
+ .tfw-grid-navbar {
+ grid-template-columns: 1fr;
+ }
+
+ .tfw-company-logo {
+ display: none;
+ }
+
+ .tfw-company-logo-mobile {
+ display: block;
+ }
+
+ .tfw-navbar-links {
+ justify-self: left !important;
+ }
}
.jumbotron {
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
old mode 100644
new mode 100755
index 733d749..0be46f1
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -1,11 +1,11 @@
-
-
+
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
old mode 100644
new mode 100755
index 3cc4d7a..90c889f
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -1,14 +1,61 @@
-div {
- display: block;
- overflow: auto;
- max-height: 100%;
+$space: 24px;
+
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+
+
+$tao-blue-500: #277EEC;
+$tao-gray-100: #F2F2F2;
+
+$tao-panel-border-radius-sm: 8px;
+
+$font-size-tiny: 12px;
+$font-size-base: 14px;
+
+
+.tfw-messages-main {
+ max-height: 50vmin;
+ overflow-y: scroll;
+
+ h5 {
+ margin-bottom: $small;
+ color: $tao-blue-500;
+ font-weight: 500;
+ }
}
-ul {
- max-height: inherit;
- list-style-type: none;
+.tfw-grid-message {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ grid-row-gap: $hair;
+ width: 100%;
+
+ background-color: $tao-gray-100;
+ border-radius: $tao-panel-border-radius-sm;
+ padding: $tiny;
+ font-size: $font-size-base;
+ margin-bottom: $hair;
}
-.timestamp {
- opacity: 0.37;
+.tfw-grid-message-header {
+ display: grid;
+ grid-template-columns: 1fr 5fr 8fr;
+ grid-column-gap: 4px;
+ width: 100%;
+
+ img {
+ width: 12px;
+ }
+
+ .originator {
+ font-weight: 500;
+ }
+
+ .timestamp {
+ font-size: $font-size-tiny;
+ opacity: 0.37;
+ }
+
}
+
diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html
index 96bcb4c..6bbb1b3 100644
--- a/src/app/webide/webide.component.html
+++ b/src/app/webide/webide.component.html
@@ -1,13 +1,34 @@
-
-
+
+
+
+
+
+
+
+
-
-
-
-
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss
index f4e8af5..c8501b2 100644
--- a/src/app/webide/webide.component.scss
+++ b/src/app/webide/webide.component.scss
@@ -1,28 +1,100 @@
+$space: 24px;
+$small: 0.75 * $space;
+
+$tao-bright-green-100: #c5f2e4;
+$tao-bright-green-200: #a0ead3;
+
+$tao-warm-yellow-200: #FFE0A9;
+$tao-warm-yellow-600: #E59C3C;
+
+$tao-plum-200: #BEC7F3;
+$tao-plum-900: #272F4C;
+$tao-red-500: #FF5252;
+
+
+.tfw-grid-container {
+ display: grid;
+ grid-template-columns: 8fr 1fr;
+}
+
.tfw-ace-editor {
- min-height: 30vh;
- height: 80%;
+ height: 100%;
width: 100%;
- overflow: auto;
}
-.btn-secondary {
- border-radius: 0;
+.btn-group {
+ padding-left: 34px;
}
-.loader {
- border: 2px solid #ffffff;
- border-radius: 50%;
- border-top: 2px solid #212529;
- width: 15px;
- height: 15px;
- animation: spin 2s linear infinite;
- display: inline-block;
- margin-right: 5px;
- position: relative;
- top: 2px;
+.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;
+ color: black;
+ }
}
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
+.tfw-deploy-btn-group {
+ margin: $small;
+
+ .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); }
+ }
+
+ }
}
+
diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts
index caca58b..c60f17e 100644
--- a/src/app/webide/webide.component.ts
+++ b/src/app/webide/webide.component.ts
@@ -11,7 +11,7 @@ import 'brace/mode/json';
import 'brace/mode/python';
import 'brace/mode/sql';
-import 'brace/theme/monokai';
+import 'brace/theme/cobalt';
import { SourceCode } from './source-code';
import { WebSocketService } from '../services/websocket.service';
import { ProcessManagerService } from '../services/processmanager.service';
@@ -31,7 +31,7 @@ export class WebideComponent implements OnInit {
filename = 'demo.js';
code: string = defaultSourceCode;
language = 'javascript';
- theme = 'monokai';
+ theme = 'cobalt';
directory = '';
files: string[];
codeState = 'SAVED';
diff --git a/src/assets/images/avatao_logo.svg b/src/assets/images/avatao_logo.svg
new file mode 100644
index 0000000..29bceab
--- /dev/null
+++ b/src/assets/images/avatao_logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/images/avataobot.svg b/src/assets/images/avataobot.svg
new file mode 100755
index 0000000..70bbbe2
--- /dev/null
+++ b/src/assets/images/avataobot.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico
new file mode 100755
index 0000000..2971e83
Binary files /dev/null and b/src/assets/images/favicon.ico differ
diff --git a/src/assets/images/greentick_icon.svg b/src/assets/images/greentick_icon.svg
new file mode 100644
index 0000000..535eb85
--- /dev/null
+++ b/src/assets/images/greentick_icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/scss/_grid.scss b/src/assets/scss/_grid.scss
new file mode 100644
index 0000000..9ec01a4
--- /dev/null
+++ b/src/assets/scss/_grid.scss
@@ -0,0 +1,44 @@
+.tao-grid-center-center {
+ justify-self: center;
+ align-self: center;
+}
+
+.tao-grid-center-right {
+ justify-self: right;
+ align-self: center;
+}
+
+.tao-grid-center-left {
+ justify-self: left;
+ align-self: center;
+}
+
+.tao-grid-start-center {
+ justify-self: center;
+ align-self: start;
+}
+
+.tao-grid-end-center {
+ justify-self: center;
+ align-self: end;
+}
+
+.tao-grid-top-right {
+ justify-self: right;
+ align-self: start;
+}
+
+.tao-grid-top-left {
+ justify-self: left;
+ align-self: start;
+}
+
+.tao-grid-bottom-left {
+ justify-self: left;
+ align-self: end;
+}
+
+.tao-grid-bottom-right {
+ justify-self: right;
+ align-self: end;
+}
diff --git a/src/assets/scss/_main.scss b/src/assets/scss/_main.scss
new file mode 100644
index 0000000..abc22dc
--- /dev/null
+++ b/src/assets/scss/_main.scss
@@ -0,0 +1,12 @@
+
+
+@import
+ 'variables',
+ 'grid';
+
+@import
+ 'shared/buttons';
+
+
+
+
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
new file mode 100644
index 0000000..fbf277c
--- /dev/null
+++ b/src/assets/scss/_variables.scss
@@ -0,0 +1,160 @@
+//
+// Spaces
+//
+
+$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;
+
+
+// Panel border radius
+$tao-panel-border-radius: 14px;
+$tao-panel-border-radius-sm: 8px;
+$tao-input-border-radius: 6px;
+
+// Font sizes
+$font-size-nano: 11px;
+$font-size-tiny: 12px;
+$font-size-small: 13px;
+$font-size-base: 14px;
+$font-size-title: floor(($font-size-base * 3.5));
+$font-size-h2: floor(($font-size-base * 1.75));
+$font-size-h3: floor(($font-size-base * 1.3));
+$font-size-h4: floor(($font-size-base * 1.2));
+$font-size-h5: floor(($font-size-base * 1.1));
+
+
+
+$tao-navbar-height: 67px;
diff --git a/src/assets/scss/shared/_buttons.scss b/src/assets/scss/shared/_buttons.scss
new file mode 100644
index 0000000..52742df
--- /dev/null
+++ b/src/assets/scss/shared/_buttons.scss
@@ -0,0 +1,47 @@
+.tao-btn-primary {
+ color: $tao-blue-500;
+ font-size: $font-size-base;
+ padding: 6px 19px;
+ border-radius: 100px !important;
+ background-color: transparent;
+ border: 1px solid $tao-blue-500;
+ outline: none !important;
+ transition: all 0.18s ease-out 0.18s;
+ cursor: pointer;
+
+ &.large {
+ font-size: $font-size-h3;
+ padding: 10px 32px;
+ }
+
+ &.hidden {
+ visibility: hidden;
+
+ }
+
+ &.medium {
+ font-size: $font-size-h4;
+ padding: 8px 24px;
+ }
+
+ &:hover {
+ background-color: transparent;
+ color: $tao-blue-500;
+ box-shadow: inset 0 0 0 1px $tao-blue-500;
+ }
+}
+
+.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;
+ color: white;
+ border: none;
+ text-decoration: none !important;
+
+ &:hover {
+ box-shadow: none;
+ background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
+ color: white;
+ }
+}
diff --git a/src/favicon.ico b/src/favicon.ico
deleted file mode 100644
index 8081c7c..0000000
Binary files a/src/favicon.ico and /dev/null differ
diff --git a/src/index.html b/src/index.html
index efb40db..f3d37a5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,7 @@
-
+
diff --git a/src/styles.scss b/src/styles.scss
index da171b7..8713ad3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,3 +1,5 @@
/* You can add global styles to this file, and also import other style files */
@import '../node_modules/bootstrap/scss/bootstrap';
@import '../node_modules/xterm/dist/xterm.css';
+
+@import "assets/scss/main";