From b460c429e6d89b0bb397b13daffb9cf99db03f23 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 20 Apr 2018 09:19:42 +0200 Subject: [PATCH 01/14] Add sidebar component that is ready to be designed and instrumented --- src/app/app.module.ts | 2 + src/app/dashboard/dashboard.component.html | 34 +++--- src/app/dashboard/dashboard.component.scss | 20 ++-- src/app/dashboard/dashboard.component.ts | 4 +- src/app/messages/messages.component.html | 2 +- src/app/sidebar/sidebar.component.html | 1 + src/app/sidebar/sidebar.component.scss | 6 + src/app/sidebar/sidebar.component.ts | 15 +++ src/app/terminal/terminal.component.scss | 2 - src/app/webide/webide.component.scss | 1 + src/assets/scss/_variables.scss | 4 - src/assets/scss/mixins/_layout.scss | 133 +++++++++++++++------ src/assets/scss/shared/_buttons.scss | 13 +- 13 files changed, 169 insertions(+), 68 deletions(-) create mode 100755 src/app/sidebar/sidebar.component.html create mode 100755 src/app/sidebar/sidebar.component.scss create mode 100644 src/app/sidebar/sidebar.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f250712..97cc73d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,7 @@ import { AceEditorModule } from 'ng2-ace-editor'; import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { HeaderComponent } from './header/header.component'; +import { SidebarComponent } from './sidebar/sidebar.component'; import { LoginComponent } from './web/web.component'; import { MarkdownService } from './services/markdown.service'; import { TerminadoService } from './services/terminado.service'; @@ -27,6 +28,7 @@ import { DeploymentNotificationService } from './services/deployment-notificatio declarations: [ AppComponent, HeaderComponent, + SidebarComponent, LoginComponent, WebideComponent, MessagesComponent, diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index b8c292c..cff0f81 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,17 +1,23 @@ -
-
-
-
-
- +
+
+
+
+
+
+ +
+
+
+ +
+
+ +
+ +
-
-
- -
-
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index e166d97..93d0887 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -11,11 +11,9 @@ grid-template-columns: repeat($grid-columns-count, 1fr); grid-template-rows: repeat($grid-rows-count, 1fr); - @include position-grid-items(map_get($layout,$layout-template),'.tfw-'); - .tfw-header, .tfw-messages { - @if ($layout-template == 'default') { + @if (str_slice($layout-key, 0, str_length('default')) == 'default') { border: 2px solid $tao-gray-100; border-top: 0; border-left: 0; @@ -34,7 +32,7 @@ background-color: $tao-gray-50; overflow-y: scroll; - @if ($layout-template != 'default') { + @if (str_slice($layout-key, 0, str_length('default')) != 'default') { max-height: 95vmin; } @else { @@ -61,14 +59,23 @@ background-color: $tao-plum-900; } + .tfw-sidebar { + background-color: $tao-turqoise-800; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + } + .tfw-terminal { overflow-y: hidden; border: 1px solid $tao-plum-100; border-bottom: 0; background-color: $tao-gray-800; - - @if ($layout-template != 'vraw') { + @if (str_slice($layout-key, 0, str_length('vraw')) == 'vraw') { border-left: 0; + border-top: 0; } } } @@ -76,4 +83,3 @@ .deploy-blur { filter: blur(3px); } - diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index ea2f7b5..9fad94c 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -14,6 +14,7 @@ export class DashboardComponent implements OnInit, OnDestroy { deploying = false; deploymentNotificationSubscription: Subscription; layout: string = config.dashboard.defaultLayout; + layout = 'vraw-closed'; command_handlers = {'layout': this.layoutHandler.bind(this)}; constructor(private deploymentNotificationService: DeploymentNotificationService, @@ -34,7 +35,8 @@ export class DashboardComponent implements OnInit, OnDestroy { layoutHandler(data: LayoutCommand) { if (data.layout.match('vraw-open|vraw-closed|hraw|default-open|default-closed')) { this.layout = data.layout; - } else { + } + else { console.log('Invalid webide layout "' + data.layout + '" received!'); } } diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index ba57822..893907b 100755 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -1,7 +1,7 @@
Instructions
-
+
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html new file mode 100755 index 0000000..2789e15 --- /dev/null +++ b/src/app/sidebar/sidebar.component.html @@ -0,0 +1 @@ +
IDE
diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss new file mode 100755 index 0000000..cab9c74 --- /dev/null +++ b/src/app/sidebar/sidebar.component.scss @@ -0,0 +1,6 @@ +@import "../../assets/scss/variables.scss"; + +.tfw-webide-pin{ + + +} diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts new file mode 100644 index 0000000..60de369 --- /dev/null +++ b/src/app/sidebar/sidebar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'] +}) +export class SidebarComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/terminal/terminal.component.scss b/src/app/terminal/terminal.component.scss index 43d03af..9826c02 100644 --- a/src/app/terminal/terminal.component.scss +++ b/src/app/terminal/terminal.component.scss @@ -2,8 +2,6 @@ @import "../../app/dashboard/dashboard.component.scss"; - - .tfw-xterm { max-height: 100%; height: 100%; diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index c93482f..c00e9f0 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -1,4 +1,5 @@ @import "../../assets/scss/variables.scss"; + .tfw-grid-webide-statusbar { display: grid; height: $tao-navbar-height; diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 5e07734..ce8bd36 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -158,7 +158,3 @@ $font-size-h5: floor(($font-size-base * 1.1)); $tao-navbar-height: 67px; $company-logo-width: 130px; - - -// Change this to switch template. Options: 'default', 'vraw', 'hraw' -$layout-template: 'default'; diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index 2850480..b2b0f09 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -1,62 +1,121 @@ -$grid-columns-count: 5; -$grid-rows-count: 15; +$grid-columns-count: 25; +$grid-rows-count: 25; -$default-layout: ( - 'header': (1, 2, 1, 2), - 'messages': (1, 2, 2, 10), - 'webide': (4,$grid-rows-count+1, 1, $grid-rows-count+1), - 'terminal': (1, 4, 10, $grid-rows-count+1), - 'web': (2, 4, 1, 10) +$layout-key: 'vraw-open'; + +$default-open-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2, 10), + 'webide': (15,$grid-columns-count+1, 1, $grid-rows-count+1), + 'terminal': (1, 15, 10, $grid-rows-count+1), + 'web': (6, 15, 1, 10), + 'sidebar': () ); -$vraw-layout: ( - 'header': (1, 2, 1, 2), - 'messages': (1, 2, 2,$grid-rows-count+1), - 'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1), - 'terminal': (2, 4, 1,$grid-rows-count+1), +$default-closed-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2, 10), + 'webide': (16,$grid-columns-count+1, 1, $grid-rows-count+1), + 'terminal': (1, 16, 10, $grid-rows-count+1), + 'web': (6, 15, 1, 10), + 'sidebar': () +); + +$vraw-open-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2,$grid-rows-count+1), + 'webide': (16, $grid-columns-count+1, 1,$grid-rows-count+1), + 'terminal': (6, 16, 1, $grid-rows-count+1), 'web': (), + 'sidebar': (), +); + +$vraw-closed-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2,$grid-rows-count+1), + 'webide': (), + 'terminal': (6, $grid-columns-count, 1,$grid-rows-count+1), + 'web': (), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); $hraw-layout: ( - 'header': (1, 2, 1,$grid-rows-count+1), - 'messages': (1, 2, 2,$grid-rows-count+1), - 'webide': (2,$grid-rows-count+1, 1, 10), - 'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count+1), + 'header': (1, 4, 1,$grid-rows-count+1), + 'messages': (1, 4, 2,$grid-rows-count+1), + 'webide': (4,$grid-columns-count+1, 1, 10), + 'terminal': (4, $grid-columns-count+1, 10, $grid-rows-count+1), 'web': (), + 'sidebar': (), ); -$layout: ( - 'default': $default-layout, - 'vraw': $vraw-layout, +$layouts: ( + 'default-open': $default-open-layout, + 'default-closed': $default-closed-layout, + 'vraw-open': $vraw-open-layout, + 'vraw-closed': $vraw-closed-layout, 'hraw': $hraw-layout ); +@mixin set-layout($layout_key) { + @if(index(map_keys($layouts), $layout_key)) { + $layout: map_get($layouts, $layout_key) + } + @else { + @error 'Invalid layout value: "#{$layout_key}"' + } +} + +@function get-layout(){ + @return map_get($layouts, $layout_key); +} @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); - } + @each $k, $v in $map { + #{$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); } } } } @mixin set-component-size($key) { - $columns-count: nth(map_get($default-layout, $key),2) - nth(map_get($default-layout, $key),1); - $rows-count: nth(map_get($default-layout, $key),4) - nth(map_get($default-layout, $key),3); + $tfw-component: map_get(get-layout(), $key); - min-width: #{$columns-count / $grid-columns-count * 100}vw; - min-height: #{$rows-count / $grid-rows-count * 100}vh; + @if (length($tfw-component) > 0) { + $columns-count: nth($tfw-component,2) - nth($tfw-component,1); + $rows-count: nth($tfw-component,4) - nth($tfw-component,3); + + min-width: #{$columns-count / $grid-columns-count * 100}vw; + min-height: #{$rows-count / $grid-rows-count * 100}vh; + } +} + + +[tfw-layout='vraw-open'] { + @include position-grid-items(map_get($layouts,'vraw-open'),'.tfw-'); +} + +[tfw-layout='vraw-closed'] { + @include position-grid-items(map_get($layouts,'vraw-closed'),'.tfw-'); +} + +[tfw-layout='hraw'] { + @include position-grid-items(map_get($layouts,'hraw'),'.tfw-'); +} + +[tfw-layout='default-open'] { + @include position-grid-items(map_get($layouts, 'default-open'),'.tfw-'); +} + +[tfw-layout='default-closed'] { + @include position-grid-items(map_get($layouts,'default-closed'),'.tfw-'); } diff --git a/src/assets/scss/shared/_buttons.scss b/src/assets/scss/shared/_buttons.scss index d995931..9215b32 100644 --- a/src/assets/scss/shared/_buttons.scss +++ b/src/assets/scss/shared/_buttons.scss @@ -41,14 +41,23 @@ .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; + transition: all 0.18s ease; color: white; border: none; text-decoration: none !important; + box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29); + + + &:active { + box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09); + background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%); + color: white; + padding: 5px 18px; + } &:hover { - box-shadow: none; background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%); + box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29); color: white; } } From 959a0df3d676b7935522f41bd6a3332f87a67873 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 20 Apr 2018 09:21:20 +0200 Subject: [PATCH 02/14] Use fix sidebar to instrument and control layout changes --- src/app/app-routing.module.ts | 4 +- src/app/app.module.ts | 4 +- src/app/config.ts | 33 +++-- src/app/dashboard/dashboard.component.html | 6 +- src/app/dashboard/dashboard.component.scss | 95 +++++++++---- src/app/dashboard/dashboard.component.ts | 7 +- src/app/ide/ide.component.html | 44 ++++++ src/app/ide/ide.component.scss | 95 +++++++++++++ src/app/ide/ide.component.ts | 154 +++++++++++++++++++++ src/app/ide/source-code.ts | 7 + src/app/sidebar/sidebar.component.html | 5 +- src/app/sidebar/sidebar.component.scss | 16 ++- src/assets/images/IDE.svg | 1 + src/assets/images/IDE_active.svg | 1 + src/assets/scss/_variables.scss | 3 + src/assets/scss/mixins/_layout.scss | 123 ++++++++-------- 16 files changed, 487 insertions(+), 111 deletions(-) create mode 100644 src/app/ide/ide.component.html create mode 100644 src/app/ide/ide.component.scss create mode 100644 src/app/ide/ide.component.ts create mode 100644 src/app/ide/source-code.ts create mode 100644 src/assets/images/IDE.svg create mode 100644 src/assets/images/IDE_active.svg diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d08e84e..b8d5a95 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; -import { WebideComponent } from './webide/webide.component'; +import { IdeComponent } from './ide/ide.component'; import { TerminalComponent } from './terminal/terminal.component'; import { MessagesComponent } from './messages/messages.component'; import { TestmessengerComponent } from './testmessenger/testmessenger.component'; @@ -11,7 +11,7 @@ import { config } from './config'; const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full'}, { path: config.dashboard.route, component: DashboardComponent}, - { path: config.webide.route, component: WebideComponent }, + { path: config.ide.route, component: IdeComponent }, { path: config.terminal.route, component: TerminalComponent }, { path: config.messages.route, component: MessagesComponent }, { path: config.testmessenger.route, component: TestmessengerComponent } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 97cc73d..d829e55 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,7 +13,7 @@ import { SidebarComponent } from './sidebar/sidebar.component'; import { LoginComponent } from './web/web.component'; import { MarkdownService } from './services/markdown.service'; import { TerminadoService } from './services/terminado.service'; -import { WebideComponent } from './webide/webide.component'; +import { IdeComponent } from './ide/ide.component'; import { MessagesComponent } from './messages/messages.component'; import { WebSocketService } from './services/websocket.service'; import { TerminalComponent } from './terminal/terminal.component'; @@ -30,7 +30,7 @@ import { DeploymentNotificationService } from './services/deployment-notificatio HeaderComponent, SidebarComponent, LoginComponent, - WebideComponent, + IdeComponent, MessagesComponent, TerminalComponent, DashboardComponent, diff --git a/src/app/config.ts b/src/app/config.ts index c6f135d..319178c 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,24 +1,31 @@ export const config = { dashboard: { - 'route': 'dashboard', - 'defaultLayout': 'vraw-open' + route: 'dashboard', + defaultLayout: 'terminal-ide-vertical', + enabledLayouts: [ + 'terminal-ide-vertical', + 'terminal-ide-horizontal', + 'terminal-only', + 'ide-only' + ] + }, - webide: { - 'route': 'webide', - 'autoSaveInterval': 444, - 'defaultCode': 'Loading your file...', - 'defaultLanguage': 'text', - 'deployProcessName': 'login', - 'showDeployButton': true + ide: { + route: 'ide', + autoSaveInterval: 444, + defaultCode: 'Loading your file...', + defaultLanguage: 'text', + deployProcessName: 'login', + showDeployButton: true }, terminal: { - 'route': 'shell' + route: 'shell' }, messages: { - 'route': 'messages', - 'showNextButton': false + route: 'messages', + showNextButton: false }, testmessenger: { - 'route': 'testmessenger' + route: 'testmessenger' } }; diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index cff0f81..376d504 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,4 +1,4 @@ -
+
@@ -10,7 +10,9 @@ src="about:blank">
-
+
+ +
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 93d0887..0ad7a3f 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -2,6 +2,24 @@ @import "../../assets/scss/mixins/layout.scss"; +@mixin set-tfw-web($layouts-key) { + + .tfw-web { + .iframe-container { + display: flex; + overflow: hidden; + @include set-component-size($layouts-key, 'web'); + } + + .iframe { + flex-grow: 1; + border: none; + margin: 0; + padding: $small; + } + } +} + .tfw-grid-main-components { display: grid; width: 100vw; @@ -13,7 +31,9 @@ .tfw-header, .tfw-messages { - @if (str_slice($layout-key, 0, str_length('default')) == 'default') { + + // Check whether the layout contains a web component + div[class*="web"] & { border: 2px solid $tao-gray-100; border-top: 0; border-left: 0; @@ -31,51 +51,34 @@ padding-top: $hair; background-color: $tao-gray-50; overflow-y: scroll; + max-height: 55vmin; - @if (str_slice($layout-key, 0, str_length('default')) != 'default') { + div[class*="web"] & { max-height: 95vmin; } - @else { - max-height: 55vmin; - } } - .tfw-web { - .iframe-container { - display: flex; - overflow: hidden; - @include set-component-size('web'); - } - - .iframe { - flex-grow: 1; - border: none; - margin: 0; - padding: $small; - } - } - - .tfw-webide { + .tfw-ide { background-color: $tao-plum-900; } .tfw-sidebar { - background-color: $tao-turqoise-800; + background-color: $tao-turqoise-300; display: flex; flex-direction: column; - justify-content: flex-start; + justify-content: space-between; align-items: center; + padding-top: 75px; + border-left: 1px solid $tao-plum-500; } .tfw-terminal { overflow-y: hidden; - border: 1px solid $tao-plum-100; - border-bottom: 0; background-color: $tao-gray-800; - @if (str_slice($layout-key, 0, str_length('vraw')) == 'vraw') { - border-left: 0; - border-top: 0; + + div[class*="web"] & { + border-top: 1px solid $tao-plum-100; } } } @@ -83,3 +86,39 @@ .deploy-blur { filter: blur(3px); } + +.terminal-ide-web { + @include set-tfw-web('terminal-ide-web'); + @include position-grid-items(map_get($layouts, 'terminal-ide-web'),'.tfw-'); +} + +.terminal-web{ + @include set-tfw-web('terminal-web'); + @include position-grid-items(map_get($layouts,'terminal-web'),'.tfw-'); +} + +.terminal-ide-vertical { + @include position-grid-items(map_get($layouts,'terminal-ide-vertical'),'.tfw-'); +} + +.terminal-ide-horizontal { + @include position-grid-items(map_get($layouts,'terminal-ide-horizontal'),'.tfw-'); +} + +.ide-web-vertical { + @include set-tfw-web('ide-web-vertical'); + @include position-grid-items(map_get($layouts,'ide-web-vertical'),'.tfw-'); +} + +.terminal-only { + @include position-grid-items(map_get($layouts,'terminal-only'),'.tfw-'); +} + +.ide-only { + @include position-grid-items(map_get($layouts,'ide-only'),'.tfw-'); +} + +.web-only { + @include set-tfw-web('web-only'); + @include position-grid-items(map_get($layouts,'web-only'),'.tfw-'); +} diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 9fad94c..26b2dfc 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -13,8 +13,7 @@ import { config } from '../config'; export class DashboardComponent implements OnInit, OnDestroy { deploying = false; deploymentNotificationSubscription: Subscription; - layout: string = config.dashboard.defaultLayout; - layout = 'vraw-closed'; + layout: string = config.dashboard.defaultLayout ; command_handlers = {'layout': this.layoutHandler.bind(this)}; constructor(private deploymentNotificationService: DeploymentNotificationService, @@ -33,11 +32,11 @@ export class DashboardComponent implements OnInit, OnDestroy { } layoutHandler(data: LayoutCommand) { - if (data.layout.match('vraw-open|vraw-closed|hraw|default-open|default-closed')) { + if (data.layout.match('terminal-ide-vertical|terminal-only|hraw|default-open|default-closed')) { this.layout = data.layout; } else { - console.log('Invalid webide layout "' + data.layout + '" received!'); + console.log('Invalid ide layout "' + data.layout + '" received!'); } } diff --git a/src/app/ide/ide.component.html b/src/app/ide/ide.component.html new file mode 100644 index 0000000..c4e0e15 --- /dev/null +++ b/src/app/ide/ide.component.html @@ -0,0 +1,44 @@ +
+
+ +
+ +
+ +
+
+ +
+
diff --git a/src/app/ide/ide.component.scss b/src/app/ide/ide.component.scss new file mode 100644 index 0000000..da4aa8d --- /dev/null +++ b/src/app/ide/ide.component.scss @@ -0,0 +1,95 @@ +@import "../../assets/scss/variables.scss"; + +.tfw-grid-ide-statusbar { + display: grid; + height: $tao-navbar-height; + grid-template-columns: 8fr 1fr; +} + +.tfw-ace-editor { + height: calc(100% - 67px); + width: 100%; +} + +.btn-group { + padding-left: 34px; +} + +.underline { + text-decoration: underline; +} + +.tfw-tab-btn { + background-color: white; + border: 1px solid $tao-plum-900; + border-left: 0; + border-right: 0; + border-radius: 100px; + padding: 5px 19px; + z-index: 200; + + .tfw-tab-btn-saved, + .active, + .disabled, + &:disabled { + background-color: $tao-plum-200; + font-weight: 500; + font-style: italic; + color: black; + border: 0; + } +} + +.tfw-deploy-btn-group { + margin: auto $tiny; + + .tfw-deploy-btn { + background: $tao-bright-green-200; + border-radius: 100px; + padding: 6px 19px; + + img { + position: relative; + bottom: 1px; + height: $small; + } + + &.failed { + background-color: $tao-red-500; + color:white; + } + + &:disabled, + &.disabled, + &.deployed, + &.deploy + { + background-color: $tao-bright-green-100; + color: black; + } + + &.deploy { + background-color: $tao-warm-yellow-200; + } + + + .loader { + border: 2px solid $tao-warm-yellow-600; + border-radius: 50%; + border-top: 2px solid $tao-warm-yellow-200; + width: 15px; + height: 15px; + animation: spin 2s linear infinite; + display: inline-block; + margin-right: 5px; + position: relative; + top: 2px; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + } +} diff --git a/src/app/ide/ide.component.ts b/src/app/ide/ide.component.ts new file mode 100644 index 0000000..5cd0f88 --- /dev/null +++ b/src/app/ide/ide.component.ts @@ -0,0 +1,154 @@ +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + +import * as brace from 'brace'; +import 'brace/ext/modelist'; + +import 'brace/mode/c_cpp'; +import 'brace/mode/csharp'; +import 'brace/mode/java'; +import 'brace/mode/javascript'; +import 'brace/mode/json'; +import 'brace/mode/python'; +import 'brace/mode/sql'; + +import 'brace/theme/cobalt'; +import { SourceCode } from './source-code'; +import { WebSocketService } from '../services/websocket.service'; +import { ProcessManagerService } from '../services/processmanager.service'; +import { DeploymentNotificationService } from '../services/deployment-notification.service'; +import { config } from '../config'; + +const modelist = brace.acequire('ace/ext/modelist'); + +@Component({ + selector: 'app-ide', + templateUrl: './ide.component.html', + styleUrls: ['./ide.component.scss'] +}) +export class IdeComponent implements OnInit { + key_id = 'webide'; + filename = ''; + code: string = config.ide.defaultCode; + language: string = config.ide.defaultLanguage; + theme = 'cobalt'; + directory = ''; + files: string[]; + codeState = 'SAVED'; + deployButtonState = 'DEPLOYED'; + showDeployButton: boolean = config.ide.showDeployButton; + autosave = null; + command_handlers = {'reload': this.reloadHandler.bind(this), + 'read': this.readHandler.bind(this), + 'select': this.selectHandler.bind(this), + 'write': this.writeHandler.bind(this), + 'selectdir': this.selectdirHandler.bind(this)}; + + constructor(private webSocketService: WebSocketService, + private changeDetectorRef: ChangeDetectorRef, + private processManagerService: ProcessManagerService, + private deploymentNotificationService: DeploymentNotificationService) { } + + ngOnInit() { + this.webSocketService.connect(); + this.subscribeWS(); + this.requestCode(); + this.processManagerService.init(); + this.processManagerService.subscribeCallback(config.ide.deployProcessName, (event) => { this.setDeployButtonState('DEPLOYED'); }); + this.processManagerService.subscribeErrorCallback(config.ide.deployProcessName, (event) => { this.setDeployButtonState('FAILED'); }); + this.resetAutoSaveCountdown(); + } + + subscribeWS() { + this.webSocketService.observeKey(this.key_id).subscribe((event) => { + this.command_handlers[event.data.command](event.data); + this.changeDetectorRef.detectChanges(); + }); + } + + updateFileData(data: SourceCode) { + this.filename = data.filename; + this.directory = data.directory; + this.code = (data.content != null) ? data.content : this.code; + this.language = modelist.getModeForPath(this.filename).name; + this.files = data.files; + } + + selectHandler(data: SourceCode) { + this.updateFileData(data); + } + + reloadHandler(data: SourceCode) { + this.requestCode(); + } + + readHandler(data: SourceCode) { + if (this.codeState === 'SAVED') { + this.updateFileData(data); + } + } + + writeHandler() { + this.setCodeState('SAVED'); + } + + selectdirHandler(data: SourceCode) { + this.updateFileData(data); + } + + resetAutoSaveCountdown() { + if (this.autosave) { + clearInterval(this.autosave); + } + this.autosave = setInterval(() => { this.sendCodeIfDirty(); }, config.ide.autoSaveInterval); + } + + tabSwitchButtonHandler(file) { + if (this.codeState === 'DIRTY') { + this.sendCodeContents(); + } + this.selectCode(file); + this.requestCode(); + } + + setCodeState(state: string) { + if (state.match('SAVED|DIRTY')) { + this.codeState = state; + } + } + + setDeployButtonState(state: string) { + this.deployButtonState = state; + this.deploymentNotificationService.deploying.next(state === 'DEPLOYING' ? true : false); + } + + deployCode() { + this.processManagerService.restartProcess('login'); + this.setDeployButtonState('DEPLOYING'); + } + + sendCodeIfDirty() { + if (this.codeState === 'DIRTY') { + this.sendCodeContents(); + } + } + + sendCodeContents() { + this.webSocketService.send(this.key_id, { + 'command': 'write', + 'content': this.code + }); + } + + requestCode() { + this.webSocketService.send(this.key_id, { + 'command': 'read' + }); + } + + selectCode(filename: string) { + this.webSocketService.send(this.key_id, { + 'command': 'select', + 'filename': filename + }); + } +} diff --git a/src/app/ide/source-code.ts b/src/app/ide/source-code.ts new file mode 100644 index 0000000..ab0b524 --- /dev/null +++ b/src/app/ide/source-code.ts @@ -0,0 +1,7 @@ +export interface SourceCode { + filename: string; + content?: string; + files: string[]; + directory: string; + command: string; +} diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html index 2789e15..d1277ca 100755 --- a/src/app/sidebar/sidebar.component.html +++ b/src/app/sidebar/sidebar.component.html @@ -1 +1,4 @@ -
IDE
+
+ + +
diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss index cab9c74..14a4f05 100755 --- a/src/app/sidebar/sidebar.component.scss +++ b/src/app/sidebar/sidebar.component.scss @@ -1,6 +1,16 @@ @import "../../assets/scss/variables.scss"; +@import "../../assets/scss/mixins/layout.scss"; -.tfw-webide-pin{ - - +img { + width: 50px; + height: auto; +} + +.tfw-ide-pin { + + cursor: pointer; + + & .active { + display: none; + } } diff --git a/src/assets/images/IDE.svg b/src/assets/images/IDE.svg new file mode 100644 index 0000000..4a0b6d4 --- /dev/null +++ b/src/assets/images/IDE.svg @@ -0,0 +1 @@ +IDE_icon \ No newline at end of file diff --git a/src/assets/images/IDE_active.svg b/src/assets/images/IDE_active.svg new file mode 100644 index 0000000..df74fe6 --- /dev/null +++ b/src/assets/images/IDE_active.svg @@ -0,0 +1 @@ +IDE_iconactive \ No newline at end of file diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index ce8bd36..aa82644 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -158,3 +158,6 @@ $font-size-h5: floor(($font-size-base * 1.1)); $tao-navbar-height: 67px; $company-logo-width: 130px; + + + diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index b2b0f09..10fe056 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -1,72 +1,102 @@ $grid-columns-count: 25; $grid-rows-count: 25; -$layout-key: 'vraw-open'; - -$default-open-layout: ( +$terminal-ide-web-layout: ( 'header': (1, 6, 1, 2), - 'messages': (1, 6, 2, 10), - 'webide': (15,$grid-columns-count+1, 1, $grid-rows-count+1), - 'terminal': (1, 15, 10, $grid-rows-count+1), - 'web': (6, 15, 1, 10), - 'sidebar': () + 'messages': (1, 6, 2, 16), + 'ide': (15,$grid-columns-count, 1, $grid-rows-count+1), + 'terminal': (1, 15, 16, $grid-rows-count+1), + 'web': (6, 15, 1, 16), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); -$default-closed-layout: ( +$terminal-web-layout: ( 'header': (1, 6, 1, 2), 'messages': (1, 6, 2, 10), - 'webide': (16,$grid-columns-count+1, 1, $grid-rows-count+1), - 'terminal': (1, 16, 10, $grid-rows-count+1), + 'ide': (), + 'terminal': (15, $grid-columns-count, 10, $grid-rows-count+1), 'web': (6, 15, 1, 10), - 'sidebar': () + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); -$vraw-open-layout: ( +$terminal-ide-vertical-layout: ( 'header': (1, 6, 1, 2), 'messages': (1, 6, 2,$grid-rows-count+1), - 'webide': (16, $grid-columns-count+1, 1,$grid-rows-count+1), - 'terminal': (6, 16, 1, $grid-rows-count+1), + 'ide': (15, $grid-columns-count, 1,$grid-rows-count+1), + 'terminal': (6, 15, 1, $grid-rows-count+1), 'web': (), - 'sidebar': (), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); -$vraw-closed-layout: ( +$terminal-ide-horizontal-layout: ( 'header': (1, 6, 1, 2), 'messages': (1, 6, 2,$grid-rows-count+1), - 'webide': (), + 'ide': (6,$grid-columns-count, 1, 16), + 'terminal': (6, $grid-columns-count, 16, $grid-rows-count+1), + 'web': (), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1), +); + +$ide-web-vertical-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2, $grid-rows-count+1), + 'ide': (15, $grid-columns-count, 1,$grid-rows-count+1), + 'terminal': (), + 'web': (6, 15, 10, $grid-rows-count+1), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) +); + + +$terminal-only-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2,$grid-rows-count+1), + 'ide': (), 'terminal': (6, $grid-columns-count, 1,$grid-rows-count+1), 'web': (), 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); -$hraw-layout: ( - 'header': (1, 4, 1,$grid-rows-count+1), - 'messages': (1, 4, 2,$grid-rows-count+1), - 'webide': (4,$grid-columns-count+1, 1, 10), - 'terminal': (4, $grid-columns-count+1, 10, $grid-rows-count+1), +$ide-only-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2,$grid-rows-count+1), + 'ide': (6, $grid-columns-count, 1,$grid-rows-count+1), + 'terminal': (), 'web': (), - 'sidebar': (), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); +$web-only-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2,$grid-rows-count+1), + 'ide': (), + 'terminal': (), + 'web': (6, $grid-columns-count, 1,$grid-rows-count+1), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) +); + + $layouts: ( - 'default-open': $default-open-layout, - 'default-closed': $default-closed-layout, - 'vraw-open': $vraw-open-layout, - 'vraw-closed': $vraw-closed-layout, - 'hraw': $hraw-layout + 'terminal-ide-web': $terminal-ide-web-layout, + 'terminal-web': $terminal-web-layout, + 'terminal-ide-vertical': $terminal-ide-vertical-layout, + 'terminal-ide-horizontal': $terminal-ide-horizontal-layout, + 'ide-web-vertical': $ide-web-vertical-layout, + 'terminal-only': $terminal-only-layout, + 'ide-only': $ide-only-layout, + 'web-only': $web-only-layout ); -@mixin set-layout($layout_key) { - @if(index(map_keys($layouts), $layout_key)) { - $layout: map_get($layouts, $layout_key) +@mixin set-layout($layouts-key) { + @if(index(map_keys($layouts), $layouts-key)) { + $layout: map_get($layouts, $layouts-key) } @else { - @error 'Invalid layout value: "#{$layout_key}"' + @error 'Invalid layout value: "#{$layouts-key}"' } } -@function get-layout(){ - @return map_get($layouts, $layout_key); +@function get-layout($layouts-key){ + @return map_get($layouts, $layouts-key); } @mixin position-grid-items($map, $sel) { @@ -87,8 +117,8 @@ $layouts: ( } } -@mixin set-component-size($key) { - $tfw-component: map_get(get-layout(), $key); +@mixin set-component-size($layouts-key, $layout-key) { + $tfw-component: map_get(get-layout($layouts-key), $layout-key); @if (length($tfw-component) > 0) { $columns-count: nth($tfw-component,2) - nth($tfw-component,1); @@ -100,22 +130,3 @@ $layouts: ( } -[tfw-layout='vraw-open'] { - @include position-grid-items(map_get($layouts,'vraw-open'),'.tfw-'); -} - -[tfw-layout='vraw-closed'] { - @include position-grid-items(map_get($layouts,'vraw-closed'),'.tfw-'); -} - -[tfw-layout='hraw'] { - @include position-grid-items(map_get($layouts,'hraw'),'.tfw-'); -} - -[tfw-layout='default-open'] { - @include position-grid-items(map_get($layouts, 'default-open'),'.tfw-'); -} - -[tfw-layout='default-closed'] { - @include position-grid-items(map_get($layouts,'default-closed'),'.tfw-'); -} From a0d5dfdddcb66d9ad4091d583a4c0c4b57c0dfe7 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 20 Apr 2018 09:22:23 +0200 Subject: [PATCH 03/14] All the enabled layouts are now enlisted on the sidebar in accordance with config.ts --- src/app/config.ts | 18 +++++++++++++----- src/app/dashboard/dashboard.component.scss | 13 +++++++------ src/app/dashboard/dashboard.component.ts | 5 +++-- src/app/sidebar/sidebar.component.html | 6 +++--- src/app/sidebar/sidebar.component.scss | 4 +--- src/app/sidebar/sidebar.component.ts | 9 +++++---- src/assets/images/ide-only.svg | 1 + src/assets/images/ide-only_active.svg | 1 + src/assets/images/ide-web-vertical.svg | 1 + src/assets/images/ide-web-vertical_active.svg | 1 + src/assets/images/terminal-ide-horizontal.svg | 1 + .../images/terminal-ide-horizontal_active.svg | 1 + .../images/terminal-ide-vertical_active.svg | 1 + src/assets/images/terminal-ide-web.svg | 1 + src/assets/images/terminal-ide-web_active.svg | 1 + src/assets/images/terminal-ide_vertical.svg | 1 + src/assets/images/terminal-only.svg | 1 + src/assets/images/terminal-only_active.svg | 1 + src/assets/images/terminal-web.svg | 1 + src/assets/images/terminal-web_active.svg | 1 + src/assets/images/web-only.svg | 1 + src/assets/images/web-only_active.svg | 1 + 22 files changed, 48 insertions(+), 23 deletions(-) create mode 100644 src/assets/images/ide-only.svg create mode 100644 src/assets/images/ide-only_active.svg create mode 100644 src/assets/images/ide-web-vertical.svg create mode 100644 src/assets/images/ide-web-vertical_active.svg create mode 100644 src/assets/images/terminal-ide-horizontal.svg create mode 100644 src/assets/images/terminal-ide-horizontal_active.svg create mode 100644 src/assets/images/terminal-ide-vertical_active.svg create mode 100644 src/assets/images/terminal-ide-web.svg create mode 100644 src/assets/images/terminal-ide-web_active.svg create mode 100644 src/assets/images/terminal-ide_vertical.svg create mode 100644 src/assets/images/terminal-only.svg create mode 100644 src/assets/images/terminal-only_active.svg create mode 100644 src/assets/images/terminal-web.svg create mode 100644 src/assets/images/terminal-web_active.svg create mode 100644 src/assets/images/web-only.svg create mode 100644 src/assets/images/web-only_active.svg diff --git a/src/app/config.ts b/src/app/config.ts index 319178c..054b657 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,14 +1,22 @@ export const config = { dashboard: { route: 'dashboard', - defaultLayout: 'terminal-ide-vertical', - enabledLayouts: [ + currentLayout: 'terminal-ide-web', + enabledLayouts: new Set([ + 'terminal-ide-web', + 'terminal-web', + 'web-only' + ]), + allLayouts: new Set([ + 'terminal-ide-web', 'terminal-ide-vertical', 'terminal-ide-horizontal', 'terminal-only', - 'ide-only' - ] - + 'terminal-web', + 'ide-web-vertical', + 'ide-only', + 'web-only' + ]), }, ide: { route: 'ide', diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 0ad7a3f..b9fab2f 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -51,10 +51,10 @@ padding-top: $hair; background-color: $tao-gray-50; overflow-y: scroll; - max-height: 55vmin; + max-height: 95vmin; - div[class*="web"] & { - max-height: 95vmin; + div[class="terminal-ide-web"] & { + max-height: 55vmin; } } @@ -63,13 +63,14 @@ } .tfw-sidebar { - background-color: $tao-turqoise-300; + background-color: $tao-gray-100; display: flex; flex-direction: column; justify-content: space-between; + column-gap: 15px; align-items: center; - padding-top: 75px; - border-left: 1px solid $tao-plum-500; + box-shadow: -15px -5px 19px -11px rgba(0,0,0,0.75); + z-index: 999; } diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 26b2dfc..bd56bca 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -13,7 +13,8 @@ import { config } from '../config'; export class DashboardComponent implements OnInit, OnDestroy { deploying = false; deploymentNotificationSubscription: Subscription; - layout: string = config.dashboard.defaultLayout ; + enabledLayouts: Set = config.dashboard.enabledLayouts; + layout: string = config.dashboard.currentLayout ; command_handlers = {'layout': this.layoutHandler.bind(this)}; constructor(private deploymentNotificationService: DeploymentNotificationService, @@ -32,7 +33,7 @@ export class DashboardComponent implements OnInit, OnDestroy { } layoutHandler(data: LayoutCommand) { - if (data.layout.match('terminal-ide-vertical|terminal-only|hraw|default-open|default-closed')) { + if (data.layout in (this.enabledLayouts)) { this.layout = data.layout; } else { diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html index d1277ca..78bb2c1 100755 --- a/src/app/sidebar/sidebar.component.html +++ b/src/app/sidebar/sidebar.component.html @@ -1,4 +1,4 @@ -
- - +
+
+
diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss index 14a4f05..8f27e70 100755 --- a/src/app/sidebar/sidebar.component.scss +++ b/src/app/sidebar/sidebar.component.scss @@ -4,13 +4,11 @@ img { width: 50px; height: auto; + padding-top: 75px; } .tfw-ide-pin { cursor: pointer; - & .active { - display: none; - } } diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts index 60de369..86fe3fd 100644 --- a/src/app/sidebar/sidebar.component.ts +++ b/src/app/sidebar/sidebar.component.ts @@ -1,15 +1,16 @@ import { Component, OnInit } from '@angular/core'; +import { config } from '../config'; @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'] }) + export class SidebarComponent implements OnInit { - - constructor() { } - + layout: string = config.dashboard.currentLayout; + enabledLayouts: Set = config.dashboard.enabledLayouts; + constructor() {} ngOnInit() { } - } diff --git a/src/assets/images/ide-only.svg b/src/assets/images/ide-only.svg new file mode 100644 index 0000000..6c3615f --- /dev/null +++ b/src/assets/images/ide-only.svg @@ -0,0 +1 @@ +webideonly \ No newline at end of file diff --git a/src/assets/images/ide-only_active.svg b/src/assets/images/ide-only_active.svg new file mode 100644 index 0000000..f6be46d --- /dev/null +++ b/src/assets/images/ide-only_active.svg @@ -0,0 +1 @@ +webideonly_active \ No newline at end of file diff --git a/src/assets/images/ide-web-vertical.svg b/src/assets/images/ide-web-vertical.svg new file mode 100644 index 0000000..afe4782 --- /dev/null +++ b/src/assets/images/ide-web-vertical.svg @@ -0,0 +1 @@ +web_webide \ No newline at end of file diff --git a/src/assets/images/ide-web-vertical_active.svg b/src/assets/images/ide-web-vertical_active.svg new file mode 100644 index 0000000..2872419 --- /dev/null +++ b/src/assets/images/ide-web-vertical_active.svg @@ -0,0 +1 @@ +web_webide_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide-horizontal.svg b/src/assets/images/terminal-ide-horizontal.svg new file mode 100644 index 0000000..2d5fecd --- /dev/null +++ b/src/assets/images/terminal-ide-horizontal.svg @@ -0,0 +1 @@ +webide_terminal_horizontal \ No newline at end of file diff --git a/src/assets/images/terminal-ide-horizontal_active.svg b/src/assets/images/terminal-ide-horizontal_active.svg new file mode 100644 index 0000000..924ce3d --- /dev/null +++ b/src/assets/images/terminal-ide-horizontal_active.svg @@ -0,0 +1 @@ +webide_terminal_horizontal_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide-vertical_active.svg b/src/assets/images/terminal-ide-vertical_active.svg new file mode 100644 index 0000000..ae63a60 --- /dev/null +++ b/src/assets/images/terminal-ide-vertical_active.svg @@ -0,0 +1 @@ +terminal_webide_vertical_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide-web.svg b/src/assets/images/terminal-ide-web.svg new file mode 100644 index 0000000..5738b3c --- /dev/null +++ b/src/assets/images/terminal-ide-web.svg @@ -0,0 +1 @@ +web_webide_terminal \ No newline at end of file diff --git a/src/assets/images/terminal-ide-web_active.svg b/src/assets/images/terminal-ide-web_active.svg new file mode 100644 index 0000000..818f251 --- /dev/null +++ b/src/assets/images/terminal-ide-web_active.svg @@ -0,0 +1 @@ +web_webide_terminal_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide_vertical.svg b/src/assets/images/terminal-ide_vertical.svg new file mode 100644 index 0000000..bc903ea --- /dev/null +++ b/src/assets/images/terminal-ide_vertical.svg @@ -0,0 +1 @@ +terminal_webide_vertical \ No newline at end of file diff --git a/src/assets/images/terminal-only.svg b/src/assets/images/terminal-only.svg new file mode 100644 index 0000000..a0d2267 --- /dev/null +++ b/src/assets/images/terminal-only.svg @@ -0,0 +1 @@ +terminalonly \ No newline at end of file diff --git a/src/assets/images/terminal-only_active.svg b/src/assets/images/terminal-only_active.svg new file mode 100644 index 0000000..1e8a8f0 --- /dev/null +++ b/src/assets/images/terminal-only_active.svg @@ -0,0 +1 @@ +terminalonly_active \ No newline at end of file diff --git a/src/assets/images/terminal-web.svg b/src/assets/images/terminal-web.svg new file mode 100644 index 0000000..b2e519a --- /dev/null +++ b/src/assets/images/terminal-web.svg @@ -0,0 +1 @@ +web_terminal \ No newline at end of file diff --git a/src/assets/images/terminal-web_active.svg b/src/assets/images/terminal-web_active.svg new file mode 100644 index 0000000..51d5bb9 --- /dev/null +++ b/src/assets/images/terminal-web_active.svg @@ -0,0 +1 @@ +web_terminal_active \ No newline at end of file diff --git a/src/assets/images/web-only.svg b/src/assets/images/web-only.svg new file mode 100644 index 0000000..8bf90b7 --- /dev/null +++ b/src/assets/images/web-only.svg @@ -0,0 +1 @@ +webonly \ No newline at end of file diff --git a/src/assets/images/web-only_active.svg b/src/assets/images/web-only_active.svg new file mode 100644 index 0000000..cfcb65d --- /dev/null +++ b/src/assets/images/web-only_active.svg @@ -0,0 +1 @@ +webonly_active \ No newline at end of file From f0717eb235977a25034c54457699ad1824d782ca Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 20 Apr 2018 09:26:36 +0200 Subject: [PATCH 04/14] Layout changes finally work from backend commands --- src/app/config.ts | 6 ++++-- src/app/dashboard/dashboard.component.html | 2 +- src/app/dashboard/dashboard.component.ts | 2 +- src/app/sidebar/sidebar.component.html | 2 +- src/app/sidebar/sidebar.component.scss | 4 +++- src/app/sidebar/sidebar.component.ts | 5 +++-- src/assets/scss/mixins/_layout.scss | 5 ++++- 7 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/app/config.ts b/src/app/config.ts index 054b657..001e19a 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,11 +1,13 @@ export const config = { dashboard: { route: 'dashboard', - currentLayout: 'terminal-ide-web', + currentLayout: 'ide-only', enabledLayouts: new Set([ 'terminal-ide-web', 'terminal-web', - 'web-only' + 'terminal-only', + 'web-only', + 'ide-only' ]), allLayouts: new Set([ 'terminal-ide-web', diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 376d504..80709b0 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -17,7 +17,7 @@
- +
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index bd56bca..3958a44 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -33,7 +33,7 @@ export class DashboardComponent implements OnInit, OnDestroy { } layoutHandler(data: LayoutCommand) { - if (data.layout in (this.enabledLayouts)) { + if (this.enabledLayouts.has(data.layout)) { this.layout = data.layout; } else { diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html index 78bb2c1..d9b903c 100755 --- a/src/app/sidebar/sidebar.component.html +++ b/src/app/sidebar/sidebar.component.html @@ -1,4 +1,4 @@
-
+
diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss index 8f27e70..7ed5e9a 100755 --- a/src/app/sidebar/sidebar.component.scss +++ b/src/app/sidebar/sidebar.component.scss @@ -8,7 +8,9 @@ img { } .tfw-ide-pin { - cursor: pointer; + & .active { + box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09); + } } diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts index 86fe3fd..77f8e8b 100644 --- a/src/app/sidebar/sidebar.component.ts +++ b/src/app/sidebar/sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { config } from '../config'; @Component({ @@ -8,9 +8,10 @@ import { config } from '../config'; }) export class SidebarComponent implements OnInit { - layout: string = config.dashboard.currentLayout; + @Input() layout: string; enabledLayouts: Set = config.dashboard.enabledLayouts; constructor() {} ngOnInit() { } + } diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index 10fe056..4595386 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -105,7 +105,10 @@ $layouts: ( @each $k, $v in $map { #{$sel}#{$k} { @if (length($v) == 0) { - display: none + // We need to make sure the DOM element is displayed but not visible + visibility: hidden; + position: absolute; + z-index: -10000000; } @else { grid-column-start: nth($v, 1); From 3e249e85824926de67987e58845178cb17c19199 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 20 Apr 2018 09:27:32 +0200 Subject: [PATCH 05/14] Sidebar icons are now highlighted and focus works --- src/app/config.ts | 2 +- src/app/dashboard/dashboard.component.scss | 3 +-- src/app/sidebar/sidebar.component.html | 7 ++++-- src/app/sidebar/sidebar.component.scss | 28 +++++++++++++++------- src/assets/scss/mixins/_layout.scss | 4 ++-- 5 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/app/config.ts b/src/app/config.ts index 001e19a..670679a 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,7 +1,7 @@ export const config = { dashboard: { route: 'dashboard', - currentLayout: 'ide-only', + currentLayout: 'terminal-web', enabledLayouts: new Set([ 'terminal-ide-web', 'terminal-web', diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index b9fab2f..73864fb 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,7 +1,6 @@ @import "../../assets/scss/variables.scss"; @import "../../assets/scss/mixins/layout.scss"; - @mixin set-tfw-web($layouts-key) { .tfw-web { @@ -67,7 +66,7 @@ display: flex; flex-direction: column; justify-content: space-between; - column-gap: 15px; + padding-top: 75px; align-items: center; box-shadow: -15px -5px 19px -11px rgba(0,0,0,0.75); z-index: 999; diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html index d9b903c..30cb280 100755 --- a/src/app/sidebar/sidebar.component.html +++ b/src/app/sidebar/sidebar.component.html @@ -1,4 +1,7 @@
-
-
+ +
+ +
+
diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss index 7ed5e9a..04c85a5 100755 --- a/src/app/sidebar/sidebar.component.scss +++ b/src/app/sidebar/sidebar.component.scss @@ -1,16 +1,28 @@ @import "../../assets/scss/variables.scss"; @import "../../assets/scss/mixins/layout.scss"; -img { - width: 50px; - height: auto; - padding-top: 75px; -} .tfw-ide-pin { - cursor: pointer; - & .active { - box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09); + button { + width: 50px; + height: auto; + padding: 0; + margin-bottom: 50px; + cursor: pointer; + border: 1px solid $tao-gray-200; + transition: all 0.18s ease; + box-shadow: 0 4px 8px 0 rgba($tao-gray-500, 0.2), 0 4px 10px 0 rgba($tao-gray-500, 0.09); + + &:hover, + &:focus { + box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29); + border: 1px solid $tao-blue-200; + } + + &:focus { + width: 48px; + } } + } diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index 4595386..35303da 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -12,9 +12,9 @@ $terminal-ide-web-layout: ( $terminal-web-layout: ( 'header': (1, 6, 1, 2), - 'messages': (1, 6, 2, 10), + 'messages': (1, 6, 2, $grid-columns-count+1), 'ide': (), - 'terminal': (15, $grid-columns-count, 10, $grid-rows-count+1), + 'terminal': (15, $grid-columns-count, 1, $grid-rows-count+1), 'web': (6, 15, 1, 10), 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); From 5e3e6194232e010ccdfb40675022357e59263e74 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 20 Apr 2018 09:29:16 +0200 Subject: [PATCH 06/14] Sidebar icons are now highlighted and focus works when instrumented from backend --- src/app/dashboard/dashboard.component.ts | 12 ++++++++++-- src/app/sidebar/sidebar.component.html | 6 +++++- src/app/sidebar/sidebar.component.scss | 14 +++++++++----- src/app/sidebar/sidebar.component.ts | 7 +++++-- 4 files changed, 29 insertions(+), 10 deletions(-) diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 3958a44..720ea65 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,22 +1,26 @@ -import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'; +import { Component, OnDestroy, OnInit, ChangeDetectorRef, ViewChild, AfterViewInit } from '@angular/core'; import { DeploymentNotificationService } from '../services/deployment-notification.service'; import { Subscription } from 'rxjs/Subscription'; import { WebSocketService } from '../services/websocket.service'; import { LayoutCommand } from './layout-command'; import { config } from '../config'; +import { SidebarComponent } from '../sidebar/sidebar.component'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) -export class DashboardComponent implements OnInit, OnDestroy { +export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { deploying = false; deploymentNotificationSubscription: Subscription; enabledLayouts: Set = config.dashboard.enabledLayouts; layout: string = config.dashboard.currentLayout ; command_handlers = {'layout': this.layoutHandler.bind(this)}; + @ViewChild(SidebarComponent) + private sidebarComponent: SidebarComponent; + constructor(private deploymentNotificationService: DeploymentNotificationService, private webSocketService: WebSocketService, private changeDetectorRef: ChangeDetectorRef) {} @@ -32,6 +36,10 @@ export class DashboardComponent implements OnInit, OnDestroy { ); } + ngAfterViewInit() { + this.layout = this.sidebarComponent.layout; + } + layoutHandler(data: LayoutCommand) { if (this.enabledLayouts.has(data.layout)) { this.layout = data.layout; diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html index 30cb280..3dc9779 100755 --- a/src/app/sidebar/sidebar.component.html +++ b/src/app/sidebar/sidebar.component.html @@ -1,7 +1,11 @@
- +
diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss index 04c85a5..9d82dce 100755 --- a/src/app/sidebar/sidebar.component.scss +++ b/src/app/sidebar/sidebar.component.scss @@ -1,7 +1,6 @@ @import "../../assets/scss/variables.scss"; @import "../../assets/scss/mixins/layout.scss"; - .tfw-ide-pin { button { @@ -15,14 +14,19 @@ box-shadow: 0 4px 8px 0 rgba($tao-gray-500, 0.2), 0 4px 10px 0 rgba($tao-gray-500, 0.09); &:hover, - &:focus { - box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29); + &:focus, + &:active, + &.active { + box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.4), 0 8px 20px 0 rgba($tao-blue-500, 0.39); border: 1px solid $tao-blue-200; } - &:focus { + &:focus, + &:active, + &.active { + outline: none; width: 48px; } - } + } } diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts index 77f8e8b..a3e2247 100644 --- a/src/app/sidebar/sidebar.component.ts +++ b/src/app/sidebar/sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, Output, OnInit } from '@angular/core'; import { config } from '../config'; @Component({ @@ -8,10 +8,13 @@ import { config } from '../config'; }) export class SidebarComponent implements OnInit { - @Input() layout: string; + @Input() @Output() layout: string; enabledLayouts: Set = config.dashboard.enabledLayouts; constructor() {} ngOnInit() { } + setLayout(layout: string) { + this.layout = layout; + } } From 26df194a172d79bed4b3d20cc411661be9b5e380 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 20 Apr 2018 11:09:47 +0200 Subject: [PATCH 07/14] Fix manual and instumented layout changes (force event 'resize') --- src/app/config.ts | 11 +- src/app/dashboard/dashboard.component.html | 2 +- src/app/dashboard/dashboard.component.ts | 22 +-- src/app/ide/ide.component.ts | 1 + src/app/sidebar/sidebar.component.ts | 11 +- src/app/webide/source-code.ts | 7 - src/app/webide/webide.component.html | 44 ----- src/app/webide/webide.component.scss | 95 ----------- src/app/webide/webide.component.ts | 154 ------------------ src/assets/images/IDE.svg | 1 - src/assets/images/IDE_active.svg | 1 - src/assets/images/ide-only_active.svg | 1 - src/assets/images/ide-web-vertical_active.svg | 1 - .../images/terminal-ide-horizontal_active.svg | 1 - ...vertical.svg => terminal-ide-vertical.svg} | 0 .../images/terminal-ide-vertical_active.svg | 1 - src/assets/images/terminal-ide-web_active.svg | 1 - src/assets/images/terminal-only_active.svg | 1 - src/assets/images/terminal-web_active.svg | 1 - src/assets/images/web-only_active.svg | 1 - src/assets/scss/mixins/_layout.scss | 4 - 21 files changed, 26 insertions(+), 335 deletions(-) delete mode 100644 src/app/webide/source-code.ts delete mode 100644 src/app/webide/webide.component.html delete mode 100644 src/app/webide/webide.component.scss delete mode 100644 src/app/webide/webide.component.ts delete mode 100644 src/assets/images/IDE.svg delete mode 100644 src/assets/images/IDE_active.svg delete mode 100644 src/assets/images/ide-only_active.svg delete mode 100644 src/assets/images/ide-web-vertical_active.svg delete mode 100644 src/assets/images/terminal-ide-horizontal_active.svg rename src/assets/images/{terminal-ide_vertical.svg => terminal-ide-vertical.svg} (100%) delete mode 100644 src/assets/images/terminal-ide-vertical_active.svg delete mode 100644 src/assets/images/terminal-ide-web_active.svg delete mode 100644 src/assets/images/terminal-only_active.svg delete mode 100644 src/assets/images/terminal-web_active.svg delete mode 100644 src/assets/images/web-only_active.svg diff --git a/src/app/config.ts b/src/app/config.ts index 670679a..0727b3c 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,13 +1,16 @@ export const config = { dashboard: { route: 'dashboard', - currentLayout: 'terminal-web', + currentLayout: 'terminal-ide-web', enabledLayouts: new Set([ 'terminal-ide-web', - 'terminal-web', + 'terminal-ide-vertical', + 'terminal-ide-horizontal', 'terminal-only', - 'web-only', - 'ide-only' + 'terminal-web', + 'ide-web-vertical', + 'ide-only', + 'web-only' ]), allLayouts: new Set([ 'terminal-ide-web', diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 80709b0..4ac0dbe 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -17,7 +17,7 @@
- +
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 720ea65..5a28bd9 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit, ChangeDetectorRef, ViewChild, AfterViewInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'; import { DeploymentNotificationService } from '../services/deployment-notification.service'; import { Subscription } from 'rxjs/Subscription'; import { WebSocketService } from '../services/websocket.service'; @@ -11,16 +11,13 @@ import { SidebarComponent } from '../sidebar/sidebar.component'; templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) -export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { +export class DashboardComponent implements OnInit, OnDestroy { deploying = false; deploymentNotificationSubscription: Subscription; enabledLayouts: Set = config.dashboard.enabledLayouts; - layout: string = config.dashboard.currentLayout ; + layout: string = config.dashboard.currentLayout; command_handlers = {'layout': this.layoutHandler.bind(this)}; - @ViewChild(SidebarComponent) - private sidebarComponent: SidebarComponent; - constructor(private deploymentNotificationService: DeploymentNotificationService, private webSocketService: WebSocketService, private changeDetectorRef: ChangeDetectorRef) {} @@ -36,19 +33,22 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { ); } - ngAfterViewInit() { - this.layout = this.sidebarComponent.layout; - } - layoutHandler(data: LayoutCommand) { if (this.enabledLayouts.has(data.layout)) { - this.layout = data.layout; + this.setLayout(data.layout); } else { console.log('Invalid ide layout "' + data.layout + '" received!'); } } + setLayout(layout: string) { + this.layout = layout; + // We need to trigger a 'resize' event manually, otherwise ace editor stays collapsed + // Ace editors 'resize' event listener requires a parameter of force=true + setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0); + } + ngOnDestroy() { if (this.deploymentNotificationSubscription) { this.deploymentNotificationSubscription.unsubscribe(); diff --git a/src/app/ide/ide.component.ts b/src/app/ide/ide.component.ts index 5cd0f88..ac06802 100644 --- a/src/app/ide/ide.component.ts +++ b/src/app/ide/ide.component.ts @@ -17,6 +17,7 @@ import { WebSocketService } from '../services/websocket.service'; import { ProcessManagerService } from '../services/processmanager.service'; import { DeploymentNotificationService } from '../services/deployment-notification.service'; import { config } from '../config'; +import { element } from 'protractor'; const modelist = brace.acequire('ace/ext/modelist'); diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts index a3e2247..41b993c 100644 --- a/src/app/sidebar/sidebar.component.ts +++ b/src/app/sidebar/sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, OnInit } from '@angular/core'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; import { config } from '../config'; @Component({ @@ -7,14 +7,15 @@ import { config } from '../config'; styleUrls: ['./sidebar.component.scss'] }) -export class SidebarComponent implements OnInit { - @Input() @Output() layout: string; +export class SidebarComponent { + @Input() layout: string; + @Output() layoutChanged = new EventEmitter(); enabledLayouts: Set = config.dashboard.enabledLayouts; + constructor() {} - ngOnInit() { - } setLayout(layout: string) { this.layout = layout; + this.layoutChanged.emit(this.layout); } } diff --git a/src/app/webide/source-code.ts b/src/app/webide/source-code.ts deleted file mode 100644 index ab0b524..0000000 --- a/src/app/webide/source-code.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface SourceCode { - filename: string; - content?: string; - files: string[]; - directory: string; - command: string; -} diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html deleted file mode 100644 index 937d2c1..0000000 --- a/src/app/webide/webide.component.html +++ /dev/null @@ -1,44 +0,0 @@ -
-
- -
- -
- -
-
- -
-
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss deleted file mode 100644 index c00e9f0..0000000 --- a/src/app/webide/webide.component.scss +++ /dev/null @@ -1,95 +0,0 @@ -@import "../../assets/scss/variables.scss"; - -.tfw-grid-webide-statusbar { - display: grid; - height: $tao-navbar-height; - grid-template-columns: 8fr 1fr; -} - -.tfw-ace-editor { - height: calc(100% - 67px); - width: 100%; -} - -.btn-group { - padding-left: 34px; -} - -.underline { - text-decoration: underline; -} - -.tfw-tab-btn { - background-color: white; - border: 1px solid $tao-plum-900; - border-left: 0; - border-right: 0; - border-radius: 100px; - padding: 5px 19px; - z-index: 200; - - .tfw-tab-btn-saved, - .active, - .disabled, - &:disabled { - background-color: $tao-plum-200; - font-weight: 500; - font-style: italic; - color: black; - border: 0; - } -} - -.tfw-deploy-btn-group { - margin: auto $tiny; - - .tfw-deploy-btn { - background: $tao-bright-green-200; - border-radius: 100px; - padding: 6px 19px; - - img { - position: relative; - bottom: 1px; - height: $small; - } - - &.failed { - background-color: $tao-red-500; - color:white; - } - - &:disabled, - &.disabled, - &.deployed, - &.deploy - { - background-color: $tao-bright-green-100; - color: black; - } - - &.deploy { - background-color: $tao-warm-yellow-200; - } - - - .loader { - border: 2px solid $tao-warm-yellow-600; - border-radius: 50%; - border-top: 2px solid $tao-warm-yellow-200; - width: 15px; - height: 15px; - animation: spin 2s linear infinite; - display: inline-block; - margin-right: 5px; - position: relative; - top: 2px; - } - - @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } - } - - } -} diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts deleted file mode 100644 index 2849335..0000000 --- a/src/app/webide/webide.component.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; - -import * as brace from 'brace'; -import 'brace/ext/modelist'; - -import 'brace/mode/c_cpp'; -import 'brace/mode/csharp'; -import 'brace/mode/java'; -import 'brace/mode/javascript'; -import 'brace/mode/json'; -import 'brace/mode/python'; -import 'brace/mode/sql'; - -import 'brace/theme/cobalt'; -import { SourceCode } from './source-code'; -import { WebSocketService } from '../services/websocket.service'; -import { ProcessManagerService } from '../services/processmanager.service'; -import { DeploymentNotificationService } from '../services/deployment-notification.service'; -import { config } from '../config'; - -const modelist = brace.acequire('ace/ext/modelist'); - -@Component({ - selector: 'app-webide', - templateUrl: './webide.component.html', - styleUrls: ['./webide.component.scss'] -}) -export class WebideComponent implements OnInit { - key_id = 'webide'; - filename = ''; - code: string = config.webide.defaultCode; - language: string = config.webide.defaultLanguage; - theme = 'cobalt'; - directory = ''; - files: string[]; - codeState = 'SAVED'; - deployButtonState = 'DEPLOYED'; - showDeployButton: boolean = config.webide.showDeployButton; - autosave = null; - command_handlers = {'reload': this.reloadHandler.bind(this), - 'read': this.readHandler.bind(this), - 'select': this.selectHandler.bind(this), - 'write': this.writeHandler.bind(this), - 'selectdir': this.selectdirHandler.bind(this)}; - - constructor(private webSocketService: WebSocketService, - private changeDetectorRef: ChangeDetectorRef, - private processManagerService: ProcessManagerService, - private deploymentNotificationService: DeploymentNotificationService) { } - - ngOnInit() { - this.webSocketService.connect(); - this.subscribeWS(); - this.requestCode(); - this.processManagerService.init(); - this.processManagerService.subscribeCallback(config.webide.deployProcessName, (event) => { this.setDeployButtonState('DEPLOYED'); }); - this.processManagerService.subscribeErrorCallback(config.webide.deployProcessName, (event) => { this.setDeployButtonState('FAILED'); }); - this.resetAutoSaveCountdown(); - } - - subscribeWS() { - this.webSocketService.observeKey(this.key_id).subscribe((event) => { - this.command_handlers[event.data.command](event.data); - this.changeDetectorRef.detectChanges(); - }); - } - - updateFileData(data: SourceCode) { - this.filename = data.filename; - this.directory = data.directory; - this.code = (data.content != null) ? data.content : this.code; - this.language = modelist.getModeForPath(this.filename).name; - this.files = data.files; - } - - selectHandler(data: SourceCode) { - this.updateFileData(data); - } - - reloadHandler(data: SourceCode) { - this.requestCode(); - } - - readHandler(data: SourceCode) { - if (this.codeState === 'SAVED') { - this.updateFileData(data); - } - } - - writeHandler() { - this.setCodeState('SAVED'); - } - - selectdirHandler(data: SourceCode) { - this.updateFileData(data); - } - - resetAutoSaveCountdown() { - if (this.autosave) { - clearInterval(this.autosave); - } - this.autosave = setInterval(() => { this.sendCodeIfDirty(); }, config.webide.autoSaveInterval); - } - - tabSwitchButtonHandler(file) { - if (this.codeState === 'DIRTY') { - this.sendCodeContents(); - } - this.selectCode(file); - this.requestCode(); - } - - setCodeState(state: string) { - if (state.match('SAVED|DIRTY')) { - this.codeState = state; - } - } - - setDeployButtonState(state: string) { - this.deployButtonState = state; - this.deploymentNotificationService.deploying.next(state === 'DEPLOYING' ? true : false); - } - - deployCode() { - this.processManagerService.restartProcess('login'); - this.setDeployButtonState('DEPLOYING'); - } - - sendCodeIfDirty() { - if (this.codeState === 'DIRTY') { - this.sendCodeContents(); - } - } - - sendCodeContents() { - this.webSocketService.send(this.key_id, { - 'command': 'write', - 'content': this.code - }); - } - - requestCode() { - this.webSocketService.send(this.key_id, { - 'command': 'read' - }); - } - - selectCode(filename: string) { - this.webSocketService.send(this.key_id, { - 'command': 'select', - 'filename': filename - }); - } -} diff --git a/src/assets/images/IDE.svg b/src/assets/images/IDE.svg deleted file mode 100644 index 4a0b6d4..0000000 --- a/src/assets/images/IDE.svg +++ /dev/null @@ -1 +0,0 @@ -IDE_icon \ No newline at end of file diff --git a/src/assets/images/IDE_active.svg b/src/assets/images/IDE_active.svg deleted file mode 100644 index df74fe6..0000000 --- a/src/assets/images/IDE_active.svg +++ /dev/null @@ -1 +0,0 @@ -IDE_iconactive \ No newline at end of file diff --git a/src/assets/images/ide-only_active.svg b/src/assets/images/ide-only_active.svg deleted file mode 100644 index f6be46d..0000000 --- a/src/assets/images/ide-only_active.svg +++ /dev/null @@ -1 +0,0 @@ -webideonly_active \ No newline at end of file diff --git a/src/assets/images/ide-web-vertical_active.svg b/src/assets/images/ide-web-vertical_active.svg deleted file mode 100644 index 2872419..0000000 --- a/src/assets/images/ide-web-vertical_active.svg +++ /dev/null @@ -1 +0,0 @@ -web_webide_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide-horizontal_active.svg b/src/assets/images/terminal-ide-horizontal_active.svg deleted file mode 100644 index 924ce3d..0000000 --- a/src/assets/images/terminal-ide-horizontal_active.svg +++ /dev/null @@ -1 +0,0 @@ -webide_terminal_horizontal_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide_vertical.svg b/src/assets/images/terminal-ide-vertical.svg similarity index 100% rename from src/assets/images/terminal-ide_vertical.svg rename to src/assets/images/terminal-ide-vertical.svg diff --git a/src/assets/images/terminal-ide-vertical_active.svg b/src/assets/images/terminal-ide-vertical_active.svg deleted file mode 100644 index ae63a60..0000000 --- a/src/assets/images/terminal-ide-vertical_active.svg +++ /dev/null @@ -1 +0,0 @@ -terminal_webide_vertical_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide-web_active.svg b/src/assets/images/terminal-ide-web_active.svg deleted file mode 100644 index 818f251..0000000 --- a/src/assets/images/terminal-ide-web_active.svg +++ /dev/null @@ -1 +0,0 @@ -web_webide_terminal_active \ No newline at end of file diff --git a/src/assets/images/terminal-only_active.svg b/src/assets/images/terminal-only_active.svg deleted file mode 100644 index 1e8a8f0..0000000 --- a/src/assets/images/terminal-only_active.svg +++ /dev/null @@ -1 +0,0 @@ -terminalonly_active \ No newline at end of file diff --git a/src/assets/images/terminal-web_active.svg b/src/assets/images/terminal-web_active.svg deleted file mode 100644 index 51d5bb9..0000000 --- a/src/assets/images/terminal-web_active.svg +++ /dev/null @@ -1 +0,0 @@ -web_terminal_active \ No newline at end of file diff --git a/src/assets/images/web-only_active.svg b/src/assets/images/web-only_active.svg deleted file mode 100644 index cfcb65d..0000000 --- a/src/assets/images/web-only_active.svg +++ /dev/null @@ -1 +0,0 @@ -webonly_active \ No newline at end of file diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index 35303da..80d8407 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -46,7 +46,6 @@ $ide-web-vertical-layout: ( 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); - $terminal-only-layout: ( 'header': (1, 6, 1, 2), 'messages': (1, 6, 2,$grid-rows-count+1), @@ -74,7 +73,6 @@ $web-only-layout: ( 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); - $layouts: ( 'terminal-ide-web': $terminal-ide-web-layout, 'terminal-web': $terminal-web-layout, @@ -131,5 +129,3 @@ $layouts: ( min-height: #{$rows-count / $grid-rows-count * 100}vh; } } - - From 46b750432e4c044a5b5c8fe7626f4aa20d07edd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 20 Apr 2018 14:05:23 +0200 Subject: [PATCH 08/14] Implement hiding messages component --- src/app/config.ts | 1 + src/app/dashboard/dashboard.component.html | 2 +- src/app/dashboard/dashboard.component.ts | 1 + src/assets/scss/mixins/_layout.scss | 16 ++++++++++++---- 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/app/config.ts b/src/app/config.ts index 0727b3c..d641d53 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -22,6 +22,7 @@ export const config = { 'ide-only', 'web-only' ]), + hide_messages: false }, ide: { route: 'ide', diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 4ac0dbe..8e54ac2 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.ts b/src/app/dashboard/dashboard.component.ts index 5a28bd9..d96e6da 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -16,6 +16,7 @@ export class DashboardComponent implements OnInit, OnDestroy { deploymentNotificationSubscription: Subscription; enabledLayouts: Set = config.dashboard.enabledLayouts; layout: string = config.dashboard.currentLayout; + hide_messages: boolean = config.dashboard.hide_messages; command_handlers = {'layout': this.layoutHandler.bind(this)}; constructor(private deploymentNotificationService: DeploymentNotificationService, diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index 80d8407..f8f1901 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -93,6 +93,17 @@ $layouts: ( } } +@mixin hide-component() { + // We need to make sure the DOM element is displayed but not visible + visibility: hidden; + position: absolute; + z-index: -10000000; +} + +.hide-attribute { + @include hide-component(); +} + @function get-layout($layouts-key){ @return map_get($layouts, $layouts-key); } @@ -103,10 +114,7 @@ $layouts: ( @each $k, $v in $map { #{$sel}#{$k} { @if (length($v) == 0) { - // We need to make sure the DOM element is displayed but not visible - visibility: hidden; - position: absolute; - z-index: -10000000; + @include hide-component(); } @else { grid-column-start: nth($v, 1); From 77e18f43e3378928e430ed6e7b4e0856b906ea74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 20 Apr 2018 14:10:57 +0200 Subject: [PATCH 09/14] Fix config variable not being JSON --- src/app/config.ts | 8 ++++---- src/app/dashboard/dashboard.component.ts | 3 +-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/app/config.ts b/src/app/config.ts index d641d53..45b6179 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -2,7 +2,7 @@ export const config = { dashboard: { route: 'dashboard', currentLayout: 'terminal-ide-web', - enabledLayouts: new Set([ + enabledLayouts: [ 'terminal-ide-web', 'terminal-ide-vertical', 'terminal-ide-horizontal', @@ -11,8 +11,8 @@ export const config = { 'ide-web-vertical', 'ide-only', 'web-only' - ]), - allLayouts: new Set([ + ], + allLayouts: [ 'terminal-ide-web', 'terminal-ide-vertical', 'terminal-ide-horizontal', @@ -21,7 +21,7 @@ export const config = { 'ide-web-vertical', 'ide-only', 'web-only' - ]), + ], hide_messages: false }, ide: { diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index d96e6da..d8c11ab 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -14,7 +14,6 @@ import { SidebarComponent } from '../sidebar/sidebar.component'; export class DashboardComponent implements OnInit, OnDestroy { deploying = false; deploymentNotificationSubscription: Subscription; - enabledLayouts: Set = config.dashboard.enabledLayouts; layout: string = config.dashboard.currentLayout; hide_messages: boolean = config.dashboard.hide_messages; command_handlers = {'layout': this.layoutHandler.bind(this)}; @@ -35,7 +34,7 @@ export class DashboardComponent implements OnInit, OnDestroy { } layoutHandler(data: LayoutCommand) { - if (this.enabledLayouts.has(data.layout)) { + if (config.dashboard.enabledLayouts.includes(data.layout)) { this.setLayout(data.layout); } else { From 5c0b1dbd1bc5fc0f8d25eb9b31981e8b8dc01386 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 20 Apr 2018 14:36:06 +0200 Subject: [PATCH 10/14] Implement changing messaging visibility from API --- src/app/dashboard/dashboard.component.ts | 6 ++++-- src/app/dashboard/layout-command.ts | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index d8c11ab..0533b46 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -36,10 +36,12 @@ export class DashboardComponent implements OnInit, OnDestroy { layoutHandler(data: LayoutCommand) { if (config.dashboard.enabledLayouts.includes(data.layout)) { this.setLayout(data.layout); - } - else { + } else { console.log('Invalid ide layout "' + data.layout + '" received!'); } + if (data.hide_messages != undefined) { + this.hide_messages = data.hide_messages; + } } setLayout(layout: string) { diff --git a/src/app/dashboard/layout-command.ts b/src/app/dashboard/layout-command.ts index 3d58db2..87aa41e 100644 --- a/src/app/dashboard/layout-command.ts +++ b/src/app/dashboard/layout-command.ts @@ -1,4 +1,5 @@ export class LayoutCommand { command: string; layout: string; + hide_messages?: boolean; } From eabd7d6c75e9669c15e5d71385e4dd4567010f71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 20 Apr 2018 14:47:12 +0200 Subject: [PATCH 11/14] Fix type mismatch --- src/app/sidebar/sidebar.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts index 41b993c..3b69301 100644 --- a/src/app/sidebar/sidebar.component.ts +++ b/src/app/sidebar/sidebar.component.ts @@ -10,7 +10,7 @@ import { config } from '../config'; export class SidebarComponent { @Input() layout: string; @Output() layoutChanged = new EventEmitter(); - enabledLayouts: Set = config.dashboard.enabledLayouts; + enabledLayouts: string[] = config.dashboard.enabledLayouts; constructor() {} From bafb88012dbd70785fe97d4d38d4646fbd38f6a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 20 Apr 2018 14:50:43 +0200 Subject: [PATCH 12/14] Implement reloading of frontend from API --- src/app/dashboard/dashboard.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 0533b46..716d6a9 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -16,7 +16,8 @@ export class DashboardComponent implements OnInit, OnDestroy { deploymentNotificationSubscription: Subscription; layout: string = config.dashboard.currentLayout; hide_messages: boolean = config.dashboard.hide_messages; - command_handlers = {'layout': this.layoutHandler.bind(this)}; + command_handlers = {'layout': this.layoutHandler.bind(this), + 'reload_frontend': this.reloadFrontendHandlder.bind(this)}; constructor(private deploymentNotificationService: DeploymentNotificationService, private webSocketService: WebSocketService, @@ -44,6 +45,10 @@ export class DashboardComponent implements OnInit, OnDestroy { } } + reloadFrontendHandlder(data: LayoutCommand) { + setTimeout(() => window.location.reload(), 2000); + } + setLayout(layout: string) { this.layout = layout; // We need to trigger a 'resize' event manually, otherwise ace editor stays collapsed From f9db92cd57233a9b63e5604641335e71b549abc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 20 Apr 2018 15:54:34 +0200 Subject: [PATCH 13/14] Fix various coding-style violations and random imports --- src/app/dashboard/dashboard.component.html | 2 +- src/app/dashboard/dashboard.component.scss | 2 +- src/app/ide/ide.component.ts | 1 - src/assets/scss/mixins/_layout.scss | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 8e54ac2..677463a 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -14,7 +14,7 @@
- +
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 73864fb..4fe625c 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -92,7 +92,7 @@ @include position-grid-items(map_get($layouts, 'terminal-ide-web'),'.tfw-'); } -.terminal-web{ +.terminal-web { @include set-tfw-web('terminal-web'); @include position-grid-items(map_get($layouts,'terminal-web'),'.tfw-'); } diff --git a/src/app/ide/ide.component.ts b/src/app/ide/ide.component.ts index ac06802..5cd0f88 100644 --- a/src/app/ide/ide.component.ts +++ b/src/app/ide/ide.component.ts @@ -17,7 +17,6 @@ import { WebSocketService } from '../services/websocket.service'; import { ProcessManagerService } from '../services/processmanager.service'; import { DeploymentNotificationService } from '../services/deployment-notification.service'; import { config } from '../config'; -import { element } from 'protractor'; const modelist = brace.acequire('ace/ext/modelist'); diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index f8f1901..9a9e604 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -104,7 +104,7 @@ $layouts: ( @include hide-component(); } -@function get-layout($layouts-key){ +@function get-layout($layouts-key) { @return map_get($layouts, $layouts-key); } From 28323e9bb15dbdd346dc476d8661a026170ff212 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 20 Apr 2018 16:01:43 +0200 Subject: [PATCH 14/14] Fix removed toggle next button logic --- src/app/config.ts | 2 +- src/app/messages/messages.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/config.ts b/src/app/config.ts index 45b6179..44b3ab7 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -37,7 +37,7 @@ export const config = { }, messages: { route: 'messages', - showNextButton: false + showNextButton: true }, testmessenger: { route: 'testmessenger' diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 893907b..ba57822 100755 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -1,7 +1,7 @@
Instructions
-
+