Refreshing UI (#1253)

* Update font-fixer.ts * Update interface-status.ts * Updating project map UI * Updating templates menu * Fixing tests * Update karma.conf.js
2025-04-14 05:36:35 +00:00 · 2022-02-08 23:48:45 +01:00 · 2022-02-08 23:48:45 +01:00 · 8874e7efbc
commit 8874e7efbc
parent 2b834768c6
10 changed files with 194 additions and 138 deletions
--- 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');
  });
 });
--- 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) {
--- 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('<tspan xml:space="preserve" x="0" dy="0em">THIS IS TEXT</tspan>');
    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');
  });

--- 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<SVGTextElement, LinkStatus>('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<SVGTextElement, LinkStatus>('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<SVGTextElement, LinkStatus>('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
--- a/src/app/components/project-map/project-map.component.html
+++ b/src/app/components/project-map/project-map.component.html
@ -67,6 +67,14 @@
      </div>
    </div>
    <div>
+      <button
+        class="map-settings-button"
+        matTooltip="Project Map Settings"
+        matTooltipClass="custom-tooltip"
+        mat-icon-button
+        [matMenuTriggerFor]="viewMenu">
+        <mat-icon>view_module</mat-icon>
+      </button>
      <button
        matTooltip="Toggle topology/servers summary"
        matTooltipClass="custom-tooltip"
@ -83,39 +91,27 @@

    <!-- GNS3 menu -->
    <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
+      <button mat-menu-item [matMenuTriggerFor]="projectMenu">
+        <mat-icon>insert_drive_file</mat-icon>
+        <span>Project settings</span>
+      </button>
      <button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
        <mat-icon>work</mat-icon>
-        <span>Go to projects</span>
+        <span>Projects</span>
      </button>
      <button mat-menu-item [routerLink]="['/servers']">
        <mat-icon>developer_board</mat-icon>
-        <span>Go to servers</span>
-      </button>
-      <button mat-menu-item routerLink="/server/{{ server.id }}/preferences">
-        <mat-icon>settings_applications</mat-icon>
-        <span>Go to preferences</span>
+        <span>Servers</span>
      </button>
      <button mat-menu-item routerLink="/server/{{ server.id }}/systemstatus">
-        <mat-icon>info</mat-icon>
-        <span>Go to system status</span>
+        <mat-icon>data_usage</mat-icon>
+        <span>System Status</span>
      </button>
      <button mat-menu-item routerLink="/settings">
        <mat-icon>settings</mat-icon>
-        <span>Go to settings</span>
-      </button>
-      <button mat-menu-item (click)="addNewTemplate()">
-        <mat-icon>control_point</mat-icon>
-        <span>New template</span>
+        <span>Settings</span>
      </button>
      <app-import-appliance [server]="server" [project]="project"></app-import-appliance>
-      <button mat-menu-item [matMenuTriggerFor]="projectMenu">
-        <mat-icon>settings</mat-icon>
-        <span>Project settings</span>
-      </button>
-      <button mat-menu-item [matMenuTriggerFor]="viewMenu">
-        <mat-icon>view_module</mat-icon>
-        <span>Map settings</span>
-      </button>
    </mat-menu>

    <!-- Project Settings sub-menu -->
@ -256,4 +252,4 @@
  </div>
 </div>

-<ng-template #topologySummaryContainer></ng-template>
+<ng-template #topologySummaryContainer></ng-template>
--- 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);

--- 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 @@
 <div class="title-container">
-  <h1 mat-dialog-title>Add a node</h1>
+  <h1 mat-dialog-title>Insert New Node</h1>
  <button
    mat-button
    class="top-button"
--- a/src/app/components/template/template.component.html
+++ b/src/app/components/template/template.component.html
@ -10,63 +10,95 @@
 </button>

 <mat-menu #mainMenu="matMenu">
-  <button mat-menu-item (click)="openDialog()">
-    <mat-icon>add_to_queue</mat-icon>
-    <span>Open dialog to configure</span>
-  </button>
+   <div class="templateMenu">
+     <div class="templateMenuHeader">
+        <button mat-menu-item (click)="openDialog()">
+         <mat-icon>add_to_queue</mat-icon>
+         <span>
+            Insert New Node...
+         </span>
+        </button>
+        <button mat-menu-item (click)="addNewTemplate()">
+         <mat-icon>library_add</mat-icon>
+         <span>
+            New Template...
+         </span>
+        </button>
+     </div>

-  <mat-form-field (click)="$event.stopPropagation()" class="form-field" floatPlaceholder="never">
-    <input
-      matInput
-      placeholder="Search by name"
-      (keyup)="filterTemplates($event)"
-      [(ngModel)]="searchText"
-      [ngModelOptions]="{ standalone: true }"
-    />
-  </mat-form-field>
-  <mat-form-field (click)="$event.stopPropagation()" class="form-field">
-    <mat-select
-      [ngModelOptions]="{ standalone: true }"
-      placeholder="Filter templates by type"
-      (selectionChange)="filterTemplates($event)"
-      [(ngModel)]="selectedType"
-    >
-      <mat-option *ngFor="let type of templateTypes" [value]="type">
-        {{ type }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+     <div class="templateFilterBar">
+        <mat-form-field (click)="$event.stopPropagation()" class="form-field" floatPlaceholder="never">
+         <input
+           matInput
+           placeholder="Filter by name"
+           search="search"
+           (keyup)="filterTemplates($event)"
+           [(ngModel)]="searchText"
+           [ngModelOptions]="{ standalone: true }"
+         />
+         <mat-icon class="searchIcon" matSuffix>search</mat-icon>
+       </mat-form-field>
+       <mat-form-field (click)="$event.stopPropagation()" class="form-field">
+         <mat-select
+           [ngModelOptions]="{ standalone: true }"
+           placeholder="Filter by type"
+           (selectionChange)="filterTemplates($event)"
+           [(ngModel)]="selectedType"
+         >
+           <mat-option *ngFor="let type of templateTypes" [value]="type">
+             {{ type }}
+           </mat-option>
+         </mat-select>
+       </mat-form-field>
+     </div>

-  <div class="menu">
-    <div class="templateList">
-      <mat-list-item *ngFor="let template of filteredTemplates; let i = index">
-        <span *ngIf="i % 4 === 0" class="templateRow">
-          <span class="templateIcon">
-            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i])">
-              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
-            </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 [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 [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 [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 3].name }}</div>
-          </span>
-        </span>
-      </mat-list-item>
-    </div>
-  </div>
-</mat-menu>
+     <div class="menu">
+       <div class="templateList">
+         <mat-list-item *ngFor="let template of filteredTemplates; let i = index">
+           <span *ngIf="i % 4 === 0" class="templateRow">
+             <span class="templateIcon">
+               <div
+                 mwlDraggable
+                 (dragStart)="dragStart($event)"
+                 (dragEnd)="dragEnd($event, filteredTemplates[i])"
+                 class="iconContainer">
+                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
+               </div>
+               <div class="templateText">{{ filteredTemplates[i].name }}</div>
+             </span>
+             <span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
+               <div
+                 mwlDraggable
+                 (dragStart)="dragStart($event)"
+                 (dragEnd)="dragEnd($event, filteredTemplates[i + 1])"
+                 class="iconContainer">
+                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
+               </div>
+               <div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
+             </span>
+             <span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
+               <div
+                 mwlDraggable
+                 (dragStart)="dragStart($event)"
+                 (dragEnd)="dragEnd($event, filteredTemplates[i + 2])"
+                 class="iconContainer">
+                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
+               </div>
+               <div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
+             </span>
+             <span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
+               <div
+                 mwlDraggable
+                 (dragStart)="dragStart($event)"
+                 (dragEnd)="dragEnd($event, filteredTemplates[i + 3])"
+                 class="iconContainer">
+                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
+               </div>
+               <div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
+             </span>
+           </span>
+         </mat-list-item>
+       </div>
+     </div>
+   </div>
+</mat-menu>
--- 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);
 }
--- 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<any>();
-  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();
  }
-}
+}