diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.html b/src/app/components/project-map/console-wrapper/console-wrapper.component.html index db235521..46be8150 100644 --- a/src/app/components/project-map/console-wrapper/console-wrapper.component.html +++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.html @@ -3,7 +3,7 @@ (document:mousemove)="dragWidget($event)" (document:mouseup)="toggleDragging(false)"> -
--> -
+
@@ -53,7 +53,7 @@ -
+
diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.scss b/src/app/components/project-map/console-wrapper/console-wrapper.component.scss index de526a3d..d4ee6ad0 100644 --- a/src/app/components/project-map/console-wrapper/console-wrapper.component.scss +++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.scss @@ -5,7 +5,7 @@ left: 20px; height: 180px; width: 600px; - background: #263238; + background: #000000!important; color: white; overflow: hidden; font-size: 12px; @@ -38,10 +38,26 @@ display: flex; padding: 2px; justify-content: space-between; + background: #263238!important; +} + +:host ::ng-deep .mat-tab-label { + height: 3rem !important; + min-width: 8rem !important; +} + +:host ::ng-deep .mat-tab-label.mat-tab-label-active { + border-bottom: 2px solid #0097a7; + box-sizing: border-box; + font-weight: 1200; +} + +:host ::ng-deep .mat-ink-bar { + display: none !important; } .tabs { - width: 630px; + width: 80%; } .console { @@ -54,6 +70,10 @@ scrollbar-width: thin; } +.xterm-console { + background: black; +} + .consoleInput { width: 100%; height: 30px; diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.ts b/src/app/components/project-map/console-wrapper/console-wrapper.component.ts index 8b2ebf59..f1224483 100644 --- a/src/app/components/project-map/console-wrapper/console-wrapper.component.ts +++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.ts @@ -24,12 +24,13 @@ export class ConsoleWrapperComponent implements OnInit { public style: object = {}; public styleInside: object = { height: `120px` }; - public isDraggingEnabled: boolean = false; public isLightThemeEnabled: boolean = false; - public isMinimized: boolean = false; + public resizedWidth: number = 720; + public resizedHeight: number = 480; + constructor( private consoleService: NodeConsoleService, private themeService: ThemeService @@ -55,9 +56,9 @@ export class ConsoleWrapperComponent implements OnInit { minimize(value: boolean) { this.isMinimized = value; if (!value) { - this.style = { bottom: '20px', left: '20px', width: '720px', height: '460px'}; + this.style = { bottom: '20px', left: '20px', width: `${this.resizedWidth}px`, height: `${this.resizedHeight}px`} } else { - this.style = { bottom: '20px', left: '20px', width: '720px', height: '56px'}; + this.style = { bottom: '20px', left: '20px', width: `${this.resizedWidth}px`, height: '56px'}; } } @@ -113,8 +114,8 @@ export class ConsoleWrapperComponent implements OnInit { if ( event.rectangle.width && event.rectangle.height && - (event.rectangle.width < 720 || - event.rectangle.height < 460) + (event.rectangle.width < 500 || + event.rectangle.height < 100) ) { return false; } @@ -134,6 +135,14 @@ export class ConsoleWrapperComponent implements OnInit { height: `${event.rectangle.height - 60}px`, width: `${event.rectangle.width}px` }; + + this.consoleService.consoleResized.next({ + width: event.rectangle.width, + height: event.rectangle.height - 53 + }); + + this.resizedWidth = event.rectangle.width; + this.resizedHeight = event.rectangle.height; } close() { diff --git a/src/app/components/project-map/log-console/log-console.component.ts b/src/app/components/project-map/log-console/log-console.component.ts index b4c06803..6692b3b4 100644 --- a/src/app/components/project-map/log-console/log-console.component.ts +++ b/src/app/components/project-map/log-console/log-console.component.ts @@ -16,6 +16,7 @@ import { ResizeEvent } from 'angular-resizable-element'; import { ThemeService } from '../../../services/theme.service'; import { FormControl } from '@angular/forms'; import { version } from '../../../version'; +import { NodeConsoleService } from '../../../services/nodeConsole.service'; @Component({ @@ -63,10 +64,17 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy { private logEventsDataSource: LogEventsDataSource, private httpService: HttpServer, private themeService: ThemeService, - private cd: ChangeDetectorRef + private cd: ChangeDetectorRef, + private nodeConsoleService: NodeConsoleService, + private changeDetectorRef: ChangeDetectorRef ) {} ngOnInit() { + this.nodeConsoleService.consoleResized.subscribe(ev => { + this.style = { bottom: '20px', left: '20px', width: `${ev.width}px`, height: `${ev.height - 70}px`}; + this.changeDetectorRef.detectChanges(); + }); + this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false this.style = { bottom: '20px', left: '20px', width: '720px', height: '340px'}; diff --git a/src/app/components/project-map/web-console/web-console.component.ts b/src/app/components/project-map/web-console/web-console.component.ts index 82c5b550..13af03fc 100644 --- a/src/app/components/project-map/web-console/web-console.component.ts +++ b/src/app/components/project-map/web-console/web-console.component.ts @@ -31,8 +31,18 @@ export class WebConsoleComponent implements OnInit, AfterViewInit { ngOnInit() { this.consoleService.consoleResized.subscribe(ev => { - this.fitAddon.fit(); + let numberOfColumns = Math.floor(ev.width / 9); + let numberOfRows = Math.floor(ev.height / 17); + + this.consoleService.setNumberOfColumns(numberOfColumns); + this.consoleService.setNumberOfRows(numberOfRows); + + this.term.resize(numberOfColumns, numberOfRows); }); + + if (this.consoleService.getNumberOfColumns() && this.consoleService.getNumberOfRows()){ + this.term.resize(this.consoleService.getNumberOfColumns(), this.consoleService.getNumberOfRows()); + } } ngAfterViewInit() { diff --git a/src/app/services/nodeConsole.service.ts b/src/app/services/nodeConsole.service.ts index d1ee05bf..8c5d6aaf 100644 --- a/src/app/services/nodeConsole.service.ts +++ b/src/app/services/nodeConsole.service.ts @@ -15,8 +15,27 @@ export class NodeConsoleService { public readonly defaultNumberOfColumns = 80; public readonly defaultNumberOfRows = 24; + private lastNumberOfColumns: number; + private lastNumberOfRows: number; + constructor() {} + getNumberOfColumns() { + return this.lastNumberOfColumns; + } + + getNumberOfRows() { + return this.lastNumberOfRows; + } + + setNumberOfColumns(value: number) { + this.lastNumberOfColumns = value; + } + + setNumberOfRows(value: number) { + this.lastNumberOfRows = value; + } + openConsoleForNode(node: Node) { this.nodeConsoleTrigger.emit(node); } @@ -39,6 +58,6 @@ export class NodeConsoleService { } export interface ConsoleResizedEvent { - numberOfColumns: number, - numberOfRows: number + width: number, + height: number }