mirror of https://github.com/Chocobozzz/PeerTube
Refactor plugin card
Chocobozzz
parent
087fc5dade
commit
29aedac8dc
|
|
@ -41,11 +41,14 @@ import {
|
|||
VideoAdminService,
|
||||
VideoListComponent
|
||||
} from './overview'
|
||||
import { PluginListInstalledComponent } from './plugins/plugin-list-installed/plugin-list-installed.component'
|
||||
import { PluginSearchComponent } from './plugins/plugin-search/plugin-search.component'
|
||||
import { PluginShowInstalledComponent } from './plugins/plugin-show-installed/plugin-show-installed.component'
|
||||
import { PluginsComponent } from './plugins/plugins.component'
|
||||
import { PluginApiService } from './plugins/shared/plugin-api.service'
|
||||
import {
|
||||
PluginApiService,
|
||||
PluginCardComponent,
|
||||
PluginListInstalledComponent,
|
||||
PluginsComponent,
|
||||
PluginSearchComponent,
|
||||
PluginShowInstalledComponent
|
||||
} from './plugins'
|
||||
import { JobService, LogsComponent, LogsService } from './system'
|
||||
import { DebugComponent, DebugService } from './system/debug'
|
||||
import { JobsComponent } from './system/jobs/jobs.component'
|
||||
|
|
@ -99,6 +102,7 @@ import { JobsComponent } from './system/jobs/jobs.component'
|
|||
PluginListInstalledComponent,
|
||||
PluginSearchComponent,
|
||||
PluginShowInstalledComponent,
|
||||
PluginCardComponent,
|
||||
|
||||
JobsComponent,
|
||||
LogsComponent,
|
||||
|
|
|
|||
|
|
@ -1 +1,6 @@
|
|||
export * from './plugins.component'
|
||||
export * from './shared'
|
||||
export * from './plugin-list-installed'
|
||||
export * from './plugin-search'
|
||||
export * from './plugin-show-installed'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './plugin-list-installed.component'
|
||||
|
|
@ -7,39 +7,21 @@
|
|||
</div>
|
||||
|
||||
<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
|
||||
<div class="card plugin" *ngFor="let plugin of plugins">
|
||||
<div class="card-body">
|
||||
<div class="first-row">
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
<ng-container *ngFor="let plugin of plugins">
|
||||
<my-plugin-card [plugin]="plugin" [version]="plugin.version" [pluginType]="pluginType">
|
||||
<div ngProjectAs="buttons">
|
||||
<my-edit-button
|
||||
*ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
|
||||
[responsiveLabel]="true"
|
||||
></my-edit-button>
|
||||
|
||||
<span class="plugin-version">{{ plugin.version }}</span>
|
||||
<my-button
|
||||
class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
|
||||
[label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
|
||||
></my-button>
|
||||
|
||||
<a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
|
||||
<my-global-icon iconName="home"></my-global-icon>
|
||||
</a>
|
||||
|
||||
<a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)">
|
||||
<my-global-icon iconName="npm"></my-global-icon>
|
||||
</a>
|
||||
|
||||
<div class="buttons">
|
||||
<my-edit-button
|
||||
*ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
|
||||
[responsiveLabel]="true"
|
||||
></my-edit-button>
|
||||
|
||||
<my-button
|
||||
class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
|
||||
[label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
|
||||
></my-button>
|
||||
|
||||
<my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
|
||||
</div>
|
||||
<my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
|
||||
</div>
|
||||
|
||||
<div class="second-row">
|
||||
<div class="description">{{ plugin.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</my-plugin-card>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,3 +4,8 @@
|
|||
.update-button[disabled=true] ::ng-deep .action-button {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
my-edit-button,
|
||||
my-button {
|
||||
@include margin-right(10px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import { PeerTubePlugin, PluginType } from '@shared/models'
|
|||
templateUrl: './plugin-list-installed.component.html',
|
||||
styleUrls: [
|
||||
'../shared/toggle-plugin-type.scss',
|
||||
'../shared/plugin-list.component.scss',
|
||||
'./plugin-list-installed.component.scss'
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './plugin-search.component'
|
||||
|
|
@ -30,45 +30,29 @@
|
|||
</div>
|
||||
|
||||
<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
|
||||
<div class="card plugin" *ngFor="let plugin of plugins">
|
||||
<div class="card-body">
|
||||
<div class="first-row">
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
|
||||
<span class="plugin-version">{{ plugin.latestVersion }}</span>
|
||||
|
||||
<a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
|
||||
<my-global-icon iconName="home"></my-global-icon>
|
||||
</a>
|
||||
|
||||
<a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin npm package (new window)">
|
||||
<my-global-icon iconName="npm"></my-global-icon>
|
||||
</a>
|
||||
|
||||
<span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
|
||||
|
||||
<ng-container *ngFor="let plugin of plugins" >
|
||||
<my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
|
||||
<div ngProjectAs="badges">
|
||||
<span i18n *ngIf="plugin.installed" class="badge badge-success">Installed</span>
|
||||
|
||||
<span *ngIf="plugin.official" class="badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
|
||||
Official
|
||||
</span>
|
||||
|
||||
<div class="buttons">
|
||||
<my-edit-button
|
||||
*ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
|
||||
label="Settings" i18n-label [responsiveLabel]="true"
|
||||
></my-edit-button>
|
||||
|
||||
<my-button
|
||||
class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
|
||||
[loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
|
||||
icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
|
||||
></my-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="second-row">
|
||||
<div class="description">{{ plugin.description }}</div>
|
||||
<div ngProjectAs="buttons">
|
||||
<my-edit-button
|
||||
*ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
|
||||
label="Settings" i18n-label [responsiveLabel]="true"
|
||||
></my-edit-button>
|
||||
|
||||
<my-button
|
||||
class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
|
||||
[loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
|
||||
icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
|
||||
></my-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</my-plugin-card>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { PeerTubePluginIndex, PluginType } from '@shared/models'
|
|||
templateUrl: './plugin-search.component.html',
|
||||
styleUrls: [
|
||||
'../shared/toggle-plugin-type.scss',
|
||||
'../shared/plugin-list.component.scss',
|
||||
'./plugin-search.component.scss'
|
||||
]
|
||||
})
|
||||
|
|
@ -115,10 +114,6 @@ export class PluginSearchComponent implements OnInit {
|
|||
return !!this.installing[plugin.npmName]
|
||||
}
|
||||
|
||||
getPluginOrThemeHref (name: string) {
|
||||
return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
|
||||
}
|
||||
|
||||
getShowRouterLink (plugin: PeerTubePluginIndex) {
|
||||
return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './plugin-show-installed.component'
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export * from './plugin-api.service'
|
||||
export * from './plugin-card.component'
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<div class="card plugin">
|
||||
<div class="card-body">
|
||||
<div class="first-row">
|
||||
<span class="plugin-name">{{ plugin.name }}</span>
|
||||
|
||||
<span class="plugin-version">{{ version }}</span>
|
||||
|
||||
<a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
|
||||
<my-global-icon iconName="home"></my-global-icon>
|
||||
</a>
|
||||
|
||||
<a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)">
|
||||
<my-global-icon iconName="npm"></my-global-icon>
|
||||
</a>
|
||||
|
||||
<ng-content select="badges"></ng-content>
|
||||
|
||||
<div class="buttons">
|
||||
<ng-content select="buttons"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="second-row">
|
||||
<div class="description">{{ plugin.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,11 +36,8 @@
|
|||
|
||||
.buttons {
|
||||
@include margin-left(auto);
|
||||
width: max-content;
|
||||
|
||||
> *:not(:last-child) {
|
||||
@include margin-right(10px);
|
||||
}
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { Component, Input } from '@angular/core'
|
||||
import { PeerTubePlugin, PeerTubePluginIndex, PluginType } from '@shared/models'
|
||||
import { PluginApiService } from './plugin-api.service'
|
||||
|
||||
@Component({
|
||||
selector: 'my-plugin-card',
|
||||
templateUrl: './plugin-card.component.html',
|
||||
styleUrls: [ './plugin-card.component.scss' ]
|
||||
})
|
||||
|
||||
export class PluginCardComponent {
|
||||
@Input() plugin: PeerTubePluginIndex | PeerTubePlugin
|
||||
@Input() version: string
|
||||
@Input() pluginType: PluginType
|
||||
|
||||
constructor (
|
||||
private pluginApiService: PluginApiService
|
||||
) {
|
||||
}
|
||||
|
||||
getPluginOrThemeHref (name: string) {
|
||||
return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue