From fe51a1797dde7b8c55eecf13725bda137b372d65 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Mon, 4 May 2020 16:36:14 +0200
Subject: [PATCH] List restyled

---
 .../project-map/project-map.component.ts      |  1 +
 .../template/template.component.html          | 34 +++++++++++++++----
 .../template/template.component.scss          | 28 +++++++++++----
 .../components/template/template.component.ts |  2 +-
 4 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 61a62f9f..493f365f 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -180,6 +180,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
           }),
           mergeMap((project: Project) => {
             this.project = project;
+            this.projectService.open(this.server, this.project.project_id);
             this.title.setTitle(this.project.name);
 
             if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
diff --git a/src/app/components/template/template.component.html b/src/app/components/template/template.component.html
index 1d11e02e..da726c73 100644
--- a/src/app/components/template/template.component.html
+++ b/src/app/components/template/template.component.html
@@ -29,15 +29,35 @@
     </mat-form-field>
 
     <div class="menu">
-        <mat-list>
-            <mat-list-item *ngFor="let template of filteredTemplates" class="templateIcon">
-                <span>
-                    <span mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, template)">
-                        <img class="image" [src]="getImageSourceForTemplate(template)"/>
+        <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, templates[i])">
+                            <img class="image" [src]="getImageSourceForTemplate(templates[i])"/>
+                        </div>
+                        <div class="templateText">{{templates[i].name}}</div>
+                    </span>
+                    <span *ngIf="templates[i+1]" class="templateIcon">
+                        <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, templates[i+1])">
+                            <img class="image" [src]="getImageSourceForTemplate(templates[i+1])"/>
+                        </div>
+                        <div class="templateText">{{templates[i+1].name}}</div>
+                    </span>
+                    <span *ngIf="templates[i+2]" class="templateIcon">
+                        <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, templates[i+2])">
+                            <img class="image" [src]="getImageSourceForTemplate(templates[i+2])"/>
+                        </div>
+                        <div class="templateText">{{templates[i+2].name}}</div>
+                    </span>
+                    <span *ngIf="templates[i+3]" class="templateIcon">
+                        <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, templates[i+3])">
+                            <img class="image" [src]="getImageSourceForTemplate(templates[i+3])"/>
+                        </div>
+                        <div class="templateText">{{templates[i+3].name}}</div>
                     </span>
-                    {{template.name}}
                 </span>
             </mat-list-item>
-        </mat-list>
+        </div>
     </div>
 </mat-menu>
diff --git a/src/app/components/template/template.component.scss b/src/app/components/template/template.component.scss
index 2f2aa2ab..575bc404 100644
--- a/src/app/components/template/template.component.scss
+++ b/src/app/components/template/template.component.scss
@@ -1,10 +1,10 @@
-// ::ng-deep .menu {
-//     scrollbar-color: darkgrey #263238!important;
-//     scrollbar-width: thin!important;
-// }
+::ng-deep .mat-menu-panel {
+    max-width: 400px;
+    max-height: 400px;
+}
 
 .menu {
-    height: 200px;
+    width: 100%;
     overflow-y: scroll;
     scrollbar-color: darkgrey #263238;
     scrollbar-width: thin;
@@ -36,6 +36,20 @@
     --webkit-filter: invert(0)!important;
 }
 
-.templateIcon {
-    height: 80px!important;
+.templateList {
+    width: 100%;
+}
+
+.templateRow {
+    display: flex;
+    margin-bottom: 10px;
+}
+
+.templateText {
+    text-overflow: ellipsis;
+}
+
+.templateIcon {
+    width: 80px!important;
+    padding: 10px;
 }
diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts
index 4c30e384..c5426586 100644
--- a/src/app/components/template/template.component.ts
+++ b/src/app/components/template/template.component.ts
@@ -70,7 +70,7 @@ export class TemplateComponent implements OnInit {
 
   dragEnd(ev, template: Template) {
     this.symbolService.raw(this.server, template.symbol.substring(1)).subscribe((symbolSvg: string) => {
-      let width = +symbolSvg.split("width=\"")[1].split("\"")[0];
+      let width = +symbolSvg.split("width=\"")[1].split("\"")[0] ? +symbolSvg.split("width=\"")[1].split("\"")[0] : 0;
       let scale = this.scaleService.getScale();
 
       let nodeAddedEvent: NodeAddedEvent = {