Replace glyphicon chevron

[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..37e2abd97b8b7026a28fdf41dbbc2e2ddb10e102 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:') +
+    /* eslint-disable max-len */
+    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])