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] 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;