Add help tooltip

4 files changed, 101 insertions, 1 deletions

diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
new file mode 100644
index 000000000..956095996
--- /dev/null
+++ b/client/src/app/shared/misc/help.component.html
@@ -0,0 +1,15 @@
+<ng-template #tooltipTemplate>
+  <ng-template [ngIf]="preHtml">
+    <p [innerHTML]="preHtml"></p>
+    <br />
+  </ng-template>
+
+  <p [innerHTML]="mainHtml"></p>
+
+  <ng-template [ngIf]="postHtml">
+    <br />
+    <p [innerHTML]="postHtml"></p>
+  </ng-template>
+</ng-template>
+
+<button class="help-tooltip-button" containerClass="help-tooltip" [tooltipHtml]="tooltipTemplate" triggers="focus"></button>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
new file mode 100644
index 000000000..5fe6b7366
--- /dev/null
+++ b/client/src/app/shared/misc/help.component.scss
@@ -0,0 +1,33 @@
+@import '_variables';
+@import '_mixins';
+
+.help-tooltip-button {
+  @include icon(17px);
+
+  position: relative;
+  top: -2px;
+  background-image: url('../../../assets/images/global/help.svg');
+  background-color: #fff;
+  border: none;
+}
+
+/deep/ {
+  .help-tooltip {
+    opacity: 1 !important;
+
+    .tooltip-inner {
+      text-align: left;
+      padding: 10px;
+
+      font-size: 13px;
+      font-family: $main-fonts;
+      background-color: #fff;
+      color: #000;
+      box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+    }
+
+    ul {
+      padding-left: 20px;
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
new file mode 100644
index 000000000..b8530e1d4
--- /dev/null
+++ b/client/src/app/shared/misc/help.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core'
+
+@Component({
+  selector: 'my-help',
+  styleUrls: [ './help.component.scss' ],
+  templateUrl: './help.component.html'
+})
+
+export class HelpComponent implements OnInit {
+  @Input() preHtml = ''
+  @Input() postHtml = ''
+  @Input() customHtml = ''
+  @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
+
+  mainHtml = ''
+
+  ngOnInit () {
+    if (this.helpType === 'custom') {
+      this.mainHtml = this.customHtml
+      return
+    }
+
+    if (this.helpType === 'markdownText') {
+      this.mainHtml = 'Markdown compatible.<br /><br />' +
+        'Supports:' +
+        '<ul>' +
+        '<li>Links</li>' +
+        '<li>Lists</li>' +
+        '<li>Emphasis</li>' +
+        '</ul>'
+      return
+    }
+
+    if (this.helpType === 'markdownEnhanced') {
+      this.mainHtml = 'Markdown compatible.<br /><br />' +
+        'Supports:' +
+        '<ul>' +
+        '<li>Links</li>' +
+        '<li>Lists</li>' +
+        '<li>Emphasis</li>' +
+        '<li>Images</li>' +
+        '</ul>'
+      return
+    }
+  }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index b1dfdd747..eb50d45a9 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -4,12 +4,14 @@ import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
+import { HelpComponent } from '@app/shared/misc/help.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
 import { MarkdownService } from '@app/videos/shared'
 
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
 import { ModalModule } from 'ngx-bootstrap/modal'
 import { TabsModule } from 'ngx-bootstrap/tabs'
+import { TooltipModule } from 'ngx-bootstrap/tooltip'
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
 
@@ -38,6 +40,7 @@ import { VideoService } from './video/video.service'
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
     TabsModule.forRoot(),
+    TooltipModule.forRoot(),
 
     PrimeSharedModule,
     NgPipesModule
@@ -52,7 +55,8 @@ import { VideoService } from './video/video.service'
     NumberFormatterPipe,
     FromNowPipe,
     MarkdownTextareaComponent,
-    InfiniteScrollerDirective
+    InfiniteScrollerDirective,
+    HelpComponent
   ],
 
   exports: [
@@ -65,6 +69,7 @@ import { VideoService } from './video/video.service'
     BsDropdownModule,
     ModalModule,
     TabsModule,
+    TooltipModule,
     PrimeSharedModule,
     BytesPipe,
     KeysPipe,
@@ -76,6 +81,7 @@ import { VideoService } from './video/video.service'
     EditButtonComponent,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
+    HelpComponent,
 
     NumberFormatterPipe,
     FromNowPipe