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

exchnaging filter to mat menu

Browse Source
This commit is contained in:
Piotr Pekala 2019-08-28 07:04:17 -07:00
parent 69934fb870
commit aef6d044b3
3 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/components/project-map/log-console/log-console.component.html
View File

@ -1,15 +1,26 @@
<div class="consoleWrapper"> <div class="consoleWrapper">
<div class="consoleHeader"> <div class="consoleHeader">
<div> <div class="consoleFiltering">
Console <div class="consoleName">Console</div>
<mat-form-field> <!-- <mat-form-field>
<mat-label>Select filter</mat-label> <mat-label>Select filter</mat-label>
<mat-select [(ngModel)]="selectedFilter" name="filter" (selectionChange)="applyFilter()"> <mat-select [(ngModel)]="selectedFilter" name="filter" (selectionChange)="applyFilter()">
<mat-option *ngFor="let filter of filters" [value]="filter"> <mat-option *ngFor="let filter of filters" [value]="filter">
{{filter}} {{filter}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field> -->
<button class="filterButton" [matMenuTriggerFor]="filterMenu">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
<mat-menu #filterMenu="matMenu" xPosition="after">
<button mat-menu-item>all</button>
<button mat-menu-item>errors</button>
<button mat-menu-item>warnings</button>
<button mat-menu-item>info</button>
<button mat-menu-item>map updates</button>
<button mat-menu-item>server requests</button>
</mat-menu>
</div> </div>
<div class="consoleMenu"> <div class="consoleMenu">
@ -22,10 +33,9 @@
{{event.message}} <br/> {{event.message}} <br/>
</span> </span>
</div> </div>
<div class="divider"></div>
<div class="consoleInput"> <div class="consoleInput">
<mat-icon>keyboard_arrow_right</mat-icon> <mat-icon class="inputIcon">keyboard_arrow_right</mat-icon>
<input <input
class="commandLine" class="commandLine"
autofocus autofocus
@ -33,5 +43,4 @@
type="text" type="text"
[(ngModel)]="command"/> [(ngModel)]="command"/>
</div> </div>
<div class="divider"></div>
</div> </div>

32
src/app/components/project-map/log-console/log-console.component.scss
View File

@ -11,22 +11,31 @@
font-size: 12px; font-size: 12px;
} }
.filterButton {
background: #263238;
color: white;
border: none;
}
.consoleFiltering {
display: flex;
}
.consoleHeader { .consoleHeader {
width: 100%; width: 100%;
height: 50px; height: 30px;
font-size: 12px; font-size: 12px;
overflow: hidden; overflow: hidden;
margin-right: 5px;
display: flex; display: flex;
padding: 5px; padding: 2px;
justify-content: space-between; justify-content: space-between;
} }
.console { .console {
width: 596px; width: 596px;
height: 100px; height: 120px;
overflow-y: scroll; overflow-y: scroll;
margin: 2px; padding: 2px;
color: #dbd5d5; color: #dbd5d5;
scrollbar-color: darkgrey #263238; scrollbar-color: darkgrey #263238;
scrollbar-width: thin; scrollbar-width: thin;
@ -45,25 +54,16 @@
border: none; border: none;
} }
.divider { .inputIcon {
width: 580px; margin-top: 2px;
margin-left: 10px;
margin-right: 10px;
height: 2px;
} }
mat-icon { mat-icon {
margin-top: 4px;
font-size: 20px; font-size: 20px;
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
mat-checkbox {
margin-right: 5px;
margin-left: 5px;
}
input:focus{ input:focus{
outline: none; outline: none;
} }

2
src/app/components/project-map/log-console/log-console.component.ts
View File

@ -187,7 +187,7 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
clearConsole() { clearConsole() {
this.filteredEvents = []; this.filteredEvents = [];
this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight; this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight * 2;
} }
showCommand(message: string) { showCommand(message: string) {