fix(keymap): Add tooltips to action icons (#366)

* fix(keymap): Add tooltips to action icons

* fix(keymap): Remove console.log write

* feat(tooltip): New design of the tooltip

* feat(keymap): Show the tooltip of "Long press action" downward

* style(tooltip): Fix linting issues

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

@@ -19,23 +19,29 @@
         />)
             <i class="fa keymap__is-default"
                [ngClass]="{'fa-star-o': !keymap.isDefault, 'fa-star': keymap.isDefault}"
+               data-toggle="tooltip"
+               data-placement="bottom"
                [title]="starTitle"
                (click)="setDefault()"
             ></i>
-            <i class="glyphicon glyphicon-trash keymap__remove pull-right" [title]="trashTitle"
+            <i class="glyphicon glyphicon-trash keymap__remove pull-right"
+               [title]="trashTitle"
                [class.disabled]="!deletable"
                data-toggle="tooltip"
-               data-placement="left"
+               data-placement="bottom"
-               data-original-title="Remove keymap"
                (click)="removeKeymap()"
             ></i>
-            <i class="fa fa-files-o keymap__duplicate pull-right" title=""
+            <i class="fa fa-files-o keymap__duplicate pull-right"
+               title="Duplicate keymap"
                data-toggle="tooltip"
-               data-placement="left"
+               data-placement="bottom"
-               data-original-title="Duplicate keymap"
                (click)="duplicateKeymap()"
             ></i>
-            <i class="fa fa-download keymap__download pull-right" title="Download keymap"
+            <i class="fa fa-download keymap__download pull-right"
+               title="Download keymap"
+               [html]="true"
+               data-toggle="tooltip"
+               data-placement="bottom"
                (click)="onDownloadIconClick()"></i>
         </h1>
     </div>

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

@@ -32,8 +32,8 @@ export class KeymapHeaderComponent implements OnChanges {
     @ViewChild('name') keymapName: ElementRef;
     @ViewChild('abbr') keymapAbbr: ElementRef;
 
-    private starTitle: string;
+    starTitle: string;
-    private trashTitle: string;
+    trashTitle: string = 'Delete keymap';
 
     constructor(private store: Store<AppState>, private renderer: Renderer) { }
 
@@ -90,7 +90,7 @@ export class KeymapHeaderComponent implements OnChanges {
     }
 
     setTrashTitle(): void {
-        this.trashTitle = this.deletable ? '' : 'The last keymap cannot be deleted.';
+        this.trashTitle = this.deletable ? 'Delete keymap' : 'The last keymap cannot be deleted.';
     }
 
     onDownloadIconClick(): void {

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

@@ -11,13 +11,13 @@
             />
             <i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
                data-toggle="tooltip"
-               data-placement="left"
+               data-placement="bottom"
                data-original-title="Remove macro"
                (click)="removeMacro()"
             ></i>
             <i class="fa fa-files-o macro__duplicate pull-right" title=""
                data-toggle="tooltip"
-               data-placement="left"
+               data-placement="bottom"
                data-original-title="Duplicate macro"
                (click)="duplicateMacro()"
             ></i>

shared/src/components/popover/tab/keypress/keypress-tab.component.html

@@ -40,7 +40,10 @@
              (valueChanged)="onLongpressChange($event)"
              [width]="140"
     ></select2>
-    <icon name="question-circle" data-toggle="tooltip" title="This action activates when another key gets pressed while holding this key."></icon>
+    <icon name="question-circle"
+          data-toggle="tooltip"
+          title="This action activates when another key gets pressed while holding this key."
+          data-placement="bottom"></icon>
 </div>
 
 <div class="disabled-state--text">

shared/src/components/side-menu/side-menu.component.html

@@ -11,7 +11,11 @@
             <li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a>
-                    <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav" title="This is the default keymap which gets activated when powering the keyboard."></i>
+                    <i *ngIf="keymap.isDefault"
+                       class="fa fa-star sidebar__fav"
+                       title="This is the default keymap which gets activated when powering the keyboard."
+                       data-toggle="tooltip"
+                       data-placement="bottom"></i>
                 </div>
             </li>
         </ul>

shared/src/directives/tooltip/tooltip.directive.ts

@@ -1,9 +1,13 @@
-import { Directive, ElementRef, AfterContentInit, Renderer2 } from '@angular/core';
+import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
 
 @Directive({
     selector: '[data-toggle="tooltip"]'
 })
-export class TooltipDirective implements AfterContentInit {
+export class TooltipDirective implements AfterContentInit, OnChanges {
+
+    @HostBinding('attr.data-placement') placement: string;
+    @Input('title') title: string;
+    @Input('html') html: boolean;
 
     private customTooltipTemplate = `
         <div class="tooltip">
@@ -15,11 +19,27 @@ export class TooltipDirective implements AfterContentInit {
     constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
 
     ngAfterContentInit() {
+        this.init();
+    }
+
+    public ngOnChanges(changes: SimpleChanges): void {
+        if (changes['title']) {
+            this.fixTitle();
+        }
+    }
+
+    private init() {
         jQuery(this.elementRef.nativeElement).tooltip({
-            placement: 'top',
+            placement: this.placement,
-            html: true,
+            html: this.html,
-            template: this.customTooltipTemplate
+            template: this.customTooltipTemplate,
+            title: this.title
         });
     }
 
+    private fixTitle() {
+        jQuery(this.elementRef.nativeElement)
+            .attr('title', this.title)
+            .tooltip('fixTitle');
+    }
 }

shared/src/global-styles.scss

@@ -1,2 +1,11 @@
+$dark-grey: #ccc;
+
 $icon-hover: #337ab7;
 $icon-hover-delete: #900;
+
+$tooltip-border-width: 1px;
+$tooltip-arrow-width: 5px;
+$tooltip-border-color: $dark-grey;
+$tooltip-background-color: #fff;
+$tooltip-inner-color: #000;
+$tooltip-arrow-border-width: $tooltip-arrow-width + $tooltip-border-width;

shared/src/main-app/_tooltip.scss

@@ -1,22 +1,92 @@
-$tooltip-text-color: #fff;
+@import '../global-styles';
-$tooltip-background: #333;
 
 // Customised bootstrap tooltip
-// Source: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-custom-template-for-tooltips
+// Source: https://gist.github.com/dsnoeck/9ce65ec8d025796c3be53e7c06880eab
-.tooltip {
+.tooltip .tooltip-inner {
-    z-index: 10001; // Over dropdowns
+    background-color: $tooltip-background-color;
+    border: $tooltip-border-width solid $tooltip-border-color;
+    color: $tooltip-inner-color;
+}
 
-    .tooltip-inner {
+.tooltip-arrow:after {
-        color: $tooltip-text-color;
+    content: '';
-        background: $tooltip-background;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: solid transparent;
+    z-index: -1;
+}
+
+.tooltip {
+    z-index: 100010; // Over dropdowns
+    position: fixed;
+
+    &.top {
+        padding: $tooltip-arrow-border-width 0;
     }
 
-    .tooltip-arrow {
+    &.right {
-        // Placement top
+        padding: 0 $tooltip-arrow-border-width;
+    }
+
+    &.bottom {
+        padding: $tooltip-arrow-border-width 0;
+    }
+
+    &.left {
+        padding: 0 $tooltip-arrow-border-width;
+    }
+
+    &.in {
         /* stylelint-disable-next-line declaration-no-important */
-        border-top-color: $tooltip-background !important;
+        opacity: 1 !important;
-        // Placemet bottom
+    }
-        /* stylelint-disable-next-line declaration-no-important */
+
-        border-bottom-color: $tooltip-background !important;
+    &.top .tooltip-arrow {
+        bottom: 2 * $tooltip-border-width;
+        border-top-color: $tooltip-background-color;
+        &:after {
+            bottom: -2 * $tooltip-border-width;
+            left: 50%;
+            margin-left: -$tooltip-arrow-border-width;
+            border-width: $tooltip-arrow-border-width $tooltip-arrow-border-width 0;
+            border-top-color: $tooltip-border-color;
+        }
+    }
+
+    &.bottom .tooltip-arrow {
+        top: 2 * $tooltip-border-width;
+        border-bottom-color: $tooltip-background-color;
+        &:after {
+            top: -2 * $tooltip-border-width;
+            left: 50%;
+            margin-left: -$tooltip-arrow-border-width;
+            border-width: 0 $tooltip-arrow-border-width $tooltip-arrow-border-width;
+            border-bottom-color: $tooltip-border-color;
+        }
+    }
+
+    &.left .tooltip-arrow {
+        right: 2 * $tooltip-border-width;
+        border-left-color: $tooltip-background-color;
+        &:after {
+            right: -2 * $tooltip-border-width;
+            top: 50%;
+            margin-top: -$tooltip-arrow-border-width;
+            border-width: $tooltip-arrow-border-width 0 $tooltip-arrow-border-width $tooltip-arrow-border-width;
+            border-left-color: $tooltip-border-color;
+        }
+    }
+
+    &.right .tooltip-arrow {
+        left: 2 * $tooltip-border-width;
+        border-right-color: $tooltip-background-color;
+        &:after {
+            left: -2 * $tooltip-border-width;
+            top: 50%;
+            margin-top: -$tooltip-arrow-border-width;
+            border-width: $tooltip-arrow-border-width $tooltip-arrow-border-width $tooltip-arrow-border-width 0;
+            border-right-color: $tooltip-border-color;
+        }
     }
 }