aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-18 16:29:15 +0200
committerChocobozzz <me@florianbigard.com>2018-04-18 16:29:15 +0200
commit04ed10b21e8e1339514faae0bb690e4d97c23b0a (patch)
tree7460978cadb6feb3b354728e3ad6cbf6eac84bd1 /client/src/app
parentf55e5a7bf81c2c27db1514273e3366511aabf4ae (diff)
downloadPeerTube-04ed10b21e8e1339514faae0bb690e4d97c23b0a.tar.gz
PeerTube-04ed10b21e8e1339514faae0bb690e4d97c23b0a.tar.zst
PeerTube-04ed10b21e8e1339514faae0bb690e4d97c23b0a.zip
Use popover for help component
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/shared/misc/help.component.html6
-rw-r--r--client/src/app/shared/misc/help.component.scss22
-rw-r--r--client/src/app/shared/misc/help.component.ts15
3 files changed, 14 insertions, 29 deletions
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index e37d93b62..2019a4988 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -13,6 +13,8 @@
13</ng-template> 13</ng-template>
14 14
15<span 15<span
16 class="help-tooltip-button" containerClass="help-tooltip" title="Click to get help" 16 class="help-tooltip-button"
17 #tooltipDirective="bs-tooltip" [tooltip]="tooltipTemplate" triggers="click" 17 [popover]="tooltipTemplate"
18 placement="right"
19 [outsideClick]="true"
18></span> 20></span>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index b8bf3a7a5..0df8b86fa 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -12,20 +12,16 @@
12} 12}
13 13
14/deep/ { 14/deep/ {
15 .help-tooltip { 15 .popover-body {
16 opacity: 1 !important; 16 text-align: left;
17 padding: 10px;
18 max-width: 300px;
17 19
18 .tooltip-inner { 20 font-size: 13px;
19 text-align: left; 21 font-family: $main-fonts;
20 padding: 10px; 22 background-color: #fff;
21 max-width: 300px; 23 color: #000;
22 24 box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
23 font-size: 13px;
24 font-family: $main-fonts;
25 background-color: #fff;
26 color: #000;
27 box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
28 }
29 25
30 ul { 26 ul {
31 padding-left: 20px; 27 padding-left: 20px;
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index 89dd1dae5..9defd9aa4 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -1,6 +1,5 @@
1import { Component, ElementRef, HostListener, Input, OnInit, ViewChild, OnChanges } from '@angular/core' 1import { Component, Input, OnChanges, OnInit } from '@angular/core'
2import { MarkdownService } from '@app/videos/shared' 2import { MarkdownService } from '@app/videos/shared'
3import { TooltipDirective } from 'ngx-bootstrap/tooltip'
4 3
5@Component({ 4@Component({
6 selector: 'my-help', 5 selector: 'my-help',
@@ -9,7 +8,6 @@ import { TooltipDirective } from 'ngx-bootstrap/tooltip'
9}) 8})
10 9
11export class HelpComponent implements OnInit, OnChanges { 10export class HelpComponent implements OnInit, OnChanges {
12 @ViewChild('tooltipDirective') tooltipDirective: TooltipDirective
13 @Input() preHtml = '' 11 @Input() preHtml = ''
14 @Input() postHtml = '' 12 @Input() postHtml = ''
15 @Input() customHtml = '' 13 @Input() customHtml = ''
@@ -17,8 +15,6 @@ export class HelpComponent implements OnInit, OnChanges {
17 15
18 mainHtml = '' 16 mainHtml = ''
19 17
20 constructor (private elementRef: ElementRef) { }
21
22 ngOnInit () { 18 ngOnInit () {
23 this.init() 19 this.init()
24 } 20 }
@@ -27,15 +23,6 @@ export class HelpComponent implements OnInit, OnChanges {
27 this.init() 23 this.init()
28 } 24 }
29 25
30 @HostListener('document:click', ['$event.target'])
31 public onClick (targetElement) {
32 const clickedInside = this.elementRef.nativeElement.contains(targetElement)
33
34 if (this.tooltipDirective.isOpen && !clickedInside) {
35 this.tooltipDirective.hide()
36 }
37 }
38
39 private init () { 26 private init () {
40 if (this.helpType === 'custom') { 27 if (this.helpType === 'custom') {
41 this.mainHtml = this.customHtml 28 this.mainHtml = this.customHtml