various ui updates

homebridge · Dec 2, 2023 · 268f692 · 268f692
1 parent d4802ca
commit 268f692
Show file tree

Hide file tree

Showing 43 changed files with 160 additions and 119 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/app/core/accessories/types/door/door.component.html b/ui/src/app/core/accessories/types/door/door.component.html
@@ -1,4 +1,4 @@
-<div class="accessory-box" [ngClass]="{'switch-on': service.values.TargetPosition}" appLongclick
+<div class="accessory-box" [ngClass]="{'window-on': service.values.TargetPosition}" appLongclick
   (longclick)="onLongClick()" (shortclick)="onClick()" tabindex="0">
   <div class="d-flex flex-column h-100">
     <div *ngIf="!service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/door-closed.svg'" aria-label="Door "
@@ -9,7 +9,7 @@
     <div class="accessory-label grey-text" *ngIf="service.values.PositionState === 2">
       <span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span>
       <span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100">
-        {{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }}
+        {{ service.values.CurrentPosition }}%
       </span>
       <span *ngIf="service.values.CurrentPosition === 100">{{ 'accessories.control.label_open' | translate }}</span>
     </div>
@@ -20,4 +20,4 @@
       {{ 'accessories.control.label_closing' | translate }}...
     </div>
   </div>
-</div>
+</div>
diff --git a/ui/src/app/core/accessories/types/window/window.component.html b/ui/src/app/core/accessories/types/window/window.component.html
@@ -1,4 +1,4 @@
-<div class="accessory-box" [ngClass]="{'switch-on': service.values.TargetPosition}" appLongclick
+<div class="accessory-box" [ngClass]="{'window-on': service.values.TargetPosition}" appLongclick
   (longclick)="onLongClick()" (shortclick)="onClick()" tabindex="0">
   <div class="d-flex flex-column h-100">
     <div *ngIf="!service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/window-closed.svg'" aria-label="Window "
@@ -9,7 +9,7 @@
     <div class="accessory-label grey-text" *ngIf="service.values.PositionState === 2">
       <span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span>
       <span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100">
-        {{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }}
+        {{ service.values.CurrentPosition }}%
       </span>
       <span *ngIf="service.values.CurrentPosition === 100">{{ 'accessories.control.label_open' | translate }}</span>
     </div>
@@ -20,4 +20,4 @@
       {{ 'accessories.control.label_closing' | translate }}...
     </div>
   </div>
-</div>
+</div>
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
@@ -9,7 +9,7 @@
     <div class="accessory-label grey-text" *ngIf="service.values.PositionState === 2">
       <span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span>
       <span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100">
-        {{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }}
+        {{ service.values.CurrentPosition }}%
       </span>
       <span *ngIf="service.values.CurrentPosition === 100">{{ 'accessories.control.label_open' | translate }}</span>
     </div>

diff --git a/ui/src/app/modules/plugins/plugin-card/plugin-card.component.html b/ui/src/app/modules/plugins/plugin-card/plugin-card.component.html
@@ -3,25 +3,24 @@
   <div class="d-flex flex-row justify-content-between">
     <div class="d-flex flex-column mr-3 align-items-center justify-content-between">
       <img [src]="plugin.icon" (error)="handleIconError()" alt="" class="plugin-icon-card mb-3">
-      <a href="javascript:void(0)" (click)="pluginInfoModal(plugin)">
-        <i class="fas fa-fw fa-info-circle fa-lg grey-text"></i>
-      </a>
     </div>
-    <div class="d-flex flex-column justify-content-between w-100 text-truncate">
-      <h5 class="card-title mb-2">
-        {{ plugin.displayName || ((plugin.name.charAt(0) === '@' ? plugin.name.split('/')[1] : plugin.name) |
+    <div class="d-flex flex-column justify-content-between" style="width: calc(100% - 80px)">
+      <h5 class="card-title mb-2 text-truncate">
+        <a href="javascript:void(0)" (click)="pluginInfoModal(plugin)">
+          <i class="fas fa-fw fa-info-circle grey-text fa-sm mr-1"></i>
+        </a>{{ plugin.displayName || ((plugin.name.charAt(0) === '@' ? plugin.name.split('/')[1] : plugin.name) |
         replace:'-':' ' | titlecase) }}
       </h5>
       <div class="d-flex flex-row align-items-end">
-        <div class="d-flex flex-column w-100 text-truncate">
-          <p class="card-text mb-2">
+        <div class="d-flex flex-column w-100">
+          <p class="card-text mb-2 text-truncate">
             <a href="javascript:void(0)" class="card-link pink-text text-decoration-none" *ngIf="plugin.verifiedPlugin && plugin.funding"
                (click)="openFundingModal(plugin)" ngbTooltip="{{ 'plugins.donate.button_donate' | translate }}">
               <i class="fas fa-fw fa-heart fa-lg"></i>
             </a>
             <span *ngIf="!plugin.verifiedPlugin || !plugin.funding" ngbTooltip="@{{ plugin.author }}">
-            <i class="fas fa-fw fa-heart fa-lg" style="opacity: 0.5;"></i>
-          </span>
+              <i class="fas fa-fw fa-heart fa-lg" style="opacity: 0.5;"></i>
+            </span>
             {{ plugin.name }}
           </p>
           <p class="card-text mb-2" *ngIf="plugin.verifiedPlugin">
@@ -36,7 +35,7 @@ <h5 class="card-title mb-2">
           </p>
           <div class="d-flex flex-row">
             <p class="card-text mb-0">
-              <i class="far fa-fw fa-circle-check fa-lg" *ngIf="plugin.installedVersion && !plugin.updateAvailable && !plugin.betaUpdateAvailable && !plugin.disabled"
+              <i class="far fa-fw fa-circle-check fa-lg card-text-defined" *ngIf="plugin.installedVersion && !plugin.updateAvailable && !plugin.betaUpdateAvailable && !plugin.disabled"
                 [ngbTooltip]="'plugins.status_installed' | translate" container="body"></i>
               <i class="far fa-fw fa-circle fa-lg grey-text" *ngIf="!plugin.installedVersion"
                 [ngbTooltip]="'plugins.status_not_installed' | translate" container="body"></i>
@@ -45,18 +44,18 @@ <h5 class="card-title mb-2">
                 [ngbTooltip]="'plugins.status_update_available' | translate" container="body">
                 <i class="far fa-fw fa-arrow-alt-circle-up fa-lg primary-text"></i>
               </a>
-              <i class="far fa-fw fa-times-circle fa-lg red-text" *ngIf="plugin.installedVersion && plugin.disabled"
+              <i class="far fa-fw fa-pause-circle fa-lg red-text" *ngIf="plugin.installedVersion && plugin.disabled"
                 [ngbTooltip]="'plugins.status_disabled' | translate" container="body"></i>
               <span *ngIf="plugin.installedVersion"> {{ 'plugins.status_installed' | translate }}: </span>
               v{{ plugin.installedVersion || plugin.latestVersion }}
               <span *ngIf="!plugin.installedVersion && plugin.lastUpdated">({{ plugin.lastUpdated | date:'yyyy-MM-dd' }})</span>
             </p>
             <div class="ml-auto">
               <ng-container *ngIf="hasChildBridges">
-                <i class="fas fa-fw fa-circle fa-lg ml-3" [ngClass]="{
-                  'green-text': childBridgeStatus === 'ok',
-                  'text-warning': childBridgeStatus === 'pending',
-                  'red-text': childBridgeStatus === 'down'
+                <i class="fas fa-fw fa-lg ml-3" [ngClass]="{
+                  'fa-bridge-circle-check green-text': childBridgeStatus === 'ok',
+                  'fa-bridge-circle-exclamation text-warning': childBridgeStatus === 'pending',
+                  'fa-bridge-circle-xmark red-text': childBridgeStatus === 'down'
                 }" [hidden]="childBridgeRestartInProgress"></i>
                 <i [hidden]="!childBridgeRestartInProgress" class="ml-3 grey-text fas fa-fw fa-spinner fa-pulse"></i>
               </ng-container>

diff --git a/ui/src/app/modules/status/default-dashboard-layout.json b/ui/src/app/modules/status/default-dashboard-layout.json
@@ -1,7 +1,7 @@
 [
   {
     "x": 0,
-    "y": 8,
+    "y": 9,
     "component": "HomebridgeStatusWidgetComponent",
     "cols": 5,
     "rows": 6,
@@ -11,7 +11,7 @@
   },
   {
     "x": 15,
-    "y": 8,
+    "y": 9,
     "component": "ChildBridgeWidgetComponent",
     "cols": 5,
     "rows": 6,
@@ -20,7 +20,7 @@
   },
   {
     "x": 5,
-    "y": 8,
+    "y": 9,
     "component": "CpuWidgetComponent",
     "cols": 5,
     "rows": 3,
@@ -29,7 +29,7 @@
   },
   {
     "x": 5,
-    "y": 11,
+    "y": 12,
     "component": "MemoryWidgetComponent",
     "cols": 5,
     "rows": 3,
@@ -38,7 +38,7 @@
   },
   {
     "x": 10,
-    "y": 11,
+    "y": 12,
     "component": "NetworkWidgetComponent",
     "cols": 5,
     "rows": 3,
@@ -47,7 +47,7 @@
   },
   {
     "x": 10,
-    "y": 8,
+    "y": 9,
     "component": "UptimeWidgetComponent",
     "cols": 5,
     "rows": 3,
@@ -59,7 +59,7 @@
     "y": 0,
     "component": "SystemInfoWidgetComponent",
     "cols": 5,
-    "rows": 8,
+    "rows": 9,
     "mobileOrder": 70,
     "hideOnMobile": false
   },
@@ -68,7 +68,7 @@
     "y": 0,
     "component": "HapQrcodeWidgetComponent",
     "cols": 5,
-    "rows": 8,
+    "rows": 9,
     "mobileOrder": 100,
     "hideOnMobile": false
   },
@@ -77,8 +77,8 @@
     "y": 0,
     "component": "HomebridgeLogsWidgetComponent",
     "cols": 10,
-    "rows": 8,
+    "rows": 9,
     "mobileOrder": 1000,
     "hideOnMobile": true
   }
-]
+]
diff --git a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.html b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.html
@@ -9,9 +9,9 @@
         <div class="flex-child">
 
           <i class="fas fa-fw fa-circle mr-1" [ngClass]="{
-            'green-text': bridge.status === 'ok',
-            'text-warning': bridge.status === 'pending',
-            'red-text': bridge.status === 'down'
+            'fa-bridge-circle-check green-text': bridge.status === 'ok',
+            'fa-bridge-circle-exclamation text-warning': bridge.status === 'pending',
+            'fa-bridge-circle-xmark red-text': bridge.status === 'down'
           }"></i>
           {{ bridge.name }}
         </div>

diff --git a/...p/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.scss b/...p/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.scss
@@ -1,5 +1,5 @@
 .hb-status-icon {
-  font-size: 40px;
+  font-size: 35px;
 }
 
 .hb-status-item {

diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
@@ -17,6 +17,12 @@ <h5 class="primary-text mt-3">{{ 'support.useful_links.title' | translate }}</h5
         <i class="fas fa-fw fa-external-link-alt"></i>
       </a>
     </li>
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+      <span class="pr-2">{{ 'support.useful_links.reddit' | translate }}</span>
+      <a class="btn btn-primary waves-effect m-0" href="https://www.reddit.com/r/homebridge/" target="_blank" rel="noopener noreferrer">
+        <i class="fas fa-fw fa-external-link-alt"></i>
+      </a>
+    </li>
   </ul>
 </div>
 

diff --git a/ui/src/app/modules/users/users-add/users-add.component.html b/ui/src/app/modules/users/users-add/users-add.component.html
@@ -20,26 +20,20 @@ <h5 class="modal-title">{{ 'users.title_add_user' | translate }}</h5>
         <label for="form-name" [ngClass]="{'active': page.title === 'users.title_edit_user'}"
           [translate]="'users.label_full_name'">Full Name</label>
       </div>
-      <div class="row pb-3">
-        <div class="col-md-6">
-          <div class="md-form">
-            <i class="fas fa-fw fa-lock prefix grey-text"></i>
-            <input formControlName="password" type="password" autocomplete="new-password" id="form-pass"
-              class="form-control pl-0 pr-0" [ngClass]="{
-                'is-invalid': form.controls.password.dirty && form.controls.password.errors
-              }">
-            <label for="form-pass" [innerText]="page.password | translate"></label>
-          </div>
-        </div>
-        <div class="col-md-6">
-          <div class="md-form">
-            <input formControlName="passwordConfirm" type="password" autocomplete="new-password" id="form-pass-confirm"
-              class="form-control pl-0 pr-0" [ngClass]="{
-                'is-invalid': form.controls.passwordConfirm.dirty && form.controls.passwordConfirm.errors
-              }">
-            <label for="form-pass-confirm" [translate]="'users.label_confirm_password'"></label>
-          </div>
-        </div>
+      <div class="md-form">
+        <i class="fas fa-fw fa-lock prefix grey-text"></i>
+        <input formControlName="password" type="password" autocomplete="new-password" id="form-pass"
+          class="form-control pl-0 pr-0" [ngClass]="{
+            'is-invalid': form.controls.password.dirty && form.controls.password.errors
+          }">
+        <label for="form-pass" [innerText]="page.password | translate"></label>
+      </div>
+      <div class="md-form" style="margin-left: 38px;">
+        <input formControlName="passwordConfirm" type="password" autocomplete="new-password" id="form-pass-confirm"
+          class="form-control pl-0 pr-0" [ngClass]="{
+            'is-invalid': form.controls.passwordConfirm.dirty && form.controls.passwordConfirm.errors
+          }">
+        <label for="form-pass-confirm" [translate]="'users.label_confirm_password'"></label>
       </div>
       <div class="form-check text-center">
         <input formControlName="admin" type="checkbox" class="form-check-input" id="isAdmin">

diff --git a/ui/src/app/modules/users/users-edit/users-edit.component.html b/ui/src/app/modules/users/users-edit/users-edit.component.html
@@ -21,29 +21,21 @@ <h5 class="modal-title">{{ 'users.title_edit_user' | translate }}</h5>
         <label for="form-name" [ngClass]="{'active': page.title === 'users.title_edit_user'}"
           [translate]="'users.label_full_name'">Full Name</label>
       </div>
-
-      <div class="row pb-3">
-        <div class="col-md-6">
-          <div class="md-form">
-            <i class="fas fa-fw fa-lock prefix grey-text"></i>
-            <input formControlName="password" type="password" autocomplete="new-password" id="form-pass"
-              class="form-control pl-0 pr-0" [ngClass]="{
-                'is-invalid': form.controls.password.dirty && form.controls.password.errors
-              }">
-            <label for="form-pass" [innerText]="page.password | translate"></label>
-          </div>
-        </div>
-        <div class="col-md-6">
-          <div class="md-form">
-            <input formControlName="passwordConfirm" type="password" autocomplete="new-password" id="form-pass-confirm"
-              class="form-control pl-0 pr-0" [ngClass]="{
-                'is-invalid': form.controls.passwordConfirm.dirty && form.controls.passwordConfirm.errors
-              }">
-            <label for="form-pass-confirm" [translate]="'users.label_confirm_password'"></label>
-          </div>
-        </div>
+      <div class="md-form">
+        <i class="fas fa-fw fa-lock prefix grey-text"></i>
+        <input formControlName="password" type="password" autocomplete="new-password" id="form-pass"
+          class="form-control pl-0 pr-0" [ngClass]="{
+            'is-invalid': form.controls.password.dirty && form.controls.password.errors
+          }">
+        <label for="form-pass" [innerText]="page.password | translate"></label>
+      </div>
+      <div class="md-form" style="margin-left: 38px;">
+        <input formControlName="passwordConfirm" type="password" autocomplete="new-password" id="form-pass-confirm"
+          class="form-control pl-0 pr-0" [ngClass]="{
+            'is-invalid': form.controls.passwordConfirm.dirty && form.controls.passwordConfirm.errors
+          }">
+        <label for="form-pass-confirm" [translate]="'users.label_confirm_password'"></label>
       </div>
-
       <div class="form-check text-center">
         <input formControlName="admin" type="checkbox" class="form-check-input" id="isAdmin">
         <label class="form-check-label" for="isAdmin" [translate]="'users.label_admin_user'">Admin User?</label>