refactor main page sub-icons

CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to homebridge-config-ui-x will be documented in this file.
 - various ui enhancements
 - add modal to explain unverified plugin status
 - various minor ui changes (@mkz212)
+- refactor main page sub-icons
 
 ### Translation Changes
 

package.json

@@ -99,7 +99,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.10",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^18.19.0",
+    "@types/node": "^18.19.1",
     "@types/node-schedule": "^2.1.4",
     "@types/passport-jwt": "^3.0.13",
     "@types/semver": "^7.5.6",
@@ -119,7 +119,7 @@
     "eslint-plugin-sort-exports": "^0.8.0",
     "form-data": "^4.0.0",
     "jest": "^29.7.0",
-    "nodemon": "^3.0.1",
+    "nodemon": "^3.0.2",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.1",

ui/package.json

@@ -71,7 +71,7 @@
     "@types/emoji-js": "^3.5.2",
     "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^18.19.0",
+    "@types/node": "^18.19.1",
     "@types/qrcode": "^1.5.5",
     "@types/semver": "^7.5.6",
     "@types/socket.io-client": "^3.0.0",

ui/src/app/core/accessories/accessory-tile/accessory-tile.component.ts

@@ -14,6 +14,5 @@ export class AccessoryTileComponent implements OnInit {
     public $accessories: AccessoriesService,
   ) {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 }

ui/src/app/core/accessories/types/airqualitysensor/airqualitysensor.component.ts

@@ -13,6 +13,5 @@ export class AirqualitysensorComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts

@@ -11,6 +11,5 @@ export class ContactsensorComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts

@@ -11,6 +11,5 @@ export class HumiditysensorComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts

@@ -11,6 +11,5 @@ export class LeaksensorComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts

@@ -11,6 +11,5 @@ export class LightsensorComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts

@@ -11,6 +11,5 @@ export class MotionsensorComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts

@@ -11,6 +11,5 @@ export class SmokesensorComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts

@@ -11,6 +11,5 @@ export class StatelessprogrammableswitchComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts

@@ -11,6 +11,5 @@ export class TemperaturesensorComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/accessories/types/unknown/unknown.component.ts

@@ -11,6 +11,5 @@ export class UnknownComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/components/spinner/spinner.component.ts

@@ -9,6 +9,5 @@ export class SpinnerComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/core/manage-plugins/node-update-required-modal/node-update-required-modal.component.html

@@ -67,7 +67,7 @@ <h5 class="modal-title">{{'plugins.node_update.title' | translate}}</h5>
     </div>
     <div class="text-right">
       <button *ngIf="!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)" type="button" class="btn btn-danger" data-dismiss="modal"
-              (click)="activeModal.close(true);">
+        (click)="activeModal.close(true);">
         {{'plugins.node_update.update_anyway' | translate}}
       </button>
     </div>

ui/src/app/core/manage-plugins/plugin-log-modal/plugin-log-modal.component.html

@@ -9,4 +9,13 @@ <h5 class="modal-title">Logs: {{ plugin.displayName || plugin.name }}</h5>
   <div class="modal-body d-flex flex-row flex-grow-1 w-100 p-0">
     <div #pluginlogoutput class="w-100 bg-black plugin-log-output terminal align-self-end w-100 h-100 mb-0 p-2"></div>
   </div>
+  <div class="modal-footer justify-content-between">
+    <div class="text-left"> </div>
+    <div class="text-center">
+      <button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="activeModal.dismiss('Dismiss')">
+        {{ 'form.button_close' | translate }}
+      </button>
+    </div>
+    <div class="text-right"></div>
+  </div>
 </div>

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

@@ -4,21 +4,22 @@
       <h3 class="primary-text m-0">{{'accessories.title_accessories' | translate}}</h3>
     </div>
     <div class="col-sm-6 text-right d-none d-sm-block">
-      <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-        <div class="btn-group" role="group">
-          <button id="accessory-dropdown-menu" type="button" class="btn btn-primary dropdown-toggle m-0"
-            data-toggle="dropdown">
-            <i class="fas fa-fw fa-cog"></i>
-          </button>
-          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="accessory-dropdown-menu">
-            <a href="javascript:void(0)" class="dropdown-item" (click)="addRoom()"
-              [translate]="'accessories.button_add_room'">Add Room</a>
-            <a href="javascript:void(0)" class="dropdown-item" (click)="hideHidden = !hideHidden"
-              [translate]="'accessories.button_toggle_hidden'">Toggle Hidden</a>
-            <a href="javascript:void(0)" class="dropdown-item" (click)="toggleLayoutLock()"
-              [translate]="'accessories.button_toggle_layout_lock'">Toggle Layout Lock</a>
-          </div>
-        </div>
+      <div class="btn-group" role="group">
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="!isMobile" (click)="toggleLayoutLock()">
+          <i class="fas fa-fw fa-unlock"></i>
+        </button>
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="isMobile" (click)="toggleLayoutLock()">
+          <i class="fas fa-fw fa-lock"></i>
+        </button>
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="isMobile || !hideHidden" (click)="hideHidden = !hideHidden">
+          <i class="fas fa-fw fa-eye"></i>
+        </button>
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="isMobile || hideHidden" (click)="hideHidden = !hideHidden">
+          <i class="fas fa-fw fa-eye-slash"></i>
+        </button>
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="isMobile" (click)="addRoom()">
+          <i class="fas fa-fw fa-plus"></i>
+        </button>
       </div>
     </div>
   </div>

ui/src/app/modules/accessories/accessories.component.ts

@@ -89,11 +89,9 @@ export class AccessoriesComponent implements OnInit, OnDestroy {
     if (this.isMobile) {
       // layout locked
       window.localStorage.setItem('accessories-layout-locked', 'yes');
-      this.$toastr.success(this.translate.instant('accessories.layout_locked'), this.translate.instant('accessories.title_accessories'));
     } else {
       // layout unlocked
       window.localStorage.removeItem('accessories-layout-locked');
-      this.$toastr.success(this.translate.instant('accessories.layout_unlocked'), this.translate.instant('accessories.title_accessories'));
     }
   }
 

ui/src/app/modules/accessories/add-room-modal/add-room-modal.component.ts

@@ -12,6 +12,5 @@ export class AddRoomModalComponent implements OnInit {
     public activeModal: NgbActiveModal,
   ) {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts

@@ -9,6 +9,5 @@ export class DragHerePlaceholderComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }

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

@@ -5,17 +5,19 @@
       <h3 class="primary-text m-0">{{ 'config.title_config' | translate }}</h3>
     </div>
     <div class="col-6 text-right">
-      <button class="btn btn-elegant waves-effect m-0 mr-2" (click)="onRestore()" container="body"
-        ngbTooltip="{{ 'config.button_restore' | translate }}"><i class="fas fa-fw fa-fw fa-history"></i></button>
-      <button class="btn btn-elegant waves-effect m-0 mr-2" (click)="onExportConfig()" container="body"
-        ngbTooltip="{{ 'logs.label_download' | translate }}"><i class="fas fa-fw fa-download"></i></button>
-      <button class="btn btn-danger waves-effect m-0 mr-2" (click)="onCancelRestore()" [disabled]="saveInProgress"
-        *ngIf="originalConfig" container="body" ngbTooltip="{{ 'form.button_cancel' | translate }}"><i class="fas fa-fw fa-times"></i></button>
-      <button class="btn btn-primary waves-effect m-0" (click)="onSave()" [disabled]="saveInProgress" container="body"
-        ngbTooltip="{{ 'form.button_save' | translate }}">
-        <i *ngIf="!saveInProgress" class="fas fa-fw fa-floppy-disk"></i>
-        <i *ngIf="saveInProgress" class="fas fa-fw fa-spinner fa-pulse"></i>
-      </button>
+      <div class="btn-group" role="group">
+        <button class="btn btn-danger waves-effect my-0" (click)="onCancelRestore()" [disabled]="saveInProgress"
+          *ngIf="originalConfig" container="body" ngbTooltip="{{ 'form.button_cancel' | translate }}"><i class="fas fa-fw fa-times"></i></button>
+        <button class="btn btn-elegant waves-effect my-0" (click)="onRestore()" container="body"
+          ngbTooltip="{{ 'config.button_restore' | translate }}"><i class="fas fa-fw fa-fw fa-history"></i></button>
+        <button class="btn btn-elegant waves-effect my-0" (click)="onExportConfig()" container="body"
+          ngbTooltip="{{ 'logs.label_download' | translate }}"><i class="fas fa-fw fa-download"></i></button>
+        <button class="btn btn-primary waves-effect my-0 mr-0" (click)="onSave()" [disabled]="saveInProgress" container="body"
+          ngbTooltip="{{ 'form.button_save' | translate }}">
+          <i *ngIf="!saveInProgress" class="fas fa-fw fa-floppy-disk"></i>
+          <i *ngIf="saveInProgress" class="fas fa-fw fa-spinner fa-pulse"></i>
+        </button>
+      </div>
     </div>
   </div>
 

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

@@ -3,14 +3,14 @@
     <h3 class="primary-text m-0">{{ 'menu.linux.label_logs' | translate }}</h3>
   </div>
   <div class="col-6 text-right">
-    <button class="btn btn-elegant m-0 mr-2" (click)="downloadLogFile()" container="body"
-      ngbTooltip="{{ 'logs.label_download' | translate }}">
-      <i class="fas fa-fw fa-download"></i>
-    </button>
-    <button class="btn btn-danger m-0" (click)="truncateLogFile()" container="body"
-      ngbTooltip="{{ 'logs.title_truncate_log_file' | translate }}">
-      <i class="fas fa-fw fa-trash-alt"></i>
-    </button>
+    <div class="btn-group" role="group">
+      <button class="btn btn-elegant my-0" (click)="downloadLogFile()">
+        <i class="fas fa-fw fa-download"></i>
+      </button>
+      <button class="btn btn-elegant my-0 mr-0" (click)="truncateLogFile()">
+        <i class="fas fa-fw fa-trash-alt"></i>
+      </button>
+    </div>
   </div>
 </div>
 

ui/src/app/modules/platform-tools/linux/linux.component.ts

@@ -9,6 +9,5 @@ export class LinuxComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }