Add help tooltip

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 8dca9bc042ec5fe6f2cd829ce6d2f626c51e22f0..4aef2ef6b958c6c626b21aa603fa356e8f577c83 100644 (file)
--- 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 (file)
index 0000000..9560959
--- /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 (file)
index 0000000..5fe6b73
--- /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 (file)
index 0000000..b8530e1
--- /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 b1dfdd747bd83f47607c0b838f3b8d97053dc49f..eb50d45a972b6c0021234dd374d597f9713df96c 100644 (file)
--- 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 bf2204013efe1ee7ad661f01fe767782c9db33e6..f88abcbf82927a313687a9977d83b087c19e2bea 100644 (file)
--- 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'] }"

diff --git a/client/src/assets/images/global/help.svg b/client/src/assets/images/global/help.svg
new file mode 100644 (file)
index 0000000..48252fe
--- /dev/null
+++ b/client/src/assets/images/global/help.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
+            <g id="69" transform="translate(400.000000, 247.000000)">
+                <circle id="Oval-7" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f04aef85d89db17b8f84796e4a37123e8a4c3cd4..f998096aefd76840de51cbbde64b82361964e9de 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -19,7 +19,7 @@ $FontPathSourceSansPro: '../../node_modules/npm-font-source-sans-pro/fonts';
 }
 
 body {
-  font-family: 'Source Sans Pro', sans-serif;
+  font-family: $main-fonts;
   font-weight: $font-regular;
   color: #000;
 }

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e7bed418e4a6ef54c6074d7b5ab1cc1c0f033aa8..95b4b166e548a8a9cc9c0074efa40d33d459cb08 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,3 +1,4 @@
+$main-fonts: 'Source Sans Pro', sans-serif;
 $font-regular: 400;
 $font-semibold: 600;
 $font-bold: 700;