diff --git a/shared/src/components/keymap/header/keymap-header.component.html b/shared/src/components/keymap/header/keymap-header.component.html index 9423fe03..e5c712f6 100644 --- a/shared/src/components/keymap/header/keymap-header.component.html +++ b/shared/src/components/keymap/header/keymap-header.component.html @@ -19,23 +19,29 @@ />) - - - diff --git a/shared/src/components/keymap/header/keymap-header.component.ts b/shared/src/components/keymap/header/keymap-header.component.ts index a6983bb1..311c937c 100644 --- a/shared/src/components/keymap/header/keymap-header.component.ts +++ b/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; - private trashTitle: string; + starTitle: string; + trashTitle: string = 'Delete keymap'; constructor(private store: Store, 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 { diff --git a/shared/src/components/macro/header/macro-header.component.html b/shared/src/components/macro/header/macro-header.component.html index 975807dc..916d26ee 100644 --- a/shared/src/components/macro/header/macro-header.component.html +++ b/shared/src/components/macro/header/macro-header.component.html @@ -11,13 +11,13 @@ /> diff --git a/shared/src/components/popover/tab/keypress/keypress-tab.component.html b/shared/src/components/popover/tab/keypress/keypress-tab.component.html index ae7100c9..520fb667 100644 --- a/shared/src/components/popover/tab/keypress/keypress-tab.component.html +++ b/shared/src/components/popover/tab/keypress/keypress-tab.component.html @@ -40,7 +40,10 @@ (valueChanged)="onLongpressChange($event)" [width]="140" > - +
diff --git a/shared/src/components/side-menu/side-menu.component.html b/shared/src/components/side-menu/side-menu.component.html index 9165657e..c0451ca0 100644 --- a/shared/src/components/side-menu/side-menu.component.html +++ b/shared/src/components/side-menu/side-menu.component.html @@ -11,7 +11,11 @@
  • {{keymap.name}} - +
    • diff --git a/shared/src/directives/tooltip/tooltip.directive.ts b/shared/src/directives/tooltip/tooltip.directive.ts index 38486785..c661cd67 100644 --- a/shared/src/directives/tooltip/tooltip.directive.ts +++ b/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 = `
    @@ -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', - html: true, - template: this.customTooltipTemplate + placement: this.placement, + html: this.html, + template: this.customTooltipTemplate, + title: this.title }); } + private fixTitle() { + jQuery(this.elementRef.nativeElement) + .attr('title', this.title) + .tooltip('fixTitle'); + } } diff --git a/shared/src/global-styles.scss b/shared/src/global-styles.scss index 4d96d669..30a2da4d 100644 --- a/shared/src/global-styles.scss +++ b/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; diff --git a/shared/src/main-app/_tooltip.scss b/shared/src/main-app/_tooltip.scss index b4130cde..770f6f4a 100644 --- a/shared/src/main-app/_tooltip.scss +++ b/shared/src/main-app/_tooltip.scss @@ -1,22 +1,92 @@ -$tooltip-text-color: #fff; -$tooltip-background: #333; +@import '../global-styles'; // Customised bootstrap tooltip -// Source: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-custom-template-for-tooltips -.tooltip { - z-index: 10001; // Over dropdowns +// Source: https://gist.github.com/dsnoeck/9ce65ec8d025796c3be53e7c06880eab +.tooltip .tooltip-inner { + background-color: $tooltip-background-color; + border: $tooltip-border-width solid $tooltip-border-color; + color: $tooltip-inner-color; +} - .tooltip-inner { - color: $tooltip-text-color; - background: $tooltip-background; +.tooltip-arrow:after { + content: ''; + 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 { - // Placement top + &.right { + 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; - // Placemet bottom - /* stylelint-disable-next-line declaration-no-important */ - border-bottom-color: $tooltip-background !important; + opacity: 1 !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; + } } }