ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-24 04:55:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Light theme added for non-material components

Browse Source
This commit is contained in:
Piotr Pekala 2019-11-27 07:18:41 -08:00
parent 919e5fb44b
commit 0c8c09ef56
23 changed files with 95 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.ts
View File

@ -27,6 +27,6 @@ export class AppComponent implements OnInit {
this.electronService.ipcRenderer.send('settings.changed', settings);
});
}
this.themeService.setDarkMode(false);
// this.themeService.setDarkMode(false);
}
}

2
src/app/components/adbutler/adbutler.component.scss
View File

@ -1,5 +1,5 @@
.ad {
background-color: #263238;
background-color: transparent;
width: 400px;
padding-top: 10px;
padding-bottom: 10px;

2
src/app/components/notification-box/notification-box.component.html
View File

@ -1,7 +1,7 @@
<div class="notification-box" [ngClass]="{hidden: !isVisible}">
<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
<div style="display: flex; height: 102px;">
<div class="content">
<div class="content" [ngClass]="{lightTheme: isLightThemeEnabled}">
<app-adbutler (onLoad)="onLoadingAdbutler($event)" theme="dark"></app-adbutler>
<mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
</div>

4
src/app/components/notification-box/notification-box.component.scss
View File

@ -14,6 +14,10 @@
border-bottom: 2px solid #0097a7;
}
.lightTheme {
background-color: white;
}
.close-button {
position: fixed;
bottom: 90px;

7
src/app/components/notification-box/notification-box.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { timer, Observable, Subscription } from 'rxjs';
import { ThemeService } from '../../services/theme.service';
@Component({
selector: 'app-notification-box',
@ -22,11 +23,15 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
breakTime: number = 20;
isEndless: boolean = false;
numberOfViews: number = 1;
isLightThemeEnabled: boolean = false;
constructor(){}
constructor(
private themeService: ThemeService
){}
ngOnInit() {
this.startTimer();
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
}
startTimer() {

1
src/app/components/project-map/log-console/log-console.component.html
View File

@ -5,6 +5,7 @@
</div>
<div
class="consoleWrapper"
[ngClass]="{lightTheme: isLightThemeEnabled}"
(mousedown)="toggleDragging(true)"
[ngStyle]="style"
mwlResizable

8
src/app/components/project-map/log-console/log-console.component.scss
View File

@ -11,8 +11,12 @@
font-size: 12px;
}
.lightTheme {
background: #0d47a1;
}
.filterButton {
background: #263238;
background: transparent;
color: white;
border: none;
margin-top: 0px;
@ -54,7 +58,7 @@
}
.commandLine {
background-color: #263238;
background-color: transparent;
color: white;
border: none;
}

6
src/app/components/project-map/log-console/log-console.component.ts
View File

@ -13,6 +13,7 @@ import { LogEventsDataSource } from './log-events-datasource';
import { HttpServer } from '../../../services/http-server.service';
import { LogEvent } from '../../../models/logEvent';
import { ResizeEvent } from 'angular-resizable-element';
import { ThemeService } from '../../../services/theme.service';
@Component({
@ -49,16 +50,19 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
public styleInside: object = { height: `120px` };
isDraggingEnabled: boolean = false;
public isLightThemeEnabled: boolean = false;
constructor(
private projectWebServiceHandler: ProjectWebServiceHandler,
private nodeService: NodeService,
private nodesDataSource: NodesDataSource,
private logEventsDataSource: LogEventsDataSource,
private httpService: HttpServer
private httpService: HttpServer,
private themeService: ThemeService
) {}
ngOnInit() {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
this.nodeSubscription = this.projectWebServiceHandler.nodeNotificationEmitter.subscribe((event) => {
let node: Node = event.event as Node;
let message: string = '';

2
src/app/components/project-map/nodes-menu/nodes-menu.component.scss
View File

@ -5,7 +5,7 @@
width: 40px;
margin-right: 12px !important;
margin-left: 12px !important;
background: #263238;
background: transparent;
padding: 0;
border: none;
background-color: transparent;

2
src/app/components/project-map/project-map-menu/project-map-menu.component.scss
View File

@ -5,7 +5,7 @@
width: 40px;
margin-right: 12px !important;
margin-left: 12px !important;
background: #263238;
background: transparent;
padding: 0;
border: none;
background-color: transparent;

6
src/app/components/project-map/project-map.component.html
View File

@ -145,11 +145,11 @@
</mat-toolbar>
</div>
<div id="show-menu-wrapper" [ngClass]="{ shadowed: !isProjectMapMenuVisible }" *ngIf="!readonly">
<div id="show-menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, shadowed: !isProjectMapMenuVisible }" *ngIf="!readonly">
<button class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon class="unmarked">keyboard_arrow_right</mat-icon></button>
</div>
<div id="menu-wrapper" [ngClass]="{ extended: isProjectMapMenuVisible }">
<div id="menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, extended: isProjectMapMenuVisible }">
<app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
<mat-divider class="divider" [vertical]="true"></mat-divider>
<app-project-map-menu [server]="server" [project]="project"></app-project-map-menu>
@ -159,7 +159,7 @@
<app-context-menu [project]="project" [server]="server"></app-context-menu>
</div>
<div id="zoom-buttons">
<div [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-buttons">
<button class="zoom-button" (click)="zoomIn()"><mat-icon>zoom_in</mat-icon></button>
<button class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
<button class="zoom-button" (click)="zoomOut()"><mat-icon>zoom_out</mat-icon></button>

25
src/app/components/project-map/project-map.component.scss
View File

@ -21,6 +21,10 @@ g.node:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.lightTheme {
background: #0d47a1!important;
}
#show-menu-wrapper {
position: fixed;
background: transparent;
@ -66,7 +70,7 @@ g.node:hover {
width: 40px;
margin-right: 12px !important;
margin-left: 12px !important;
background: #263238;
background: transparent;
padding: 0;
border: none;
background-color: transparent;
@ -101,7 +105,7 @@ mat-divider.divider {
color: #0097a7!important;
}
#zoom-buttons {
.zoom-buttons {
position: fixed;
background: #263238;
bottom: 20px;
@ -112,7 +116,7 @@ mat-divider.divider {
outline: none;
height: 40px;
width: 40px;
background: #263238;
background: transparent;
border: none;
color: white;
font-size: 1.25rem;
@ -122,21 +126,6 @@ mat-divider.divider {
margin-left: -6px;
}
}
.zoom-button-white {
outline: none;
height: 40px;
width: 40px;
color: #263238;
border: none;
background: white;
font-size: 1.25rem;
font-weight: bold;
mat-icon {
margin-left: -6px;
}
}
}
@-moz-document url-prefix() {

6
src/app/components/project-map/project-map.component.ts
View File

@ -65,6 +65,7 @@ import { NavigationDialogComponent } from '../projects/navigation-dialog/navigat
import { ConfirmationBottomSheetComponent } from '../projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
import { NodeAddedEvent } from '../template/template-list-dialog/template-list-dialog.component';
import { NotificationService } from '../../services/notification.service';
import { ThemeService } from '../../services/theme.service';
@Component({
@ -102,6 +103,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private scrollX: number = 0;
private scrollY: number = 0;
private scrollEnabled: boolean = false;
public isLightThemeEnabled: boolean = false;
@ViewChild(ContextMenuComponent, {static: false}) contextMenu: ContextMenuComponent;
@ViewChild(D3MapComponent, {static: false}) mapChild: D3MapComponent;
@ -150,10 +152,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private ethernetLinkWidget: EthernetLinkWidget,
private serialLinkWidget: SerialLinkWidget,
private bottomSheet: MatBottomSheet,
private notificationService: NotificationService
private notificationService: NotificationService,
private themeService: ThemeService
) {}
ngOnInit() {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
this.settings = this.settingsService.getAll();
this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;

2
src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html
View File

@ -1,4 +1,4 @@
<div class="dialogWrapper">
<div class="dialogWrapper" [ngClass]="{lightTheme: isLightThemeEnabled}">
<div class="title">{{message}}</div>
<div>
<button mat-button (click)="onNoClick()">No</button>

4
src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.scss
View File

@ -7,8 +7,8 @@
align-items: center;
}
mat-bottom-sheet-container {
background: #263238;
.lightTheme {
background-color: white;
}
.title {

11
src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/material';
import { ThemeService } from '../../../services/theme.service';
@Component({
selector: 'app-confirmation-bottomsheet',
@ -8,10 +9,16 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/mater
})
export class ConfirmationBottomSheetComponent implements OnInit {
message: string = '';
isLightThemeEnabled: boolean = false;
constructor(private bottomSheetRef: MatBottomSheetRef<ConfirmationBottomSheetComponent>) {}
constructor(
private bottomSheetRef: MatBottomSheetRef<ConfirmationBottomSheetComponent>,
private themeService: ThemeService
) {}
ngOnInit() {}
ngOnInit() {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
}
onNoClick(): void {
this.bottomSheetRef.dismiss(false);

2
src/app/components/projects/navigation-dialog/navigation-dialog.component.html
View File

@ -1,4 +1,4 @@
<div class="dialogWrapper">
<div class="dialogWrapper" [ngClass]="{lightTheme: isLightThemeEnabled}">
<div class="title"> Do you want to navigate to {{projectMessage}}?</div>
<div>
<button mat-button (click)="onNoClick()">No</button>

4
src/app/components/projects/navigation-dialog/navigation-dialog.component.scss
View File

@ -7,8 +7,8 @@
align-items: center;
}
mat-bottom-sheet-container {
background: #263238;
.lightTheme {
background-color: white;
}
.title {

11
src/app/components/projects/navigation-dialog/navigation-dialog.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/material';
import { ThemeService } from '../../../services/theme.service';
@Component({
selector: 'app-navigation-dialog',
@ -8,10 +9,16 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/mater
})
export class NavigationDialogComponent implements OnInit {
projectMessage: string = '';
isLightThemeEnabled: boolean = false;
constructor(private bottomSheetRef: MatBottomSheetRef<NavigationDialogComponent>) {}
constructor(
private bottomSheetRef: MatBottomSheetRef<NavigationDialogComponent>,
private themeService: ThemeService
) {}
ngOnInit() {}
ngOnInit() {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
}
onNoClick(): void {
this.bottomSheetRef.dismiss(false);

1
src/app/components/topology-summary/topology-summary.component.html
View File

@ -8,6 +8,7 @@
(mousedown)="toggleDragging(true)"
*ngIf="projectsStatistics"
[ngStyle]="style"
[ngClass]="{lightTheme: isLightThemeEnabled}"
mwlResizable
[validateResize]="validate"
[resizeEdges]="{ right: true, left: true, bottom: true, top: true }"

4
src/app/components/topology-summary/topology-summary.component.scss
View File

@ -11,6 +11,10 @@
font-size: 12px;
}
.lightTheme {
background: #0d47a1;
}
.summaryHeaderMenu {
height: 24px;
}

8
src/app/components/topology-summary/topology-summary.component.ts
View File

@ -10,6 +10,7 @@ import { Compute } from '../../models/compute';
import { ComputeService } from '../../services/compute.service';
import { LinksDataSource } from '../../cartography/datasources/links-datasource';
import { ResizeEvent } from 'angular-resizable-element';
import { ThemeService } from '../../services/theme.service';
@Component({
@ -36,18 +37,21 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
captureFilterEnabled: boolean = false;
packetFilterEnabled: boolean = false;
computes: Compute[] = [];
isTopologyVisible: boolean = true;
isDraggingEnabled: boolean = false;
isLightThemeEnabled: boolean = false;
constructor(
private nodesDataSource: NodesDataSource,
private projectService: ProjectService,
private computeService: ComputeService,
private linksDataSource: LinksDataSource
private linksDataSource: LinksDataSource,
private themeService: ThemeService
) {}
ngOnInit() {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
this.subscriptions.push(
this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
this.nodes = nodes;

27
src/app/services/theme.service.ts
View File

@ -1,23 +1,21 @@
import { Injectable, RendererFactory2, Renderer2, Inject } from '@angular/core';
import { Injectable, RendererFactory2, Renderer2, Inject, EventEmitter } from '@angular/core';
import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
@Injectable({ providedIn: 'root' })
export class ThemeService {
private _mainTheme$: BehaviorSubject<string> = new BehaviorSubject('theme-default');
private _darkMode$: BehaviorSubject<boolean> = new BehaviorSubject(false);
darkMode$: Observable<boolean> = this._darkMode$.asObservable();
private _renderer: Renderer2;
private head: HTMLElement;
private themeLinks: HTMLElement[] = [];
darkMode$: Observable<boolean> = this._darkMode$.asObservable();
theme$: Observable<[string, boolean]>;
public themeChanged = new EventEmitter<string>();
//this should taken from memory
public savedTheme: string = 'light';
constructor(
rendererFactory: RendererFactory2,
@Inject(DOCUMENT) document: Document
@ -34,12 +32,23 @@ export class ThemeService {
})
}
getActualTheme() {
return this.savedTheme;
}
setMainTheme(name: string) {
this._mainTheme$.next(name);
}
setDarkMode(value: boolean) {
this._darkMode$.next(value);
if (value) {
this.savedTheme = 'dark';
this.themeChanged.emit(this.savedTheme);
} else {
this.savedTheme = 'light';
this.themeChanged.emit(this.savedTheme);
}
}
private async loadCss(filename: string) {