From 5e0e55eb169b0b8fd6dc8d266ca8d48ff74c7f47 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 12 Mar 2018 10:32:01 +0100 Subject: [PATCH 01/12] Add horizontal view, change header layout and fix webide position problems --- src/app/dashboard/dashboard.component.html | 2 +- src/app/dashboard/dashboard.component.scss | 72 +++++++++++++++++----- src/app/header/header.component.html | 15 ++--- src/app/header/header.component.scss | 34 ---------- src/app/login/login.component.html | 4 +- src/app/login/login.component.scss | 3 + src/app/messages/messages.component.html | 1 + src/app/messages/messages.component.scss | 11 +++- src/app/terminal/terminal.component.html | 2 +- src/app/webide/webide.component.html | 2 +- src/app/webide/webide.component.scss | 12 ++-- src/assets/scss/_variables.scss | 1 - 12 files changed, 85 insertions(+), 74 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 8522578..1c89e60 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 54934be..61b2feb 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,29 +1,46 @@ $space: 24px; +$small: 0.75 * $space; -$tao-plum-900: #272F4C; -$tao-gray-50: #FAFAFA; $tao-navbar-height: 67px; -$layout-template: "default"; // Change this to switch template +$tao-plum-900: #272F4C; +$tao-gray-50: #FAFAFA; +$tao-gray-100: #F2F2F2; +$tao-gray-500: #555555; + + +// Change this to switch template. Options: 'default', 'vraw', 'hraw' +$layout-template: 'hraw'; $default-layout: ( - 'messages': (1, 2, 1, 4), + 'header': (1, 2, 1, 2), + 'messages': (1, 2, 2, 10), 'webide': (4, -1, 1, -1), - 'terminal': (1, 4, 4, -1), - 'web': (2, 4, 1, 4) + 'terminal': (1, 4, 10, -1), + 'web': (2, 4, 1, 10) ); -$raw-layout: ( - 'messages': (1, 2, 1, -1), +$vraw-layout: ( + 'header': (1, 2, 1, 2), + 'messages': (1, 2, 2, -1), 'webide': (4, -1, 1, -1), 'terminal': (2, 4, 1, -1), 'web': (), ); +$hraw-layout: ( + 'header': (1, 2, 1, -1), + 'messages': (1, 2, 2, -1), + 'webide': (2, -1, 1, 10), + 'terminal': (2, -1, 10, -1), + 'web': (), +); + $layout: ( - "default": $default-layout, - "raw": $raw-layout + 'default': $default-layout, + 'vraw': $vraw-layout, + 'hraw': $hraw-layout ); @mixin position-grid-items($map, $sel) { @@ -48,25 +65,38 @@ $layout: ( } .tfw-grid-main-components { - overflow-y: hidden; + // overflow-y: visible; display: grid; - padding-top: $tao-navbar-height; width: 100vw; height: 100vh; justify-content: center; align-content: center; grid-template-columns: repeat(5, 1fr); - grid-template-rows: repeat(5, 1fr); + grid-template-rows: repeat(15, 1fr); @include position-grid-items(map_get($layout,$layout-template),'.tfw-'); - .tfw-web { - padding: $space; + .tfw-header { + padding: $small; + background-color: $tao-gray-50; + height: $tao-navbar-height; } .tfw-messages { padding: $space; background-color: $tao-gray-50; + overflow-y: scroll; + + @if ($layout-template != 'default') { + max-height: 95vmin; + } + @else { + max-height: 55vmin; + } + } + + .tfw-web { + padding: $space; } .tfw-webide { @@ -74,6 +104,16 @@ $layout: ( } .tfw-terminal { - } + border: 1px solid $tao-plum-900; + border-left: 0; + border-right: 0; + border-bottom: 0; + .xterm .xterm-viewport { + height: 100vmin; + } + + + + } } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 51cec9c..069490e 100755 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,11 +1,4 @@ - +
+ + Tutorials +
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 81d80bb..50be1e1 100755 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -11,14 +11,6 @@ $company-logo-width: 130px; font-size: $font-size-h3; } -.tfw-navbar { - background-color: rgba(255, 255, 255, 0.96); - min-height: $tao-navbar-height; - box-shadow: 0px 1px 6px 0px #888; - margin-bottom: 12px; - border: 1px solid #e7e7e7; -} - .tfw-grid-navbar { display: grid; grid-template-columns: $company-logo-width 1fr; @@ -31,29 +23,3 @@ $company-logo-width: 130px; width: $company-logo-width; } -.tfw-company-logo-mobile { - display: none; - width: 130px; -} - -@media (max-width: 767px) { - .tfw-grid-navbar { - grid-template-columns: 1fr; - } - - .tfw-company-logo { - display: none; - } - - .tfw-company-logo-mobile { - display: block; - } - - .tfw-navbar-links { - justify-self: left !important; - } -} - -.jumbotron { - padding: 2vh; -} diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 3bf09e8..73d6cb3 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,4 +1,4 @@ -
+

Login page

@@ -23,7 +23,7 @@ [(ngModel)]="model.password" >
- +

diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss index e69de29..adbd706 100644 --- a/src/app/login/login.component.scss +++ b/src/app/login/login.component.scss @@ -0,0 +1,3 @@ +.deploy-blur { + filter: blur(3px); +} diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 0be46f1..8cad97b 100755 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -9,3 +9,4 @@

+ diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 90c889f..02f03a1 100755 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -9,14 +9,21 @@ $tao-blue-500: #277EEC; $tao-gray-100: #F2F2F2; $tao-panel-border-radius-sm: 8px; +$tao-navbar-height: 67px; + $font-size-tiny: 12px; $font-size-base: 14px; +.tfw-grid-header-messages { + + display: grid; + grid-template-rows: $tao-navbar-height auto; +} + .tfw-messages-main { - max-height: 50vmin; - overflow-y: scroll; + h5 { margin-bottom: $small; diff --git a/src/app/terminal/terminal.component.html b/src/app/terminal/terminal.component.html index 8788452..32ea922 100644 --- a/src/app/terminal/terminal.component.html +++ b/src/app/terminal/terminal.component.html @@ -1 +1 @@ -
+
diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 6bbb1b3..69547d9 100644 --- a/src/app/webide/webide.component.html +++ b/src/app/webide/webide.component.html @@ -1,4 +1,4 @@ -
+
+
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 08869e0..2a3aedd 100755 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -1,17 +1,21 @@ @import "../../assets/scss/variables.scss"; -.tfw-grid-header-messages { - - display: grid; - grid-template-rows: $tao-navbar-height auto; -} - .tfw-messages-main { - h5 { + + + .tfw-grid-messages-header { + display: grid; + grid-template-columns: 1fr 1fr; margin-bottom: $small; - color: $tao-blue-500; - font-weight: 500; + + + span { + color: $tao-blue-500; + font-weight: 500; + font-size: $font-size-h3; + } } + } .tfw-grid-message { diff --git a/src/app/terminal/terminal.component.html b/src/app/terminal/terminal.component.html index df8f55b..26e795b 100644 --- a/src/app/terminal/terminal.component.html +++ b/src/app/terminal/terminal.component.html @@ -1,3 +1 @@ -
-
-
+
diff --git a/src/app/terminal/terminal.component.scss b/src/app/terminal/terminal.component.scss index 86a03c2..43d03af 100644 --- a/src/app/terminal/terminal.component.scss +++ b/src/app/terminal/terminal.component.scss @@ -1,6 +1,14 @@ @import "../../assets/scss/mixins/layout.scss"; +@import "../../app/dashboard/dashboard.component.scss"; -.tfw-xterm-container { - @include set-component-size('terminal'); + + +.tfw-xterm { + max-height: 100%; + height: 100%; + min-height: 100%; } + + + diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index ba3e40c..2850480 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -5,8 +5,7 @@ $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), - 'terminal-footer': (1, 4, $grid-rows-count, -1), + 'terminal': (1, 4, 10, $grid-rows-count+1), 'web': (2, 4, 1, 10) ); @@ -14,8 +13,7 @@ $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), - 'terminal-footer': (2, 4, $grid-rows-count, -1), + 'terminal': (2, 4, 1,$grid-rows-count+1), 'web': (), ); @@ -23,8 +21,7 @@ $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), - 'terminal-footer': (2, $grid-rows-count+1, $grid-rows-count, -1), + 'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count+1), 'web': (), ); @@ -62,10 +59,4 @@ $layout: ( min-width: #{$columns-count / $grid-columns-count * 100}vw; min-height: #{$rows-count / $grid-rows-count * 100}vh; - - width: #{$columns-count / $grid-columns-count * 100}vw; - height: #{$rows-count / $grid-rows-count * 100}vh; - - max-width: #{$columns-count / $grid-columns-count * 100}vw; - max-height: #{$rows-count / $grid-rows-count * 100}vh; } diff --git a/src/assets/scss/shared/_buttons.scss b/src/assets/scss/shared/_buttons.scss index 52742df..d995931 100644 --- a/src/assets/scss/shared/_buttons.scss +++ b/src/assets/scss/shared/_buttons.scss @@ -24,11 +24,18 @@ padding: 8px 24px; } - &:hover { + &:hover + { + background: initial; background-color: transparent; color: $tao-blue-500; box-shadow: inset 0 0 0 1px $tao-blue-500; } + + &:active { + + } + } .tao-btn-rainbow { From e99cd1dc0ae61169a1c3ed401ac6031aab851ea8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Wed, 14 Mar 2018 16:50:37 +0100 Subject: [PATCH 11/12] Fix shitty looking imports --- src/app/app.module.ts | 42 +++++++++---------- src/app/dashboard/dashboard.component.ts | 6 +-- .../deployment-notification.service.ts | 4 +- src/app/web/web.component.ts | 6 +-- src/app/webide/webide.component.ts | 2 +- 5 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8b54ed8..f250712 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,26 +1,26 @@ -import {HttpClientModule} from '@angular/common/http'; -import {FormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {NgModule} from '@angular/core'; -import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; -import {AceEditorModule} from 'ng2-ace-editor'; +import { HttpClientModule } from '@angular/common/http'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { AceEditorModule } from 'ng2-ace-editor'; -import {AppComponent} from './app.component'; -import {DashboardComponent} from './dashboard/dashboard.component'; -import {HeaderComponent} from './header/header.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 {MessagesComponent} from './messages/messages.component'; -import {WebSocketService} from './services/websocket.service'; -import {TerminalComponent} from './terminal/terminal.component'; -import {FSMUpdateService} from './services/fsmupdate.service'; -import {ProcessManagerService} from './services/processmanager.service'; -import {AppRoutingModule} from './app-routing.module'; -import {TestmessengerComponent} from './testmessenger/testmessenger.component'; -import {DeploymentNotificationService} from './services/deployment-notification.service'; +import { AppComponent } from './app.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; +import { HeaderComponent } from './header/header.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 { MessagesComponent } from './messages/messages.component'; +import { WebSocketService } from './services/websocket.service'; +import { TerminalComponent } from './terminal/terminal.component'; +import { FSMUpdateService } from './services/fsmupdate.service'; +import { ProcessManagerService } from './services/processmanager.service'; +import { AppRoutingModule } from './app-routing.module'; +import { TestmessengerComponent } from './testmessenger/testmessenger.component'; +import { DeploymentNotificationService } from './services/deployment-notification.service'; @NgModule({ diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 5cbdb86..5ae03b9 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,6 +1,6 @@ -import {Component, OnDestroy, OnInit} from '@angular/core'; -import {DeploymentNotificationService} from '../services/deployment-notification.service'; -import {Subscription} from 'rxjs/Subscription'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { DeploymentNotificationService } from '../services/deployment-notification.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'app-dashboard', diff --git a/src/app/services/deployment-notification.service.ts b/src/app/services/deployment-notification.service.ts index eb02e2e..3403634 100644 --- a/src/app/services/deployment-notification.service.ts +++ b/src/app/services/deployment-notification.service.ts @@ -1,5 +1,5 @@ -import {Injectable} from '@angular/core'; -import {Subject} from 'rxjs/Subject'; +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; @Injectable() export class DeploymentNotificationService { diff --git a/src/app/web/web.component.ts b/src/app/web/web.component.ts index 393904c..dd136b0 100644 --- a/src/app/web/web.component.ts +++ b/src/app/web/web.component.ts @@ -1,9 +1,9 @@ import { HttpClient } from '@angular/common/http'; -import {Component, OnDestroy, OnInit} from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Login } from './web'; -import {DeploymentNotificationService} from '../services/deployment-notification.service'; -import {Subscription} from 'rxjs/Subscription'; +import { DeploymentNotificationService } from '../services/deployment-notification.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'app-web', diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 724371d..8419e1d 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -15,7 +15,7 @@ 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 { DeploymentNotificationService } from '../services/deployment-notification.service'; const modelist = brace.acequire('ace/ext/modelist'); From a01b5761ae99e0074ee00270458958e775ccf3bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Wed, 14 Mar 2018 16:53:42 +0100 Subject: [PATCH 12/12] Make iframe template blank --- src/app/dashboard/dashboard.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 3ac0eb6..b8c292c 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -6,7 +6,7 @@
+ src="about:blank">