From 92f5b5a4ae0ce31487afd4c5e12b5d9e8fc785a8 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Sat, 13 Nov 2021 17:07:02 +0100 Subject: [PATCH] plugin settings updates --- .../pluginsSettingsTab.component.pug | 179 +++++++++++------- .../pluginsSettingsTab.component.scss | 11 +- .../pluginsSettingsTab.component.ts | 4 + .../src/services/pluginManager.service.ts | 15 +- 4 files changed, 136 insertions(+), 73 deletions(-) diff --git a/tabby-plugin-manager/src/components/pluginsSettingsTab.component.pug b/tabby-plugin-manager/src/components/pluginsSettingsTab.component.pug index 22a34c71..ed63ea6e 100644 --- a/tabby-plugin-manager/src/components/pluginsSettingsTab.component.pug +++ b/tabby-plugin-manager/src/components/pluginsSettingsTab.component.pug @@ -1,78 +1,125 @@ +.d-flex.mb-3 + h3 Plugins + button.btn.btn-secondary.btn-sm.ml-auto((click)='openPluginsFolder()') + i.fas.fa-folder + span Plugins folder + .alert.alert-danger(*ngIf='errorMessage') strong Error in {{erroredPlugin}}: pre {{errorMessage}} -.d-flex - h3.mb-1 Installed - button.btn.btn-secondary.btn-sm.ml-auto((click)='openPluginsFolder()') - i.fas.fa-folder - span Plugins folder +ul.nav-tabs.mb-2(ngbNav, #nav='ngbNav') + li(ngbNavItem) + a(ngbNavLink) Available + ng-template(ngbNavContent) + .input-group.mb-3.mt-3 + .input-group-prepend + .input-group-text + i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='!availablePluginsReady') + i.fas.fa-fw.fa-search(*ngIf='availablePluginsReady') + input.form-control( + type='text', + [(ngModel)]='_1', + (ngModelChange)='searchAvailable(_1)', + placeholder='Search plugins' + ) -.list-group.list-group-flush.mt-2 - .list-group-item.d-flex.align-items-center(*ngFor='let plugin of pluginManager.installedPlugins') - toggle( - [ngModel]='isPluginEnabled(plugin)', - (ngModelChange)='togglePlugin(plugin)', - [disabled]='!canDisablePlugin(plugin)' - ) + ngb-accordion.mb-4(*ngIf='availablePlugins$', type='dark', [closeOthers]='true') + ng-container(*ngFor='let plugin of (availablePlugins$|async)') + ngb-panel(*ngIf='!isAlreadyInstalled(plugin)', cardClass='bg-dark') + ng-template(ngbPanelTitle) + .text-left + strong.d-block {{plugin.name}} + small.d-block.text-muted {{plugin.description}} + ng-template(ngbPanelContent) + .row + .col-4 + button.btn.btn-primary.btn-block.justify-content-center( + (click)='installPlugin(plugin)', + [disabled]='busy.has(plugin.name)' + ) + i.fas.fa-fw.fa-cloud-download(*ngIf='busy.get(plugin.name) != BusyState.Installing') + i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy.get(plugin.name) == BusyState.Installing') + span.ml-2 Get - .mr-auto.d-flex.flex-column - div - strong {{plugin.name}} - small.text-muted.ml-1(*ngIf='!plugin.isBuiltin') {{plugin.version}} / {{plugin.author}} - small.text-muted.ml-1(*ngIf='plugin.isBuiltin') Built-in - small.text-warning.ml-1(*ngIf='!isPluginEnabled(plugin)') Disabled - a.text-muted.mb-0((click)='showPluginInfo(plugin)') - small {{plugin.description}} + button.btn.btn-secondary.btn-block.justify-content-center( + *ngIf='plugin.homepage', + (click)='showPluginHomepage(plugin)' + ) + i.fas.fa-fw.fa-external-link-alt + span.ml-2 Homepage - button.btn.btn-primary.ml-2( - *ngIf='knownUpgrades[plugin.name]', - (click)='upgradePlugin(plugin)', - [disabled]='busy.has(plugin.name)' - ) - i.fas.fa-fw.fa-arrow-up(*ngIf='busy.get(plugin.name) != BusyState.Installing') - i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy.get(plugin.name) == BusyState.Installing') - span Upgrade ({{knownUpgrades[plugin.name].version}}) + .col-8 + ng-container(*ngTemplateOutlet='pluginInfo; context: { plugin }') - button.btn.btn-link.text-danger.ml-2( - (click)='uninstallPlugin(plugin)', - *ngIf='!plugin.isBuiltin', - [disabled]='busy.has(plugin.name)' - ) - i.fas.fa-fw.fa-trash(*ngIf='busy.get(plugin.name) != BusyState.Uninstalling') - i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy.get(plugin.name) == BusyState.Uninstalling') + .mt-2 {{plugin.description}} -div - h3.mt-4 Available + li(ngbNavItem) + a(ngbNavLink) Installed + ng-template(ngbNavContent) + ngb-accordion.mb-4(type='dark', [closeOthers]='true') + ng-container(*ngFor='let plugin of pluginManager.installedPlugins') + ngb-panel(cardClass='bg-dark') + ng-template(ngbPanelTitle) + .text-left.mr-auto + div + strong {{plugin.name}} + small.text-muted.ml-2(*ngIf='plugin.isBuiltin') Built-in + small.text-warning.ml-2(*ngIf='!isPluginEnabled(plugin)') Disabled + small.d-block.text-muted {{plugin.description}} - .input-group.mb-3 - .input-group-prepend - .input-group-text - i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='!availablePluginsReady') - i.fas.fa-fw.fa-search(*ngIf='availablePluginsReady') - input.form-control( - type='text', - [(ngModel)]='_1', - (ngModelChange)='searchAvailable(_1)', - placeholder='Search plugins' - ) + button.btn.btn-primary.ml-2( + *ngIf='knownUpgrades[plugin.name]', + (click)='upgradePlugin(plugin)', + [disabled]='busy.has(plugin.name)' + ) + i.fas.fa-fw.fa-arrow-up(*ngIf='busy.get(plugin.name) != BusyState.Installing') + i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy.get(plugin.name) == BusyState.Installing') + span Upgrade to {{knownUpgrades[plugin.name].version}} - .list-group.list-group-flush.mb-4(*ngIf='availablePlugins$') - ng-container(*ngFor='let plugin of (availablePlugins$|async)') - .list-group-item.d-flex.align-items-center(*ngIf='!isAlreadyInstalled(plugin)') - button.btn.btn-primary.mr-3( - (click)='installPlugin(plugin)', - [disabled]='busy.has(plugin.name)' - ) - i.fas.fa-fw.fa-download(*ngIf='busy.get(plugin.name) != BusyState.Installing') - i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy.get(plugin.name) == BusyState.Installing') + ng-template(ngbPanelContent) + .row + .col-4 + button.btn.btn-warning.btn-block.justify-content-center( + (click)='togglePlugin(plugin)', + *ngIf='isPluginEnabled(plugin)', + [disabled]='!canDisablePlugin(plugin)' + ) Disable + + button.btn.btn-success.btn-block.justify-content-center( + (click)='togglePlugin(plugin)', + *ngIf='canDisablePlugin(plugin) && !isPluginEnabled(plugin)' + ) Enable + + button.btn.btn-danger.btn-block.justify-content-center( + (click)='uninstallPlugin(plugin)', + *ngIf='!plugin.isBuiltin', + [disabled]='busy.has(plugin.name)' + ) + i.fas.fa-fw.fa-trash(*ngIf='busy.get(plugin.name) != BusyState.Uninstalling') + i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy.get(plugin.name) == BusyState.Uninstalling') + span Uninstall + .col-8 + ng-container(*ngTemplateOutlet='pluginInfo; context: { plugin }') + + + .mt-2 {{plugin.description}} + +ng-template(#pluginInfo, let-plugin='plugin') + .row.align-items-center + .col-4 + strong Version + .col-8 + span {{plugin.version}} + .row.align-items-center + .col-4 + strong Author + .col-8 + .badge.badge-success(*ngIf='plugin.isOfficial') + i.fas.fa-check + span.ml-1 Official + a.btn.btn-link.px-0.w-auto((click)='showPluginInfo(plugin)', *ngIf='!plugin.isOfficial') + span {{plugin.author}} + i.fas.fa-fw.fa-external-link-alt.ml-2 - div((click)='showPluginInfo(plugin)') - div - strong {{plugin.name}} - small.text-muted.ml-1 {{plugin.version}} - small.text-muted.ml-1(*ngIf='!plugin.isOfficial') by {{plugin.author}} - small.text-success.ml-1(*ngIf='plugin.isOfficial') - i.fas.fa-check - span.ml-1 Official - small.text-muted {{plugin.description}} +.mb-4([ngbNavOutlet]='nav') diff --git a/tabby-plugin-manager/src/components/pluginsSettingsTab.component.scss b/tabby-plugin-manager/src/components/pluginsSettingsTab.component.scss index ef003293..309c4966 100644 --- a/tabby-plugin-manager/src/components/pluginsSettingsTab.component.scss +++ b/tabby-plugin-manager/src/components/pluginsSettingsTab.component.scss @@ -1,8 +1,7 @@ -.appearance-preview { - padding: 10px 20px; - margin: 0 0 10px; - overflow: hidden; - span { - white-space: pre; +::ng-deep .card-header { + padding: 0; + + > button { + width: 100%; } } diff --git a/tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts b/tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts index 7ec6102e..6c1512fd 100644 --- a/tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts +++ b/tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts @@ -105,6 +105,10 @@ export class PluginsSettingsTabComponent { this.platform.openExternal('https://www.npmjs.com/package/' + plugin.packageName) } + showPluginHomepage (plugin: PluginInfo) { + this.platform.openExternal(plugin.homepage ?? '') + } + isPluginEnabled (plugin: PluginInfo) { return !this.config.store.pluginBlacklist.includes(plugin.name) } diff --git a/tabby-plugin-manager/src/services/pluginManager.service.ts b/tabby-plugin-manager/src/services/pluginManager.service.ts index 47ef3271..dae064ff 100644 --- a/tabby-plugin-manager/src/services/pluginManager.service.ts +++ b/tabby-plugin-manager/src/services/pluginManager.service.ts @@ -32,7 +32,20 @@ export class PluginManagerService { return forkJoin( this._listAvailableInternal('tabby-', 'tabby-plugin', query), this._listAvailableInternal('terminus-', 'terminus-plugin', query), - ).pipe(map(x => x.reduce((a, b) => a.concat(b), []))) + ).pipe( + map(x => x.reduce((a, b) => a.concat(b), [])), + map(x => { + const names = new Set() + return x.filter(item => { + if (names.has(item.name)) { + return false + } + names.add(item.name) + return true + }) + }), + map(x => x.sort((a, b) => a.name.localeCompare(b.name))), + ) } _listAvailableInternal (namePrefix: string, keyword: string, query?: string): Observable { -- GitLab