Add help tooltip

6 files changed, 107 insertions, 7 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 8dca9bc04..4aef2ef6b 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -1,6 +1,6 @@
 <div class="admin-sub-title">Update PeerTube configuration</div>
 
-<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+<form role="form" [formGroup]="form">
 
   <div class="inner-form-title">Instance</div>
 
@@ -16,7 +16,7 @@
   </div>
 
   <div class="form-group">
-    <label for="instanceDescription">Description (markdown)</label>
+    <label for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
     <my-markdown-textarea
         id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
         [classes]="{ 'input-error': formErrors['instanceDescription'] }"
@@ -27,7 +27,7 @@
   </div>
 
   <div class="form-group">
-    <label for="instanceTerms">Terms (markdown)</label>
+    <label for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
     <my-markdown-textarea
         id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
         [ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
@@ -152,5 +152,5 @@
     </div>
   </div>
 
-  <input type="submit" value="Update configuration" [disabled]="!form.valid">
+  <input (click)="formValidated()" type="submit" value="Update configuration" [disabled]="!form.valid">
 </form>
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
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index bf2204013..f88abcbf8 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -20,7 +20,7 @@
         </div>
 
         <div class="form-group">
-          <label for="description">Description</label>
+          <label for="description">Description</label> <my-help helpType="markdownText"></my-help>
           <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
 
           <div *ngIf="formErrors.description" class="form-error">
@@ -127,7 +127,7 @@
         </div>
 
         <div class="form-group">
-          <label for="support">Support (markdown)</label>
+          <label for="support">Support</label><my-help helpType="markdownEnhanced"></my-help>
           <my-markdown-textarea
               id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
               [classes]="{ 'input-error': formErrors['support'] }"