Merge pull request #271 from GNS3/Consistance-of-dialogs-style

Styles for dialogs edited

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');
       };

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;

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;

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>
+<div class="modal-form-container">
-  <input class="input-color" type="color" [(ngModel)]="element.fill" />
+  <mat-form-field>
-</span>
+    <input matInput placeholder="Fill color" type="color" [(ngModel)]="element.fill">
-<span class="item">
+  </mat-form-field>
-  <div class="item-name">Border color:</div>
+
-  <input class="input-color" type="color" [(ngModel)]="element.stroke" />
+  <mat-form-field>
-</span>
+    <input matInput placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
-<span class="item">
+  </mat-form-field>
-  <div class="item-name">Border width:</div>
+
-  <input class="item-value" matInput type="text" [(ngModel)]="element.stroke_width" />
+  <mat-form-field>
-</span>
+    <input matInput placeholder="Border width" type="text" [(ngModel)]="element.stroke_width">
-<span *ngIf="element.stroke_dasharray" class="item">
+  </mat-form-field>
-  <div class="item-name">Border style:</div>
+    
-  <input class="item-value" matInput type="text" [(ngModel)]="element.stroke_dasharray" />
+  <mat-form-field *ngIf="element.stroke_dasharray">
-</span>
+      <input matInput placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
-<span class="item">
+  </mat-form-field>
-  <div class="item-name">Rotation:</div>
+
-  <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
+  <mat-form-field>
-</span>
+      <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>

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%;
+  width: 100%;
-  margin: 3px;
+  margin-bottom: 10px;
-  margin-right: 4px;
-  margin-left: 4px;
 }
 
 .input-color {
   padding: 0px;
   border-width: 0px;
-  width: 70%;
+  width: 100%;
   background-color: transparent;
   outline: none;
 }
@@ -27,3 +24,26 @@
 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;
+}
+
+.modal-form-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-form-container > * {
+  width: 100%;
+}

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>
+<div class="modal-form-container">
-  <input class="input-color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill" />
+  <mat-form-field>
-</span>
+    <input matInput placeholder="Fill color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill">
-<span class="item">
+  </mat-form-field>
-  <div class="item-name">Rotation:</div>
+
-  <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
+  <mat-form-field>
-</span>
+    <input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
-<span> <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea> </span>
+  </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>

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%;
+  width: 100%;
-  margin-top: 3px;
+  margin-bottom: 10px;
-  margin-bottom: 3px;
 }
 
 .input-color {
   padding: 0px;
   border-width: 0px;
-  width: 70%;
+  width: 100%;
   background-color: transparent;
   outline: none;
 }
@@ -27,7 +25,30 @@ 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;
 }
+
+.modal-form-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-form-container > * {
+  width: 100%;
+}

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

src/app/components/projects/import-project-dialog/import-project-dialog.component.css

@@ -3,9 +3,9 @@
 }
 
 .file-button{
-    height: 50px;
+    width: 100%;
-    width: 20%;
+    margin-top: 5px;
-    margin-top: 10px;
+    margin-bottom: 10px;
     padding: 0px;
 }
 
@@ -15,8 +15,7 @@
 }
 
 .file-name-form-field {
-    margin-left: 5%; 
+    width: 100%; 
-    width: 65%; 
 }
 
 .delete-button {

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;

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;