switch from a top menu to a sidebar menu

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 
 ## ALPHA
 
+### UI Changes
+
+- switch from a top menu to a sidebar menu
+
 ### Other Changes
 
 - update `@homebridge/hap-client` to `v2`

ui/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { SettingsService } from '@/app/core/settings.service'
 import { Component } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { Router } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
 
 @Component({
@@ -74,15 +74,5 @@ export class AppComponent {
     } else {
       $translate.setDefaultLang('en')
     }
-
-    // ensure the menu closes when we navigate
-    $router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd) {
-        const dropdownMenu = window.document.querySelector('#navbarSupportedContent')
-        if (dropdownMenu) {
-          dropdownMenu.classList.remove('show')
-        }
-      }
-    })
   }
 }

ui/src/app/app.module.ts

@@ -8,6 +8,8 @@ import { LoginModule } from '@/app/modules/login/login.module'
 import { RestartModule } from '@/app/modules/restart/restart.module'
 import { StatusModule } from '@/app/modules/status/status.module'
 import { LayoutComponent } from '@/app/shared/layout/layout.component'
+import { SidebarComponent } from '@/app/shared/layout/sidebar/sidebar.component'
+import { NgOptimizedImage } from '@angular/common'
 import { HttpClientModule } from '@angular/common/http'
 import { LOCALE_ID, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
@@ -22,6 +24,7 @@ import { ToastrModule } from 'ngx-toastr'
   declarations: [
     AppComponent,
     LayoutComponent,
+    SidebarComponent,
   ],
   imports: [
     BrowserModule,
@@ -57,6 +60,7 @@ import { ToastrModule } from 'ngx-toastr'
     StatusModule,
     RestartModule,
     AppRoutingModule,
+    NgOptimizedImage,
   ],
   providers: [
     {

ui/src/app/modules/config-editor/config-editor.component.ts

@@ -4,7 +4,7 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
 import { MonacoEditorService } from '@/app/core/monaco-editor.service'
 import { SettingsService } from '@/app/core/settings.service'
 import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { TranslateService } from '@ngx-translate/core'
@@ -36,6 +36,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
     private $modal: NgbModal,
     private $monacoEditor: MonacoEditorService,
     private $route: ActivatedRoute,
+    private $renderer: Renderer2,
     private $settings: SettingsService,
     private $toastr: ToastrService,
     private $translate: TranslateService,
@@ -50,6 +51,18 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
       automaticLayout: true,
     }
 
+    const content = document.querySelector('.content')
+    this.$renderer.setStyle(content, 'height', '100%')
+
+    // capture viewport events
+    this.visualViewPortEventCallback = () => this.visualViewPortChanged()
+    this.lastHeight = window.innerHeight
+
+    if (window.visualViewport && !this.isMobile) {
+      window.visualViewport.addEventListener('resize', this.visualViewPortEventCallback, true)
+      this.$md.disableTouchMove()
+    }
+
     // capture viewport events
     this.visualViewPortEventCallback = () => this.visualViewPortChanged()
     this.lastHeight = window.innerHeight
@@ -571,6 +584,9 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    const content = document.querySelector('.content')
+    this.$renderer.removeStyle(content, 'height')
+
     if (window.visualViewport) {
       window.visualViewport.removeEventListener('resize', this.visualViewPortEventCallback, true)
       this.$md.enableTouchMove()

ui/src/app/modules/logs/logs.component.html

@@ -20,6 +20,6 @@ <h3 class="primary-text m-0">{{ 'menu.linux.label_logs' | translate }}</h3>
   </div>
 </div>
 
-<div class="flex-column d-flex align-items-stretch" style="height: calc(100% - 52px)">
+<div class="flex-column d-flex align-items-stretch adjust-for-mobile">
   <div #logoutput id="log-output" class="terminal align-self-end w-100 h-100 mb-1"></div>
 </div>

ui/src/app/modules/platform-tools/terminal/terminal.component.html

@@ -3,6 +3,6 @@
     <h3 class="primary-text m-0">{{ 'menu.linux.label_terminal' | translate }}</h3>
   </div>
 </div>
-<div class="flex-column d-flex align-items-stretch" style="height: calc(100% - 52px)">
+<div class="flex-column d-flex align-items-stretch adjust-for-mobile">
   <div #terminaloutput id="docker-terminal" class="terminal align-self-end w-100 h-100 mb-1"></div>
 </div>

ui/src/app/modules/settings/settings.component.html

@@ -16,12 +16,6 @@ <h5 class="primary-text">
     </h5>
   </div>
   <ul class="list-group list-group-box mt-2 mx-0" *ngIf="showFields.general" id="fieldsGeneral">
-    <li class="list-group-item d-flex justify-content-between align-items-center">
-      <span class="pr-2"> {{ 'menu.config_json_editor' | translate }} </span>
-      <a class="btn btn-primary waves-effect m-0 ml-3" style="min-width: 50px" routerLink="/config">
-        <i class="fas fa-fw fa-chevron-right"></i>
-      </a>
-    </li>
     <li class="list-group-item d-flex justify-content-between align-items-center">
       <span class="pr-2"> {{ 'backup.title_backup' | translate }} </span>
       <button

ui/src/app/modules/setup-wizard/setup-wizard.component.ts

@@ -43,7 +43,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.previousTitle = this.$title.getTitle()
     this.$title.setTitle('Setup Homebridge')
-    window.document.querySelector('body').classList.remove('body-top-padding')
   }
 
   matchPassword(AC: AbstractControl) {
@@ -58,7 +57,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.$title.setTitle(this.previousTitle)
-    window.document.querySelector('body').classList.remove('body-top-padding')
   }
 
   onClickGettingStarted() {

ui/src/app/modules/status/default-dashboard-layout.json

@@ -1,84 +1,84 @@
 [
   {
+    "component": "HapQrcodeWidgetComponent",
     "x": 0,
     "y": 0,
+    "cols": 5,
+    "rows": 7,
+    "mobileOrder": 100,
+    "hideOnMobile": false
+  },
+  {
     "component": "HomebridgeStatusWidgetComponent",
+    "x": 0,
+    "y": 7,
     "cols": 5,
     "rows": 7,
     "mobileOrder": 10,
     "hidePort": true,
     "hideOnMobile": false
   },
   {
+    "component": "HomebridgeLogsWidgetComponent",
+    "x": 5,
+    "y": 0,
+    "cols": 10,
+    "rows": 8,
+    "mobileOrder": 1000,
+    "hideOnMobile": true
+  },
+  {
+    "component": "SystemInfoWidgetComponent",
     "x": 15,
-    "y": 9,
+    "y": 0,
+    "cols": 5,
+    "rows": 9,
+    "mobileOrder": 70,
+    "hideOnMobile": false
+  },
+  {
     "component": "ChildBridgeWidgetComponent",
+    "x": 15,
+    "y": 9,
     "cols": 5,
-    "rows": 6,
+    "rows": 5,
     "mobileOrder": 35,
     "hideOnMobile": false
   },
   {
-    "x": 5,
-    "y": 9,
     "component": "CpuWidgetComponent",
+    "x": 5,
+    "y": 8,
     "cols": 5,
     "rows": 3,
     "mobileOrder": 40,
     "hideOnMobile": false
   },
   {
-    "x": 5,
-    "y": 12,
     "component": "MemoryWidgetComponent",
+    "x": 5,
+    "y": 11,
     "cols": 5,
     "rows": 3,
     "mobileOrder": 50,
     "hideOnMobile": false
   },
   {
-    "x": 10,
-    "y": 12,
     "component": "NetworkWidgetComponent",
+    "x": 10,
+    "y": 11,
     "cols": 5,
     "rows": 3,
     "mobileOrder": 55,
     "hideOnMobile": false
   },
   {
-    "x": 10,
-    "y": 9,
     "component": "UptimeWidgetComponent",
+    "x": 10,
+    "y": 8,
     "cols": 5,
     "rows": 3,
     "mobileOrder": 60,
     "hideOnMobile": false
-  },
-  {
-    "x": 15,
-    "y": 0,
-    "component": "SystemInfoWidgetComponent",
-    "cols": 5,
-    "rows": 9,
-    "mobileOrder": 70,
-    "hideOnMobile": false
-  },
-  {
-    "x": 0,
-    "y": 7,
-    "component": "HapQrcodeWidgetComponent",
-    "cols": 5,
-    "rows": 8,
-    "mobileOrder": 100,
-    "hideOnMobile": false
-  },
-  {
-    "x": 5,
-    "y": 0,
-    "component": "HomebridgeLogsWidgetComponent",
-    "cols": 10,
-    "rows": 9,
-    "mobileOrder": 1000,
-    "hideOnMobile": true
   }
 ]

ui/src/app/modules/status/status.component.scss

@@ -11,7 +11,7 @@
 }
 
 .status-container {
-  min-height: calc(100% - 52px);
+  min-height: calc(100% - 30px);
 }
 
 gridster {