ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-17 14:28:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Styles for dialogs edited

Browse Source
This commit is contained in:
Piotr Pekala
2019-01-16 07:50:22 -08:00
parent 624dca3bcd
commit ee7cfcd705
6 changed files with 56 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
View File

@ -20,7 +20,7 @@ export class EditStyleActionComponent implements OnInit {
editStyle() { editStyle() {
const dialogRef = this.dialog.open(StyleEditorDialogComponent, { const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
width: '450px' width: '300px'
}); });
let instance = dialogRef.componentInstance; let instance = dialogRef.componentInstance;
instance.server = this.server; instance.server = this.server;

2
src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
View File

@ -20,7 +20,7 @@ export class EditTextActionComponent implements OnInit {
editText() { editText() {
const dialogRef = this.dialog.open(TextEditorDialogComponent, { const dialogRef = this.dialog.open(TextEditorDialogComponent, {
width: '450px' width: '300px'
}); });
let instance = dialogRef.componentInstance; let instance = dialogRef.componentInstance;
instance.server = this.server; instance.server = this.server;

43
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
View File

@ -1,24 +1,27 @@
<h1 mat-dialog-title>Style editor</h1> <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> <div mat-dialog-actions>
<button mat-button (click)="onNoClick()" color="accent">Cancel</button> <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button> <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>

9
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
View File

@ -38,3 +38,12 @@ input[type="color"]::-webkit-color-swatch-wrapper {
input[type="color"]::-webkit-color-swatch { input[type="color"]::-webkit-color-swatch {
border: none; border: none;
} }
.modal-form-container {
display: flex;
flex-direction: column;
}
.modal-form-container > * {
width: 100%;
}

22
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
View File

@ -1,13 +1,17 @@
<h1 mat-dialog-title>Text editor</h1> <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> <div mat-dialog-actions>
<button mat-button (click)="onNoClick()" color="accent">Cancel</button> <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button> <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>

9
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
View File

@ -43,3 +43,12 @@ input[type="color"]::-webkit-color-swatch {
width: 100%; width: 100%;
height: 150px; height: 150px;
} }
.modal-form-container {
display: flex;
flex-direction: column;
}
.modal-form-container > * {
width: 100%;
}