From 621d99f53f47a11919ec243e05273ecf5907b444 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 23 Feb 2018 10:05:17 +0100 Subject: Better help on markdown fields --- client/src/app/shared/misc/help.component.html | 5 ++- client/src/app/shared/misc/help.component.scss | 1 + client/src/app/shared/misc/help.component.ts | 55 ++++++++++++++++++-------- 3 files changed, 44 insertions(+), 17 deletions(-) (limited to 'client/src/app/shared/misc') diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html index 956095996..bacbe9cdb 100644 --- a/client/src/app/shared/misc/help.component.html +++ b/client/src/app/shared/misc/help.component.html @@ -12,4 +12,7 @@ - + diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss index 5fe6b7366..b8bf3a7a5 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -18,6 +18,7 @@ .tooltip-inner { text-align: left; padding: 10px; + max-width: 300px; font-size: 13px; font-family: $main-fonts; diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts index b8530e1d4..a4a223cd6 100644 --- a/client/src/app/shared/misc/help.component.ts +++ b/client/src/app/shared/misc/help.component.ts @@ -1,4 +1,6 @@ -import { Component, Input, OnInit } from '@angular/core' +import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } from '@angular/core' +import { MarkdownService } from '@app/videos/shared' +import { TooltipDirective } from 'ngx-bootstrap/tooltip' @Component({ selector: 'my-help', @@ -7,6 +9,7 @@ import { Component, Input, OnInit } from '@angular/core' }) export class HelpComponent implements OnInit { + @ViewChild('tooltipDirective') tooltipDirective: TooltipDirective @Input() preHtml = '' @Input() postHtml = '' @Input() customHtml = '' @@ -14,6 +17,8 @@ export class HelpComponent implements OnInit { mainHtml = '' + constructor (private elementRef: ElementRef) { } + ngOnInit () { if (this.helpType === 'custom') { this.mainHtml = this.customHtml @@ -21,26 +26,44 @@ export class HelpComponent implements OnInit { } if (this.helpType === 'markdownText') { - this.mainHtml = 'Markdown compatible.

' + - 'Supports:' + - '' + this.mainHtml = this.formatMarkdownSupport(MarkdownService.TEXT_RULES) return } if (this.helpType === 'markdownEnhanced') { - this.mainHtml = 'Markdown compatible.

' + - 'Supports:' + - '' + this.mainHtml = this.formatMarkdownSupport(MarkdownService.ENHANCED_RULES) return } } + + @HostListener('document:click', ['$event.target']) + public onClick (targetElement) { + const clickedInside = this.elementRef.nativeElement.contains(targetElement) + + if (this.tooltipDirective.isOpen && !clickedInside) { + this.tooltipDirective.hide() + } + } + + private formatMarkdownSupport (rules: string[]) { + return 'Markdown compatible that supports:' + + this.createMarkdownList(rules) + } + + private createMarkdownList (rules: string[]) { + const rulesToText = { + 'emphasis': 'Emphasis', + 'link': 'Links', + 'newline': 'New lines', + 'list': 'Lists', + 'image': 'Images' + } + + const bullets = rules.map(r => rulesToText[r]) + .filter(text => text) + .map(text => '
  • ' + text + '
  • ') + .join('') + + return '' + } } -- cgit v1.2.3