diff options
author | Chocobozzz <me@florianbigard.com> | 2018-04-18 16:29:15 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-04-18 16:29:15 +0200 |
commit | 04ed10b21e8e1339514faae0bb690e4d97c23b0a (patch) | |
tree | 7460978cadb6feb3b354728e3ad6cbf6eac84bd1 /client/src/app/shared | |
parent | f55e5a7bf81c2c27db1514273e3366511aabf4ae (diff) | |
download | PeerTube-04ed10b21e8e1339514faae0bb690e4d97c23b0a.tar.gz PeerTube-04ed10b21e8e1339514faae0bb690e4d97c23b0a.tar.zst PeerTube-04ed10b21e8e1339514faae0bb690e4d97c23b0a.zip |
Use popover for help component
Diffstat (limited to 'client/src/app/shared')
-rw-r--r-- | client/src/app/shared/misc/help.component.html | 6 | ||||
-rw-r--r-- | client/src/app/shared/misc/help.component.scss | 22 | ||||
-rw-r--r-- | client/src/app/shared/misc/help.component.ts | 15 |
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 @@ | |||
1 | import { Component, ElementRef, HostListener, Input, OnInit, ViewChild, OnChanges } from '@angular/core' | 1 | import { Component, Input, OnChanges, OnInit } from '@angular/core' |
2 | import { MarkdownService } from '@app/videos/shared' | 2 | import { MarkdownService } from '@app/videos/shared' |
3 | import { 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 | ||
11 | export class HelpComponent implements OnInit, OnChanges { | 10 | export 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 |