diff --git a/CHANGELOG.md b/CHANGELOG.md index 38f060803..32ba32333 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index fa3abb6ed..ddd895290 100644 --- a/ui/src/app/app.component.ts +++ b/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') - } - } - }) } } diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts index b45f25517..8aa1273fb 100644 --- a/ui/src/app/app.module.ts +++ b/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: [ { diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts index 8e239fe96..13a73d1a0 100644 --- a/ui/src/app/modules/config-editor/config-editor.component.ts +++ b/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() diff --git a/ui/src/app/modules/logs/logs.component.html b/ui/src/app/modules/logs/logs.component.html index 5ad3bd82c..fb2ab15bb 100644 --- a/ui/src/app/modules/logs/logs.component.html +++ b/ui/src/app/modules/logs/logs.component.html @@ -20,6 +20,6 @@

{{ 'menu.linux.label_logs' | translate }}

-
+
diff --git a/ui/src/app/modules/platform-tools/terminal/terminal.component.html b/ui/src/app/modules/platform-tools/terminal/terminal.component.html index b1dc02cc5..0d8a6443e 100644 --- a/ui/src/app/modules/platform-tools/terminal/terminal.component.html +++ b/ui/src/app/modules/platform-tools/terminal/terminal.component.html @@ -3,6 +3,6 @@

{{ 'menu.linux.label_terminal' | translate }}

-
+
diff --git a/ui/src/app/modules/settings/settings.component.html b/ui/src/app/modules/settings/settings.component.html index 878820ce8..684d7a862 100644 --- a/ui/src/app/modules/settings/settings.component.html +++ b/ui/src/app/modules/settings/settings.component.html @@ -16,12 +16,6 @@