aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/misc
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared/misc')
-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
3 files changed, 94 insertions, 0 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}