From f3e0227cfae3ae719f89b788aedbde7ccb7d13da Mon Sep 17 00:00:00 2001 From: Ben <43026681+bwp91@users.noreply.github.com> Date: Tue, 1 Oct 2024 11:19:47 +0100 Subject: [PATCH] switch from a top menu to a sidebar menu --- CHANGELOG.md | 1 + package-lock.json | 6 +- ui/src/app/app.component.ts | 12 +- ui/src/app/app.module.ts | 4 + .../config-editor.component.html | 4 +- .../config-editor/config-editor.component.ts | 18 +- ui/src/app/modules/logs/logs.component.html | 2 +- .../terminal/terminal.component.html | 2 +- .../modules/settings/settings.component.html | 6 - .../setup-wizard/setup-wizard.component.ts | 2 - .../status/default-dashboard-layout.json | 74 +++--- .../app/modules/status/status.component.scss | 2 +- .../app/shared/layout/layout.component.html | 142 +---------- .../app/shared/layout/layout.component.scss | 40 +-- ui/src/app/shared/layout/layout.component.ts | 18 +- .../layout/sidebar/sidebar.component.html | 204 ++++++++++++++++ .../layout/sidebar/sidebar.component.scss | 229 ++++++++++++++++++ .../layout/sidebar/sidebar.component.ts | 154 ++++++++++++ ui/src/i18n/bg.json | 5 +- ui/src/i18n/ca.json | 3 +- ui/src/i18n/cs.json | 5 +- ui/src/i18n/de.json | 3 +- ui/src/i18n/en.json | 5 +- ui/src/i18n/es.json | 3 +- ui/src/i18n/fi.json | 3 +- ui/src/i18n/fr.json | 3 +- ui/src/i18n/he.json | 5 +- ui/src/i18n/hu.json | 5 +- ui/src/i18n/id.json | 5 +- ui/src/i18n/it.json | 5 +- ui/src/i18n/ja.json | 3 +- ui/src/i18n/ko.json | 5 +- ui/src/i18n/mk.json | 5 +- ui/src/i18n/nl.json | 5 +- ui/src/i18n/no.json | 5 +- ui/src/i18n/pl.json | 3 +- ui/src/i18n/pt-BR.json | 5 +- ui/src/i18n/pt.json | 5 +- ui/src/i18n/ru.json | 5 +- ui/src/i18n/sl.json | 5 +- ui/src/i18n/sv.json | 3 +- ui/src/i18n/th.json | 3 +- ui/src/i18n/tr.json | 5 +- ui/src/i18n/uk.json | 3 +- ui/src/i18n/zh-CN.json | 5 +- ui/src/i18n/zh-TW.json | 5 +- ui/src/index.html | 2 +- ui/src/scss/base/layout.scss | 10 + ui/src/scss/themes/themes-dark.scss | 37 +++ ui/src/scss/themes/themes-light.scss | 44 ++++ 50 files changed, 807 insertions(+), 326 deletions(-) create mode 100644 ui/src/app/shared/layout/sidebar/sidebar.component.html create mode 100644 ui/src/app/shared/layout/sidebar/sidebar.component.scss create mode 100644 ui/src/app/shared/layout/sidebar/sidebar.component.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index de8927ccd..830a73257 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ Plugin developers: - use native language for validation messages where available - currently available for `de` `en` `es` `fr` `it` `pt` `zh` - add plugin config validation functionality +- switch from a top menu to a sidebar menu ### Other Changes diff --git a/package-lock.json b/package-lock.json index c859de008..4d28e7849 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2496,9 +2496,9 @@ } }, "node_modules/@types/express-serve-static-core": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.0.tgz", - "integrity": "sha512-AbXMTZGt40T+KON9/Fdxx0B2WK5hsgxcfXJLr5bFpZ7b4JCex2WyQPTEKdXqfHiY5nKKBScZ7yCoO6Pvgxfvnw==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.1.tgz", + "integrity": "sha512-CRICJIl0N5cXDONAdlTv5ShATZ4HEwk6kDDIW2/w9qOWKg+NU/5F8wYRWCrONad0/UKkloNSmmyN/wX4rtpbVA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index d849a40bc..e18917da7 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({ @@ -75,15 +75,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.html b/ui/src/app/modules/config-editor/config-editor.component.html index b9d4347c7..324974bf3 100644 --- a/ui/src/app/modules/config-editor/config-editor.component.html +++ b/ui/src/app/modules/config-editor/config-editor.component.html @@ -63,7 +63,7 @@

{{ 'menu.config_json_editor' | translate }}

{{ 'menu.config_json_editor' | translate }} 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 bd3abafb3..101c48938 100644 --- a/ui/src/app/modules/logs/logs.component.html +++ b/ui/src/app/modules/logs/logs.component.html @@ -30,6 +30,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 b778b9a2d..f1887874b 100644 --- a/ui/src/app/modules/settings/settings.component.html +++ b/ui/src/app/modules/settings/settings.component.html @@ -16,12 +16,6 @@