webapp: show the icon of the selected theme in the header

MythTV · Feb 1, 2022 · 3e71806 · 3e71806
1 parent 84a2bee
commit 3e71806
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/mythtv/html/backend/src/app/layout/navbar/navbar.component.html b/mythtv/html/backend/src/app/layout/navbar/navbar.component.html
@@ -90,7 +90,7 @@ <h1>MythTV Backend</h1>
                             <li>
                                 <a pripple="" tooltipPosition="bottom" pTooltip="Switch Theme" (click)="themePanel.toggle($event)"
                                     class="p-ripple p-element my-3 mx-2 flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors">
-                                    <i class="pi pi-eye mr-2 lg:mr-0 text-base lg:text-xl"></i>
+                                    <img src="images/themes/{{m_selectedTheme.Image}}" class="mr-3 lg:mr-0" style="width: 32px; height: 32px;">
                                     <span class="font-medium inline lg:hidden">Switch Theme</span>
                                     <span class="p-ink"></span>
                                 </a>
@@ -127,7 +127,7 @@ <h1>MythTV Backend</h1>
 
 <p-overlayPanel #themePanel [showCloseIcon]="true" [style]="{width: '350px'}">
     <ng-template pTemplate>
-        <p-table [value]="themes$" selectionMode="single" [paginator]="false" sortField="Name" sortMode="single" [scrollable]="true" scrollHeight="500px" rowGroupMode="subheader" groupRowsBy="Category" responsiveLayout="scroll">
+        <p-table [value]="m_themes$" selectionMode="single" [paginator]="false" sortField="Name" sortMode="single" [scrollable]="true" scrollHeight="500px" rowGroupMode="subheader" groupRowsBy="Category" responsiveLayout="scroll">
             <ng-template pTemplate="groupheader" let-theme>
                 <tr pRowGroupHeader>
                     <td colspan="2">
@@ -136,7 +136,7 @@ <h1>MythTV Backend</h1>
                 </tr>
             </ng-template>
             <ng-template pTemplate="body" let-rowData let-theme>
-                <tr [pSelectableRow]="rowData" (click)="changeTheme(theme.CSS)">
+                <tr [pSelectableRow]="rowData" (click)="changeTheme(theme)">
                     <td  style="max-width:80px"><img src="images/themes/{{theme.Image}}" [alt]="theme.image" class="theme-image" /></td>
                     <td>{{theme.Name}}</td>
                 </tr>

diff --git a/mythtv/html/backend/src/app/layout/navbar/navbar.component.ts b/mythtv/html/backend/src/app/layout/navbar/navbar.component.ts
@@ -9,17 +9,31 @@ import { ThemeService } from '../../services/theme.service';
 })
 export class NavbarComponent implements OnInit {
 
-    themes$!: Theme[];
-    selectedTheme!: Theme;
+    m_themes$!: Theme[];
+    m_selectedTheme!: Theme;
 
     constructor(private themeService: ThemeService) {
-        this.themeService.getThemes().then((themes: Theme[]) => this.themes$ = themes);
+        this.themeService.getThemes().then((themes: Theme[]) => {
+            this.m_themes$ = themes;
+            this.m_selectedTheme = this.findThemeByName('Indigo Light');
+        });
     }
 
     ngOnInit(): void {
     }
 
-    changeTheme(theme: string) {
-        this.themeService.switchTheme(theme);
+    findThemeByName(name: string) : Theme {
+        for (var x = 0; x < this.m_themes$.length; x++) {
+            if (this.m_themes$[x].Name === name)
+                return this.m_themes$[x];
+
+        }
+
+        return this.m_themes$[0];
+    }
+
+    changeTheme(theme: Theme) {
+        this.m_selectedTheme = theme;
+        this.themeService.switchTheme(theme.CSS);
     }
 }