exchnaging filter to mat menu

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

@@ -1,15 +1,26 @@
 <div class="consoleWrapper">
     <div class="consoleHeader">
-        <div>
-            Console
-            <mat-form-field>
+        <div class="consoleFiltering">
+            <div class="consoleName">Console</div>
+            <!-- <mat-form-field>
                 <mat-label>Select filter</mat-label>
                 <mat-select [(ngModel)]="selectedFilter" name="filter" (selectionChange)="applyFilter()">
                     <mat-option *ngFor="let filter of filters" [value]="filter">
                         {{filter}}
                     </mat-option>
                 </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 class="consoleMenu">
@@ -22,10 +33,9 @@
             {{event.message}} <br/>
         </span>
     </div>
-    <div class="divider"></div>
 
     <div class="consoleInput">
-        <mat-icon>keyboard_arrow_right</mat-icon>
+        <mat-icon class="inputIcon">keyboard_arrow_right</mat-icon>
         <input
             class="commandLine"
             autofocus
@@ -33,5 +43,4 @@
             type="text"
             [(ngModel)]="command"/>
     </div>
-    <div class="divider"></div>
 </div>

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

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

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

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