Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve plugin card hyperlinks #1918

Merged
merged 3 commits into from
Dec 10, 2023
Merged

Improve plugin card hyperlinks #1918

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4db8746
Update plugin-card.component.html
jsiegenthaler Dec 8, 2023
6d53a86
Update plugin-card.component.html
jsiegenthaler Dec 9, 2023
fd34f03
colours
bwp91 Dec 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
78 changes: 48 additions & 30 deletions ui/src/app/modules/plugins/plugin-card/plugin-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,47 +14,65 @@ <h5 class="card-title mb-2 text-truncate">
<p class="card-text mb-2 text-truncate">
<a href="javascript:void(0)" (click)="pluginInfoModal(plugin)" class="card-link grey-text">
<i class="fas fa-fw fa-info-circle fa-lg"></i>
<span class="grey-text"> {{ plugin.name }}</span>
</a>
{{ plugin.name }}
</p>
<p class="card-text mb-2" *ngIf="plugin.verifiedPlugin">
<a href="javascript:void(0)" class="card-link green-text" (click)="openVerifiedModal()">
<i class="fas fa-fw fa-shield-alt fa-lg"></i>
</a> {{ 'plugins.donate.button_verified' | translate }}
<span class="grey-text"> {{ 'plugins.donate.button_verified' | translate }}</span>
</a>
</p>
<p class="card-text mb-2" *ngIf="!plugin.verifiedPlugin">
<a href="javascript:void(0)" class="card-link" (click)="openVerifiedModal()">
<i class="fas fa-fw fa-shield-alt fa-lg" style="opacity: 0.25;"></i>
</a> {{ 'plugins.donate.button_not_verified' | translate }}
<span class="grey-text"> {{ 'plugins.donate.button_not_verified' | translate }}</span>
</a>
</p>
<p class="card-text mb-2">
<a href="javascript:void(0)" class="card-link pink-text" *ngIf="plugin.verifiedPlugin && plugin.funding"
(click)="openFundingModal(plugin)">
<i class="fas fa-fw fa-heart fa-lg"></i>
<span class="grey-text"> @{{ plugin.author }}</span>
</a>
<span *ngIf="!plugin.verifiedPlugin || !plugin.funding">
<span class="grey-text" *ngIf="!plugin.verifiedPlugin || !plugin.funding">
<i class="fas fa-fw fa-heart fa-lg" style="opacity: 0.5;"></i>
</span> @{{ plugin.author }}
@{{ plugin.author }}
</span>
</p>
<div class="d-flex flex-row">
<p class="card-text mb-0">
<i class="far fa-fw fa-circle-check fa-lg card-text-defined" *ngIf="plugin.installedVersion && !plugin.updateAvailable && !plugin.betaUpdateAvailable"
[ngbTooltip]="'plugins.status_installed' | translate" container="body"></i>
<a href="javascript:void(0)" *ngIf="plugin.publicPackage && !plugin.installedVersion" class="card-link grey-text"
(click)="$plugin.installPreviousVersion(plugin)" [ngbTooltip]="'plugins.status_not_installed' | translate" container="body">
<i class="far fa-fw fa-arrow-alt-circle-down fa-lg"></i>
</a>
<a href="javascript:void(0)" (click)="$plugin.updatePlugin(plugin, plugin.betaUpdateAvailable ? 'beta' : 'latest')"
*ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable" class="card-link"
[ngbTooltip]="'plugins.status_update_available' | translate" container="body">
<i class="far fa-fw fa-arrow-alt-circle-up fa-lg primary-text"></i>
</a>
<span *ngIf="plugin.installedVersion" class="d-none d-md-inline"> {{ 'plugins.status_installed' | translate }}: </span>
v{{ plugin.installedVersion || plugin.latestVersion }}
<span *ngIf="!plugin.installedVersion && plugin.lastUpdated">({{ plugin.lastUpdated | date:'yyyy-MM-dd' }})</span>
<p class="card-text mb-0 grey-text">
<!-- not installed -->
<span *ngIf="plugin.publicPackage && !plugin.installedVersion">
<a href="javascript:void(0)" class="card-link grey-text" (click)="$plugin.installPreviousVersion(plugin)"
[ngbTooltip]="'plugins.status_not_installed' | translate" container="body">
<i class="far fa-fw fa-arrow-alt-circle-down fa-lg"></i>
<span class="grey-text"> v{{ plugin.latestVersion }}
<span *ngIf="plugin.lastUpdated">({{ plugin.lastUpdated | date:'yyyy-MM-dd' }})</span>
</span>
</a>
</span>
<!-- // -->
<!-- installed, no updates available -->
<span *ngIf="plugin.installedVersion && !plugin.updateAvailable && !plugin.betaUpdateAvailable">
<i class="far fa-fw fa-circle-check fa-lg card-text-defined" [ngbTooltip]="'plugins.status_installed' | translate" container="body"></i>
<span class="d-none d-md-inline"> {{ 'plugins.status_installed' | translate }}:</span>
<span> v{{ plugin.installedVersion }}</span>
</span>
<!-- // -->
<!-- installed, updates available -->
<span *ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable">
<a href="javascript:void(0)" (click)="$plugin.updatePlugin(plugin, plugin.betaUpdateAvailable ? 'beta' : 'latest')"
class="card-link" [ngbTooltip]="'plugins.status_update_available' | translate" container="body">
<i class="far fa-fw fa-arrow-alt-circle-up fa-lg primary-text"></i>
<span class="d-none d-md-inline grey-text"> {{ 'plugins.status_installed' | translate }}:</span>
<span class="grey-text"> v{{ plugin.installedVersion }}</span>
</a>
</span>
<!-- // -->
</p>
<div class="ml-auto">
<ng-container *ngIf="!plugin.disabled && hasChildBridges">
<ng-container *ngIf="!plugin.disabled && plugin.hasChildBridges">
<a href="javascript:void(0)" (click)="$plugin.bridgeSettings(plugin)" class="card-link" [ngClass]="{
'green-text': childBridgeStatus === 'ok',
'text-warning': childBridgeStatus === 'pending',
Expand Down Expand Up @@ -82,8 +100,8 @@ <h5 class="card-title mb-2 text-truncate">
<i class="fa-solid fa-fw fa-cog fa-lg" [ngClass]="{
'fa-fade primary-text': (plugin.updateAvailable || plugin.betaUpdateAvailable)
|| !plugin.isConfigured
|| (plugin.isConfigured && !hasChildBridges && !plugin.disabled && recommendChildBridge)
|| (plugin.isConfigured && hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled)
|| (plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled && recommendChildBridge)
|| (plugin.isConfigured && plugin.hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled)
}"
style="--fa-animation-duration: 2s;"></i>
</a>
Expand All @@ -97,12 +115,12 @@ <h5 class="card-title mb-2 text-truncate">
<i class="fas fa-fw fa-sliders primary-text"></i>
{{ 'plugins.button_set_up' | translate }}
</button>
<button ngbDropdownItem *ngIf="plugin.isConfigured && !hasChildBridges && !plugin.disabled && recommendChildBridge"
<button ngbDropdownItem *ngIf="plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled && recommendChildBridge"
(click)="$plugin.bridgeSettings(plugin)">
<i class="icon-button fas fa-fw fa-bridge primary-text"></i>
{{ 'child_bridge.label_child_setup' | translate }}
</button>
<button ngbDropdownItem *ngIf="plugin.isConfigured && hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled"
<button ngbDropdownItem *ngIf="plugin.isConfigured && plugin.hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled"
(click)="$plugin.bridgeSettings(plugin)">
<i class="icon-button fas fa-fw fa-qrcode primary-text"></i>
{{ 'child_bridge.label_bridge_connect_to_homekit' | translate }}
Expand All @@ -111,8 +129,8 @@ <h5 class="card-title mb-2 text-truncate">
*ngIf="
(plugin.updateAvailable || plugin.betaUpdateAvailable)
|| !plugin.isConfigured
|| (plugin.isConfigured && !hasChildBridges && !plugin.disabled && recommendChildBridge)
|| (plugin.isConfigured && hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled)
|| (plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled && recommendChildBridge)
|| (plugin.isConfigured && plugin.hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled)
"></div>
<button ngbDropdownItem *ngIf="plugin.isConfigured" (click)="$plugin.settings(plugin)">
<i class="fas fa-fw fa-sliders"></i>
Expand Down Expand Up @@ -142,7 +160,7 @@ <h5 class="card-title mb-2 text-truncate">
<i class="fas fa-fw fa-trash"></i> {{ 'plugins.button_uninstall' | translate }}
</button>
<div class="dropdown-divider" *ngIf="!plugin.disabled && plugin.isConfigured && plugin.hasChildBridges && plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'"></div>
<ng-container *ngIf="hasChildBridges && !plugin.disabled">
<ng-container *ngIf="plugin.hasChildBridges && !plugin.disabled">
<button ngbDropdownItem *ngIf="!childBridgeRestartInProgress && !plugin.disabled" (click)="doChildBridgeAction('restart')">
<i class="fa-fw icon-button fas fa-fw fa-power-off"></i> {{ 'child_bridge.label_child_restart' | translate }}
</button>
Expand All @@ -157,8 +175,8 @@ <h5 class="card-title mb-2 text-truncate">
*ngIf="plugin.isConfigured && !plugin.disabled && plugin.hasChildBridges && plugin.installedVersion">
<i class="fas fa-fw fa-bridge"></i> {{ 'child_bridge.label_bridge_settings' | translate }}
</button>
<div class="dropdown-divider" *ngIf="plugin.isConfigured && !hasChildBridges && !plugin.disabled && !recommendChildBridge"></div>
<button ngbDropdownItem *ngIf="plugin.isConfigured && !hasChildBridges && !plugin.disabled && !recommendChildBridge"
<div class="dropdown-divider" *ngIf="plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled && !recommendChildBridge"></div>
<button ngbDropdownItem *ngIf="plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled && !recommendChildBridge"
(click)="$plugin.bridgeSettings(plugin)">
<i class="icon-button fas fa-fw fa-bridge"></i>
{{ 'child_bridge.label_child_setup' | translate }}
Expand Down