Use popover for help component

pull/525/head
Chocobozzz 2018-04-18 16:29:15 +02:00
parent f55e5a7bf8
commit 04ed10b21e
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 14 additions and 29 deletions

View File

@ -13,6 +13,8 @@
</ng-template> </ng-template>
<span <span
class="help-tooltip-button" containerClass="help-tooltip" title="Click to get help" class="help-tooltip-button"
#tooltipDirective="bs-tooltip" [tooltip]="tooltipTemplate" triggers="click" [popover]="tooltipTemplate"
placement="right"
[outsideClick]="true"
></span> ></span>

View File

@ -12,10 +12,7 @@
} }
/deep/ { /deep/ {
.help-tooltip { .popover-body {
opacity: 1 !important;
.tooltip-inner {
text-align: left; text-align: left;
padding: 10px; padding: 10px;
max-width: 300px; max-width: 300px;
@ -25,7 +22,6 @@
background-color: #fff; background-color: #fff;
color: #000; color: #000;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
ul { ul {
padding-left: 20px; padding-left: 20px;

View File

@ -1,6 +1,5 @@
import { Component, ElementRef, HostListener, Input, OnInit, ViewChild, OnChanges } from '@angular/core' import { Component, Input, OnChanges, OnInit } from '@angular/core'
import { MarkdownService } from '@app/videos/shared' import { MarkdownService } from '@app/videos/shared'
import { TooltipDirective } from 'ngx-bootstrap/tooltip'
@Component({ @Component({
selector: 'my-help', selector: 'my-help',
@ -9,7 +8,6 @@ import { TooltipDirective } from 'ngx-bootstrap/tooltip'
}) })
export class HelpComponent implements OnInit, OnChanges { export class HelpComponent implements OnInit, OnChanges {
@ViewChild('tooltipDirective') tooltipDirective: TooltipDirective
@Input() preHtml = '' @Input() preHtml = ''
@Input() postHtml = '' @Input() postHtml = ''
@Input() customHtml = '' @Input() customHtml = ''
@ -17,8 +15,6 @@ export class HelpComponent implements OnInit, OnChanges {
mainHtml = '' mainHtml = ''
constructor (private elementRef: ElementRef) { }
ngOnInit () { ngOnInit () {
this.init() this.init()
} }
@ -27,15 +23,6 @@ export class HelpComponent implements OnInit, OnChanges {
this.init() this.init()
} }
@HostListener('document:click', ['$event.target'])
public onClick (targetElement) {
const clickedInside = this.elementRef.nativeElement.contains(targetElement)
if (this.tooltipDirective.isOpen && !clickedInside) {
this.tooltipDirective.hide()
}
}
private init () { private init () {
if (this.helpType === 'custom') { if (this.helpType === 'custom') {
this.mainHtml = this.customHtml this.mainHtml = this.customHtml