add new concept for plugin card with icons

CHANGELOG.md

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

package.json

@@ -111,7 +111,7 @@
     "@typescript-eslint/parser": "^6.13.1",
     "babel-jest": "^29.7.0",
     "concurrently": "^8.2.2",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-import-newlines": "^1.3.4",

ui/package.json

@@ -79,7 +79,7 @@
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "dragula": "^3.7.3",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-import-newlines": "^1.3.4",

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

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  selector: 'app-confirm',
+  selector: 'app-information',
   templateUrl: './information.component.html',
   styleUrls: ['./information.component.scss'],
 })

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

@@ -68,7 +68,7 @@ <h5 class="primary-text">
                   [disabled]="restartInProgress[item._bridge?.username]"
                   ngbTooltip="{{'menu.tooltip_restart' | translate}}" container="body" openDelay="150"
                   (click)="restartChildBridge(item._bridge?.username)">
-                  <i class="fas fa-fw fa-fw nav-menu-icon" [ngClass]="{
+                  <i class="fas fa-fw nav-menu-icon" [ngClass]="{
                     'fa-power-off': !restartInProgress[item._bridge?.username],
                     'fa-spinner fa-pulse': restartInProgress[item._bridge?.username]
                   }"></i>

ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html

@@ -24,7 +24,7 @@ <h5 class="modal-title">
 
   <div class="modal-body" style="min-height: 110px;" [hidden]="justSavedAndExited">
     <div *ngIf="loading" class="text-center primary-text">
-      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 72px;"></i>
+      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 75px;"></i>
     </div>
 
     <iframe width="100%" height="1px;" #custompluginui
@@ -54,7 +54,7 @@ <h5 class="modal-title">
 
     <div *ngIf="pluginSpinner"
          class="loading-overlay text-center primary-text d-flex align-items-center justify-content-center">
-      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 72px;"></i>
+      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 75px;"></i>
     </div>
   </div>
 

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

@@ -1,6 +1,6 @@
 <div class="modal-content">
   <div class="modal-header">
-    <h5 class="modal-title" translate="plugins.donate.tile_donate_to" [translateParams]="{author: plugin.author || plugin.name}">
+    <h5 class="modal-title" translate="plugins.donate.tile_donate_to" [translateParams]="{author: plugin.author ? '@' + plugin.author : plugin.name }">
     </h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.dismiss('Dismiss')">
       <span aria-hidden="true">&times;</span>

ui/src/app/core/manage-plugins/donate-modal/donate-modal.component.ts

@@ -67,9 +67,9 @@ export class DonateModalComponent implements OnInit {
         return 'fab fa-fw fa-patreon';
       case 'kofi':
       case 'ko-fi':
-        return 'fas fa-fw fa-fw fa-coffee';
+        return 'fas fa-fw fa-coffee';
       default:
-        return 'fas fa-fw fa-fw fa-link';
+        return 'fas fa-fw fa-link';
     }
   }
 }

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

@@ -10,7 +10,7 @@ <h5 class="modal-title">
   </div>
   <div class="modal-body">
     <div *ngIf="loading" class="text-center primary-text">
-      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 72px;"></i>
+      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 75px;"></i>
     </div>
 
     <div *ngIf="!loading && !canConfigure">

ui/src/app/core/manage-plugins/select-previous-version/select-previous-version.component.html

@@ -8,10 +8,11 @@ <h5 class="modal-title">{{'plugins.manage.label_install' | translate}}: {{ plugi
   </div>
   <div class="modal-body d-flex flex-row flex-grow-1 w-100">
     <div *ngIf="loading" class="w-100 text-center primary-text">
-      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 72px;"></i>
+      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 75px;"></i>
     </div>
     <div class="w-100 text-center" *ngIf="!loading">
-      <i class="fas fa-fw fa-history primary-text mb-4" style="font-size: 75px;"></i>
+      <i *ngIf="plugin.installedVersion" class="fas fa-fw fa-history primary-text mb-4" style="font-size: 75px;"></i>
+      <i *ngIf="!plugin.installedVersion" class="far fa-fw fa-arrow-alt-circle-down primary-text mb-4" style="font-size: 75px;"></i>
       <p>
         {{ 'plugins.manage.message_select_version_to_install' | translate }}:
       </p>

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

@@ -13,17 +13,19 @@ <h5 class="modal-title">
     <div>
       <markdown class="plugin-md" [data]="schema.headerDisplay | interpolateMd" *ngIf="schema.headerDisplay"></markdown>
     </div>
-    <div class="text-right mb-4" *ngIf="plugin.name === 'homebridge-config-ui-x'">
-      <button class="btn btn-elegant" type="button" (click)="openPluginLogModalForUi()" ngbTooltip="{{ 'plugins.manage.plugin_logs' | translate }}">
-        <i class="fa fa-fw fa-wave-square"></i>
-      </button>
-      <button class="btn btn-elegant" type="button" (click)="openFundingModalForUi()">
-        <i class="fa fa-fw fa-heart red-text"></i>
-      </button>
-      <a class="btn btn-elegant" href="https://github.com/homebridge/homebridge-config-ui-x" target="_blank"
-        rel="noopener noreferrer" ngbTooltip="{{ 'plugins.button_homepage' | translate }}">
-        <i class="fab fa-fw fa-github"></i>
-      </a>
+    <div class="text-center mb-4" *ngIf="plugin.name === 'homebridge-config-ui-x'">
+      <div class="btn-group" role="group">
+        <button class="btn btn-elegant" type="button" (click)="openPluginLogModalForUi()" ngbTooltip="{{ 'plugins.manage.plugin_logs' | translate }}">
+          <i class="fa fa-fw fa-wave-square"></i>
+        </button>
+        <button class="btn btn-elegant" type="button" (click)="openFundingModalForUi()">
+          <i class="fa fa-fw fa-heart red-text"></i>
+        </button>
+        <a class="btn btn-elegant" href="https://github.com/homebridge/homebridge-config-ui-x" target="_blank"
+          rel="noopener noreferrer" ngbTooltip="{{ 'plugins.button_homepage' | translate }}">
+          <i class="fab fa-fw fa-github"></i>
+        </a>
+      </div>
     </div>
 
     <!-- MULTIPLE CONFIG BLOCKS-->

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

@@ -8,7 +8,7 @@ <h5 class="modal-title">{{'plugins.manage.label_uninstall' | translate}}: {{ plu
   </div>
   <div class="modal-body d-flex flex-row flex-grow-1 align-items-center w-100 text-center">
     <div *ngIf="loading" class="w-100 text-center primary-text">
-      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 72px;"></i>
+      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 75px;"></i>
     </div>
     <div class="w-100" *ngIf="!loading">
       <i class="fas fa-fw fa-trash primary-text mb-4" style="font-size: 75px;"></i>

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

@@ -5,16 +5,20 @@ <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">
-        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="!isMobile" (click)="toggleLayoutLock()">
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="!isMobile" (click)="toggleLayoutLock()"
+          container="body" [ngbTooltip]="'form.button_unlock' | translate">
           <i class="fas fa-fw fa-unlock"></i>
         </button>
-        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="isMobile" (click)="toggleLayoutLock()">
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="isMobile" (click)="toggleLayoutLock()"
+          container="body" [ngbTooltip]="'form.button_lock' | translate">
           <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">
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="isMobile || !hideHidden" (click)="hideHidden = !hideHidden"
+          container="body" [ngbTooltip]="'accessories.button_toggle_hidden' | translate">
           <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">
+        <button type="button" class="btn btn-elegant status-button my-0" [disabled]="isMobile || hideHidden" (click)="hideHidden = !hideHidden"
+          container="body" [ngbTooltip]="'accessories.button_toggle_hidden' | translate">
           <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()">

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

@@ -9,7 +9,7 @@ <h3 class="primary-text m-0">{{ 'config.title_config' | translate }}</h3>
         <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>
+          ngbTooltip="{{ 'config.button_restore' | translate }}"><i class="fas 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"

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

@@ -10,7 +10,7 @@ <h5 class="modal-title" [translate]="'config.restore.title_restore_homebridge_ba
   </div>
   <div class="modal-body">
     <div *ngIf="loading" class="text-center primary-text">
-      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 72px;"></i>
+      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 75px;"></i>
     </div>
     <table class="table table-borderless table-hover table-sm" *ngIf="!loading && backupList && backupList.length">
       <tbody>

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

@@ -88,7 +88,7 @@ export class LogsComponent implements OnInit, OnDestroy {
     const ref = this.$modal.open(ConfirmComponent);
     ref.componentInstance.title = this.$translate.instant('logs.title_truncate_log_file');
     ref.componentInstance.message = this.$translate.instant('logs.message_truncate_log_warning');
-    ref.componentInstance.confirmButtonLabel = this.$translate.instant('logs.label_truncate');
+    ref.componentInstance.confirmButtonLabel = this.$translate.instant('form.button_delete');
     ref.componentInstance.faIconClass = 'fas fa-fw fa-circle-exclamation primary-text';
 
     ref.result.then(() => {