diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html index 0be67368e..90eea1505 100644 --- a/client/src/app/+login/login.component.html +++ b/client/src/app/+login/login.component.html @@ -15,7 +15,7 @@
-
+
diff --git a/client/src/app/shared/shared-main/plugins/index.ts b/client/src/app/shared/shared-main/plugins/index.ts index f36dab624..f45ed9b73 100644 --- a/client/src/app/shared/shared-main/plugins/index.ts +++ b/client/src/app/shared/shared-main/plugins/index.ts @@ -1 +1,2 @@ export * from './plugin-placeholder.component' +export * from './plugin-selector.directive' diff --git a/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts new file mode 100644 index 000000000..576569f19 --- /dev/null +++ b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts @@ -0,0 +1,21 @@ +import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core' +import { PluginSelectorId } from '@shared/models' + +@Directive({ selector: '[myPluginSelector]' }) +export class PluginSelectorDirective implements OnInit { + @Input() pluginSelectorId: PluginSelectorId + + constructor ( + private renderer: Renderer2, + private hostElement: ElementRef + ) { + + } + + ngOnInit () { + const id = this.hostElement.nativeElement.getAttribute('id') + if (id) throw new Error('Cannot set id on element that already has an id') + + this.renderer.setAttribute(this.hostElement.nativeElement, 'id', `plugin-selector-${this.pluginSelectorId}`) + } +} diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index a90b59e41..10fc364b3 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/client/src/app/shared/shared-main/shared-main.module.ts @@ -41,7 +41,7 @@ import { SimpleSearchInputComponent, TopMenuDropdownComponent } from './misc' -import { PluginPlaceholderComponent } from './plugins' +import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins' import { ActorRedirectGuard } from './router' import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users' import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video' @@ -108,7 +108,8 @@ import { VideoChannelService } from './video-channel' EmbedComponent, - PluginPlaceholderComponent + PluginPlaceholderComponent, + PluginSelectorDirective ], exports: [ @@ -166,7 +167,8 @@ import { VideoChannelService } from './video-channel' EmbedComponent, - PluginPlaceholderComponent + PluginPlaceholderComponent, + PluginSelectorDirective ], providers: [ diff --git a/shared/models/plugins/client/index.ts b/shared/models/plugins/client/index.ts index 6dfc6351f..c500185c9 100644 --- a/shared/models/plugins/client/index.ts +++ b/shared/models/plugins/client/index.ts @@ -1,6 +1,7 @@ export * from './client-hook.model' export * from './plugin-client-scope.type' export * from './plugin-element-placeholder.type' +export * from './plugin-selector-id.type' export * from './register-client-form-field.model' export * from './register-client-hook.model' export * from './register-client-settings-script.model' diff --git a/shared/models/plugins/client/plugin-selector-id.type.ts b/shared/models/plugins/client/plugin-selector-id.type.ts new file mode 100644 index 000000000..b74dffbef --- /dev/null +++ b/shared/models/plugins/client/plugin-selector-id.type.ts @@ -0,0 +1 @@ +export type PluginSelectorId = 'login-form' diff --git a/support/doc/plugins/guide.md b/support/doc/plugins/guide.md index acf4718e4..3785246a7 100644 --- a/support/doc/plugins/guide.md +++ b/support/doc/plugins/guide.md @@ -3,7 +3,6 @@ - - [Concepts](#concepts) - [Hooks](#hooks) - [Static files](#static-files) @@ -28,6 +27,7 @@ - [Get server config](#get-server-config) - [Add custom fields to video form](#add-custom-fields-to-video-form) - [Register settings script](#register-settings-script) + - [Plugin selector on HTML elements](#plugin-selector-on-html-elements) - [HTML placeholder elements](#html-placeholder-elements) - [Add/remove left menu links](#addremove-left-menu-links) - [Publishing](#publishing) @@ -759,6 +759,13 @@ async function register ({ registerSettingsScript }) { }) } ``` +#### Plugin selector on HTML elements + +PeerTube provides some selectors (using `id` HTML attribute) on important blocks so plugins can easily change their style. + +For example `#plugin-selector-login-form` could be used to hide the login form. + +See the complete list on https://docs.joinpeertube.org/api-plugins #### HTML placeholder elements