From 84a145a70149cfddbcd9891979761306335bc29b Mon Sep 17 00:00:00 2001
From: grossmj <grossmj@gns3.net>
Date: Sun, 19 May 2024 12:47:11 +0700
Subject: [PATCH] Fix mat-table style and project readme edit

---
 ...loud-nodes-template-details.component.html | 18 +++++++++++--
 ...loud-nodes-template-details.component.scss |  0
 .../cloud-nodes-template-details.component.ts |  2 +-
 ...ernet-switches-add-template.component.html | 27 +++++++++----------
 .../custom-adapters-table.component.html      |  2 +-
 .../common/ports/ports.component.html         |  2 +-
 .../common/ports/ports.component.scss         |  0
 .../udp-tunnels/udp-tunnels.component.html    |  2 +-
 .../ios-template-details.component.html       | 15 ++++++++++-
 .../preferences/preferences.component.scss    |  4 +++
 .../configurator-atm-switch.component.html    |  2 +-
 .../configurator/configurator.component.scss  |  4 +++
 .../switch/configurator-switch.component.html |  2 +-
 .../project-readme.component.ts               |  2 +-
 .../edit-project-dialog.component.html        | 26 +++++++++---------
 .../edit-project-dialog.component.scss        |  4 +++
 .../readme-editor.component.scss              |  2 --
 .../readme-editor/readme-editor.component.ts  |  2 +-
 src/app/directives/marked.directive.ts        |  2 +-
 19 files changed, 77 insertions(+), 41 deletions(-)
 delete mode 100644 src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss
 delete mode 100644 src/app/components/preferences/common/ports/ports.component.scss

diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
index a1f4593a..6087222c 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
@@ -1,8 +1,22 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Cloud node template configuration</h1>
+      <div class="col-md-1">
+        <button
+        *ngIf="controller"
+        class="top-button"
+        class="cancel-button"
+        (click)="goBack()"
+        mat-button
+      >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">Cloud node template configuration</h1>
+      </div>
     </div>
+  </div>
     <div class="default-content" *ngIf="cloudNodeTemplate">
         <mat-accordion>
             <mat-expansion-panel>
@@ -111,7 +125,7 @@
                         UDP tunnels
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
+                <table *ngIf="dataSourceUdp.length" mat-table [dataSource]="dataSourceUdp">
                     <ng-container matColumnDef="name">
                         <th mat-header-cell *matHeaderCellDef> Name </th>
                         <td mat-cell *matCellDef="let element"> {{element.name}} </td>
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
index 6b424236..8aa39084 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
@@ -11,7 +11,7 @@ import { ToasterService } from '../../../../../services/toaster.service';
 @Component({
   selector: 'app-cloud-nodes-template-details',
   templateUrl: './cloud-nodes-template-details.component.html',
-  styleUrls: ['./cloud-nodes-template-details.component.scss', '../../../preferences.component.scss'],
+  styleUrls: ['../../../preferences.component.scss'],
 })
 export class CloudNodesTemplateDetailsComponent implements OnInit {
   controller:Controller ;
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
index db171295..237ffa4c 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
@@ -1,20 +1,19 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-    <div class="col col-md-1">
-      <button
-      *ngIf="controller"
-      class="top-button"
-      class="cancel-button col"
-      (click)="goBack()"
-      mat-button
-    >
-      <mat-icon>arrow_back</mat-icon>
-    </button>
-    </div>
-    <div class="col-md-11">
-      <h1 class="col">New Ethernet switch template</h1>
-    </div>
+      <div class="col col-md-1">
+        <button
+        *ngIf="controller"
+        class="top-button"
+        class="cancel-button col"
+        (click)="goBack()"
+        mat-button>
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">New Ethernet switch template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">
diff --git a/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html b/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
index d1d000a6..f832ee45 100644
--- a/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
+++ b/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
@@ -1,4 +1,4 @@
-<table class="table" mat-table [dataSource]="adapters">
+<table mat-table [dataSource]="adapters">
   <ng-container matColumnDef="adapter_number">
     <th mat-header-cell *matHeaderCellDef>Adapter number</th>
     <td mat-cell *matCellDef="let element">Adapter {{ element.adapter_number }}</td>
diff --git a/src/app/components/preferences/common/ports/ports.component.html b/src/app/components/preferences/common/ports/ports.component.html
index 8caa33d3..5570d71b 100644
--- a/src/app/components/preferences/common/ports/ports.component.html
+++ b/src/app/components/preferences/common/ports/ports.component.html
@@ -1,4 +1,4 @@
-<table class="table" mat-table [dataSource]="ethernetPorts">
+<table mat-table [dataSource]="ethernetPorts">
   <ng-container matColumnDef="port_number">
     <th mat-header-cell *matHeaderCellDef>Port number</th>
     <td mat-cell *matCellDef="let element">{{ element.port_number }}</td>
diff --git a/src/app/components/preferences/common/ports/ports.component.scss b/src/app/components/preferences/common/ports/ports.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html b/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html
index 5778607a..f974fc15 100644
--- a/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html
+++ b/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html
@@ -1,4 +1,4 @@
-<table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
+<table *ngIf="dataSourceUdp.length" mat-table [dataSource]="dataSourceUdp">
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef>Name</th>
     <td mat-cell *matCellDef="let element">{{ element.name }}</td>
diff --git a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html
index 726b806f..311f81fe 100644
--- a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html
+++ b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html
@@ -1,7 +1,20 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">IOS router template configuration</h1>
+      <div class="col-md-1">
+        <button
+        *ngIf="controller"
+        class="top-button"
+        class="cancel-button"
+        (click)="goBack()"
+        mat-button
+      >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">IOS router template configuration</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="iosTemplate">
diff --git a/src/app/components/preferences/preferences.component.scss b/src/app/components/preferences/preferences.component.scss
index 4f0f84a4..7a9fff96 100644
--- a/src/app/components/preferences/preferences.component.scss
+++ b/src/app/components/preferences/preferences.component.scss
@@ -1,3 +1,7 @@
+table {
+  width: 100%;
+}
+
 .listcontainer {
   padding-left: 0px !important;
   padding-right: 0px !important;
diff --git a/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html b/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html
index 0b5b4091..bb5befae 100644
--- a/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html
+++ b/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html
@@ -4,7 +4,7 @@
   <div class="content">
     <div class="default-content">
       <mat-card>
-        <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
+        <table *ngIf="nodeMappingsDataSource.length" mat-table [dataSource]="nodeMappingsDataSource">
           <ng-container matColumnDef="portIn">
             <th mat-header-cell *matHeaderCellDef>Port : VPI : VCI</th>
             <td mat-cell *matCellDef="let element">{{ element.portIn }}</td>
diff --git a/src/app/components/project-map/node-editors/configurator/configurator.component.scss b/src/app/components/project-map/node-editors/configurator/configurator.component.scss
index ad4f3001..14bbb68b 100644
--- a/src/app/components/project-map/node-editors/configurator/configurator.component.scss
+++ b/src/app/components/project-map/node-editors/configurator/configurator.component.scss
@@ -1,3 +1,7 @@
+table {
+  width: 100%;
+}
+
 .form-field {
   width: 100%;
 }
diff --git a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
index e0faf72c..0392fadc 100644
--- a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
+++ b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
@@ -4,7 +4,7 @@
   <div class="content">
     <div class="default-content">
       <mat-card>
-        <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
+        <table *ngIf="nodeMappingsDataSource.length" mat-table [dataSource]="nodeMappingsDataSource">
           <ng-container matColumnDef="portIn">
             <th mat-header-cell *matHeaderCellDef>Port : DLCI</th>
             <td mat-cell *matCellDef="let element">{{ element.portIn }}</td>
diff --git a/src/app/components/project-map/project-readme/project-readme.component.ts b/src/app/components/project-map/project-readme/project-readme.component.ts
index 5fcc7f45..dfed275c 100644
--- a/src/app/components/project-map/project-readme/project-readme.component.ts
+++ b/src/app/components/project-map/project-readme/project-readme.component.ts
@@ -3,7 +3,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { Controller } from '../../../models/controller';
 import { Project } from '../../../models/project';
 import { ProjectService } from '../../../services/project.service';
-import * as marked from 'marked';
+import { marked } from 'marked';
 import { ElementRef } from '@angular/core';
 import { Renderer2 } from '@angular/core';
 import { ViewChild } from '@angular/core';
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
index e87a2e4d..a2b6cbd8 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
@@ -7,36 +7,36 @@
                 <mat-form-field class="form-field">
                     <input matInput formControlName="projectName" placeholder="Project name" type="text">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="width" placeholder="Scene width (px)" type="number">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="height" placeholder="Scene height (px)" type="number">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="nodeGridSize" placeholder="Node grid size" type="number">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="drawingGridSize" placeholder="Drawing grid size" type="number">
                 </mat-form-field>
             </form>
-            
+
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_open">
                 Open this project in the background when GNS3 controller starts
             </mat-checkbox>
-            
+
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_start">
                 Start all nodes when this project is opened
             </mat-checkbox>
-            
+
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="auto_close">
                 Leave this project running in the background after closing
             </mat-checkbox>
-            
+
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.show_interface_labels">
                 Show interface labels at start
             </mat-checkbox>
@@ -51,23 +51,23 @@
                 <mat-form-field class="form-field">
                     <input matInput formControlName="name" placeholder="Name" type="text">
                 </mat-form-field>
-            
+
                 <mat-form-field class="form-field">
                     <input matInput formControlName="value" placeholder="Value" type="text">
                 </mat-form-field>
             </form>
             <button class="form-field" mat-button (click)="addVariable()" mat-raised-button color="primary">Add variable</button>
-            <table class="table" mat-table [dataSource]="variables">
+            <table mat-table [dataSource]="variables">
                 <ng-container matColumnDef="name">
                     <th mat-header-cell *matHeaderCellDef>Name</th>
                     <td mat-cell *matCellDef="let element">{{element.name}} </td>
                 </ng-container>
-            
+
                 <ng-container matColumnDef="value">
                     <th mat-header-cell *matHeaderCellDef>Value</th>
                     <td mat-cell *matCellDef="let element">{{element.value}}</td>
                 </ng-container>
-            
+
                 <ng-container matColumnDef="actions">
                     <th mat-header-cell *matHeaderCellDef>Actions</th>
                     <td mat-cell *matCellDef="let element">
@@ -76,7 +76,7 @@
                         </button>
                     </td>
                 </ng-container>
-                
+
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss
index 3bf4e100..4eb994dd 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss
@@ -1,3 +1,7 @@
+table {
+  width: 100%;
+}
+
 .form-field {
   width: 100%;
 }
diff --git a/src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.scss b/src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.scss
index ea88fb98..b4037245 100644
--- a/src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.scss
+++ b/src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.scss
@@ -4,8 +4,6 @@
 }
 
 .editorWrapper {
-    background-color: white;
-    color: black;
     height: 500px!important;
     overflow-y: scroll;
 }
diff --git a/src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.ts b/src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.ts
index fcbb7eaf..026a0d21 100644
--- a/src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.ts
+++ b/src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
-import * as marked from 'marked';
+import { marked } from 'marked';
 import { ProjectService } from '../../../../services/project.service';
 import { Controller } from '../../../../models/controller';
 import { Project } from '../../../../models/project';
diff --git a/src/app/directives/marked.directive.ts b/src/app/directives/marked.directive.ts
index aece1de7..61f6a7f3 100644
--- a/src/app/directives/marked.directive.ts
+++ b/src/app/directives/marked.directive.ts
@@ -1,5 +1,5 @@
 import { Directive, ElementRef, OnInit, Renderer2, Input, OnChanges } from '@angular/core';
-import * as marked from 'marked';
+import { marked } from 'marked';
 
 @Directive({
     selector: '[appMarked]'