web-app: Fix sidebar toggle on narrow screens

MythTV · May 13, 2023 · 9369484 · 9369484
1 parent 15190b6
commit 9369484
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 40 deletions.
diff --git a/mythtv/html/assets/i18n/en_US.json b/mythtv/html/assets/i18n/en_US.json
@@ -30,6 +30,7 @@
     "changeLanguage": "Change Language",
     "dashboard": "Dashboard",
     "login": "Log In",
+    "mainheading": "MythTV Backend",
     "switchServer": "Switch Server",
     "switchTheme": "Switch Theme",
     "testbed": "Testbed",

diff --git a/mythtv/html/assets/i18n/nl.json b/mythtv/html/assets/i18n/nl.json
@@ -1,7 +1,7 @@
 {
-    "settings":  {
+    "settings": {
         "main": {
-            "title" : "MythTV-installatie"
+            "title": "MythTV-installatie"
         }
     }
 }
diff --git a/mythtv/html/backend/src/app/layout/navbar/navbar.component.html b/mythtv/html/backend/src/app/layout/navbar/navbar.component.html
@@ -2,25 +2,35 @@
     <div class="toolbar flex justify-content-between align-items-center pm-8 surface-section relative lg:static  surface-border"
         style="height: 85px;">
         <div class="toolbar flex align-items-left flex-shrink-0" style="height: 80px;">
-            <a pRipple class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-3 lg:hidden lg:justify-content-center hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors" (click)="toggleShowSidebar()">
+            <a pRipple
+                class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-3 lg:hidden lg:justify-content-center
+                 hover:bg-gray-800 border-round text-300 hover:text-0
+                transition-duration-150 transition-colors"
+                (click)="toggleShowSidebar()">
                 <i class="pi pi-bars mr-1 lg:ml-1 text-base lg:text-xl "></i>
                 <span class="p-ink" ng serve></span>
             </a>
             <img class="py-2 pl-1" src="images/mythtv.png" alt="Image" height="80">
             <div class="hidden md:inline-flex">
-                <h1>MythTV Backend</h1>
+                <h1>{{ 'navbar.mainheading' | translate }}</h1>
             </div>
         </div>
 
         <div class="pr-2">
-            <a pRipple class="p-ripple p-element my-2 mx-2 flex align-items-center cursor-pointer p-3 md:hidden md:justify-content-center hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors" (click)="toggleShowNavbar()">
+            <a pRipple
+                class="p-ripple p-element my-2 mx-2 flex align-items-center cursor-pointer p-3 md:hidden md:justify-content-center
+                 hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors"
+                (click)="toggleShowNavbar()">
                 <i class="pi pi-ellipsis-v mr-1 md:mr-0 text-base md:text-xl "></i>
                 <span class="p-ink" ng serve></span>
             </a>
-            <ul class="toolbar list-none p-0 m-0 md:flex md:align-items-center select-none md:flex-row surface-section border-1 md:border-none surface-border right-0 top-100 z-2 shadow-2 md:shadow-none absolute md:static" [hidden]="m_showNavbar">
+            <ul class="toolbar list-none p-0 m-0 md:flex md:align-items-center select-none md:flex-row surface-section border-1
+             md:border-none surface-border right-0 top-100 z-2 shadow-2 md:shadow-none absolute md:static"
+                [hidden]="m_showNavbar">
                 <li>
                     <a pRipple tooltipPosition="bottom" pTooltip="{{ 'navbar.switchServer' | translate }}"
-                        class="p-ripple p-element my-3 mx-1 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">
+                        class="p-ripple p-element my-3 mx-1 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-server mr-2 md:mr-0 text-base md:text-xl"></i>
                         <span class="font-medium inline md:hidden">{{ 'navbar.switchServer' | translate }}</span>
                         <span class="p-ink"></span>
@@ -29,7 +39,8 @@ <h1>MythTV Backend</h1>
                 <li>
                     <a pRipple tooltipPosition="bottom" pTooltip="{{ 'navbar.switchTheme' | translate }}"
                         (click)="themePanel.toggle($event)"
-                        class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-2 lg:justify-content-center hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors">
+                        class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-2 lg:justify-content-center
+                         hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors">
                         <div *ngIf="m_selectedTheme">
                             <img src="images/themes/{{m_selectedTheme.Image}}" class="mr-2 lg:mr-0"
                                 style="width: 32px; height: 32px;">
@@ -41,7 +52,8 @@ <h1>MythTV Backend</h1>
                 <li>
                     <a pRipple tooltipPosition="bottom" pTooltip="{{ 'navbar.changeLanguage' | translate }}"
                         (click)="languagePanel.toggle($event)"
-                        class="p-ripple p-element my-3 mx-1 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">
+                        class="p-ripple p-element my-3 mx-1 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">
                         <div *ngIf="m_selectedLanguage">
                             <img src="images/locale/{{m_selectedLanguage.Image}}" class="mr-2 lg:mr-0"
                                 style="width: 32px;">
@@ -52,7 +64,8 @@ <h1>MythTV Backend</h1>
                 </li>
                 <li>
                     <a pRipple tooltipPosition="bottom" pTooltip="{{ 'navbar.login' | translate }}"
-                        class="p-ripple p-element my-3 mx-1 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">
+                        class="p-ripple p-element my-3 mx-1 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-sign-in mr-2 lg:mr-0 text-base lg:text-xl"></i>
                         <span class="font-medium inline md:hidden">{{ 'navbar.login' | translate }}</span>
                         <span class="p-ink"></span>

diff --git a/mythtv/html/backend/src/app/layout/sidenav/sidenav.component.html b/mythtv/html/backend/src/app/layout/sidenav/sidenav.component.html
@@ -1,37 +1,45 @@
-<ng-container *ngIf="m_haveDatabase">
+<ng-container>
     <div class="navbar flex relative lg:static surface-ground">
         <div id="sidebar"
-            class="bg-gray-900 lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-2 border-gray-800 w-18rem lg:w-5rem select-none" [hidden]="m_showSidebar">
+            class="bg-gray-900 lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-2 border-gray-800 w-18rem lg:w-5rem select-none"
+            [hidden]="dataService.m_showSidebar">
             <div class="flex flex-column h-full">
                 <div class="mt-1 select-none">
                     <ul class="list-none p-3 lg:py-3 lg:px-2 m-0">
-                        <li [routerLink]="''" pTooltip="{{ 'navbar.dashboard' | translate }}" [tooltipDisabled]="m_showSidebar === false">
+                        <li [routerLink]="''" pTooltip="{{ 'navbar.dashboard' | translate }}"
+                            [tooltipDisabled]="dataService.m_showSidebar === false">
                             <a pRipple
-                                class="p-ripple p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800 border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
+                                class="p-ripple p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center
+                                hover:bg-gray-800 border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
                                 <i class="pi pi-home mr-2 lg:mr-0 text-base lg:text-xl"></i>
                                 <span class="font-medium inline lg:hidden">{{ 'navbar.dashboard' | translate }}</span>
                                 <span class="p-ink"></span>
                             </a>
                         </li>
-                        <li [routerLink]="'status'" pTooltip="{{ 'navbar.backendStatus' | translate }}" [tooltipDisabled]="m_showSidebar === false">
-                            <a pRipple
-                                class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800 border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
+                        <li [routerLink]="'status'" pTooltip="{{ 'navbar.backendStatus' | translate }}"
+                            [tooltipDisabled]="dataService.m_showSidebar === false">
+                            <a pRipple class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800
+                                border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
                                 <i class="pi pi-info-circle mr-2 lg:mr-0 text-base lg:text-xl"></i>
-                                <span class="font-medium inline lg:hidden">{{ 'navbar.backendStatus' | translate }}</span>
+                                <span class="font-medium inline lg:hidden">{{ 'navbar.backendStatus' | translate
+                                    }}</span>
                                 <span class="p-ink"></span>
                             </a>
                         </li>
-                        <li [routerLink]="'setupwizard/dbsetup'" pTooltip="{{ 'navbar.backendSetup' | translate }}" [tooltipDisabled]="m_showSidebar === false">
-                            <a pRipple
-                                class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800 border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
+                        <li [routerLink]="'setupwizard/dbsetup'" pTooltip="{{ 'navbar.backendSetup' | translate }}"
+                            [tooltipDisabled]="dataService.m_showSidebar === false">
+                            <a pRipple class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800
+                                border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
                                 <i class="pi pi-cog mr-2 lg:mr-0 text-base lg:text-xl"></i>
-                                <span class="font-medium inline lg:hidden">{{ 'navbar.backendSetup' | translate }}</span>
+                                <span class="font-medium inline lg:hidden">{{ 'navbar.backendSetup' | translate
+                                    }}</span>
                                 <span class="p-ink"></span>
                             </a>
                         </li>
-                        <li [routerLink]="'guide'" pTooltip="{{ 'navbar.tvGuide' | translate }}" [tooltipDisabled]="m_showSidebar === false">
-                            <a pRipple
-                                class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800 border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
+                        <li [routerLink]="'guide'" pTooltip="{{ 'navbar.tvGuide' | translate }}"
+                            [tooltipDisabled]="dataService.m_showSidebar === false">
+                            <a pRipple class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800
+                                border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
                                 <i class="pi pi-map mr-2 lg:mr-0 text-base lg:text-xl"></i>
                                 <span class="font-medium inline lg:hidden">{{ 'navbar.tvGuide' | translate }}</span>
                                 <span class="p-ink"></span>
@@ -45,4 +53,4 @@
             <router-outlet></router-outlet>
         </div>
     </div>
-</ng-container>
+</ng-container>
diff --git a/mythtv/html/backend/src/app/layout/sidenav/sidenav.component.ts b/mythtv/html/backend/src/app/layout/sidenav/sidenav.component.ts
@@ -1,5 +1,5 @@
 import { Component, isDevMode, OnInit, ViewChild } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { DataService } from 'src/app/services/data.service';
 
 @Component({
     selector: 'app-sidenav',
@@ -9,14 +9,7 @@ import { Subscription } from 'rxjs';
 
 export class SidenavComponent implements OnInit {
 
-    m_showSidebar: boolean = true;
-    m_showSidebarSub!: Subscription;
-
-    m_devMode: boolean = isDevMode();
-    m_haveDatabase: boolean = true;
-
-
-    constructor() { }
+    constructor(public dataService: DataService) { }
 
     ngOnInit(): void {
     }

diff --git a/mythtv/html/backend/src/app/services/data.service.ts b/mythtv/html/backend/src/app/services/data.service.ts
@@ -1,18 +1,15 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
     providedIn: 'root'
 })
 export class DataService {
 
-    private m_showSidebar = new BehaviorSubject(true);
-    showSideBar = this.m_showSidebar.asObservable();
+    m_showSidebar = true;
 
     constructor() { }
 
     toggleShowSidebar() {
-        console.log("toggleShowSidebar called: " + this.m_showSidebar.value);
-        this.m_showSidebar.next(!this.m_showSidebar.value);
+        this.m_showSidebar = !this.m_showSidebar;
     }
 }