ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-08 19:14:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Styles for dialogs edited
This commit is contained in:
ziajka 2019-01-17 14:54:13 +01:00 committed by GitHub
commit d475b6ea8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 108 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/cartography/components/text-editor/text-editor.component.ts
View File

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

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() {
const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
width: '450px'
width: '300px'
});
let instance = dialogRef.componentInstance;
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() {
const dialogRef = this.dialog.open(TextEditorDialogComponent, {
width: '450px'
width: '300px'
});
let instance = dialogRef.componentInstance;
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>
<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>

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

@ -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,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%;
}

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

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

@ -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,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%;
}

6
src/app/components/project-map/project-map.component.ts
View File

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

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

@ -3,9 +3,9 @@
}
.file-button{
height: 50px;
width: 20%;
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: 65%;
width: 100%;
}
.delete-button {

4
src/app/components/projects/projects.component.ts
View File

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

4
src/styles.css
View File

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