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] 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%;
+}