ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-20 15:40:29 +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
Download Patch File Download Diff File Expand all files Collapse all files

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;