From ff53319631cbd9592755ac534c6f0860cdd2336e Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 15:02:02 +0100 Subject: [PATCH 01/21] Using global CSS and shadow DOM CSSs as well --- .angular-cli.json | 7 +- src/{ => assets/images}/favicon.ico | Bin src/assets/scss/_main.scss | 10 ++ src/assets/scss/_variables.scss | 160 +++++++++++++++++++++++++++ src/assets/scss/shared/_buttons.scss | 47 ++++++++ src/index.html | 2 +- src/styles.scss | 2 + 7 files changed, 224 insertions(+), 4 deletions(-) rename src/{ => assets/images}/favicon.ico (100%) create mode 100644 src/assets/scss/_main.scss create mode 100644 src/assets/scss/_variables.scss create mode 100644 src/assets/scss/shared/_buttons.scss 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/favicon.ico b/src/assets/images/favicon.ico similarity index 100% rename from src/favicon.ico rename to src/assets/images/favicon.ico diff --git a/src/assets/scss/_main.scss b/src/assets/scss/_main.scss new file mode 100644 index 0000000..c63ec31 --- /dev/null +++ b/src/assets/scss/_main.scss @@ -0,0 +1,10 @@ + + +@import 'variables'; + +@import + 'shared/buttons'; + + + + diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss new file mode 100644 index 0000000..b1b9c21 --- /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)); + +// Custom sizes + +$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/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"; From b2d5da1262b295ee97f9848b3e85bceeaf3b40e6 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 16:25:44 +0100 Subject: [PATCH 02/21] Grid logo and title is centered using grid layout --- src/app/dashboard/dashboard.component.scss | 20 ++++ src/app/header/header.component.html | 19 ++-- src/app/header/header.component.scss | 103 +++++++++++++++------ src/assets/images/favicon.ico | Bin 5430 -> 1633 bytes src/assets/scss/_grid.scss | 44 +++++++++ src/assets/scss/_main.scss | 4 +- src/assets/scss/_variables.scss | 2 +- 7 files changed, 154 insertions(+), 38 deletions(-) mode change 100644 => 100755 src/assets/images/favicon.ico create mode 100644 src/assets/scss/_grid.scss diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 9d68c22..4a5b9de 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,5 +1,25 @@ +// +// 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; + +$tao-navbar-height: 67px; + .tfw-first-row { height: 40vh; + margin-top: $tao-navbar-height + $space; } .tfw-second-row {} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index b96b5f7..01e7202 100644 --- 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 index 1920a5b..299f9d4 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -1,33 +1,80 @@ -@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 ); - } +// Variables + +// +// 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; + +// +// Misc +// +$tao-blue-500: #277EEC; +$font-size-base: 14px; +$font-size-h4: floor(($font-size-base * 1.2)); + +$tao-navbar-height: 67px; + + +// +// Classes +// +.tao-header-title { + color: $tao-blue-500; + font-size: $font-size-h4; } -.logo { - animation: heartbeat 1s infinite; +.tao-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; +} + +.tao-grid-navbar { + display: grid; + grid-template-columns: 10fr 1fr 10fr; + grid-column-gap: 8px; + width: 100%; +} + +.tao-company-logo { + display: block; + width: 130px; +} + +.tao-company-logo-mobile { + display: none; + width: 130px; +} + +@media (max-width: 767px) { + .tao-grid-navbar { + grid-template-columns: 1fr; + } + + .tao-company-logo { + display: none; + } + + .tao-company-logo-mobile { + display: block; + } + + .tao-navbar-links { + justify-self: left !important; + } } .jumbotron { diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico old mode 100644 new mode 100755 index 8081c7ceaf2be08bf59010158c586170d9d2d517..2971e83b49e7326c28bb7ecfba02cabee3fbd54f GIT binary patch literal 1633 zcmV-n2A=teP)6M#t00009a7bBm000XU z000XU0RWnu7ytkO8FWQhbW?9;ba!ELWdK2BZ(?O2No`?gWm08fWO;GPWjp`?1@1{i zK~#9!?44aqTtyVe57?#!`>_EjRBG5(P^(Bc^`lBuF2<-eCejCk;RQ6B7+*@&G*KVe zJ{gU%@X`luT6ode#B>`Q6HQIGR%^fnx0v7uC`($KQUnVsrKtwz(6i+B!fv;C&&;`- z`6m-LKz8Q-?wS9bxp(f|yqTF9kf7R~pNG{CED=>g^lN8oCMRj6|8GG3yr zu!xu-Q@Untf;p0-77gQ!kD}Q46}1N|iedAHVkj*tfHlR-p`-}Qvbn#Hj$c$|8qSSP z!^rpr=>2sJjt`Fo1G32|MzCA&UI+Kq+yI3I*Jb=)1diqQ%FFYkMhL^yg@2)^?{_%x z)es~`CdEL$;wl_P@sJ6)&5u>i0rNxsgA>s8*`S2zuJ=ZAi_Y3hmMw)ho~}`mTkQLH z;|Y7K@-8?WKMn7HF#w|%FNqoWv_X!Pu7VF=e~1OJTTeRcVDFCF+4_t_rrDjAytpxP z6YP2AzN`AKZ#_nN_d74$V+^!Ak{fhX_{6Pcu)S%c_5;NeY6`Sg$asJ+H{D^Z+onL{ zSfCv;WfiPefd{tpnLD*vL?+O0Hg7f($qsi#O||PGTznmXxthW zH4A%T+b!B`BL$h2z;lmOiJR)8ZD8-x37PHA2Sy7{lO^imEo=2ara_PIKsJ^cAM7&a z&zMr`h-6mC_gAk0$%@=uq&yR~z7z-uxG*NL zkfpBZ@#@F3lkAXLg^NriEBV{s>}xU*a)Psh6W^Z`4f#mV8GcXBc0Y*4>dXES(U3ps zJ*_RfIL1}M;KUU4^vU$*c=w2wKAsc@7*~MqJ2Id(PiFOH%rY=)MA=0A z)NC))2|3PP(eA_jv(Y0#nDKNR{aNpfk9IO)&9%_`cI`_T2aGH9U+d~MHm#0vSBAFH z@xc#9eYkD^ciPt~YlV#ZC~?XNXpG=j_k3&QF$eGC445-(c}N}CJKzdW9XDFhgV7=k zt+t=HsYs`;nm_&NEWG&cH>}fcw1>S12jKblx{W^0AmYIsTw&St_=YPUA@gIRfqAg5 zG%Zsk&)b8Dai_nmEaZXe(ySgaOXs`YeWP&T>!bv@86i7xd4D&fN{!sek(}$Ghebg4fIgN( zfH7!f?F5dXRdI4;Fhsx(1<$Y;$S&BJLq7}5_XZht$ORac6bG3=cT!gintgPrwl{cI zPsxN#pp#@DL5ON>-!|3W)&>417qTa+!>a5O3LD3euxe+z8^&yqS>F9bJJw>fpl_Sr zR28kPb)mQ9c-oA;k>h4XJ^NeC=w&Ym`zg(~fDs$b_O)>o7=Hv3vgaT$T2il! z1UI&rCBYOBe&)=W?zZQddb1?m8IQOMo`h?;<%M}|f=ZmO7>ZP$l-GB9PJsIro?a!m f7q0uQ{{$ESYP%%$v`;pP00000NkvXXu0mjfM^z0x literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- Date: Mon, 5 Mar 2018 16:26:05 +0100 Subject: [PATCH 03/21] Add missing avatao logo --- src/assets/images/avatao_logo.svg | 47 +++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100755 src/assets/images/avatao_logo.svg diff --git a/src/assets/images/avatao_logo.svg b/src/assets/images/avatao_logo.svg new file mode 100755 index 0000000..3aa8601 --- /dev/null +++ b/src/assets/images/avatao_logo.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + From eeaefac59e1d904bfe5317800ec7c0eee329d6d1 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 16:56:27 +0100 Subject: [PATCH 04/21] Use grid layout instead of bootstrap columns --- src/app/dashboard/dashboard.component.html | 14 ++++---------- src/app/dashboard/dashboard.component.scss | 17 ++++++++++++++--- src/app/header/header.component.html | 8 ++++---- src/app/header/header.component.scss | 6 +++--- src/app/webide/webide.component.scss | 2 +- 5 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 8420599..3a77223 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,12 +1,6 @@ -
-
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 4a5b9de..6c0d81f 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -17,9 +17,20 @@ $nano: 0.125 * $space; $tao-navbar-height: 67px; -.tfw-first-row { - height: 40vh; +.tao-grid-components { + display: grid; margin-top: $tao-navbar-height + $space; + grid-template-columns: 1fr 2fr 2fr; + grid-column-gap: $space; + width: 100%; } -.tfw-second-row {} +.tao-grid-middle-component { + display: grid; + width: 100%; + grid-template-columns: 1fr; + grid-template-rows: auto; + align-items: start; + justify-items: center; + justify-content: center; +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 01e7202..bbec9fe 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,11 +1,11 @@ diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 299f9d4..2da33d4 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -21,7 +21,7 @@ $nano: 0.125 * $space; // $tao-blue-500: #277EEC; $font-size-base: 14px; -$font-size-h4: floor(($font-size-base * 1.2)); +$font-size-h3: floor(($font-size-base * 1.3)); $tao-navbar-height: 67px; @@ -31,7 +31,7 @@ $tao-navbar-height: 67px; // .tao-header-title { color: $tao-blue-500; - font-size: $font-size-h4; + font-size: $font-size-h3; } .tao-navbar { @@ -44,7 +44,7 @@ $tao-navbar-height: 67px; .tao-grid-navbar { display: grid; - grid-template-columns: 10fr 1fr 10fr; + grid-template-columns: 1fr 1fr; grid-column-gap: 8px; width: 100%; } diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index f4e8af5..6008505 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -1,5 +1,5 @@ .tfw-ace-editor { - min-height: 30vh; + min-height: 100vh; height: 80%; width: 100%; overflow: auto; From 1adb32a410922190ac664697f1010967f64fcc27 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:18:51 +0100 Subject: [PATCH 05/21] Use grid layout for messages --- src/app/messages/messages.component.html | 20 +-- src/app/messages/messages.component.scss | 193 ++++++++++++++++++++++- src/assets/images/avataobot.svg | 1 + 3 files changed, 196 insertions(+), 18 deletions(-) mode change 100644 => 100755 src/app/messages/messages.component.html mode change 100644 => 100755 src/app/messages/messages.component.scss create mode 100755 src/assets/images/avataobot.svg diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html old mode 100644 new mode 100755 index 733d749..611e077 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -1,11 +1,11 @@ -
-
    -
  • -

    - {{message.originator}} - {{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}
    - -

    -
    • -
+
+
Instructions
+
+
+ +
{{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 old mode 100644 new mode 100755 index 3cc4d7a..8e4eb5c --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -1,14 +1,191 @@ -div { +// +// 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-size-nano: 11px; +$font-size-tiny: 12px; +$font-size-small: 13px; +$font-size-base: 14px; + + +.tao-messages-main { display: block; overflow: auto; - max-height: 100%; + + h5 { + margin-bottom: $small; + color: $tao-blue-500; + font-weight: 500; + } +} +.tao-grid-message { + display: grid; + grid-template-rows: 1fr auto; + grid-row-gap: $nano; + width: 100%; + + background-color: $tao-gray-100; + border-radius: $tao-panel-border-radius-sm; + padding: $tiny; + font-size: $font-size-base; + margin-bottom: $small; } -ul { - max-height: inherit; - list-style-type: none; +.tao-grid-message-header { + display: grid; + grid-template-columns: 1fr 5fr 8fr; + grid-column-gap: 0; + width: 100%; + + img { + width: 12px; + } + + .timestamp { + font-size: $font-size-tiny; + opacity: 0.37; + } + } -.timestamp { - opacity: 0.37; -} 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 From 603cdb99114d0127af3c2b6c7f9cc7ed1722c755 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:20:43 +0100 Subject: [PATCH 06/21] New grid layout for dashboard. This is only one suggested template view. Use cases may need different ones --- src/app/dashboard/dashboard.component.html | 15 +- src/app/dashboard/dashboard.component.scss | 157 +++++++++++++++++++-- 2 files changed, 159 insertions(+), 13 deletions(-) mode change 100644 => 100755 src/app/dashboard/dashboard.component.html mode change 100644 => 100755 src/app/dashboard/dashboard.component.scss diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html old mode 100644 new mode 100755 index 3a77223..ac963db --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,6 +1,13 @@ -
-
-
-
+
+
+
+
+
+
+
+
+
+
+ diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss old mode 100644 new mode 100755 index 6c0d81f..684d562 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -15,22 +15,161 @@ $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; -.tao-grid-components { +.tao-grid-main-components { display: grid; - margin-top: $tao-navbar-height + $space; - grid-template-columns: 1fr 2fr 2fr; - grid-column-gap: $space; + margin-top: $tao-navbar-height; + grid-template-columns: 3fr 2fr; + grid-column-gap: 0; width: 100%; } -.tao-grid-middle-component { + +.tao-grid-main-left-components { display: grid; width: 100%; + height: 100vh; grid-template-columns: 1fr; - grid-template-rows: auto; - align-items: start; - justify-items: center; - justify-content: center; + grid-template-rows: 1fr 1fr; + grid-row-gap: 0; +} + +.tao-grid-inner-left-components { + display: grid; + width: 100%; + grid-template-columns: 1fr 2fr; + grid-auto-rows: auto; + grid-template-rows: auto; +} + +.tao-messages-component { + background-color: $tao-gray-50; + padding: $space; +} + +.tao-web-component { + padding: $space; } From ed8f09b11de812ec3a204350b6f4c6e23a80e075 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:22:20 +0100 Subject: [PATCH 07/21] Logo is aligned to the left in the header, but still using grid layout --- src/app/header/header.component.html | 4 ++-- src/app/header/header.component.scss | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) mode change 100644 => 100755 src/app/header/header.component.html mode change 100644 => 100755 src/app/header/header.component.scss diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html old mode 100644 new mode 100755 index bbec9fe..bb24607 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -3,8 +3,8 @@ - -
    + +
    • Tutorials
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss old mode 100644 new mode 100755 index 2da33d4..6732de0 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -25,6 +25,7 @@ $font-size-h3: floor(($font-size-base * 1.3)); $tao-navbar-height: 67px; +$company-logo-width: 130px; // // Classes @@ -44,14 +45,14 @@ $tao-navbar-height: 67px; .tao-grid-navbar { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: $company-logo-width 1fr; grid-column-gap: 8px; width: 100%; } .tao-company-logo { display: block; - width: 130px; + width: $company-logo-width; } .tao-company-logo-mobile { From a3ab5f52b67756a2d463155d62f6e55d779ee7c7 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 15:02:02 +0100 Subject: [PATCH 08/21] Using global CSS and shadow DOM CSSs as well --- .angular-cli.json | 7 +- src/{ => assets/images}/favicon.ico | Bin src/assets/scss/_main.scss | 10 ++ src/assets/scss/_variables.scss | 160 +++++++++++++++++++++++++++ src/assets/scss/shared/_buttons.scss | 47 ++++++++ src/index.html | 2 +- src/styles.scss | 2 + 7 files changed, 224 insertions(+), 4 deletions(-) rename src/{ => assets/images}/favicon.ico (100%) create mode 100644 src/assets/scss/_main.scss create mode 100644 src/assets/scss/_variables.scss create mode 100644 src/assets/scss/shared/_buttons.scss 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/favicon.ico b/src/assets/images/favicon.ico similarity index 100% rename from src/favicon.ico rename to src/assets/images/favicon.ico diff --git a/src/assets/scss/_main.scss b/src/assets/scss/_main.scss new file mode 100644 index 0000000..c63ec31 --- /dev/null +++ b/src/assets/scss/_main.scss @@ -0,0 +1,10 @@ + + +@import 'variables'; + +@import + 'shared/buttons'; + + + + diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss new file mode 100644 index 0000000..b1b9c21 --- /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)); + +// Custom sizes + +$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/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"; From f6843b21b6dd30f4681c8501ac047e38900e25ec Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 16:25:44 +0100 Subject: [PATCH 09/21] Grid logo and title is centered using grid layout --- src/app/dashboard/dashboard.component.scss | 20 ++++ src/app/header/header.component.html | 19 ++-- src/app/header/header.component.scss | 103 +++++++++++++++------ src/assets/images/favicon.ico | Bin 5430 -> 1633 bytes src/assets/scss/_grid.scss | 44 +++++++++ src/assets/scss/_main.scss | 4 +- src/assets/scss/_variables.scss | 2 +- 7 files changed, 154 insertions(+), 38 deletions(-) mode change 100644 => 100755 src/assets/images/favicon.ico create mode 100644 src/assets/scss/_grid.scss diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 9d68c22..4a5b9de 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,5 +1,25 @@ +// +// 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; + +$tao-navbar-height: 67px; + .tfw-first-row { height: 40vh; + margin-top: $tao-navbar-height + $space; } .tfw-second-row {} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index b96b5f7..01e7202 100644 --- 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 index 1920a5b..299f9d4 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -1,33 +1,80 @@ -@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 ); - } +// Variables + +// +// 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; + +// +// Misc +// +$tao-blue-500: #277EEC; +$font-size-base: 14px; +$font-size-h4: floor(($font-size-base * 1.2)); + +$tao-navbar-height: 67px; + + +// +// Classes +// +.tao-header-title { + color: $tao-blue-500; + font-size: $font-size-h4; } -.logo { - animation: heartbeat 1s infinite; +.tao-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; +} + +.tao-grid-navbar { + display: grid; + grid-template-columns: 10fr 1fr 10fr; + grid-column-gap: 8px; + width: 100%; +} + +.tao-company-logo { + display: block; + width: 130px; +} + +.tao-company-logo-mobile { + display: none; + width: 130px; +} + +@media (max-width: 767px) { + .tao-grid-navbar { + grid-template-columns: 1fr; + } + + .tao-company-logo { + display: none; + } + + .tao-company-logo-mobile { + display: block; + } + + .tao-navbar-links { + justify-self: left !important; + } } .jumbotron { diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico old mode 100644 new mode 100755 index 8081c7ceaf2be08bf59010158c586170d9d2d517..2971e83b49e7326c28bb7ecfba02cabee3fbd54f GIT binary patch literal 1633 zcmV-n2A=teP)6M#t00009a7bBm000XU z000XU0RWnu7ytkO8FWQhbW?9;ba!ELWdK2BZ(?O2No`?gWm08fWO;GPWjp`?1@1{i zK~#9!?44aqTtyVe57?#!`>_EjRBG5(P^(Bc^`lBuF2<-eCejCk;RQ6B7+*@&G*KVe zJ{gU%@X`luT6ode#B>`Q6HQIGR%^fnx0v7uC`($KQUnVsrKtwz(6i+B!fv;C&&;`- z`6m-LKz8Q-?wS9bxp(f|yqTF9kf7R~pNG{CED=>g^lN8oCMRj6|8GG3yr zu!xu-Q@Untf;p0-77gQ!kD}Q46}1N|iedAHVkj*tfHlR-p`-}Qvbn#Hj$c$|8qSSP z!^rpr=>2sJjt`Fo1G32|MzCA&UI+Kq+yI3I*Jb=)1diqQ%FFYkMhL^yg@2)^?{_%x z)es~`CdEL$;wl_P@sJ6)&5u>i0rNxsgA>s8*`S2zuJ=ZAi_Y3hmMw)ho~}`mTkQLH z;|Y7K@-8?WKMn7HF#w|%FNqoWv_X!Pu7VF=e~1OJTTeRcVDFCF+4_t_rrDjAytpxP z6YP2AzN`AKZ#_nN_d74$V+^!Ak{fhX_{6Pcu)S%c_5;NeY6`Sg$asJ+H{D^Z+onL{ zSfCv;WfiPefd{tpnLD*vL?+O0Hg7f($qsi#O||PGTznmXxthW zH4A%T+b!B`BL$h2z;lmOiJR)8ZD8-x37PHA2Sy7{lO^imEo=2ara_PIKsJ^cAM7&a z&zMr`h-6mC_gAk0$%@=uq&yR~z7z-uxG*NL zkfpBZ@#@F3lkAXLg^NriEBV{s>}xU*a)Psh6W^Z`4f#mV8GcXBc0Y*4>dXES(U3ps zJ*_RfIL1}M;KUU4^vU$*c=w2wKAsc@7*~MqJ2Id(PiFOH%rY=)MA=0A z)NC))2|3PP(eA_jv(Y0#nDKNR{aNpfk9IO)&9%_`cI`_T2aGH9U+d~MHm#0vSBAFH z@xc#9eYkD^ciPt~YlV#ZC~?XNXpG=j_k3&QF$eGC445-(c}N}CJKzdW9XDFhgV7=k zt+t=HsYs`;nm_&NEWG&cH>}fcw1>S12jKblx{W^0AmYIsTw&St_=YPUA@gIRfqAg5 zG%Zsk&)b8Dai_nmEaZXe(ySgaOXs`YeWP&T>!bv@86i7xd4D&fN{!sek(}$Ghebg4fIgN( zfH7!f?F5dXRdI4;Fhsx(1<$Y;$S&BJLq7}5_XZht$ORac6bG3=cT!gintgPrwl{cI zPsxN#pp#@DL5ON>-!|3W)&>417qTa+!>a5O3LD3euxe+z8^&yqS>F9bJJw>fpl_Sr zR28kPb)mQ9c-oA;k>h4XJ^NeC=w&Ym`zg(~fDs$b_O)>o7=Hv3vgaT$T2il! z1UI&rCBYOBe&)=W?zZQddb1?m8IQOMo`h?;<%M}|f=ZmO7>ZP$l-GB9PJsIro?a!m f7q0uQ{{$ESYP%%$v`;pP00000NkvXXu0mjfM^z0x literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- Date: Mon, 5 Mar 2018 16:26:05 +0100 Subject: [PATCH 10/21] Add missing avatao logo --- src/assets/images/avatao_logo.svg | 47 +++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100755 src/assets/images/avatao_logo.svg diff --git a/src/assets/images/avatao_logo.svg b/src/assets/images/avatao_logo.svg new file mode 100755 index 0000000..3aa8601 --- /dev/null +++ b/src/assets/images/avatao_logo.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + From e1f0bdfb57860d042313822226a2f121a4e9d988 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 16:56:27 +0100 Subject: [PATCH 11/21] Use grid layout instead of bootstrap columns --- src/app/dashboard/dashboard.component.html | 14 ++++---------- src/app/dashboard/dashboard.component.scss | 17 ++++++++++++++--- src/app/header/header.component.html | 8 ++++---- src/app/header/header.component.scss | 6 +++--- src/app/webide/webide.component.scss | 2 +- 5 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 8420599..3a77223 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,12 +1,6 @@ -
-
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 4a5b9de..6c0d81f 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -17,9 +17,20 @@ $nano: 0.125 * $space; $tao-navbar-height: 67px; -.tfw-first-row { - height: 40vh; +.tao-grid-components { + display: grid; margin-top: $tao-navbar-height + $space; + grid-template-columns: 1fr 2fr 2fr; + grid-column-gap: $space; + width: 100%; } -.tfw-second-row {} +.tao-grid-middle-component { + display: grid; + width: 100%; + grid-template-columns: 1fr; + grid-template-rows: auto; + align-items: start; + justify-items: center; + justify-content: center; +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 01e7202..bbec9fe 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,11 +1,11 @@ diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 299f9d4..2da33d4 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -21,7 +21,7 @@ $nano: 0.125 * $space; // $tao-blue-500: #277EEC; $font-size-base: 14px; -$font-size-h4: floor(($font-size-base * 1.2)); +$font-size-h3: floor(($font-size-base * 1.3)); $tao-navbar-height: 67px; @@ -31,7 +31,7 @@ $tao-navbar-height: 67px; // .tao-header-title { color: $tao-blue-500; - font-size: $font-size-h4; + font-size: $font-size-h3; } .tao-navbar { @@ -44,7 +44,7 @@ $tao-navbar-height: 67px; .tao-grid-navbar { display: grid; - grid-template-columns: 10fr 1fr 10fr; + grid-template-columns: 1fr 1fr; grid-column-gap: 8px; width: 100%; } diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index f4e8af5..6008505 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -1,5 +1,5 @@ .tfw-ace-editor { - min-height: 30vh; + min-height: 100vh; height: 80%; width: 100%; overflow: auto; From a7aa8900198e60cbb3db745b059636d4d5afc95a Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:18:51 +0100 Subject: [PATCH 12/21] Use grid layout for messages --- src/app/messages/messages.component.html | 20 +-- src/app/messages/messages.component.scss | 193 ++++++++++++++++++++++- src/assets/images/avataobot.svg | 1 + 3 files changed, 196 insertions(+), 18 deletions(-) mode change 100644 => 100755 src/app/messages/messages.component.html mode change 100644 => 100755 src/app/messages/messages.component.scss create mode 100755 src/assets/images/avataobot.svg diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html old mode 100644 new mode 100755 index 733d749..611e077 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -1,11 +1,11 @@ -
-
    -
  • -

    - {{message.originator}} - {{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}
    - -

    -
    • -
+
+
Instructions
+
+
+ +
{{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 old mode 100644 new mode 100755 index 3cc4d7a..8e4eb5c --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -1,14 +1,191 @@ -div { +// +// 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-size-nano: 11px; +$font-size-tiny: 12px; +$font-size-small: 13px; +$font-size-base: 14px; + + +.tao-messages-main { display: block; overflow: auto; - max-height: 100%; + + h5 { + margin-bottom: $small; + color: $tao-blue-500; + font-weight: 500; + } +} +.tao-grid-message { + display: grid; + grid-template-rows: 1fr auto; + grid-row-gap: $nano; + width: 100%; + + background-color: $tao-gray-100; + border-radius: $tao-panel-border-radius-sm; + padding: $tiny; + font-size: $font-size-base; + margin-bottom: $small; } -ul { - max-height: inherit; - list-style-type: none; +.tao-grid-message-header { + display: grid; + grid-template-columns: 1fr 5fr 8fr; + grid-column-gap: 0; + width: 100%; + + img { + width: 12px; + } + + .timestamp { + font-size: $font-size-tiny; + opacity: 0.37; + } + } -.timestamp { - opacity: 0.37; -} 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 From 87fd5400749b41f8a14cba46992da0eb6f35d37d Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:20:43 +0100 Subject: [PATCH 13/21] New grid layout for dashboard. This is only one suggested template view. Use cases may need different ones --- src/app/dashboard/dashboard.component.html | 15 +- src/app/dashboard/dashboard.component.scss | 157 +++++++++++++++++++-- 2 files changed, 159 insertions(+), 13 deletions(-) mode change 100644 => 100755 src/app/dashboard/dashboard.component.html mode change 100644 => 100755 src/app/dashboard/dashboard.component.scss diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html old mode 100644 new mode 100755 index 3a77223..ac963db --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,6 +1,13 @@ -
-
-
-
+
+
+
+
+
+
+
+
+
+
+ diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss old mode 100644 new mode 100755 index 6c0d81f..684d562 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -15,22 +15,161 @@ $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; -.tao-grid-components { +.tao-grid-main-components { display: grid; - margin-top: $tao-navbar-height + $space; - grid-template-columns: 1fr 2fr 2fr; - grid-column-gap: $space; + margin-top: $tao-navbar-height; + grid-template-columns: 3fr 2fr; + grid-column-gap: 0; width: 100%; } -.tao-grid-middle-component { + +.tao-grid-main-left-components { display: grid; width: 100%; + height: 100vh; grid-template-columns: 1fr; - grid-template-rows: auto; - align-items: start; - justify-items: center; - justify-content: center; + grid-template-rows: 1fr 1fr; + grid-row-gap: 0; +} + +.tao-grid-inner-left-components { + display: grid; + width: 100%; + grid-template-columns: 1fr 2fr; + grid-auto-rows: auto; + grid-template-rows: auto; +} + +.tao-messages-component { + background-color: $tao-gray-50; + padding: $space; +} + +.tao-web-component { + padding: $space; } From b219c29883609b38d982014231e60bdf22e88715 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:22:20 +0100 Subject: [PATCH 14/21] Logo is aligned to the left in the header, but still using grid layout --- src/app/header/header.component.html | 4 ++-- src/app/header/header.component.scss | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) mode change 100644 => 100755 src/app/header/header.component.html mode change 100644 => 100755 src/app/header/header.component.scss diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html old mode 100644 new mode 100755 index bbec9fe..bb24607 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -3,8 +3,8 @@ - -
    + +
    • Tutorials
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss old mode 100644 new mode 100755 index 2da33d4..6732de0 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -25,6 +25,7 @@ $font-size-h3: floor(($font-size-base * 1.3)); $tao-navbar-height: 67px; +$company-logo-width: 130px; // // Classes @@ -44,14 +45,14 @@ $tao-navbar-height: 67px; .tao-grid-navbar { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: $company-logo-width 1fr; grid-column-gap: 8px; width: 100%; } .tao-company-logo { display: block; - width: 130px; + width: $company-logo-width; } .tao-company-logo-mobile { From 1b9da0b03c3c8701ca3ef56dfeee0fc48f3f9528 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 17:21:54 +0100 Subject: [PATCH 15/21] 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'; From 2bfa60642e142296f080d67af49e123208e3416d Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Thu, 8 Mar 2018 13:43:53 +0100 Subject: [PATCH 16/21] Add simple and more easy to use grid layout framework --- src/app/dashboard/dashboard.component.html | 12 ++---- src/app/dashboard/dashboard.component.scss | 49 ++++++++++------------ src/app/messages/messages.component.scss | 2 - 3 files changed, 25 insertions(+), 38 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 8f432cd..d18fd75 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,13 +1,7 @@
-
-
-
-
-
-
-
+
+
- +
- diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index ea554fd..31c8ee3 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -140,42 +140,37 @@ $tao-gray-900: #000000; $tao-navbar-height: 67px; .tao-grid-main-components { - display: grid; - margin-top: $tao-navbar-height; - grid-template-columns: 3fr 2fr; - grid-column-gap: 0; - width: 100%; -} - -.tao-grid-main-left-components { display: grid; - width: 100%; + padding-top: $tao-navbar-height; + width: 100vw; height: 100vh; - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr; - grid-row-gap: 0; -} - -.tao-grid-inner-left-components { - display: grid; - width: 100%; - grid-template-columns: 1fr 2fr; - grid-auto-rows: auto; - grid-template-rows: auto; -} - -.tao-messages-component { - background-color: $tao-gray-50; - padding: $space; - height: calc(50vh - 10px); - + justify-content: center; + align-content: center; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr) } .tao-web-component { padding: $space; + grid-column: 2 / 4; + grid-row: 1 / 4; +} + +.tao-messages-component { + padding: $space; + background-color: $tao-gray-50; + grid-column: 1 / 2; + grid-row: 1 / 4; } .tao-webide-component { background-color: $tao-plum-900; + grid-column: 4 / -1; + grid-row: 1 / -1; +} + +.tao-terminal-component { + grid-row: 4 / -1; + grid-column: 1 / 4; } diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 3506892..54ce972 100755 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -150,8 +150,6 @@ $font-size-base: 14px; .tao-messages-main { - display: block; - h5 { margin-bottom: $small; color: $tao-blue-500; From 62052b83838eae2b8c1a2e6feffdb0aae38b5146 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Thu, 8 Mar 2018 14:04:40 +0100 Subject: [PATCH 17/21] Add vertical scrolling to messages --- src/app/messages/messages.component.html | 2 +- src/app/messages/messages.component.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index cf7f3e3..c29dd33 100755 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -4,7 +4,7 @@
{{message.originator}}
-
{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}
+
{{message.timestamp | date:'HH:mm:ss'}}
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 54ce972..73beef1 100755 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -150,12 +150,17 @@ $font-size-base: 14px; .tao-messages-main { + + max-height: 50vmin; + overflow-y: scroll; + h5 { margin-bottom: $small; color: $tao-blue-500; font-weight: 500; } } + .tao-grid-message { display: grid; grid-template-rows: 1fr auto; From d11564e58bbecb488b442af2f4d7047e6905f41a Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Thu, 8 Mar 2018 16:16:55 +0100 Subject: [PATCH 18/21] Consistent colors for webide buttons --- src/app/dashboard/dashboard.component.scss | 1 + src/app/webide/webide.component.html | 56 +++++----- src/app/webide/webide.component.scss | 123 ++++++++++++++------- src/assets/images/greentick_icon.svg | 1 + 4 files changed, 119 insertions(+), 62 deletions(-) create mode 100644 src/assets/images/greentick_icon.svg diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 31c8ee3..1a4df36 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -141,6 +141,7 @@ $tao-navbar-height: 67px; .tao-grid-main-components { + overflow-y: hidden; display: grid; padding-top: $tao-navbar-height; width: 100vw; diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index b497b66..9f7a03c 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 d6fcca3..749bf34 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -1,3 +1,21 @@ +// +// 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; + + // Tao blue palette $tao-blue-50: #F2F7FE; $tao-blue-100: #C9DFFA; @@ -118,54 +136,85 @@ $tao-gray-700: #232323; $tao-gray-800: #0C0C0C; $tao-gray-900: #000000; +.tao-grid-container { + display: grid; + grid-template-columns: 8fr 1fr; +} + .tfw-ace-editor { - min-height: 85vh; - height: 80%; + height: 100%; width: 100%; - overflow: auto; } .btn-group { padding-left: 34px; - margin: 6px auto; } .tao-tab-btn { - border-radius: 100px; - padding: 6px 19px; - z-index: 200; -} - -.tao-tab-btn-saved { + background-color: white; border: 1px solid $tao-plum-900; - background: white !important; + border-left: 0; + border-right: 0; + border-radius: 100px; + padding: 5px 19px; + z-index: 200; + + .tao-tab-btn-saved, + .active, + .disabled, + &:disabled { + background-color: $tao-bright-green-100; + color: black; + } } -.active { - background-color: white !important; - color: $tao-gray-900; +.tao-deploy-btn-group { + margin: $small; + + .tao-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, + .deploying + { + background-color: $tao-bright-green-100; + color: black; + } + + + .loader { + border: 2px solid #ffffff; + border-radius: 50%; + border-top: 2px solid $tao-bright-green-100; + 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); } + } + + } } -.disabled { - background: white !important; - color: $tao-gray-900; - -} - -.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; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} 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 From 5ac380c70262bf1cc0c643fce8396752e0c034f0 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Thu, 8 Mar 2018 17:07:21 +0100 Subject: [PATCH 19/21] Polishing button colors and starting to create templates for different layouts --- src/app/dashboard/dashboard.component.scss | 16 ++++++++ src/app/messages/messages.component.scss | 6 +-- src/app/webide/webide.component.scss | 16 +++++--- src/assets/images/avatao_logo.svg | 48 +--------------------- 4 files changed, 30 insertions(+), 56 deletions(-) mode change 100755 => 100644 src/assets/images/avatao_logo.svg diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 1a4df36..5dc2f36 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -139,6 +139,16 @@ $tao-gray-900: #000000; $tao-navbar-height: 67px; +// +// Layouts +// + +// 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; +} + .tao-grid-main-components { overflow-y: hidden; @@ -154,6 +164,7 @@ $tao-navbar-height: 67px; .tao-web-component { padding: $space; + @include position(2, 4, 1, 4); grid-column: 2 / 4; grid-row: 1 / 4; } @@ -161,17 +172,22 @@ $tao-navbar-height: 67px; .tao-messages-component { padding: $space; background-color: $tao-gray-50; + @include position(1, 2, 1, 4); grid-column: 1 / 2; grid-row: 1 / 4; + } .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; } diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 73beef1..c76d449 100755 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -164,20 +164,20 @@ $font-size-base: 14px; .tao-grid-message { display: grid; grid-template-rows: 1fr auto; - grid-row-gap: $nano; + 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: $small; + margin-bottom: $hair; } .tao-grid-message-header { display: grid; grid-template-columns: 1fr 5fr 8fr; - grid-column-gap: 0; + grid-column-gap: 4px; width: 100%; img { diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index 749bf34..4575000 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -163,7 +163,7 @@ $tao-gray-900: #000000; .active, .disabled, &:disabled { - background-color: $tao-bright-green-100; + background-color: $tao-plum-200; color: black; } } @@ -188,19 +188,23 @@ $tao-gray-900: #000000; } &:disabled, - .disabled, - .deployed, - .deploying + &.disabled, + &.deployed, + &.deploy { background-color: $tao-bright-green-100; color: black; } + &.deploy { + background-color: $tao-warm-yellow-200; + } + .loader { - border: 2px solid #ffffff; + border: 2px solid $tao-warm-yellow-600; border-radius: 50%; - border-top: 2px solid $tao-bright-green-100; + border-top: 2px solid $tao-warm-yellow-200; width: 15px; height: 15px; animation: spin 2s linear infinite; diff --git a/src/assets/images/avatao_logo.svg b/src/assets/images/avatao_logo.svg old mode 100755 new mode 100644 index 3aa8601..29bceab --- a/src/assets/images/avatao_logo.svg +++ b/src/assets/images/avatao_logo.svg @@ -1,47 +1 @@ - - - - - - - - - - - - - - - +avataologo_small \ No newline at end of file From c3f4ace7e9a742d8ee1378ca7ec98b97c5953d59 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 9 Mar 2018 18:01:12 +0100 Subject: [PATCH 20/21] 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; -} From 822b65462d6596d056abdb57165ca2cdd7300fa4 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 9 Mar 2018 18:14:40 +0100 Subject: [PATCH 21/21] Cleanup variables in Shadow DOM --- src/app/dashboard/dashboard.component.html | 2 +- src/app/dashboard/dashboard.component.scss | 17 +- src/app/header/header.component.html | 8 +- src/app/header/header.component.scss | 42 +--- src/app/messages/messages.component.html | 6 +- src/app/messages/messages.component.scss | 142 +------------- src/app/terminal/terminal.component.scss | 217 --------------------- src/app/webide/webide.component.html | 8 +- src/app/webide/webide.component.scss | 134 +------------ 9 files changed, 33 insertions(+), 543 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 77a906f..8522578 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 202ae6b..54934be 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,6 +1,3 @@ -// -// Variables -// $space: 24px; $tao-plum-900: #272F4C; @@ -8,17 +5,13 @@ $tao-gray-50: #FAFAFA; $tao-navbar-height: 67px; - -// -// Layouts -// -$layout-template: "raw"; // Change this to switch template +$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) + 'terminal': (1, 4, 4, -1), + 'web': (2, 4, 1, 4) ); $raw-layout: ( @@ -34,7 +27,6 @@ $layout: ( ); @mixin position-grid-items($map, $sel) { - $sel: if($sel == '' and &, &, $sel); @debug $sel; @@ -55,8 +47,7 @@ $layout: ( } } -.tao-grid-main-components { - +.tfw-grid-main-components { overflow-y: hidden; display: grid; padding-top: $tao-navbar-height; diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index bb24607..51cec9c 100755 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,11 +1,11 @@ -