diff --git a/src/app/cartography/helpers/font-fixer.spec.ts b/src/app/cartography/helpers/font-fixer.spec.ts index ea9d6eaa..31615a44 100644 --- a/src/app/cartography/helpers/font-fixer.spec.ts +++ b/src/app/cartography/helpers/font-fixer.spec.ts @@ -16,8 +16,8 @@ describe('FontFixer', () => { }; expect(fixer.fix(font)).toEqual({ - font_family: 'Noto Sans', - font_size: 11, + font_family: 'Arial', + font_size: 12, font_weight: 'bold', }); }); @@ -39,12 +39,12 @@ describe('FontFixer', () => { it('should fix TypeWriter font and 10px size in styles', () => { const styles = 'font-family: TypeWriter; font-size: 10px; font-weight: bold'; - expect(fixer.fixStyles(styles)).toEqual('font-family:Noto Sans;font-size:11px;font-weight:bold'); + expect(fixer.fixStyles(styles)).toEqual('font-family:Arial;font-size:12px;font-weight:bold'); }); it('should fix TypeWriter font and 10px size in styles with quotes', () => { const styles = 'font-family: "TypeWriter"; font-size: 10px; font-weight: bold'; - expect(fixer.fixStyles(styles)).toEqual('font-family:Noto Sans;font-size:11px;font-weight:bold'); + expect(fixer.fixStyles(styles)).toEqual('font-family:Arial;font-size:12px;font-weight:bold'); }); }); diff --git a/src/app/cartography/helpers/font-fixer.ts b/src/app/cartography/helpers/font-fixer.ts index f038ca8a..f566ba51 100644 --- a/src/app/cartography/helpers/font-fixer.ts +++ b/src/app/cartography/helpers/font-fixer.ts @@ -9,8 +9,8 @@ import { Font } from '../models/font'; export class FontFixer { static DEFAULT_FONT = 'TypeWriter'; static DEFAULT_SIZE = 10; - static REPLACE_BY_FONT = 'Noto Sans'; - static REPLACE_BY_SIZE = 11; + static REPLACE_BY_FONT = 'Arial'; + static REPLACE_BY_SIZE = 12; public fix(font: Font): Font { if (font.font_family === FontFixer.DEFAULT_FONT && font.font_size === FontFixer.DEFAULT_SIZE) { diff --git a/src/app/cartography/widgets/drawings/text-drawing.spec.ts b/src/app/cartography/widgets/drawings/text-drawing.spec.ts index f4b42733..ab6fae12 100644 --- a/src/app/cartography/widgets/drawings/text-drawing.spec.ts +++ b/src/app/cartography/widgets/drawings/text-drawing.spec.ts @@ -42,7 +42,7 @@ describe('TextDrawingWidget', () => { const text_element = drew.nodes()[0]; expect(text_element.innerHTML).toEqual('THIS IS TEXT'); expect(text_element.getAttribute('fill')).toEqual('#000000'); - expect(text_element.getAttribute('style')).toEqual('font-family: "Noto Sans"; font-size: 11pt; font-weight: bold'); + expect(text_element.getAttribute('style')).toEqual('font-family: "Arial"; font-size: 12pt; font-weight: bold'); expect(text_element.getAttribute('text-decoration')).toEqual('line-through'); }); diff --git a/src/app/cartography/widgets/interface-status.ts b/src/app/cartography/widgets/interface-status.ts index ebafddcc..0e6fc096 100644 --- a/src/app/cartography/widgets/interface-status.ts +++ b/src/app/cartography/widgets/interface-status.ts @@ -97,9 +97,9 @@ export class InterfaceStatusWidget implements Widget { .attr('y', (ls: LinkStatus) => ls.y - 10) .attr('rx', 8) .attr('ry', 8) - .style('fill', 'white') + .style('fill', '#c7ffdf') .attr('stroke', '#2ecc71') - .attr('stroke-width', 3); + .attr('stroke-width', 2); status_started.exit().remove(); const status_started_label = link_group .selectAll('text.status_started_label') @@ -111,7 +111,7 @@ export class InterfaceStatusWidget implements Widget { .text((ls: LinkStatus) => ls.port) .attr('x', (ls: LinkStatus) => ls.x - 25) .attr('y', (ls: LinkStatus) => ls.y + 5) - .attr('fill', `black`); + .attr('fill', `#0e9647`); status_started_label.exit().remove(); const status_stopped = link_group @@ -129,9 +129,9 @@ export class InterfaceStatusWidget implements Widget { .attr('y', (ls: LinkStatus) => ls.y - 10) .attr('rx', 8) .attr('ry', 8) - .style('fill', 'white') + .style('fill', '#ffe3e3') .attr('stroke', 'red') - .attr('stroke-width', 3); + .attr('stroke-width', 2); status_stopped.exit().remove(); const status_stopped_label = link_group .selectAll('text.status_stopped_label') @@ -143,7 +143,7 @@ export class InterfaceStatusWidget implements Widget { .text((ls: LinkStatus) => ls.port) .attr('x', (ls: LinkStatus) => ls.x - 25) .attr('y', (ls: LinkStatus) => ls.y + 5) - .attr('fill', `black`); + .attr('fill', `red`); status_stopped_label.exit().remove(); const status_suspended = link_group @@ -162,8 +162,8 @@ export class InterfaceStatusWidget implements Widget { .attr('rx', 8) .attr('ry', 8) .style('fill', 'white') - .attr('stroke', '#FFFF00') - .attr('stroke-width', 3); + .attr('stroke', '#fffbc3') + .attr('stroke-width', 2); status_suspended.exit().remove(); const status_suspended_label = link_group .selectAll('text.status_suspended_label') @@ -175,7 +175,7 @@ export class InterfaceStatusWidget implements Widget { .text((ls: LinkStatus) => ls.port) .attr('x', (ls: LinkStatus) => ls.x - 25) .attr('y', (ls: LinkStatus) => ls.y + 5) - .attr('fill', `black`); + .attr('fill', `#6b5633`); status_suspended_label.exit().remove(); } else { const status_started = link_group diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 000f83de..ffd368c4 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -67,6 +67,14 @@
+ - - - - @@ -256,4 +252,4 @@
- + \ No newline at end of file diff --git a/src/app/components/project-map/project-map.component.scss b/src/app/components/project-map/project-map.component.scss index 066585d6..e3295895 100644 --- a/src/app/components/project-map/project-map.component.scss +++ b/src/app/components/project-map/project-map.component.scss @@ -73,6 +73,10 @@ g.node:hover { font-size: 28px !important; } + .map-settings-button mat-icon { + font-size: 22px !important; + } + .selected { background: rgba(0, 151, 167, 0.1); diff --git a/src/app/components/template/template-list-dialog/template-list-dialog.component.html b/src/app/components/template/template-list-dialog/template-list-dialog.component.html index 617ccd2e..1f9229fb 100644 --- a/src/app/components/template/template-list-dialog/template-list-dialog.component.html +++ b/src/app/components/template/template-list-dialog/template-list-dialog.component.html @@ -1,5 +1,5 @@
-

Add a node

+

Insert New Node

+
+
+ + +
- - - - - - - {{ type }} - - - +
+ + + search + + + + + {{ type }} + + + +
-
-
- - - -
- -
-
{{ filteredTemplates[i].name }}
- - -
- -
-
{{ filteredTemplates[i + 1].name }}
- - -
- -
-
{{ filteredTemplates[i + 2].name }}
- - -
- -
-
{{ filteredTemplates[i + 3].name }}
- - - -
-
- +
+
+ + + +
+ +
+
{{ filteredTemplates[i].name }}
+ + +
+ +
+
{{ filteredTemplates[i + 1].name }}
+ + +
+ +
+
{{ filteredTemplates[i + 2].name }}
+ + +
+ +
+
{{ filteredTemplates[i + 3].name }}
+ + + +
+
+
+ \ No newline at end of file diff --git a/src/app/components/template/template.component.scss b/src/app/components/template/template.component.scss index 20936c21..83399dba 100644 --- a/src/app/components/template/template.component.scss +++ b/src/app/components/template/template.component.scss @@ -1,6 +1,7 @@ ::ng-deep .mat-menu-panel { max-width: 400px; - max-height: 500px; + max-height: 640px; + border-radius: 8px; } .menu { @@ -8,6 +9,26 @@ overflow-y: scroll; scrollbar-color: darkgrey #263238; scrollbar-width: thin; + font-size: 12px; +} + +.templateMenuHeader { + border-bottom: 1px solid rgba(255,255,255,0.05); +} + +.templateFilterBar { + padding: 10px 2%; + background-color: rgba(0,0,0,0.2); + margin-bottom: 10px; +} + +.templateFilterBar > .form-field { + font-size: 12px; +} + +.templateFilterBar .searchIcon { + position: relative; + top: 5px; } ::-webkit-scrollbar { @@ -24,20 +45,22 @@ } .form-field { - width: 90%; - margin-left: 5%; - margin-right: 5%; + width: 44%; + margin-left: 3%; + margin-right: 3%; } .image { - width: 65px; - height: 65px; + display: inline-block; + width: 55px; + height: 55px; filter: invert(0); --webkit-filter: invert(0) !important; } .templateList { width: 100%; + padding: 10px; } .templateRow { @@ -49,12 +72,24 @@ word-wrap: break-word; } -.lightTemplateText { - word-wrap: break-word; - color: black; +.templateIcon { + width: 90px !important; + padding: 2px 5px; + text-align: center; + margin: 3px; } -.templateIcon { - width: 80px !important; - padding: 10px; +.templateIcon > .iconContainer { + display: inline-flex; + align-items: center; + justify-content: center; + width: 70px; + height: 70px; + margin-bottom: 10px; + border-radius: 50%; + cursor: move; +} + +.templateIcon > .iconContainer:hover { + background-color: rgba(237, 246, 231, 0.08); } diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index f59dcfc1..4fc6a705 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -1,7 +1,5 @@ -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'; @@ -10,6 +8,7 @@ import { MapScaleService } from '../../services/mapScale.service'; import { SymbolService } from '../../services/symbol.service'; import { TemplateService } from '../../services/template.service'; import { NodeAddedEvent, TemplateListDialogComponent } from './template-list-dialog/template-list-dialog.component'; +import { NewTemplateDialogComponent } from '../project-map/new-template-dialog/new-template-dialog.component'; @Component({ selector: 'app-template', @@ -20,7 +19,7 @@ export class TemplateComponent implements OnInit, OnDestroy { @Input() server: Server; @Input() project: Project; @Output() onNodeCreation = new EventEmitter(); - overlay; + templates: Template[] = []; filteredTemplates: Template[] = []; searchText: string = ''; @@ -47,19 +46,13 @@ 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 themeService: ThemeService, - private overlayContainer: OverlayContainer, - ) { - this.overlay = overlayContainer.getContainerElement(); - } + private symbolService: SymbolService + ) {} ngOnInit() { this.subscription = this.templateService.newTemplateCreated.subscribe((template: Template) => { @@ -72,23 +65,6 @@ 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() { @@ -152,6 +128,19 @@ export class TemplateComponent implements OnInit, OnDestroy { }); } + addNewTemplate() { + const dialogRef = this.dialog.open(NewTemplateDialogComponent, { + width: '1000px', + maxHeight: '700px', + autoFocus: false, + disableClose: true, + }); + + let instance = dialogRef.componentInstance; + instance.server = this.server; + instance.project = this.project; + } + getImageSourceForTemplate(template: Template) { return `${this.server.protocol}//${this.server.host}:${this.server.port}/v2/symbols/${template.symbol}/raw`; } @@ -159,4 +148,4 @@ export class TemplateComponent implements OnInit, OnDestroy { ngOnDestroy() { this.subscription.unsubscribe(); } -} +} \ No newline at end of file