Theme almost works

eic · Oct 29, 2024 · 00dfbfc · 00dfbfc
1 parent 35c793e
commit 00dfbfc
Show file tree

Hide file tree

Showing 9 changed files with 221 additions and 38 deletions.
diff --git a/firebird-ng/src/app/components/display-shell/display-shell.component.scss b/firebird-ng/src/app/components/display-shell/display-shell.component.scss
@@ -14,7 +14,7 @@
   flex-direction: row;
   align-items: center;
   min-height: 50px;
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
   border-bottom: 1px solid #1c1c1c;
   box-sizing: border-box;
 }
@@ -32,16 +32,16 @@
 }
 
 .left-pane {
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
 }
 
 .right-pane {
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
 }
 
 .central-pane {
   flex: 1;
-  background-color: #424242;
+  //background-color: #424242;
   overflow: auto;
 }
 

diff --git a/firebird-ng/src/app/components/geometry-tree-window/geometry-tree-window.component.scss b/firebird-ng/src/app/components/geometry-tree-window/geometry-tree-window.component.scss
@@ -1,5 +1,5 @@
 .tree-button {
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
   color: white;
   border-radius: 50%;
   width: 48px;
@@ -23,7 +23,7 @@
 
 .window {
   width: 400px;
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
 }
 
 .window-header {

diff --git a/firebird-ng/src/app/components/menu-toggle/menu-toggle.component.scss b/firebird-ng/src/app/components/menu-toggle/menu-toggle.component.scss
@@ -18,14 +18,15 @@
     &-icon {
       width: 100%;
       height: 100%;
+      fill: var(--icon-color);
 
       &.active-icon {
-        --phoenix-options-icon-path: #00bcd4;
+        fill: var(--active-icon-color);
       }
     }
 
     &:hover {
-      background-color: var(--phoenix-options-icon-bg);
+      background-color: var(--icon-bg);
       border-radius: 40%;
       transition: all 0.4s;
     }
@@ -36,3 +37,11 @@
     }
   }
 }
+.menu-toggle-icon{
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.button_theme:hover {
+  color: var(--accent-color);
+}
diff --git a/firebird-ng/src/app/components/nav-config/nav-config.component.scss b/firebird-ng/src/app/components/nav-config/nav-config.component.scss
@@ -3,12 +3,14 @@
   flex-direction: row;
   box-sizing: border-box;
   height: 50px;
-  color: white;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: space-between;
 }
 
+.nav-link{
+  color: var(--text-color) !important;
+  //transition: background-color 0.3s, color 0.3s;
+}
 .config-toggle-btn {
   color: white;
   position: absolute;
@@ -24,3 +26,5 @@
   margin: 0;
   cursor: pointer;
 }
+
+
diff --git a/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.html b/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.html
@@ -1,8 +1,8 @@
 <div class="header">
-  <button mat-icon-button aria-label="Toggle Highlight" matTooltip="Toggle highlight function" (click)="toggleHighlighting()">
+  <button mat-icon-button aria-label="Toggle Highlight" matTooltip="Toggle highlight function" (click)="toggleHighlighting()" class="button_theme">
     <mat-icon>{{ isHighlightingEnabled ? 'highlight_off' : 'highlight' }}</mat-icon>
   </button>
-  <button mat-icon-button aria-label="Refresh" matTooltip="Refresh tree with current geometry" (click)="refreshScheneTree()" >
+  <button mat-icon-button aria-label="Refresh" matTooltip="Refresh tree with current geometry" (click)="refreshScheneTree()" class="button_theme">
     <mat-icon>refresh</mat-icon>
   </button>
 </div>

diff --git a/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.scss b/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.scss
@@ -7,11 +7,21 @@
   width: 48px;
   height: 48px;
   min-width: 48px;
-  color: white;
+  //color: white;
   padding-top: 8px;
 }
 
-mat-tree{
-  background-color: #2e2e2e;
+.button_theme {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
 }
 
+.button_theme:hover {
+  background-color: var(--secondary-background-color);
+  color: var(--accent-color);
+}
+
+.mat-tree {
+  background-color: transparent !important;
+}
diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.html b/firebird-ng/src/app/pages/main-display/main-display.component.html
@@ -38,7 +38,7 @@
     <button mat-icon-button matTooltip="Toggle phoenix menu" (click)="togglePhoenixMenu()" class="toggle-btn d-md-none phoenix-toggle-btn">
       <mat-icon>{{ isPhoenixMenuOpen ? 'close' : 'menu' }}</mat-icon>
     </button>
-    <div class="phoenix-menu" *ngIf="isPhoenixMenuOpen || !isSmallScreen">
+    <div class="phoenix-menu theme-button" *ngIf="isPhoenixMenuOpen || !isSmallScreen">
 
       <!-- Event selector -->
       <app-custom-event-selector></app-custom-event-selector>
@@ -51,18 +51,6 @@
       <!-- Toggle for clipping geometries -->
       <app-custom-object-clipping></app-custom-object-clipping>
 
-<!--       Toggle for selected object panel -->
-<!--      <app-custom-object-selection></app-custom-object-selection>-->
-
-<!--      &lt;!&ndash; Toggle for loading geometries modal&ndash;&gt;-->
-<!--      <eic-io-options></eic-io-options>-->
-
-<!--      &lt;!&ndash; Toggle for shareable link constructor modal&ndash;&gt;-->
-<!--      <app-share-link></app-share-link>-->
-
-<!--      &lt;!&ndash; Info panel &ndash;&gt;-->
-<!--      <app-info-panel></app-info-panel>-->
-
       <!-- Extra options -->
       <ng-content></ng-content>
 
@@ -96,11 +84,11 @@
 
   <div footer>
     <div class="time-controls" id="bottom-controls">
-      <div style="margin-right: 10px">{{currentTime | number:'1.1-1'}}</div>
+      <div class="theme-text" style="margin-right: 10px">{{currentTime | number:'1.1-1'}}</div>
       <mat-slider min="0" [max]="maxTime" step="1" showTickMarks discrete [displayWith]="formatCurrentTime" (input)="changeCurrentTime($event)" class="tslider">
         <input matSliderThumb [value]="currentTime">
       </mat-slider>
-      <div>{{maxTime | number:'1.0-0'}} [ns] &nbsp;&nbsp;</div>
+      <div class="theme-text">{{maxTime | number:'1.0-0'}} [ns] &nbsp;&nbsp;</div>
 
       <button mat-raised-button aria-label="Rewind" matTooltip="Rewind time to 0" class="tcontrol" (click)="rewindTime()">
         <mat-icon>first_page</mat-icon>
@@ -124,7 +112,7 @@
       <button mat-raised-button aria-label="Stop" matTooltip="Stop and show all particles" class="tcontrol" (click)="exitTimedDisplay()" >
         <mat-icon>stop</mat-icon>
       </button>
-      <div>{{message}}</div>
+      <div class="theme-text">{{message}}</div>
       &nbsp;&nbsp;
 
       <button mat-raised-button aria-label="Rewind" matTooltip="Play random NEXT EVENT" class="tcontrol" (click)="nextRandomEvent()">
@@ -135,7 +123,7 @@
         <mat-icon>view_in_ar</mat-icon>
       </button>
 
-      <div style="color: darkgray">{{currentGeometry}}</div>
+      <div class="theme-text">{{currentGeometry}}</div>
     </div>
   </div>
 

diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.scss b/firebird-ng/src/app/pages/main-display/main-display.component.scss
@@ -4,12 +4,13 @@
 }
 
 
+
 .phoenix-menu{
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
   flex-wrap: wrap;
 }
 
@@ -22,10 +23,16 @@
 
 .toggle-btn {
   position: absolute;
-  top: 64px;
-  color: white;
+  top: 50px;
+  //color: white;
   padding-top: 8px;
   z-index: 10;
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
+}
+.toggle-btn:hover {
+  background-color: var(--secondary-background-color);
+  color: var(--accent-color);
 }
 
 .toggle-btn1 {
@@ -50,14 +57,14 @@
 .time-controls {
   flex: 1 1 auto;
   display: flex;
-  background-color: #424242;
+  //background-color: #424242;
   padding: 2px;
   gap: 3px;
   align-items: center;
   justify-content: center;
   height: 50px;
   bottom: 0;
-  color: white;
+  //color: white;
   //border-top: 1px solid #ddd;
 }