feat: Set no wrap on Delete Keymap and Delete Macro icons (#371)

close #369

Author: ert78gb

shared/src/components/keymap/header/keymap-header.component.html

@@ -27,6 +27,7 @@ <h1 class="col-xs-12 pane-title">
                [class.disabled]="!deletable"
                data-toggle="tooltip"
                data-placement="bottom"
+               html="true"
                (click)="removeKeymap()"
             ></i>
             <i class="fa fa-files-o keymap__duplicate pull-right"

shared/src/components/keymap/header/keymap-header.component.ts

@@ -18,13 +18,16 @@ 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',
     styleUrls: ['./keymap-header.component.scss'],
     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 {

shared/src/components/macro/header/macro-header.component.html

@@ -11,7 +11,8 @@ <h1 class="col-xs-12 pane-title">
             <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=""

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');