Network menu design updates.

backend/src/api/bisq.ts

@@ -27,12 +27,12 @@ class Bisq {
     this.loadBisqDumpFile();
 
     let fsWait: NodeJS.Timeout | null = null;
-    fs.watch(config.BSQ_BLOCKS_DATA_PATH, (event: string, filename: string) => {
+    fs.watch(config.BSQ_BLOCKS_DATA_PATH, () => {
       if (fsWait) {
         clearTimeout(fsWait);
       }
       fsWait = setTimeout(() => {
-        console.log(`${filename} file change detected.`);
+        console.log(`Change detected in the Bisq data folder.`);
         this.loadBisqDumpFile();
       }, 1000);
     });

frontend/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbButtonsModule, NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbButtonsModule, NgbTooltipModule, NgbPaginationModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -81,6 +81,7 @@ import { SharedModule } from './shared/shared.module';
     NgbButtonsModule,
     NgbTooltipModule,
     NgbPaginationModule,
+    NgbDropdownModule,
     InfiniteScrollModule,
     SharedModule,
   ],

frontend/src/app/components/master-page/master-page.component.html

@@ -6,24 +6,21 @@
     <div class="badge badge-warning connection-badge" style="left: 30px;" *ngIf="connectionState === 1">Reconnecting...</div>
   </a>
 
-  <a class="navbar-brand" [routerLink]="['/' | relativeUrl]">
-    <img *ngIf="network !== ''" src="./resources/{{ network }}-logo.png" style="width: 35.5px;">
-  </a>
 
-  <div class="btn-group" style="margin-right: 16px;" *ngIf="env.TESTNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
+  <div ngbDropdown display="dynamic" style="margin-right: 16px;" *ngIf="env.TESTNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
-    <button type="button" (click)="networkDropdownHidden = !networkDropdownHidden" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <span class="sr-only">Toggle Dropdown</span>
+      <img src="./resources/{{ network === '' ? 'bitcoin' : network }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
-    <div class="dropdown-menu" [class.d-block]="!networkDropdownHidden">
+    <div ngbDropdownMenu>
-      <a class="dropdown-item mainnet" routerLink="/"><img src="./resources/bitcoin-logo.png" style="width: 35.5px;"> Mainnet</a>
+      <button ngbDropdownItem class="mainnet" routerLink="/"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</button>
-      <a *ngIf="env.TESTNET_ENABLED" class="dropdown-item testnet" [class.active]="network === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 35.5px;"> Testnet</a>
+      <button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button>
-      <div *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-divider"></div>
+      <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header">Layer 2 Networks</h6>
-      <a *ngIf="env.LIQUID_ENABLED" class="dropdown-item liquid" [class.active]="network === 'liquid'" routerLink="/liquid"><img src="./resources/liquid-logo.png" style="width: 35.5px;"> Liquid</a>
+      <button ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="mainnet" [class.active]="network === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
-      <a *ngIf="env.BISQ_ENABLED" class="dropdown-item mainnet" [class.active]="network === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 35.5px;"> Bisq</a>
+      <button ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network === 'liquid'" routerLink="/liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
     </div>
   </div>
 
-  <button class="navbar-toggler" type="button" (click)="collapse()" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+  <button class="navbar-toggler" type="button" (click)="collapse()">
     <span class="navbar-toggler-icon"></span>
   </button>
   

frontend/src/app/components/master-page/master-page.component.scss

@@ -51,3 +51,12 @@ nav {
 .dropdown-divider {
   border-top: 1px solid #121420;
 }
+
+.dropdown-toggle::after {
+  vertical-align: 0.1em;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items:center;
+}

frontend/src/app/components/master-page/master-page.component.ts

@@ -15,19 +15,10 @@ export class MasterPageComponent implements OnInit {
   navCollapsed = false;
   connectionState = 2;
 
-  networkDropdownHidden = true;
-
   constructor(
     private stateService: StateService,
   ) { }
 
-  @HostListener('document:click', ['$event'])
-  documentClick(event: any): void {
-    if (!event.target.classList.contains('dropdown-toggle')) {
-      this.networkDropdownHidden = true;
-    }
-  }
-
   ngOnInit() {
     this.stateService.connectionState$
       .subscribe((state) => {