Merge branch 'beta-4.56.2' into alpha-4.56.2

homebridge · Apr 14, 2024 · a9db165 · a9db165
2 parents 067982f + 6f819b8
commit a9db165
Show file tree

Hide file tree

Showing 60 changed files with 288 additions and 146 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,8 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 - add theme setting to main page
 - ui code refactoring
 - remove unused lang strings
+- add language setting to main page
+- ui styling
 
 ### Translation Changes
 

diff --git a/config.schema.json b/config.schema.json
@@ -660,25 +660,9 @@
   },
   "layout": [
     {
-      "type": "flex",
-      "flex-flow": "row wrap",
       "items": [
-        {
-          "type": "flex",
-          "flex-flow": "column",
-          "items": [
-            "theme",
-            "lang"
-          ]
-        },
-        {
-          "type": "flex",
-          "flex-flow": "column",
-          "items": [
-            "port",
-            "tempUnits"
-          ]
-        }
+        "port",
+        "tempUnits"
       ]
     },
     {
@@ -818,4 +802,4 @@
       ]
     }
   ]
-}
+}
diff --git a/src/modules/config-editor/config-editor.controller.ts b/src/modules/config-editor/config-editor.controller.ts
@@ -86,10 +86,10 @@ export class ConfigEditorController {
   }
 
   @UseGuards(AdminGuard)
-  @ApiOperation({ summary: 'Change the theme of the Homebridge UI.' })
-  @Put('/theme')
-  setThemeForUi(@Body() body) {
-    return this.configEditorService.setThemeForUi(body.theme);
+  @ApiOperation({ summary: 'Change a config property of the Homebridge UI.' })
+  @Put('/ui')
+  setThemeForUi(@Body() { key, value }) {
+    return this.configEditorService.setPropertyForUi(key, value);
   }
 
   @UseGuards(AdminGuard)

diff --git a/src/modules/config-editor/config-editor.service.ts b/src/modules/config-editor/config-editor.service.ts
@@ -276,15 +276,15 @@ export class ConfigEditorService {
   }
 
   /**
-   * Set the theme for the UI
+   * Set a specific property for the homebridge-config-ui-x plugin
    */
-  public async setThemeForUi(theme: string) {
+  public async setPropertyForUi(property: string, value: string) {
     // 1. get the current config for homebridge-config-ui-x
     const config = await this.getConfigFile();
 
-    // 2. update the theme
+    // 2. update the property
     const pluginConfig = config.platforms.find(x => x.platform === 'config');
-    pluginConfig.theme = theme;
+    pluginConfig[property] = value;
 
     // 3. save the config file
     await this.updateConfigFile(config);

diff --git a/ui/src/app/core/components/information/information.component.html b/ui/src/app/core/components/information/information.component.html
@@ -6,7 +6,7 @@ <h5 class="modal-title">{{ title }}</h5>
   </div>
   <div class="modal-body w-100 text-center">
     <i *ngIf="faIconClass" class="fas fa-fw {{ faIconClass }} mb-4" style="font-size: 75px;"></i>
-    <div class="alert alert-info" role="alert" *ngIf="subtitle">
+    <div class="alert" role="alert" *ngIf="subtitle">
       <h5 class="mb-0">{{ subtitle }}</h5>
     </div>
     <p class="w-100 text-center">{{ message }}</p>

diff --git a/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.html b/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.html
@@ -60,8 +60,8 @@ <h5 class="primary-text">
                 </div>
               </div>
               <div class="mb-4">
-                <h5 (click)="toggleConfigFields(i)" class="primary-text" style="cursor: pointer;"
-                    tabindex="0" [attr.aria-expanded]="showConfigFields[i] ? 'true' : 'false'">
+                <h5 (click)="toggleConfigFields(i)" class="primary-text hover-pointer" tabindex="0"
+                  [attr.aria-expanded]="showConfigFields[i] ? 'true' : 'false'">
                   <i class="fa fa-fw" [ngClass]="showConfigFields[i] ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
                   {{ 'child_bridge.settings_config.header' | translate }}
                 </h5>

diff --git a/ui/src/app/core/manage-plugins/manage-plugins-modal/manage-plugins-modal.component.html b/ui/src/app/core/manage-plugins/manage-plugins-modal/manage-plugins-modal.component.html
@@ -43,7 +43,7 @@ <h4 class="primary-text text-center">
     </div>
   </div>
   <div *ngIf="showReleaseNotes && !actionComplete" class="modal-body plugin-modal-body">
-    <div class="alert alert-info text-center" *ngIf="release.name || latestVersion">
+    <div class="alert text-center" *ngIf="release.name || latestVersion">
       <h5 class="mb-0">
         <span *ngIf="installedVersion">v{{ installedVersion }} &rarr; </span>
         <span *ngIf="release.name">{{ release.name }}</span>

diff --git a/.../core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.html b/.../core/manage-plugins/manual-plugin-config-modal/manual-plugin-config-modal.component.html
@@ -12,7 +12,7 @@ <h5 class="modal-title">
       <i class="fa fa-fw fa-cog fa-spin" style="font-size: 75px;"></i>
     </div>
     <div *ngIf="!loading && !canConfigure">
-      <div class="alert alert-info">
+      <div class="alert alert-warning">
         {{ 'plugins.settings.message_manual_config_required' | translate }}
         {{ 'plugins.settings.message_consult_documentation' | translate }}
       </div>

diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
@@ -122,7 +122,10 @@ export class SettingsService {
   setLang(lang: string) {
     if (lang) {
       this.$translate.use(lang);
+    } else {
+      lang = 'auto';
     }
+    this.env.lang = lang;
   }
 
   /**

diff --git a/ui/src/app/modules/accessories/accessories.component.html b/ui/src/app/modules/accessories/accessories.component.html
@@ -81,7 +81,7 @@ <h5 class="primary-text drag-handle room-title" [ngClass]="{'cursor-move': !isMo
       <h3 class="primary-text m-0 mb-3">{{'accessories.title_accessories' | translate}}</h3>
     </div>
     <div class="col-12 text-center">
-      <div class="alert alert-info p-4" role="alert">
+      <div class="alert alert-warning p-4" role="alert">
         <h4 class="primary-text mb-3 mt-0">{{ 'accessories.title_accessory_control_disabled' | translate }}</h4>
         <div>
           <p>{{ 'accessories.message_must_use_insecure_mode' | translate }}</p>

diff --git a/ui/src/app/modules/accessories/add-room-modal/add-room-modal.component.html b/ui/src/app/modules/accessories/add-room-modal/add-room-modal.component.html
@@ -6,7 +6,7 @@ <h5 class="modal-title">{{ 'accessories.button_add_room' | translate }}</h5>
         (click)="activeModal.dismiss('Dismiss')"></button>
     </div>
     <div class="modal-body">
-      <div class="alert alert-info" role="alert">
+      <div class="alert" role="alert">
         {{ 'accessories.message_rooms_not_appear_in_homekit' | translate }}
       </div>
       <div class="md-form">

diff --git a/ui/src/app/modules/plugins/plugin-card/plugin-info/plugin-info.component.scss b/ui/src/app/modules/plugins/plugin-card/plugin-info/plugin-info.component.scss
@@ -1,6 +1,6 @@
 .plugin-icon {
   height: 75px;
   width: 75px;
-  border-radius: 15px;
+  border-radius: 1rem;
   border: 1px solid #222222;
 }
diff --git a/ui/src/app/modules/plugins/plugins.component.html b/ui/src/app/modules/plugins/plugins.component.html
@@ -10,7 +10,7 @@ <h3 class="primary-text m-0">{{ 'menu.label_plugins' | translate }}</h3>
   <div class="col-md-12">
     <form novalidate (ngSubmit)="onSubmit(form)" [formGroup]="form">
       <input type="text" class="hb-npm-search" [placeholder]="'plugins.placeholder_search_plugin' | translate"
-        formControlName="query">
+        formControlName="query" style="border-radius: 1rem;">
       <a class="hb-npm-search-clear" href="javascript:void(0)" (click)="onClearSearch()">
         <i class="far fa-fw fa-times-circle" *ngIf="form.controls['query'].value"></i>
       </a>

diff --git a/ui/src/app/modules/settings/backup/backup.component.html b/ui/src/app/modules/settings/backup/backup.component.html
@@ -35,13 +35,13 @@ <h5 class="modal-title">{{ 'backup.title_backup' | translate }}</h5>
     </ul>
 
     <div *ngIf="!scheduledBackups.length && !errorMessage">
-      <div class="alert alert-info" role="alert">
+      <div class="alert" role="alert">
         {{ 'backup.message_scheduled_backup_none_yet' | translate:{backupTime: backupTime | date:'shortTime'} }}
       </div>
     </div>
 
     <div *ngIf="errorMessage">
-      <div class="alert alert-info" role="alert">
+      <div class="alert alert-error" role="alert">
         <h4 class="alert-heading">{{ 'toast.title_error' | translate }}</h4>
         <p>
           {{ errorMessage }}

diff --git a/ui/src/app/modules/settings/select-network-interfaces/select-network-interfaces.component.ts b/ui/src/app/modules/settings/select-network-interfaces/select-network-interfaces.component.ts
@@ -1,21 +1,19 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-select-network-interfaces',
   templateUrl: './select-network-interfaces.component.html',
   styleUrls: ['./select-network-interfaces.component.scss'],
 })
-export class SelectNetworkInterfacesComponent implements OnInit {
+export class SelectNetworkInterfacesComponent {
   @Input() availableNetworkAdapters: Record<string, any>;
   @Input() bridgeNetworkAdapters: Record<string, any>;
 
   constructor(
     public activeModal: NgbActiveModal,
   ) {}
 
-  ngOnInit(): void {}
-
   submit() {
     this.activeModal.close(
       this.availableNetworkAdapters.filter((x) => x.selected).map((x) => x.iface),

diff --git a/ui/src/app/modules/settings/settings.component.html b/ui/src/app/modules/settings/settings.component.html
@@ -9,12 +9,59 @@ <h3 class="primary-text m-0">
 </div>
 
 <div class="mb-4">
-  <h5 class="primary-text mt-3">{{ 'settings.general.title_general' | translate }}</h5>
-  <ul class="list-group mt-2">
+  <h5 (click)="toggleSection('general')" class="primary-text mt-3 hover-pointer"
+    tabindex="0" [attr.aria-expanded]="showFields.general ? 'true' : 'false'">
+    <i class="fa fa-fw" [ngClass]="showFields.general ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
+    {{ 'settings.general.title_general' | translate }}
+  </h5>
+  <ul class="list-group list-group-box mt-2 mx-2" *ngIf="showFields.general">
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+      <span class="pe-2">
+        {{ 'menu.label_settings_ui' | translate }}
+      </span>
+      <button class="btn btn-primary waves-effect m-0 ms-3" style="min-width: 50px;" (click)="openUiSettings()">
+        <i class="fas fa-fw fa-sliders"></i>
+      </button>
+    </li>
+    <li class="list-group-item d-block d-md-flex justify-content-between align-items-center">
+      <span>{{ 'settings.language' | translate }}</span>
+      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto">
+        <select class="custom-select resp-select" [ngModel]="$settings.env.lang" (ngModelChange)="onLangChange($event)">
+          <option value="auto">Automatic (Use Browser Settings)</option>
+          <option value="bg">Bulgarian (bg)</option>
+          <option value="ca">Catalan (ca)</option>
+          <option value="zh-CN">Chinese - Simplified (zh-CN)</option>
+          <option value="zh-TW">Chinese - Traditional (zh-TW)</option>
+          <option value="cs">Czech (cs)</option>
+          <option value="nl">Dutch (nl)</option>
+          <option value="en">English (en)</option>
+          <option value="fr">French (fr)</option>
+          <option value="de">German (de)</option>
+          <option value="he">Hebrew (he)</option>
+          <option value="hu">Hungarian (hu)</option>
+          <option value="id">Indonesian (id)</option>
+          <option value="it">Italian (it)</option>
+          <option value="ja">Japanese (ja)</option>
+          <option value="ko">Korean (ko)</option>
+          <option value="mk">Macedonian (mk)</option>
+          <option value="no">Norwegian (no)</option>
+          <option value="pl">Polish (pl)</option>
+          <option value="pt-BR">Portuguese (Brazil)</option>
+          <option value="pt">Portuguese (Portugal)</option>
+          <option value="ru">Russian (ru)</option>
+          <option value="sl">Slovenian (sl)</option>
+          <option value="es">Spanish (es)</option>
+          <option value="sv">Swedish (sv)</option>
+          <option value="th">Thai (th)</option>
+          <option value="tr">Turkish (tr)</option>
+          <option value="uk">Ukrainian (uk)</option>
+        </select>
+      </div>
+    </li>
     <li class="list-group-item d-block d-md-flex justify-content-between align-items-center">
       <span>{{ 'settings.theme' | translate }}</span>
-      <div class="my-3 my-md-0 ps-0 ps-md-5 w-100" style="max-width:500px!important;">
-        <select class="custom-select" [ngModel]="$settings.theme" (ngModelChange)="onThemeChange($event)">
+      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto">
+        <select class="custom-select resp-select" [ngModel]="$settings.theme" (ngModelChange)="onThemeChange($event)">
           <option value="auto">Default (Auto Dark Mode)</option>
           <option value="red">Red</option>
           <option value="pink">Pink</option>
@@ -46,22 +93,6 @@ <h5 class="primary-text mt-3">{{ 'settings.general.title_general' | translate }}
         </select>
       </div>
     </li>
-    <li class="list-group-item d-flex justify-content-between align-items-center">
-      <span class="w-75 pe-2">
-        {{ 'menu.label_settings_ui' | translate }}
-      </span>
-      <button class="btn btn-primary waves-effect m-0 ms-3" style="min-width: 50px;" (click)="openUiSettings()">
-        <i class="fas fa-fw fa-sliders"></i>
-      </button>
-    </li>
-    <li class="list-group-item d-flex justify-content-between align-items-center">
-      <span class="w-75 pe-2">
-        {{ 'menu.config_json_editor' | translate }}
-      </span>
-      <a class="btn btn-primary waves-effect m-0 ms-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="pe-2">
         {{ 'backup.title_backup' | translate }}
@@ -91,8 +122,12 @@ <h5 class="primary-text mt-3">{{ 'settings.general.title_general' | translate }}
 
 <!-- ALL USERS -->
 <div class="mb-4">
-  <h5 class="primary-text mt-3">{{ 'settings.network.title_network' | translate }}</h5>
-  <ul class="list-group mt-2">
+  <h5 (click)="toggleSection('network')" class="primary-text mt-3 hover-pointer"
+    tabindex="0" [attr.aria-expanded]="showFields.network ? 'true' : 'false'">
+    <i class="fa fa-fw" [ngClass]="showFields.network ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
+    {{ 'settings.network.title_network' | translate }}
+  </h5>
+  <ul class="list-group list-group-box mt-2 mx-2" *ngIf="showFields.network">
     <li class="list-group-item d-flex justify-content-between align-items-center">
       <span class="w-75 pe-2">
         <div>{{ 'settings.network.title_network_interfaces' | translate }}
@@ -115,8 +150,8 @@ <h5 class="primary-text mt-3">{{ 'settings.network.title_network' | translate }}
         {{ 'settings.mdns_advertiser' | translate }}<br>
         <small class="grey-text pe-2">{{ 'settings.mdns_advertiser_help' | translate }}</small>
       </span>
-      <div class="my-3 my-md-0 ps-0 ps-md-5 w-100" style="max-width:500px!important;">
-        <select class="form-select" [formControl]="legacyMdnsFormControl"
+      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto">
+        <select class="custom-select resp-select" [formControl]="legacyMdnsFormControl"
           [attr.aria-label]="'settings.mdns_advertiser' | translate">
           <option value="bonjour-hap">Bonjour HAP</option>
           <option value="avahi" *ngIf="showAvahiMdnsOption">Avahi</option>
@@ -129,9 +164,13 @@ <h5 class="primary-text mt-3">{{ 'settings.network.title_network' | translate }}
 </div>
 
 <!-- SERVICE MODE USERS ONLY -->
-<form class="my-3" novalidate [formGroup]="serviceForm" *ngIf="$settings.env.serviceMode">
-  <h5 class="primary-text">{{ 'settings.title_startup_options' | translate }}</h5>
-  <ul class="list-group mb-4">
+<form class="my-4" novalidate [formGroup]="serviceForm" *ngIf="$settings.env.serviceMode">
+  <h5 (click)="toggleSection('startup')" class="primary-text mt-3 hover-pointer"
+    tabindex="0" [attr.aria-expanded]="showFields.startup ? 'true' : 'false'">
+    <i class="fa fa-fw" [ngClass]="showFields.startup ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
+    {{ 'settings.title_startup_options' | translate }}
+  </h5>
+  <ul class="list-group list-group-box mb-4 mx-2" *ngIf="showFields.startup">
     <li class="list-group-item d-flex justify-content-between align-items-center">
       <span class="w-75">{{ 'settings.startup.debug' | translate }} <code>-D</code></span>
       <input type="checkbox" class="rendux-input" id="homebridgeDebugMode" formControlName="HOMEBRIDGE_DEBUG"
@@ -154,9 +193,13 @@ <h5 class="primary-text">{{ 'settings.title_startup_options' | translate }}</h5>
       <label for="homebridgeKeepOrphans" class="rendux-label ms-3" style="min-width: 50px;"></label>
     </li>
   </ul>
-  <div class="mb-4" *ngIf="$settings.env.serviceMode">
-    <h5 class="primary-text">{{ 'settings.title_environment_variables' | translate }}</h5>
-    <ul class="list-group mt-2">
+  <div class="my-4">
+    <h5 (click)="toggleSection('env')" class="primary-text mt-3 hover-pointer"
+      tabindex="0" [attr.aria-expanded]="showFields.env ? 'true' : 'false'">
+      <i class="fa fa-fw" [ngClass]="showFields.env ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
+      {{ 'settings.title_environment_variables' | translate }}
+    </h5>
+    <ul class="list-group list-group-box mt-2 mx-2" *ngIf="showFields.env">
       <li class="list-group-item d-block d-md-flex justify-content-between align-items-center">
         <span>
           DEBUG<br>
@@ -180,10 +223,14 @@ <h5 class="primary-text">{{ 'settings.title_environment_variables' | translate }
 </form>
 
 <!-- ALL USERS -->
-<div class="mb-4">
-  <h5 class="primary-text mt-3">{{ 'reset.title_reset' | translate }}</h5>
-  <p class="small grey-text mb-2">{{ 'settings.reset.help' | translate }}</p>
-  <ul class="list-group mt-2">
+<div class="my-4">
+  <h5 (click)="toggleSection('reset')" class="primary-text mt-3 hover-pointer"
+    tabindex="0" [attr.aria-expanded]="showFields.reset ? 'true' : 'false'">
+    <i class="fa fa-fw" [ngClass]="showFields.reset ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
+    {{ 'reset.title_reset' | translate }}
+  </h5>
+  <p class="small grey-text mb-2 mx-2">{{ 'settings.reset.help' | translate }}</p>
+  <ul class="list-group list-group-box mt-2 mx-2" *ngIf="showFields.reset">
     <li class="list-group-item d-flex justify-content-between align-items-center">
       <span class="w-75 pe-2">
         {{ 'reset.title_unpair_bridges_cameras_tv_external_accessories' | translate }}<br/>
@@ -209,9 +256,13 @@ <h5 class="primary-text mt-3">{{ 'reset.title_reset' | translate }}</h5>
 
 <!-- SERVICE MODE USERS ONLY -->
 <div *ngIf="$settings.env.serviceMode" class="pb-3">
-  <h5 class="primary-text mt-3">{{ 'settings.title_manage_cached_accessories' | translate }}</h5>
-  <p class="small grey-text mb-2">{{ 'settings.manage_cache.help' | translate }}</p>
-  <ul class="list-group mb-4">
+  <h5 (click)="toggleSection('cache')" class="primary-text mt-3 hover-pointer"
+    tabindex="0" [attr.aria-expanded]="showFields.cache ? 'true' : 'false'">
+    <i class="fa fa-fw" [ngClass]="showFields.cache ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
+    {{ 'settings.title_manage_cached_accessories' | translate }}
+  </h5>
+  <p class="small grey-text mb-2 mx-2">{{ 'settings.manage_cache.help' | translate }}</p>
+  <ul class="list-group list-group-box mb-4 mx-2" *ngIf="showFields.cache">
     <li class="list-group-item d-flex justify-content-between align-items-center">
       <span class="w-75 pe-2">
         {{ 'reset.title_clear_cached_accessories_single' | translate }}<br>