From 1b9da0b03c3c8701ca3ef56dfeee0fc48f3f9528 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 17:21:54 +0100 Subject: [PATCH] Webide CSS redesign first modification --- src/app/dashboard/dashboard.component.html | 2 +- src/app/dashboard/dashboard.component.scss | 6 + src/app/messages/messages.component.html | 2 +- src/app/messages/messages.component.scss | 5 +- src/app/terminal/terminal.component.scss | 217 +++++++++++++++++++++ src/app/webide/webide.component.html | 4 +- src/app/webide/webide.component.scss | 149 +++++++++++++- src/app/webide/webide.component.ts | 4 +- 8 files changed, 379 insertions(+), 10 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index ac963db..8f432cd 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -7,7 +7,7 @@
-
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 684d562..ea554fd 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -168,8 +168,14 @@ $tao-navbar-height: 67px; .tao-messages-component { background-color: $tao-gray-50; padding: $space; + height: calc(50vh - 10px); + } .tao-web-component { padding: $space; } + +.tao-webide-component { + background-color: $tao-plum-900; +} diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 611e077..cf7f3e3 100755 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -3,7 +3,7 @@
-
{{message.originator}}
+
{{message.originator}}
{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 8e4eb5c..3506892 100755 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -151,7 +151,6 @@ $font-size-base: 14px; .tao-messages-main { display: block; - overflow: auto; h5 { margin-bottom: $small; @@ -182,6 +181,10 @@ $font-size-base: 14px; width: 12px; } + .originator { + font-weight: 500; + } + .timestamp { font-size: $font-size-tiny; opacity: 0.37; diff --git a/src/app/terminal/terminal.component.scss b/src/app/terminal/terminal.component.scss index e69de29..5a774d9 100644 --- a/src/app/terminal/terminal.component.scss +++ b/src/app/terminal/terminal.component.scss @@ -0,0 +1,217 @@ +// 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; + +.xterm { + font-family: courier-new, courier, monospace; + font-feature-settings: "liga" 0; + position: relative; + user-select: none; + -ms-user-select: none; + -webkit-user-select: none; +} + +.xterm.focus, +.xterm:focus { + outline: none; +} + +.xterm .xterm-helpers { + position: absolute; + top: 0; + /** + * The z-index of the helpers must be higher than the canvases in order for + * IMEs to appear on top. + */ + z-index: 10; +} + +.xterm .xterm-helper-textarea { + /* + * HACK: to fix IE's blinking cursor + * Move textarea out of the screen to the far left, so that the cursor is not visible. + */ + position: absolute; + opacity: 0; + left: -9999em; + top: 0; + width: 0; + height: 0; + z-index: -10; + /** Prevent wrapping so the IME appears against the textarea at the correct position */ + white-space: nowrap; + overflow: hidden; + resize: none; +} + +.xterm .composition-view { + /* TODO: Composition position got messed up somewhere */ + background: $tao-blue-800; + color: #FFF; + display: none; + position: absolute; + white-space: nowrap; + z-index: 1; +} + +.xterm .composition-view.active { + display: block; +} + +.xterm .xterm-viewport { + /* On OS X this is required in order for the scroll bar to appear fully opaque */ + background-color: $tao-blue-800; + overflow-y: scroll; + cursor: default; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; +} + +.xterm .xterm-screen { + position: relative; +} + +.xterm .xterm-screen canvas { + position: absolute; + left: 0; + top: 0; +} + +.xterm .xterm-scroll-area { + visibility: hidden; +} + +.xterm .xterm-char-measure-element { + display: inline-block; + visibility: hidden; + position: absolute; + left: -9999em; +} + +.xterm.enable-mouse-events { + /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */ + cursor: default; +} + +.xterm:not(.enable-mouse-events) { + cursor: text; +} diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 96bcb4c..b497b66 100644 --- a/src/app/webide/webide.component.html +++ b/src/app/webide/webide.component.html @@ -1,11 +1,11 @@
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index 6008505..d6fcca3 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -1,12 +1,155 @@ +// 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; + .tfw-ace-editor { - min-height: 100vh; + min-height: 85vh; height: 80%; width: 100%; overflow: auto; } -.btn-secondary { - border-radius: 0; +.btn-group { + padding-left: 34px; + margin: 6px auto; +} + +.tao-tab-btn { + border-radius: 100px; + padding: 6px 19px; + z-index: 200; +} + +.tao-tab-btn-saved { + border: 1px solid $tao-plum-900; + background: white !important; +} + +.active { + background-color: white !important; + color: $tao-gray-900; +} + +.disabled { + background: white !important; + color: $tao-gray-900; + } .loader { diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 0c41590..dcf45fd 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'; files: string[]; codeState = 'SAVED'; deployButtonState = 'DEPLOYED';