From 817daafd187523ef8a53c3549cc50ce6929d4a49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Kiss?= <erT78gb@gmail.com>
Date: Tue, 25 Jul 2017 00:38:43 +0200
Subject: [PATCH] feat: Set no wrap on Delete Keymap and Delete Macro icons
 (#371)

close #369
---
 .../keymap/header/keymap-header.component.html       |  1 +
 .../keymap/header/keymap-header.component.ts         |  9 +++++++--
 .../macro/header/macro-header.component.html         |  3 ++-
 shared/src/directives/tooltip/tooltip.directive.ts   | 12 ++++++++++--
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/shared/src/components/keymap/header/keymap-header.component.html b/shared/src/components/keymap/header/keymap-header.component.html
index e6d684c0..f76baccb 100644
--- a/shared/src/components/keymap/header/keymap-header.component.html
+++ b/shared/src/components/keymap/header/keymap-header.component.html
@@ -27,6 +27,7 @@
                [class.disabled]="!deletable"
                data-toggle="tooltip"
                data-placement="bottom"
+               html="true"
                (click)="removeKeymap()"
             ></i>
             <i class="fa fa-files-o keymap__duplicate pull-right"
diff --git a/shared/src/components/keymap/header/keymap-header.component.ts b/shared/src/components/keymap/header/keymap-header.component.ts
index 1e511647..72d0f650 100644
--- a/shared/src/components/keymap/header/keymap-header.component.ts
+++ b/shared/src/components/keymap/header/keymap-header.component.ts
@@ -18,6 +18,8 @@ import { Keymap } from '../../../config-serializer/config-items/keymap';
 import { AppState } from '../../../store';
 import { KeymapActions } from '../../../store/actions';
 
+const DEFAULT_TRASH_TITLE = '<span class="text-nowrap">Delete keymap</span>';
+
 @Component({
     selector: 'keymap-header',
     templateUrl: './keymap-header.component.html',
@@ -25,6 +27,7 @@ import { KeymapActions } from '../../../store/actions';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class KeymapHeaderComponent implements OnChanges {
+
     @Input() keymap: Keymap;
     @Input() deletable: boolean;
     @Output() downloadClick = new EventEmitter<void>();
@@ -33,7 +36,7 @@ export class KeymapHeaderComponent implements OnChanges {
     @ViewChild('abbr') keymapAbbr: ElementRef;
 
     starTitle: string;
-    trashTitle: string = 'Delete keymap';
+    trashTitle: string = DEFAULT_TRASH_TITLE;
 
     constructor(private store: Store<AppState>, private renderer: Renderer2) { }
 
@@ -92,7 +95,9 @@ export class KeymapHeaderComponent implements OnChanges {
     }
 
     setTrashTitle(): void {
-        this.trashTitle = this.deletable ? 'Delete keymap' : 'The last keymap cannot be deleted.';
+        this.trashTitle = this.deletable
+            ? DEFAULT_TRASH_TITLE
+            : '<span class="text-nowrap">The last keymap cannot be deleted.</span>';
     }
 
     onDownloadIconClick(): void {
diff --git a/shared/src/components/macro/header/macro-header.component.html b/shared/src/components/macro/header/macro-header.component.html
index 2f89df39..cd8b4274 100644
--- a/shared/src/components/macro/header/macro-header.component.html
+++ b/shared/src/components/macro/header/macro-header.component.html
@@ -11,7 +11,8 @@
             <i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
                data-toggle="tooltip"
                data-placement="bottom"
-               data-original-title="Remove macro"
+               html="true"
+               data-original-title="<span class='text-nowrap'>Delete macro</span>"
                (click)="removeMacro()"
             ></i>
             <i class="fa fa-files-o macro__duplicate pull-right" title=""
diff --git a/shared/src/directives/tooltip/tooltip.directive.ts b/shared/src/directives/tooltip/tooltip.directive.ts
index c661cd67..988c5109 100644
--- a/shared/src/directives/tooltip/tooltip.directive.ts
+++ b/shared/src/directives/tooltip/tooltip.directive.ts
@@ -1,4 +1,5 @@
-import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
+import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Directive({
     selector: '[data-toggle="tooltip"]'
@@ -16,7 +17,7 @@ export class TooltipDirective implements AfterContentInit, OnChanges {
         </div>
     `;
 
-    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
+    constructor(private elementRef: ElementRef, private sanitizer: DomSanitizer) { }
 
     ngAfterContentInit() {
         this.init();
@@ -38,6 +39,13 @@ export class TooltipDirective implements AfterContentInit, OnChanges {
     }
 
     private fixTitle() {
+        jQuery(this.elementRef.nativeElement).tooltip({
+            placement: this.placement,
+            html: this.html,
+            template: this.customTooltipTemplate,
+            title: this.title
+        });
+
         jQuery(this.elementRef.nativeElement)
             .attr('title', this.title)
             .tooltip('fixTitle');