fix long press on mobile devices

homebridge · Jan 24, 2025 · 4e8289a · 4e8289a
1 parent 0ce2493
commit 4e8289a
Show file tree

Hide file tree

Showing 17 changed files with 81 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -42,6 +42,7 @@ Plugin developers:
 - fix plugin config/bridge screens for certain plugins
 - add lighting mode option for terminal and log widgets
   - only available when the UI is already in light mode
+- fix long press on mobile devices
 
 ### Other Changes
 

diff --git a/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.html b/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.html
@@ -23,17 +23,17 @@ <h5>
     >
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(0)"
-        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 0, 'btn-elegant': targetMode !== 0 }"
       >
         {{ 'accessories.control.off' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(1)"
-        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 1, 'btn-elegant': targetMode !== 1 }"
       >
         {{ 'accessories.control.on' | translate }}
       </button>

diff --git a/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.ts b/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common'
 import { Component, inject, Input, OnInit } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -17,6 +18,7 @@ import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
     FormsModule,
     NouisliderComponent,
     TranslatePipe,
+    NgClass,
   ],
 })
 export class AirpurifierManageComponent implements OnInit {

diff --git a/ui/src/app/core/accessories/types/fan/fan.manage.component.html b/ui/src/app/core/accessories/types/fan/fan.manage.component.html
@@ -20,17 +20,17 @@ <h5>
     <div class="btn-group-vertical d-flex justify-content-center mb-4 p-0" role="group" aria-label="Fan Mode Control">
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(false)"
-        [style.opacity]="!targetMode ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': !targetMode, 'btn-elegant': targetMode }"
       >
         {{ 'accessories.control.off' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(true)"
-        [style.opacity]="targetMode ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode, 'btn-elegant': !targetMode }"
       >
         {{ 'accessories.control.on' | translate }}
       </button>

diff --git a/ui/src/app/core/accessories/types/fan/fan.manage.component.ts b/ui/src/app/core/accessories/types/fan/fan.manage.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common'
 import { Component, inject, Input, OnInit } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -16,6 +17,7 @@ import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
     FormsModule,
     NouisliderComponent,
     TranslatePipe,
+    NgClass,
   ],
 })
 export class FanManageComponent implements OnInit {

diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
@@ -20,17 +20,17 @@ <h5>
     <div class="btn-group-vertical d-flex justify-content-center mb-4 p-0" role="group" aria-label="Fan Mode Control">
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(0)"
-        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 0, 'btn-elegant': targetMode !== 0 }"
       >
         {{ 'accessories.control.off' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(1)"
-        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 1, 'btn-elegant': targetMode !== 1 }"
       >
         {{ 'accessories.control.on' | translate }}
       </button>

diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common'
 import { Component, inject, Input, OnInit } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -16,6 +17,7 @@ import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
     FormsModule,
     NouisliderComponent,
     TranslatePipe,
+    NgClass,
   ],
 })
 export class Fanv2ManageComponent implements OnInit {

diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
@@ -27,33 +27,33 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
     >
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(0)"
-        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 0, 'btn-elegant': targetMode !== 0 }"
       >
         {{ 'accessories.control.auto' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(1)"
-        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 1, 'btn-elegant': targetMode !== 1 }"
       >
         {{ 'accessories.control.heat' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(2)"
-        [style.opacity]="targetMode === 2 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 2, 'btn-elegant': targetMode !== 2 }"
       >
         {{ 'accessories.control.cool' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode('off')"
-        [style.opacity]="targetMode === 'off' ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 'off', 'btn-elegant': targetMode !== 'off' }"
       >
         {{ 'accessories.control.off' | translate }}
       </button>

diff --git a/...ore/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html b/...ore/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
@@ -28,33 +28,33 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
     >
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(0)"
-        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 0, 'btn-elegant': targetMode !== 0 }"
       >
         {{ 'accessories.control.auto' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(1)"
-        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 1, 'btn-elegant': targetMode !== 1 }"
       >
         {{ 'accessories.control.humidifying' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(2)"
-        [style.opacity]="targetMode === 2 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 2, 'btn-elegant': targetMode !== 2 }"
       >
         {{ 'accessories.control.dehumidifying' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode('off')"
-        [style.opacity]="targetMode === 'off' ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 'off', 'btn-elegant': targetMode !== 'off' }"
       >
         {{ 'accessories.control.off' | translate }}
       </button>

diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
@@ -24,17 +24,17 @@ <h5>
     >
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(false)"
-        [style.opacity]="!targetMode ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': !targetMode, 'btn-elegant': targetMode }"
       >
         {{ 'accessories.control.off' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(true)"
-        [style.opacity]="targetMode ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode, 'btn-elegant': !targetMode }"
       >
         {{ 'accessories.control.on' | translate }}
       </button>

diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common'
 import { Component, inject, Input, OnInit } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -16,6 +17,7 @@ import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
     FormsModule,
     NouisliderComponent,
     TranslatePipe,
+    NgClass,
   ],
 })
 export class LightbulbManageComponent implements OnInit {

diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.html b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.html
@@ -17,33 +17,33 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
     >
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(0)"
-        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 0, 'btn-elegant': targetMode !== 0 }"
       >
         {{ 'accessories.control.home' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(1)"
-        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 1, 'btn-elegant': targetMode !== 1 }"
       >
         {{ 'accessories.control.away' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(2)"
-        [style.opacity]="targetMode === 2 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 2, 'btn-elegant': targetMode !== 2 }"
       >
         {{ 'accessories.control.night' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(3)"
-        [style.opacity]="targetMode === 3 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 3, 'btn-elegant': targetMode !== 3 }"
       >
         {{ 'accessories.control.off' | translate }}
       </button>

diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common'
 import { Component, inject, Input, OnInit } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -9,7 +10,7 @@ import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
   selector: 'app-securitysystem.manage',
   templateUrl: './securitysystem.manage.component.html',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, NgClass],
 })
 export class SecuritysystemManageComponent implements OnInit {
   $activeModal = inject(NgbActiveModal)

diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
@@ -23,17 +23,17 @@ <h5>
     >
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(false)"
-        [style.opacity]="!targetMode ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': !targetMode, 'btn-elegant': targetMode }"
       >
         {{ 'accessories.control.not_mute' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(true)"
-        [style.opacity]="targetMode ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode, 'btn-elegant': !targetMode }"
       >
         {{ 'accessories.control.mute' | translate }}
       </button>

diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common'
 import { Component, inject, Input, OnInit } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -16,6 +17,7 @@ import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
     FormsModule,
     NouisliderComponent,
     TranslatePipe,
+    NgClass,
   ],
 })
 export class SpeakerManageComponent implements OnInit {

diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.html b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.html
@@ -27,33 +27,33 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
     >
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(0)"
-        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 0, 'btn-elegant': targetMode !== 0 }"
       >
         {{ 'accessories.control.off' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(1)"
-        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 1, 'btn-elegant': targetMode !== 1 }"
       >
         {{ 'accessories.control.heat' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(2)"
-        [style.opacity]="targetMode === 2 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 2, 'btn-elegant': targetMode !== 2 }"
       >
         {{ 'accessories.control.cool' | translate }}
       </button>
       <button
         type="button"
-        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        class="btn mb-0 mx-0 px-0 py-3"
         (click)="setTargetMode(3)"
-        [style.opacity]="targetMode === 3 ? '1' : '0.75'"
+        [ngClass]="{ 'btn-primary': targetMode === 3, 'btn-elegant': targetMode !== 3 }"
       >
         {{ 'accessories.control.auto' | translate }}
       </button>