Skip to content

Commit

Permalink
switch from a top menu to a sidebar menu
Browse files Browse the repository at this point in the history
  • Loading branch information
bwp91 committed Oct 24, 2024
1 parent de4b62e commit be21049
Show file tree
Hide file tree
Showing 50 changed files with 808 additions and 328 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 1 addition & 11 deletions ui/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -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')
}
}
})
}
}
4 changes: 4 additions & 0 deletions ui/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -22,6 +24,7 @@ import { ToastrModule } from 'ngx-toastr'
declarations: [
AppComponent,
LayoutComponent,
SidebarComponent,
],
imports: [
BrowserModule,
Expand Down Expand Up @@ -57,6 +60,7 @@ import { ToastrModule } from 'ngx-toastr'
StatusModule,
RestartModule,
AppRoutingModule,
NgOptimizedImage,
],
providers: [
{
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/modules/config-editor/config-editor.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ <h3 class="primary-text m-0">{{ 'menu.config_json_editor' | translate }}</h3>

<ngx-monaco-editor
*ngIf="!isMobile && !originalConfig"
class="flex-grow-1 h-100 w-100 mt-3 mb-2"
class="flex-grow-1 h-100 w-100 mt-3 mb-0"
[options]="editorOptions"
[model]="monacoEditorModel"
(onInit)="onEditorInit($event)"
Expand All @@ -74,7 +74,7 @@ <h3 class="primary-text m-0">{{ 'menu.config_json_editor' | translate }}</h3>

<ngx-monaco-diff-editor
*ngIf="!isMobile && originalConfig"
class="flex-grow-1 h-100 w-100 mt-3 mb-2"
class="flex-grow-1 h-100 w-100 mt-3 mb-0"
[options]="editorOptions"
[originalModel]="monacoEditorModel"
[modifiedModel]="monacoEditorModel"
Expand Down
18 changes: 17 additions & 1 deletion ui/src/app/modules/config-editor/config-editor.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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()
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/modules/logs/logs.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,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 #logoutput id="log-output" class="terminal align-self-end w-100 h-100 mb-1"></div>
<div class="flex-column d-flex align-items-stretch adjust-for-mobile">
<div #logoutput id="log-output" class="align-self-end w-100 h-100 mb-1"></div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -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 #terminaloutput id="docker-terminal" class="terminal align-self-end w-100 h-100 mb-1"></div>
<div class="flex-column d-flex align-items-stretch adjust-for-mobile">
<div #terminaloutput id="docker-terminal" class="align-self-end w-100 h-100 mb-1"></div>
</div>
6 changes: 0 additions & 6 deletions ui/src/app/modules/settings/settings.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions ui/src/app/modules/setup-wizard/setup-wizard.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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() {
Expand Down
74 changes: 37 additions & 37 deletions ui/src/app/modules/status/default-dashboard-layout.json
Original file line number Diff line number Diff line change
@@ -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
}
]
2 changes: 1 addition & 1 deletion ui/src/app/modules/status/status.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

.status-container {
min-height: calc(100% - 52px);
min-height: calc(100% - 30px);
}

gridster {
Expand Down
Loading

0 comments on commit be21049

Please sign in to comment.