Merge branch 'release/3.1.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / misc / help.component.ts

diff --git a/client/src/app/shared/shared-main/misc/help.component.ts b/client/src/app/shared/shared-main/misc/help.component.ts
index 0825b96de3acea29eafa14e969b3c8332e6c571e..76e255d9943eef584d979699e54a42275249c55b 100644 (file)
--- a/client/src/app/shared/shared-main/misc/help.component.ts
+++ b/client/src/app/shared/shared-main/misc/help.component.ts
@@ -1,6 +1,6 @@
 import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core'
-import { MarkdownService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { GlobalIconName } from '@app/shared/shared-icons'
+import { ENHANCED_RULES, TEXT_RULES } from '@shared/core-utils/renderer/markdown'
 import { PeerTubeTemplateDirective } from '../angular'
 
 @Component({
@@ -12,6 +12,9 @@ import { PeerTubeTemplateDirective } from '../angular'
 export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
   @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
   @Input() tooltipPlacement = 'right auto'
+  @Input() iconName: GlobalIconName = 'help'
+  @Input() title = $localize`Get help`
+  @Input() autoClose = 'outside'
 
   @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'preHtml' | 'customHtml' | 'postHtml'>>
 
@@ -22,8 +25,6 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
   customHtmlTemplate: TemplateRef<any>
   postHtmlTemplate: TemplateRef<any>
 
-  constructor (private i18n: I18n) { }
-
   ngOnInit () {
     this.init()
   }
@@ -59,29 +60,29 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
 
   private init () {
     if (this.helpType === 'markdownText') {
-      this.mainHtml = this.formatMarkdownSupport(MarkdownService.TEXT_RULES)
+      this.mainHtml = this.formatMarkdownSupport(TEXT_RULES)
       return
     }
 
     if (this.helpType === 'markdownEnhanced') {
-      this.mainHtml = this.formatMarkdownSupport(MarkdownService.ENHANCED_RULES)
+      this.mainHtml = this.formatMarkdownSupport(ENHANCED_RULES)
       return
     }
   }
 
   private formatMarkdownSupport (rules: string[]) {
     // tslint:disable:max-line-length
-    return this.i18n('<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:') +
+    return $localize`<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:` +
       this.createMarkdownList(rules)
   }
 
   private createMarkdownList (rules: string[]) {
     const rulesToText = {
-      'emphasis': this.i18n('Emphasis'),
-      'link': this.i18n('Links'),
-      'newline': this.i18n('New lines'),
-      'list': this.i18n('Lists'),
-      'image': this.i18n('Images')
+      'emphasis': $localize`Emphasis`,
+      'link': $localize`Links`,
+      'newline': $localize`New lines`,
+      'list': $localize`Lists`,
+      'image': $localize`Images`
     }
 
     const bullets = rules.map(r => rulesToText[r])