From 624dca3bcd3ec0fee44bd8bedad99c03030aa547 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Wed, 16 Jan 2019 05:38:58 -0800
Subject: [PATCH 1/5] Styles for dialogs edited

---
 .../style-editor/style-editor.component.html  | 10 ++++----
 .../style-editor/style-editor.component.scss  | 25 +++++++++++++------
 .../text-editor/text-editor.component.html    |  4 +--
 .../text-editor/text-editor.component.scss    | 24 +++++++++++++-----
 .../import-project-dialog.component.css       |  4 +--
 .../components/projects/projects.component.ts |  4 +--
 src/styles.css                                |  4 +++
 7 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
index e4ee1bc5..3d2949d8 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
@@ -1,22 +1,22 @@
 <h1 mat-dialog-title>Style editor</h1>
 <span *ngIf="element.fill" class="item">
-  <div class="item-name">Fill color:</div>
+  <div class="item-name">Fill color</div>
   <input class="input-color" type="color" [(ngModel)]="element.fill" />
 </span>
 <span class="item">
-  <div class="item-name">Border color:</div>
+  <div class="item-name">Border color</div>
   <input class="input-color" type="color" [(ngModel)]="element.stroke" />
 </span>
 <span class="item">
-  <div class="item-name">Border width:</div>
+  <div class="item-name">Border width</div>
   <input class="item-value" matInput type="text" [(ngModel)]="element.stroke_width" />
 </span>
 <span *ngIf="element.stroke_dasharray" class="item">
-  <div class="item-name">Border style:</div>
+  <div class="item-name">Border style</div>
   <input class="item-value" matInput type="text" [(ngModel)]="element.stroke_dasharray" />
 </span>
 <span class="item">
-  <div class="item-name">Rotation:</div>
+  <div class="item-name">Rotation</div>
   <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
 </span>
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
index 72ccb7a7..6bc87183 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
@@ -1,25 +1,22 @@
 .item {
-  display: flex;
   height: 25px;
   font-size: 10pt;
   margin-bottom: 10px;
 }
 
 .item-name {
-  width: 30%;
+  margin-bottom: 10px;
 }
 
 .item-value {
-  width: 70%;
-  margin: 3px;
-  margin-right: 4px;
-  margin-left: 4px;
+  width: 100%;
+  margin-bottom: 10px;
 }
 
 .input-color {
   padding: 0px;
   border-width: 0px;
-  width: 70%;
+  width: 100%;
   background-color: transparent;
   outline: none;
 }
@@ -27,3 +24,17 @@
 input:focus {
   outline: none;
 }
+
+input[type="color"] {
+	-webkit-appearance: none;
+	border: none;
+  height: 25px;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
index 63f8daf9..fa457c64 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
@@ -1,10 +1,10 @@
 <h1 mat-dialog-title>Text editor</h1>
 <span *ngIf="element.fill" class="item">
-  <div class="item-name">Fill color:</div>
+  <div class="item-name">Fill color</div>
   <input class="input-color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill" />
 </span>
 <span class="item">
-  <div class="item-name">Rotation:</div>
+  <div class="item-name">Rotation</div>
   <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
 </span>
 <span> <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea> </span>
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
index 24fd9cad..28b6baf4 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
@@ -1,24 +1,22 @@
 .item {
-  display: flex;
   height: 25px;
   font-size: 10pt;
   margin-bottom: 10px;
 }
 
 .item-name {
-  width: 30%;
+  margin-bottom: 10px;
 }
 
 .item-value {
-  width: 70%;
-  margin-top: 3px;
-  margin-bottom: 3px;
+  width: 100%;
+  margin-bottom: 10px;
 }
 
 .input-color {
   padding: 0px;
   border-width: 0px;
-  width: 70%;
+  width: 100%;
   background-color: transparent;
   outline: none;
 }
@@ -27,6 +25,20 @@ input:focus {
   outline: none;
 }
 
+input[type="color"] {
+	-webkit-appearance: none;
+	border: none;
+  height: 25px;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}
+
 .text {
   width: 100%;
   height: 150px;
diff --git a/src/app/components/projects/import-project-dialog/import-project-dialog.component.css b/src/app/components/projects/import-project-dialog/import-project-dialog.component.css
index 6d26582e..c8b01afb 100644
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.css
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.css
@@ -4,7 +4,7 @@
 
 .file-button{
     height: 50px;
-    width: 20%;
+    width: 30%;
     margin-top: 10px;
     padding: 0px;
 }
@@ -16,7 +16,7 @@
 
 .file-name-form-field {
     margin-left: 5%; 
-    width: 65%; 
+    width: 60%; 
 }
 
 .delete-button {
diff --git a/src/app/components/projects/projects.component.ts b/src/app/components/projects/projects.component.ts
index 819a9c99..f6ae4fbb 100644
--- a/src/app/components/projects/projects.component.ts
+++ b/src/app/components/projects/projects.component.ts
@@ -109,7 +109,7 @@ export class ProjectsComponent implements OnInit {
 
   addBlankProject() {
     const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
-      width: '550px'
+      width: '400px'
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -117,7 +117,7 @@ export class ProjectsComponent implements OnInit {
 
   importProject() {
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
-      width: '550px'
+      width: '400px'
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/styles.css b/src/styles.css
index ff884be0..fc243b2c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -16,6 +16,10 @@ a.table-link {
   color: white!important;
 }
 
+.mat-dialog-actions {
+  margin-bottom: -12px!important;
+}
+
 @-moz-document url-prefix() {
   .temporaryElement{
       line-height: 1.4em;

From ee7cfcd7058f6a5b64748b34c1ad24b7ba7c5733 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Wed, 16 Jan 2019 07:50:22 -0800
Subject: [PATCH 2/5] Styles for dialogs edited

---
 .../edit-style-action.component.ts            |  2 +-
 .../edit-text-action.component.ts             |  2 +-
 .../style-editor/style-editor.component.html  | 43 ++++++++++---------
 .../style-editor/style-editor.component.scss  |  9 ++++
 .../text-editor/text-editor.component.html    | 22 ++++++----
 .../text-editor/text-editor.component.scss    |  9 ++++
 6 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts b/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
index 2eefb6a9..5234c05b 100644
--- a/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
@@ -20,7 +20,7 @@ export class EditStyleActionComponent implements OnInit {
 
   editStyle() {
     const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
-      width: '450px'
+      width: '300px'
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts b/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
index 435733ff..cc2f0720 100644
--- a/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
@@ -20,7 +20,7 @@ export class EditTextActionComponent implements OnInit {
 
   editText() {
     const dialogRef = this.dialog.open(TextEditorDialogComponent, {
-      width: '450px'
+      width: '300px'
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
index 3d2949d8..62f53a10 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
@@ -1,24 +1,27 @@
 <h1 mat-dialog-title>Style editor</h1>
-<span *ngIf="element.fill" class="item">
-  <div class="item-name">Fill color</div>
-  <input class="input-color" type="color" [(ngModel)]="element.fill" />
-</span>
-<span class="item">
-  <div class="item-name">Border color</div>
-  <input class="input-color" type="color" [(ngModel)]="element.stroke" />
-</span>
-<span class="item">
-  <div class="item-name">Border width</div>
-  <input class="item-value" matInput type="text" [(ngModel)]="element.stroke_width" />
-</span>
-<span *ngIf="element.stroke_dasharray" class="item">
-  <div class="item-name">Border style</div>
-  <input class="item-value" matInput type="text" [(ngModel)]="element.stroke_dasharray" />
-</span>
-<span class="item">
-  <div class="item-name">Rotation</div>
-  <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
-</span>
+
+<div class="modal-form-container">
+  <mat-form-field>
+    <input matInput placeholder="Fill color" type="color" [(ngModel)]="element.fill">
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Border width" type="text" [(ngModel)]="element.stroke_width">
+  </mat-form-field>
+    
+  <mat-form-field *ngIf="element.stroke_dasharray">
+      <input matInput placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
+  </mat-form-field>
+
+  <mat-form-field>
+      <input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
+  </mat-form-field>
+</div>
+
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
   <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
index 6bc87183..cc9d349b 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
@@ -38,3 +38,12 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 input[type="color"]::-webkit-color-swatch {
 	border: none;
 }
+
+.modal-form-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-form-container > * {
+  width: 100%;
+}
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
index fa457c64..97348473 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
@@ -1,13 +1,17 @@
 <h1 mat-dialog-title>Text editor</h1>
-<span *ngIf="element.fill" class="item">
-  <div class="item-name">Fill color</div>
-  <input class="input-color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill" />
-</span>
-<span class="item">
-  <div class="item-name">Rotation</div>
-  <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
-</span>
-<span> <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea> </span>
+
+<div class="modal-form-container">
+  <mat-form-field>
+    <input matInput placeholder="Fill color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill">
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
+  </mat-form-field>
+
+  <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea> 
+</div>
+
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
   <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
index 28b6baf4..fa95b1f1 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
@@ -43,3 +43,12 @@ input[type="color"]::-webkit-color-swatch {
   width: 100%;
   height: 150px;
 }
+
+.modal-form-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-form-container > * {
+  width: 100%;
+}

From b084677cf7e7f7b9af559c038834e372a334ebb9 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Thu, 17 Jan 2019 02:29:16 -0800
Subject: [PATCH 3/5] Style for import project dialog edited

---
 .../import-project-dialog.component.css                  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/components/projects/import-project-dialog/import-project-dialog.component.css b/src/app/components/projects/import-project-dialog/import-project-dialog.component.css
index c8b01afb..5485afaa 100644
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.css
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.css
@@ -3,9 +3,9 @@
 }
 
 .file-button{
-    height: 50px;
-    width: 30%;
-    margin-top: 10px;
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 10px;
     padding: 0px;
 }
 
@@ -15,8 +15,7 @@
 }
 
 .file-name-form-field {
-    margin-left: 5%; 
-    width: 60%; 
+    width: 100%; 
 }
 
 .delete-button {

From 347a3de22c2560c4410844435d6ec39d20e8eeea Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Thu, 17 Jan 2019 05:02:56 -0800
Subject: [PATCH 4/5] Fixes for context menu & selection

---
 src/app/components/project-map/project-map.component.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 9c4bd4f5..06a79792 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -207,6 +207,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   setUpMapCallbacks() {
+    if (!this.readonly) {
+      this.toolsService.selectionToolActivation(true);
+    }
+
     const onNodeContextMenu = this.nodeWidget.onContextMenu.subscribe((eventNode: NodeContextMenu) => {
       const node = this.mapNodeToNode.convert(eventNode.node);
       this.contextMenu.openMenuForNode(node, eventNode.event.clientY, eventNode.event.clientX);
@@ -219,7 +223,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     const onContextMenu = this.selectionTool.contextMenuOpened.subscribe((event) => {
       const selectedItems = this.selectionManager.getSelected();
-      if (selectedItems.length === 0) return;
+      if (selectedItems.length === 0 || !(event instanceof MouseEvent)) return;
 
       let drawings: Drawing[] = [];
       let nodes: Node[] = [];

From 9ecb6b4a24c1b8c6b87beae590bfc1c74d00310b Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Thu, 17 Jan 2019 05:20:39 -0800
Subject: [PATCH 5/5] Fix for text adding

---
 .../cartography/components/text-editor/text-editor.component.ts  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/cartography/components/text-editor/text-editor.component.ts b/src/app/cartography/components/text-editor/text-editor.component.ts
index 3de27fa4..f8b9fa8e 100644
--- a/src/app/cartography/components/text-editor/text-editor.component.ts
+++ b/src/app/cartography/components/text-editor/text-editor.component.ts
@@ -60,6 +60,7 @@ export class TextEditorComponent implements OnInit, OnDestroy {
         );
         this.deactivateTextAdding();
         this.innerText = '';
+        this.temporaryTextElement.nativeElement.innerText = '';
         this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
       };