From bc882b02108048b12ef311eec15518386ee86d41 Mon Sep 17 00:00:00 2001
From: everoddandeven <j.argenio@studenti.unipi.it>
Date: Sat, 28 Dec 2024 21:42:24 +0100
Subject: [PATCH] Fix window tab scroll

---
 src/app/pages/about/about.component.html      |  2 +-
 src/app/pages/bans/bans.component.html        |  2 +-
 .../pages/base-page/base-page.component.ts    | 58 ++++++++++++++++++-
 .../blockchain/blockchain.component.html      |  2 +-
 src/app/pages/detail/detail.component.html    |  2 +-
 src/app/pages/logs/logs.component.html        |  2 +-
 src/app/pages/mining/mining.component.html    |  2 +-
 src/app/pages/network/network.component.html  |  2 +-
 src/app/pages/outputs/outputs.component.html  |  2 +-
 src/app/pages/peers/peers.component.html      |  2 +-
 .../pages/settings/settings.component.html    |  2 +-
 .../transactions/transactions.component.html  |  2 +-
 src/app/pages/version/version.component.html  |  2 +-
 .../components/navbar/navbar.service.ts       |  6 +-
 src/styles.scss                               |  5 ++
 15 files changed, 79 insertions(+), 14 deletions(-)

diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html
index 2fa4c6b..fe2183e 100644
--- a/src/app/pages/about/about.component.html
+++ b/src/app/pages/about/about.component.html
@@ -11,7 +11,7 @@
   </div>
 </div>
 
-<div class="tab-content" id="pills-tabContent">
+<div class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab" tabindex="0">
     <div class="container mt-5">
       <div class="card shadow-lg border-0">
diff --git a/src/app/pages/bans/bans.component.html b/src/app/pages/bans/bans.component.html
index b3b422a..7f51755 100644
--- a/src/app/pages/bans/bans.component.html
+++ b/src/app/pages/bans/bans.component.html
@@ -11,7 +11,7 @@
   </div>
 </div>
 
-<div [hidden]="!daemonRunning || daemonStopping" class="tab-content" id="pills-tabContent">
+<div [hidden]="!daemonRunning || daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab" tabindex="0">
     <h4 class="mb-3">List of banned IPs</h4>
     <table
diff --git a/src/app/pages/base-page/base-page.component.ts b/src/app/pages/base-page/base-page.component.ts
index 6b21ffe..99778f8 100644
--- a/src/app/pages/base-page/base-page.component.ts
+++ b/src/app/pages/base-page/base-page.component.ts
@@ -16,7 +16,15 @@ export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
 
   protected subscriptions: Subscription[] = [];
 
-  constructor(private navbarService: NavbarService) { }
+  private readonly mResizeHandler: (event: Event) => void = (event: Event) => setTimeout(() => this.updateTableContentHeight(), 100);
+
+  constructor(private navbarService: NavbarService) {
+    this.subscriptions.push(this.navbarService.onDaemonStatusChanged.subscribe((running) => {
+      if (running) setTimeout(() => this.updateTableContentHeight(), 100);
+    }));
+
+    window.addEventListener('resize', this.mResizeHandler);
+   }
 
   protected setLinks(links: NavbarLink[] = []): void {
     this._links = links;
@@ -169,6 +177,8 @@ export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
 
   public ngAfterContentInit(): void {
     this.navbarService.setLinks(this._links);
+
+    setTimeout(() => this.updateTableContentHeight(), 100);
   }
 
   public ngOnDestroy(): void {
@@ -176,7 +186,53 @@ export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
 
     this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
     this.subscriptions = [];
+    
+    window.removeEventListener('resize', this.mResizeHandler);
 
     this.destroyTables();
   }
+
+  public updateTableContentHeight(): void {
+    if (!visualViewport) {
+      return;
+    }
+
+    const viewHeight = visualViewport?.height;
+
+    if (!viewHeight) {
+      return;
+    }
+
+    console.log(`view height: ${viewHeight}`);
+
+    const elements = document.getElementsByClassName('tab-content tab-grow');
+
+    if (!elements || elements.length === 0) {
+      return;
+    }
+
+    const offset = 35;
+    const tab = elements[0] as HTMLElement;
+    const rect = tab.getBoundingClientRect();
+    const left = viewHeight - rect.bottom;
+    const currentHeight = tab.clientHeight;
+    let newHeight: number;
+
+    if (left > 0) {
+      if (left < offset) {
+        newHeight = parseInt(`${currentHeight}`);
+      }
+      else {
+        const offsetLeft = left - offset;
+        newHeight = parseInt(`${ currentHeight + offsetLeft }`);
+      }
+    }
+    else {
+      newHeight = currentHeight + left - offset;
+    }
+
+    tab.style.height = `${newHeight}px`;
+
+    console.log(`old height: ${currentHeight}, left: ${left} new height: ${newHeight}`);
+  }
 }
diff --git a/src/app/pages/blockchain/blockchain.component.html b/src/app/pages/blockchain/blockchain.component.html
index 6f27d1a..766d576 100644
--- a/src/app/pages/blockchain/blockchain.component.html
+++ b/src/app/pages/blockchain/blockchain.component.html
@@ -11,7 +11,7 @@
       </ul>
     </div>
 </div>
-<div *ngIf="daemonRunning && !daemonStopping && !daemonStarting" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping && !daemonStarting" class="tab-content tab-grow" id="pills-tabContent">
   
   <div class="tab-pane fade show active" id="pills-block-queue" role="tabpanel" aria-labelledby="pills-block-queue-tab" tabindex="0">
     <h4 class="mb-3">Overview of current block set queue</h4>
diff --git a/src/app/pages/detail/detail.component.html b/src/app/pages/detail/detail.component.html
index a7076f0..c210c01 100644
--- a/src/app/pages/detail/detail.component.html
+++ b/src/app/pages/detail/detail.component.html
@@ -33,7 +33,7 @@
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !stoppingDaemon" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !stoppingDaemon" class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
     <div class="row d-flex justify-content-center">
 
diff --git a/src/app/pages/logs/logs.component.html b/src/app/pages/logs/logs.component.html
index 163567d..0e26af0 100644
--- a/src/app/pages/logs/logs.component.html
+++ b/src/app/pages/logs/logs.component.html
@@ -10,7 +10,7 @@
     </ul>
   </div>
 </div>
-<div class="tab-content" id="pills-tabContent">
+<div class="tab-content tab-grow" id="pills-tabContent">
 
   <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab" tabindex="0">
     <div *ngIf="lines.length === 0" class="h-100 p-5 text-bg-dark rounded-3 m-4 text-center">
diff --git a/src/app/pages/mining/mining.component.html b/src/app/pages/mining/mining.component.html
index cc01e6b..4269fa3 100644
--- a/src/app/pages/mining/mining.component.html
+++ b/src/app/pages/mining/mining.component.html
@@ -11,7 +11,7 @@
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !daemonStopping" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-mining-status" role="tabpanel" aria-labelledby="pills-mining-status-tab" tabindex="0">
     <div *ngIf="coreBusy" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
       <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
diff --git a/src/app/pages/network/network.component.html b/src/app/pages/network/network.component.html
index b2e628d..aae4df1 100644
--- a/src/app/pages/network/network.component.html
+++ b/src/app/pages/network/network.component.html
@@ -11,7 +11,7 @@
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !daemonStopping" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
 
   <div class="tab-pane fade show active" id="pills-net-stats" role="tabpanel" aria-labelledby="pills-net-stats-tab" tabindex="0">
     <h2><i class="bi bi-cloud-arrow-down m-4"></i> Download ({{ currentNetStats.totalGigaBytesIn.toFixed(2) }} GB)</h2>
diff --git a/src/app/pages/outputs/outputs.component.html b/src/app/pages/outputs/outputs.component.html
index 6905ba8..55143f1 100644
--- a/src/app/pages/outputs/outputs.component.html
+++ b/src/app/pages/outputs/outputs.component.html
@@ -10,7 +10,7 @@
       </ul>
     </div>
 </div>
-<div *ngIf="daemonRunning && !daemonStopping && !daemonRestarting" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping && !daemonRestarting" class="tab-content tab-grow" id="pills-tabContent">
   
   <div class="tab-pane fade show active" id="pills-outputs-get-outs" role="tabpanel" aria-labelledby="pills-outputs-get-outs-tab" tabindex="0">
     <h4 class="mb-3">Get outputs</h4>
diff --git a/src/app/pages/peers/peers.component.html b/src/app/pages/peers/peers.component.html
index fdadc56..c67a5c8 100644
--- a/src/app/pages/peers/peers.component.html
+++ b/src/app/pages/peers/peers.component.html
@@ -11,7 +11,7 @@
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !daemonStopping" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-peer-list" role="tabpanel" aria-labelledby="pills-peer-list-tab" tabindex="0">
     <h4 class="mb-3">List of known peers</h4>
     <div class="m-3">
diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html
index f8750e3..45c40ad 100644
--- a/src/app/pages/settings/settings.component.html
+++ b/src/app/pages/settings/settings.component.html
@@ -13,7 +13,7 @@
   </div>
 </div>
 
-<div *ngIf="!loading" class="tab-content" id="pills-settings-tabContent">
+<div *ngIf="!loading" class="tab-content tab-grow" id="pills-settings-tabContent">
   <div *ngIf="savingChangesError !== ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
     <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
     <div>
diff --git a/src/app/pages/transactions/transactions.component.html b/src/app/pages/transactions/transactions.component.html
index 088eaab..66a4e8f 100644
--- a/src/app/pages/transactions/transactions.component.html
+++ b/src/app/pages/transactions/transactions.component.html
@@ -11,7 +11,7 @@
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !daemonStopping" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
 
   <div class="tab-pane fade show active" id="pills-tx-pool" role="tabpanel" aria-labelledby="pills-tx-pool-tab" tabindex="0">
     <h4 class="mb-3">Information about valid transactions seen by the node but not yet mined into a block, as well as spent key image information for the txpool in the node's memory</h4>
diff --git a/src/app/pages/version/version.component.html b/src/app/pages/version/version.component.html
index d501af0..fcc9d22 100644
--- a/src/app/pages/version/version.component.html
+++ b/src/app/pages/version/version.component.html
@@ -11,7 +11,7 @@
   </div>
 </div>
 
-<div class="tab-content" id="pills-tabContent">
+<div class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-monero" role="tabpanel" aria-labelledby="pills-monero-tab" tabindex="0">
     <div *ngIf="upgradeError !== ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
       <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
diff --git a/src/app/shared/components/navbar/navbar.service.ts b/src/app/shared/components/navbar/navbar.service.ts
index f3ea568..e062c50 100644
--- a/src/app/shared/components/navbar/navbar.service.ts
+++ b/src/app/shared/components/navbar/navbar.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, NgZone } from '@angular/core';
+import { EventEmitter, Injectable, NgZone } from '@angular/core';
 import { NavbarLink } from './navbar.model';
 import { DaemonService } from '../../../core/services';
 
@@ -13,6 +13,10 @@ export class NavbarService {
     return this._navbarLinks;
   }
 
+  public get onDaemonStatusChanged(): EventEmitter<boolean> {
+    return this.daemonService.onDaemonStatusChanged;
+  }
+
   constructor(private daemonService: DaemonService, private zone: NgZone) {
     this.daemonService.onDaemonStatusChanged.subscribe((running: boolean) => {
       this.daemonRunning = running;
diff --git a/src/styles.scss b/src/styles.scss
index fbf7912..4526ac5 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,6 +9,11 @@ $primary: #ff5733;
   height: 1rem;
 }
 
+.tab-grow {
+  overflow: hidden;
+  overflow-y: auto;
+}
+
 /*
  * Sidebar
  */