aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
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/shared
parent81c263c86fe2a030f09e942e118551727f145b6d (diff)
downloadPeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.tar.gz
PeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.tar.zst
PeerTube-8a8e02a43e346b9b777c8192a7c5cbdccb928b11.zip
Add help tooltip
Diffstat (limited to 'client/src/app/shared')
-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
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 @@
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