ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-23 14:52:22 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fix styles for light theme

Browse Source
This commit is contained in:
piotrpekala7 2020-10-15 17:30:20 +02:00
parent 692db7b605
commit 6c92941794
5 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/project-map/console-wrapper/console-wrapper.component.html
View File

@ -21,7 +21,7 @@
(mousedown)="toggleDragging(true)"
[ngStyle]="style"> -->
<div class="consoleHeader">
<div class="consoleHeader" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}">
<mat-tab-group class="tabs" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
<mat-tab>
<ng-template mat-tab-label>
@ -32,7 +32,7 @@
<mat-tab *ngFor="let node of nodes; let index = index" [label]="tab">
<ng-template mat-tab-label>
<div class="col" style="margin-left: 20px;">{{node.name}}</div>
<button style="color:white" mat-icon-button (click)="removeTab(index)">
<button [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="removeTab(index)">
<mat-icon>close</mat-icon>
</button>
</ng-template>
@ -40,13 +40,13 @@
</mat-tab-group>
<button *ngIf="!isMinimized" style="color:white" mat-icon-button (click)="minimize(true)">
<button *ngIf="!isMinimized" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="minimize(true)">
<mat-icon>remove</mat-icon>
</button>
<button *ngIf="isMinimized" style="color:white" mat-icon-button (click)="minimize(false)">
<button *ngIf="isMinimized" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="minimize(false)">
<mat-icon>web_asset</mat-icon>
</button>
<button style="color:white" mat-icon-button (click)="close()">
<button [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

5
src/app/components/project-map/console-wrapper/console-wrapper.component.scss
View File

@ -41,6 +41,11 @@
background: #263238!important;
}
.lightThemeConsoleHeader {
background: white!important;
color: black!important;
}
:host ::ng-deep .mat-tab-label {
height: 3rem !important;
min-width: 8rem !important;

2
src/app/components/project-map/web-console/web-console.component.html
View File

@ -1 +1 @@
<div #terminal id="terminal"></div>
<div class="lightTheme" #terminal id="terminal"></div>

4
src/app/components/project-map/web-console/web-console.component.scss
View File

@ -0,0 +1,4 @@
.lightTheme {
background: white!important;
color: black!important;
}

11
src/app/components/project-map/web-console/web-console.component.ts
View File

@ -6,13 +6,14 @@ import { AttachAddon } from 'xterm-addon-attach';
import { Node } from '../../../cartography/models/node';
import { FitAddon } from 'xterm-addon-fit';
import { NodeConsoleService } from '../../../services/nodeConsole.service';
import { ThemeService } from '../../../services/theme.service';
@Component({
encapsulation: ViewEncapsulation.None,
selector: 'app-web-console',
templateUrl: './web-console.component.html',
styleUrls: ['../../../../../node_modules/xterm/css/xterm.css']
styleUrls: ['../../../../../node_modules/xterm/css/xterm.css', './web-console.component.scss']
})
export class WebConsoleComponent implements OnInit, AfterViewInit {
@Input() server: Server;
@ -21,15 +22,19 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
public term: Terminal = new Terminal();
public fitAddon: FitAddon = new FitAddon();
public isLightThemeEnabled: boolean = false;
private copiedText: string = '';
@ViewChild('terminal') terminal: ElementRef;
constructor(
private consoleService: NodeConsoleService
private consoleService: NodeConsoleService,
private themeService: ThemeService,
) {}
ngOnInit() {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
this.consoleService.consoleResized.subscribe(ev => {
let numberOfColumns = Math.floor(ev.width / 9);
let numberOfRows = Math.floor(ev.height / 17);
@ -47,6 +52,8 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
ngAfterViewInit() {
this.term.open(this.terminal.nativeElement);
if (this.isLightThemeEnabled) this.term.setOption('theme', { background: 'white', foreground: 'black', cursor: 'black' });
const socket = new WebSocket(this.getUrl());
socket.onerror = ((event) => {