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 @@ -
- +
+
Instructions
+
+
+ +
{{message.originator}}
+
{{message.timestamp | date:'HH:mm:ss'}}
+
+
+
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 @@ +avataologo_small \ 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 @@ +avataobot \ 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 @@ +greentick_icon_smalll \ 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";