aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-02-22 18:32:31 +0100
committerChocobozzz <me@florianbigard.com>2018-02-22 18:32:31 +0100
commit8a8e02a43e346b9b777c8192a7c5cbdccb928b11 (patch)
tree9ffb8992f98b1354da9b522104d8d4289cf8e8d9 /client/src/app
parent81c263c86fe2a030f09e942e118551727f145b6d (diff)
downloadPeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.tar.gz
PeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.tar.zst
PeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.zip
Add help tooltip
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html8
-rw-r--r--client/src/app/shared/misc/help.component.html15
-rw-r--r--client/src/app/shared/misc/help.component.scss33
-rw-r--r--client/src/app/shared/misc/help.component.ts46
-rw-r--r--client/src/app/shared/shared.module.ts8
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html4
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 @@
1<div class="admin-sub-title">Update PeerTube configuration</div> 1<div class="admin-sub-title">Update PeerTube configuration</div>
2 2
3<form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> 3<form role="form" [formGroup]="form">
4 4
5 <div class="inner-form-title">Instance</div> 5 <div class="inner-form-title">Instance</div>
6 6
@@ -16,7 +16,7 @@
16 </div> 16 </div>
17 17
18 <div class="form-group"> 18 <div class="form-group">
19 <label for="instanceDescription">Description (markdown)</label> 19 <label for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
20 <my-markdown-textarea 20 <my-markdown-textarea
21 id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true" 21 id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
22 [classes]="{ 'input-error': formErrors['instanceDescription'] }" 22 [classes]="{ 'input-error': formErrors['instanceDescription'] }"
@@ -27,7 +27,7 @@
27 </div> 27 </div>
28 28
29 <div class="form-group"> 29 <div class="form-group">
30 <label for="instanceTerms">Terms (markdown)</label> 30 <label for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
31 <my-markdown-textarea 31 <my-markdown-textarea
32 id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true" 32 id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
33 [ngClass]="{ 'input-error': formErrors['instanceTerms'] }" 33 [ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
@@ -152,5 +152,5 @@
152 </div> 152 </div>
153 </div> 153 </div>
154 154
155 <input type="submit" value="Update configuration" [disabled]="!form.valid"> 155 <input (click)="formValidated()" type="submit" value="Update configuration" [disabled]="!form.valid">
156</form> 156</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 @@
1<ng-template #tooltipTemplate>
2 <ng-template [ngIf]="preHtml">
3 <p [innerHTML]="preHtml"></p>
4 <br />
5 </ng-template>
6
7 <p [innerHTML]="mainHtml"></p>
8
9 <ng-template [ngIf]="postHtml">
10 <br />
11 <p [innerHTML]="postHtml"></p>
12 </ng-template>
13</ng-template>
14
15<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 @@
1@import '_variables';
2@import '_mixins';
3
4.help-tooltip-button {
5 @include icon(17px);
6
7 position: relative;
8 top: -2px;
9 background-image: url('../../../assets/images/global/help.svg');
10 background-color: #fff;
11 border: none;
12}
13
14/deep/ {
15 .help-tooltip {
16 opacity: 1 !important;
17
18 .tooltip-inner {
19 text-align: left;
20 padding: 10px;
21
22 font-size: 13px;
23 font-family: $main-fonts;
24 background-color: #fff;
25 color: #000;
26 box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
27 }
28
29 ul {
30 padding-left: 20px;
31 }
32 }
33}
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 @@
1import { Component, Input, OnInit } from '@angular/core'
2
3@Component({
4 selector: 'my-help',
5 styleUrls: [ './help.component.scss' ],
6 templateUrl: './help.component.html'
7})
8
9export class HelpComponent implements OnInit {
10 @Input() preHtml = ''
11 @Input() postHtml = ''
12 @Input() customHtml = ''
13 @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
14
15 mainHtml = ''
16
17 ngOnInit () {
18 if (this.helpType === 'custom') {
19 this.mainHtml = this.customHtml
20 return
21 }
22
23 if (this.helpType === 'markdownText') {
24 this.mainHtml = 'Markdown compatible.<br /><br />' +
25 'Supports:' +
26 '<ul>' +
27 '<li>Links</li>' +
28 '<li>Lists</li>' +
29 '<li>Emphasis</li>' +
30 '</ul>'
31 return
32 }
33
34 if (this.helpType === 'markdownEnhanced') {
35 this.mainHtml = 'Markdown compatible.<br /><br />' +
36 'Supports:' +
37 '<ul>' +
38 '<li>Links</li>' +
39 '<li>Lists</li>' +
40 '<li>Emphasis</li>' +
41 '<li>Images</li>' +
42 '</ul>'
43 return
44 }
45 }
46}
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'
4import { FormsModule, ReactiveFormsModule } from '@angular/forms' 4import { FormsModule, ReactiveFormsModule } from '@angular/forms'
5import { RouterModule } from '@angular/router' 5import { RouterModule } from '@angular/router'
6import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component' 6import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
7import { HelpComponent } from '@app/shared/misc/help.component'
7import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' 8import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
8import { MarkdownService } from '@app/videos/shared' 9import { MarkdownService } from '@app/videos/shared'
9 10
10import { BsDropdownModule } from 'ngx-bootstrap/dropdown' 11import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
11import { ModalModule } from 'ngx-bootstrap/modal' 12import { ModalModule } from 'ngx-bootstrap/modal'
12import { TabsModule } from 'ngx-bootstrap/tabs' 13import { TabsModule } from 'ngx-bootstrap/tabs'
14import { TooltipModule } from 'ngx-bootstrap/tooltip'
13import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes' 15import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
14import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' 16import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
15 17
@@ -38,6 +40,7 @@ import { VideoService } from './video/video.service'
38 BsDropdownModule.forRoot(), 40 BsDropdownModule.forRoot(),
39 ModalModule.forRoot(), 41 ModalModule.forRoot(),
40 TabsModule.forRoot(), 42 TabsModule.forRoot(),
43 TooltipModule.forRoot(),
41 44
42 PrimeSharedModule, 45 PrimeSharedModule,
43 NgPipesModule 46 NgPipesModule
@@ -52,7 +55,8 @@ import { VideoService } from './video/video.service'
52 NumberFormatterPipe, 55 NumberFormatterPipe,
53 FromNowPipe, 56 FromNowPipe,
54 MarkdownTextareaComponent, 57 MarkdownTextareaComponent,
55 InfiniteScrollerDirective 58 InfiniteScrollerDirective,
59 HelpComponent
56 ], 60 ],
57 61
58 exports: [ 62 exports: [
@@ -65,6 +69,7 @@ import { VideoService } from './video/video.service'
65 BsDropdownModule, 69 BsDropdownModule,
66 ModalModule, 70 ModalModule,
67 TabsModule, 71 TabsModule,
72 TooltipModule,
68 PrimeSharedModule, 73 PrimeSharedModule,
69 BytesPipe, 74 BytesPipe,
70 KeysPipe, 75 KeysPipe,
@@ -76,6 +81,7 @@ import { VideoService } from './video/video.service'
76 EditButtonComponent, 81 EditButtonComponent,
77 MarkdownTextareaComponent, 82 MarkdownTextareaComponent,
78 InfiniteScrollerDirective, 83 InfiniteScrollerDirective,
84 HelpComponent,
79 85
80 NumberFormatterPipe, 86 NumberFormatterPipe,
81 FromNowPipe 87 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 @@
20 </div> 20 </div>
21 21
22 <div class="form-group"> 22 <div class="form-group">
23 <label for="description">Description</label> 23 <label for="description">Description</label> <my-help helpType="markdownText"></my-help>
24 <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea> 24 <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
25 25
26 <div *ngIf="formErrors.description" class="form-error"> 26 <div *ngIf="formErrors.description" class="form-error">
@@ -127,7 +127,7 @@
127 </div> 127 </div>
128 128
129 <div class="form-group"> 129 <div class="form-group">
130 <label for="support">Support (markdown)</label> 130 <label for="support">Support</label><my-help helpType="markdownEnhanced"></my-help>
131 <my-markdown-textarea 131 <my-markdown-textarea
132 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced" 132 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
133 [classes]="{ 'input-error': formErrors['support'] }" 133 [classes]="{ 'input-error': formErrors['support'] }"