ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-21 02:01:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix for theming

Browse Source
This commit is contained in:
piotrpekala7 2021-10-06 12:44:23 +02:00
parent 63ecacb6b6
commit 357e478fb8
3 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/template/template.component.html
View File

@ -45,25 +45,25 @@
<div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i])">
<img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
</div>
<div class="templateText">{{ filteredTemplates[i].name }}</div>
<div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i].name }}</div>
</span>
<span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
<div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 1])">
<img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
</div>
<div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
<div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 1].name }}</div>
</span>
<span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
<div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 2])">
<img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
</div>
<div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
<div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 2].name }}</div>
</span>
<span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
<div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 3])">
<img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
</div>
<div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
<div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 3].name }}</div>
</span>
</span>
</mat-list-item>

5
src/app/components/template/template.component.scss
View File

@ -49,6 +49,11 @@
word-wrap: break-word;
}
.lightTemplateText {
word-wrap: break-word;
color: black;
}
.templateIcon {
width: 80px !important;
padding: 10px;

31
src/app/components/template/template.component.ts
View File

@ -1,5 +1,7 @@
import { OverlayContainer } from '@angular/cdk/overlay';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ThemeService } from '@services/theme.service';
import { Subscription } from 'rxjs';
import { Project } from '../../models/project';
import { Server } from '../../models/server';
@ -18,7 +20,7 @@ export class TemplateComponent implements OnInit, OnDestroy {
@Input() server: Server;
@Input() project: Project;
@Output() onNodeCreation = new EventEmitter<any>();
overlay;
templates: Template[] = [];
filteredTemplates: Template[] = [];
searchText: string = '';
@ -45,13 +47,19 @@ export class TemplateComponent implements OnInit, OnDestroy {
startY: number;
private subscription: Subscription;
private themeSubscription: Subscription;
private isLightThemeEnabled: boolean = false;
constructor(
private dialog: MatDialog,
private templateService: TemplateService,
private scaleService: MapScaleService,
private symbolService: SymbolService
) {}
private symbolService: SymbolService,
private themeService: ThemeService,
private overlayContainer: OverlayContainer,
) {
this.overlay = overlayContainer.getContainerElement();
}
ngOnInit() {
this.subscription = this.templateService.newTemplateCreated.subscribe((template: Template) => {
@ -64,6 +72,23 @@ export class TemplateComponent implements OnInit, OnDestroy {
this.templates = listOfTemplates;
});
this.symbolService.list(this.server);
if (this.themeService.getActualTheme() === 'light') this.isLightThemeEnabled = true;
this.themeSubscription = this.themeService.themeChanged.subscribe((value: string) => {
if (value === 'light-theme') this.isLightThemeEnabled = true;
this.toggleTheme();
});
}
toggleTheme(): void {
if (this.overlay.classList.contains("dark-theme")) {
this.overlay.classList.remove("dark-theme");
this.overlay.classList.add("light-theme");
} else if (this.overlay.classList.contains("light-theme")) {
this.overlay.classList.remove("light-theme");
this.overlay.classList.add("dark-theme");
} else {
this.overlay.classList.add("light-theme");
}
}
sortTemplates() {