Themes update after Material3 update

firebird-ng/src/app/components/menu-toggle/menu-toggle.component.html

@@ -1,10 +1,11 @@
 <button
   mat-raised-button
-  class="toggle-button"
+  class="toggle-button panel-button"
   [ngClass]="{ disabled: disabled }"
   [matTooltip]="tooltip"
   matTooltipPosition="above"
   matTooltipTouchGestures="off"
+
 >
 
   <mat-icon [ngClass]="{ 'active-icon': active }" >{{ icon }}</mat-icon>

firebird-ng/src/app/components/menu-toggle/menu-toggle.component.scss

@@ -7,53 +7,3 @@
   padding-right: 0;
   margin-left: 5px;
 }
-
-
-
-//:host {
-//  display: flex;
-//  margin: 0 0.6rem;
-//
-//  .menu-toggle {
-//    display: flex;
-//    background: unset;
-//    border: none;
-//    height: 2.5rem;
-//    width: 2.5rem;
-//    min-height: 2.5rem;
-//    min-width: 2.5rem;
-//    padding: 0.65rem;
-//    cursor: pointer;
-//    align-self: center;
-//    transition: all 0.4s;
-//
-//    &-icon {
-//      width: 100%;
-//      height: 100%;
-//      fill: var(--icon-color);
-//
-//      &.active-icon {
-//        fill: var(--active-icon-color);
-//      }
-//    }
-//
-//    &:hover {
-//      background-color: var(--icon-bg);
-//      border-radius: 40%;
-//      transition: all 0.4s;
-//    }
-//
-//    &.disabled {
-//      cursor: not-allowed;
-//      opacity: 0.4;
-//    }
-//  }
-//}
-//.menu-toggle-icon{
-//  color: var(--text-color);
-//  transition: background-color 0.3s, color 0.3s;
-//}
-//
-//.button_theme:hover {
-//  color: var(--accent-color);
-//}

firebird-ng/src/app/components/shell/shell.component.html

@@ -2,10 +2,24 @@
   <!-- TOP BAR / HEADER -->
   <mat-toolbar class="mat-elevation-z4 top-toolbar">
     <!-- Logo -->
-    <button mat-icon-button [routerLink]="['/']" class="logo-button" aria-label="App Logo" >
+<!--    <button mat-icon-button [routerLink]="['/']" class="logo-button" aria-label="App Logo" >-->
+<!--      <img src="assets/firebird/firebird-simplified-circle.png" width="32" height="32" alt="App Logo" />-->
+<!--    </button>-->
+
+    <button mat-icon-button [matMenuTriggerFor]="logoMenu" class="logo-button hide-mobile" aria-label="App Logo">
       <img src="assets/firebird/firebird-simplified-circle.png" width="32" height="32" alt="App Logo" />
     </button>
 
+    <!-- Always visible nav items on desktop -->
+    <mat-menu #logoMenu="matMenu">
+      <ng-container *ngFor="let item of navItems">
+        <button mat-menu-item *ngIf="!item.alwaysVisible" (click)="onNavItemClick(item)">
+          <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
+          <span>{{ item.label }}</span>
+        </button>
+      </ng-container>
+    </mat-menu>
+
     <!-- Always visible nav items on desktop -->
     <div class="nav-items visible-nav hide-mobile">
       <ng-container *ngFor="let item of navItems">
@@ -61,7 +75,7 @@
   </div>
 
   <!-- MAIN CONTENT AREA (split into leftPane, center, rightPane) -->
-  <div class="main-content">
+  <div class="main-content" #mainContent>
     <!-- LEFT PANE -->
     <div
       *ngIf="isLeftPaneVisible"

firebird-ng/src/app/components/shell/shell.component.scss

@@ -63,7 +63,6 @@
 
 /** Left and right panes */
 .pane {
-
   position: relative;
   z-index: 10;
   overflow: auto;
@@ -73,12 +72,12 @@
 .left-pane {
   box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.2);
   background-color: var(--mat-sys-surface-container);
-  padding: 5px 5px 5px 10px;
+  // (!) Padding messes up all changing dimension! padding: 5px 5px 5px 10px;
 }
 .right-pane {
   background-color: var(--mat-sys-surface-container);
   box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.2);
-  padding: 5px 10px 5px 5px;
+  // (!) Padding messes up all changing dimension! padding: 5px 10px 5px 5px;
 }
 
 .central-pane {

firebird-ng/src/app/components/shell/shell.component.ts

@@ -6,7 +6,7 @@ import {
   ComponentRef,
   Type,
   EventEmitter,
-  Output,
+  Output, ElementRef,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {Router, RouterLink} from '@angular/router';
@@ -52,6 +52,9 @@ export class ShellComponent {
   @ViewChild('rightPaneContainer', { read: ViewContainerRef, static: true })
   rightPaneContainer!: ViewContainerRef;
 
+  /** The reference to main content container */
+  @ViewChild('mainContent', { static: true }) mainContent!: ElementRef<HTMLElement>;
+
   /** Event emitted when the resizing of the left pane ends. Emits the new width. */
   @Output() onEndResizeLeft = new EventEmitter<number>();
 
@@ -165,10 +168,37 @@ export class ShellComponent {
     this.navOpen = !this.navOpen;
   }
 
-  /** Toggle light/dark theme */
-  toggleTheme() {
-    this.isDarkTheme = !this.isDarkTheme;
-    document.documentElement.setAttribute('data-theme', this.isDarkTheme ? 'dark' : 'light');
+  /**
+   * Returns the visible dimensions of the main content area.
+   * Uses clientWidth/clientHeight to exclude scrollbars,
+   * and subtracts side panel widths if they are visible.
+   */
+  getMainAreaVisibleDimensions(): { width: number; height: number } {
+
+
+    const visibleWidth = this.mainContent.nativeElement.clientWidth -
+      (this.isLeftPaneVisible ? this.leftPaneWidth : 0) -
+      (this.isRightPaneVisible ? this.rightPaneWidth : 0);
+    const visibleHeight = this.mainContent.nativeElement.clientHeight;
+
+
+    console.log("Shell resize information: ")
+    console.log("  mainContent.clientWidth:", this.mainContent.nativeElement.clientWidth);
+    console.log("  mainContent.clientHeight:", this.mainContent.nativeElement.clientHeight);
+    console.log("  isLeftPaneVisible:", this.isLeftPaneVisible);
+    if(this.isLeftPaneVisible)
+    {
+      console.log("  leftPaneWidth:", this.leftPaneWidth);
+    }
+    console.log("  isRightPaneVisible:", this.isRightPaneVisible);
+    if(this.isRightPaneVisible)
+    {
+      console.log("  rightPaneWidth:", this.rightPaneWidth);
+    }
+    console.log("  visibleWidth:", visibleWidth);
+    console.log("  visibleHeight:", visibleHeight);
+
+    return { width: visibleWidth, height: visibleHeight };
   }
 
   /** Clicking a nav item => external link or internal route */

firebird-ng/src/app/pages/main-display/main-display.component.html

@@ -1,22 +1,23 @@
 <app-shell>
   <ng-container header>
+    <button mat-icon-button matTooltip="Toggle scene tree pane" (click)="toggleLeftPane()" class="panel-button">
+      <mat-icon>{{ isLeftPaneOpen ? 'close' : 'account_tree' }}</mat-icon>
+    </button>
 
+    <button mat-icon-button class="panel-button">
+      <mat-icon>dark_mode</mat-icon>
+    </button>
 
+    <!-- Event selector -->
+    <app-custom-event-selector></app-custom-event-selector>
 
-      <!-- Event selector -->
-      <app-custom-event-selector></app-custom-event-selector>
-
-      <app-custom-auto-rotate></app-custom-auto-rotate>
-
-      <!-- Toggle for clipping geometries -->
-      <app-custom-object-clipping></app-custom-object-clipping>
+    <app-custom-auto-rotate></app-custom-auto-rotate>
 
-      <!-- Extra options -->
-      <ng-content></ng-content>
+    <!-- Toggle for clipping geometries -->
+    <app-custom-object-clipping></app-custom-object-clipping>
 
-    <button mat-icon-button matTooltip="Toggle geometry" (click)="toggleLeftPane()" class="toggle-btn">
-      <mat-icon>{{ isLeftPaneOpen ? 'close' : 'account_tree' }}</mat-icon>
-    </button>
+    <!-- Extra options -->
+    <ng-content></ng-content>
 
   </ng-container>
 

firebird-ng/src/app/pages/main-display/main-display.component.scss

@@ -1,24 +1,14 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-
-
+//* {
+//  margin: 0;
+//  padding: 0;
+//}
 
-.phoenix-menu{
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-color);
-  //background-color: #2e2e2e;
-  flex-wrap: wrap;
-}
 
 
 #eventDisplay {
   padding-top: 105px;
   margin-top: -105px;
+  overflow: hidden;
 }
 
 

firebird-ng/src/app/pages/main-display/main-display.component.ts

@@ -20,7 +20,7 @@ import { ShellComponent } from '../../components/shell/shell.component';
 import { ToolPanelComponent } from '../../components/tool-panel/tool-panel.component';
 import { EventSelectorComponent } from '../../components/event-selector/event-selector.component';
 import { AutoRotateComponent } from '../../components/auto-rotate/auto-rotate.component';
-import {ThemeSwitcherComponent} from "../../components/theme-switcher/theme-switcher.component";
+import { ThemeSwitcherComponent } from "../../components/theme-switcher/theme-switcher.component";
 import { ObjectClippingComponent } from '../../components/object-clipping/object-clipping.component';
 import { EicAnimationsManager } from '../../utils/eic-animation-manager';
 
@@ -267,9 +267,16 @@ export class MainDisplayComponent implements OnInit, AfterViewInit, OnDestroy {
     window.addEventListener('resize', () => {
       this.onRendererElementResize();
     });
-    // Initial resize
-    this.onRendererElementResize();
 
+    // When sidebar is collapsed/opened, the main container, i.e. #eventDisplay offsetWidth is not yet updated.
+    // This leads to a not proper resize  processing. We add 100ms delay before calling a function
+    const this_obj = this
+    const resizeInvoker = function(){
+      setTimeout(() => {
+        this_obj.onRendererElementResize();
+      }, 100);  // 100 milliseconds = 0.1 seconds
+    };
+    resizeInvoker();
   }
 
   // 3) UI - Toggling panes
@@ -314,15 +321,10 @@ export class MainDisplayComponent implements OnInit, AfterViewInit, OnDestroy {
     console.log(info.programs);
   }
 
-  // Called when we want to recalc the size of the canvas
+  // Called when we want to recalculate the size of the canvas
   private onRendererElementResize() {
-    // Reference the container element
-    const container = document.getElementById('eventDisplay') as HTMLElement;
-    if (!container) return;
-
-    // Calculate available width and height
-    const width = container.clientWidth;
-    const height = container.clientHeight;
+    let {width, height} = this.displayShellComponent.getMainAreaVisibleDimensions();
+    console.log(`[RendererResize] New size: ${width}x${height} px`);
 
     // Delegate resizing to ThreeService
     this.threeService.setSize(width, height);
@@ -332,7 +334,7 @@ export class MainDisplayComponent implements OnInit, AfterViewInit, OnDestroy {
   changeCurrentTime(event: Event) {
     if (!event) return;
     const input = event.target as HTMLInputElement;
-    const value = parseInt(input.value, 10);
+    const value: number = parseInt(input.value, 10);
     this.currentTime = value;
     this.processCurrentTimeChange();
   }