Skip to content

Commit ce55cac

Browse files
ert78gbmondalaci
ert78gb
authored and
mondalaci
committed
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
1 parent a4d41f3 commit ce55cac

File tree

8 files changed

+144
-32
lines changed

8 files changed

+144
-32
lines changed

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,29 @@ <h1 class="col-xs-12 pane-title">
1919
/>)
2020
<i class="fa keymap__is-default"
2121
[ngClass]="{'fa-star-o': !keymap.isDefault, 'fa-star': keymap.isDefault}"
22+
data-toggle="tooltip"
23+
data-placement="bottom"
2224
[title]="starTitle"
2325
(click)="setDefault()"
2426
></i>
25-
<i class="glyphicon glyphicon-trash keymap__remove pull-right" [title]="trashTitle"
27+
<i class="glyphicon glyphicon-trash keymap__remove pull-right"
28+
[title]="trashTitle"
2629
[class.disabled]="!deletable"
2730
data-toggle="tooltip"
28-
data-placement="left"
29-
data-original-title="Remove keymap"
31+
data-placement="bottom"
3032
(click)="removeKeymap()"
3133
></i>
32-
<i class="fa fa-files-o keymap__duplicate pull-right" title=""
34+
<i class="fa fa-files-o keymap__duplicate pull-right"
35+
title="Duplicate keymap"
3336
data-toggle="tooltip"
34-
data-placement="left"
35-
data-original-title="Duplicate keymap"
37+
data-placement="bottom"
3638
(click)="duplicateKeymap()"
3739
></i>
38-
<i class="fa fa-download keymap__download pull-right" title="Download keymap"
40+
<i class="fa fa-download keymap__download pull-right"
41+
title="Download keymap"
42+
[html]="true"
43+
data-toggle="tooltip"
44+
data-placement="bottom"
3945
(click)="onDownloadIconClick()"></i>
4046
</h1>
4147
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ export class KeymapHeaderComponent implements OnChanges {
3232
@ViewChild('name') keymapName: ElementRef;
3333
@ViewChild('abbr') keymapAbbr: ElementRef;
3434

35-
private starTitle: string;
36-
private trashTitle: string;
35+
starTitle: string;
36+
trashTitle: string = 'Delete keymap';
3737

3838
constructor(private store: Store<AppState>, private renderer: Renderer) { }
3939

@@ -90,7 +90,7 @@ export class KeymapHeaderComponent implements OnChanges {
9090
}
9191

9292
setTrashTitle(): void {
93-
this.trashTitle = this.deletable ? '' : 'The last keymap cannot be deleted.';
93+
this.trashTitle = this.deletable ? 'Delete keymap' : 'The last keymap cannot be deleted.';
9494
}
9595

9696
onDownloadIconClick(): void {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ <h1 class="col-xs-12 pane-title">
1111
/>
1212
<i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
1313
data-toggle="tooltip"
14-
data-placement="left"
14+
data-placement="bottom"
1515
data-original-title="Remove macro"
1616
(click)="removeMacro()"
1717
></i>
1818
<i class="fa fa-files-o macro__duplicate pull-right" title=""
1919
data-toggle="tooltip"
20-
data-placement="left"
20+
data-placement="bottom"
2121
data-original-title="Duplicate macro"
2222
(click)="duplicateMacro()"
2323
></i>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,10 @@
4040
(valueChanged)="onLongpressChange($event)"
4141
[width]="140"
4242
></select2>
43-
<icon name="question-circle" data-toggle="tooltip" title="This action activates when another key gets pressed while holding this key."></icon>
43+
<icon name="question-circle"
44+
data-toggle="tooltip"
45+
title="This action activates when another key gets pressed while holding this key."
46+
data-placement="bottom"></icon>
4447
</div>
4548

4649
<div class="disabled-state--text">

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
<li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
1212
<div class="sidebar__level-2" [routerLinkActive]="['active']">
1313
<a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a>
14-
<i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav" title="This is the default keymap which gets activated when powering the keyboard."></i>
14+
<i *ngIf="keymap.isDefault"
15+
class="fa fa-star sidebar__fav"
16+
title="This is the default keymap which gets activated when powering the keyboard."
17+
data-toggle="tooltip"
18+
data-placement="bottom"></i>
1519
</div>
1620
</li>
1721
</ul>

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

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { Directive, ElementRef, AfterContentInit, Renderer2 } from '@angular/core';
1+
import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
22

33
@Directive({
44
selector: '[data-toggle="tooltip"]'
55
})
6-
export class TooltipDirective implements AfterContentInit {
6+
export class TooltipDirective implements AfterContentInit, OnChanges {
7+
8+
@HostBinding('attr.data-placement') placement: string;
9+
@Input('title') title: string;
10+
@Input('html') html: boolean;
711

812
private customTooltipTemplate = `
913
<div class="tooltip">
@@ -15,11 +19,27 @@ export class TooltipDirective implements AfterContentInit {
1519
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
1620

1721
ngAfterContentInit() {
22+
this.init();
23+
}
24+
25+
public ngOnChanges(changes: SimpleChanges): void {
26+
if (changes['title']) {
27+
this.fixTitle();
28+
}
29+
}
30+
31+
private init() {
1832
jQuery(this.elementRef.nativeElement).tooltip({
19-
placement: 'top',
20-
html: true,
21-
template: this.customTooltipTemplate
33+
placement: this.placement,
34+
html: this.html,
35+
template: this.customTooltipTemplate,
36+
title: this.title
2237
});
2338
}
2439

40+
private fixTitle() {
41+
jQuery(this.elementRef.nativeElement)
42+
.attr('title', this.title)
43+
.tooltip('fixTitle');
44+
}
2545
}

‎shared/src/global-styles.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
1+
$dark-grey: #ccc;
2+
13
$icon-hover: #337ab7;
24
$icon-hover-delete: #900;
5+
6+
$tooltip-border-width: 1px;
7+
$tooltip-arrow-width: 5px;
8+
$tooltip-border-color: $dark-grey;
9+
$tooltip-background-color: #fff;
10+
$tooltip-inner-color: #000;
11+
$tooltip-arrow-border-width: $tooltip-arrow-width + $tooltip-border-width;

‎shared/src/main-app/_tooltip.scss‎

Lines changed: 83 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,92 @@
1-
$tooltip-text-color: #fff;
2-
$tooltip-background: #333;
1+
@import '../global-styles';
32

43
// Customised bootstrap tooltip
5-
// Source: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-custom-template-for-tooltips
4+
// Source: https://gist.github.com/dsnoeck/9ce65ec8d025796c3be53e7c06880eab
5+
.tooltip .tooltip-inner {
6+
background-color: $tooltip-background-color;
7+
border: $tooltip-border-width solid $tooltip-border-color;
8+
color: $tooltip-inner-color;
9+
}
10+
11+
.tooltip-arrow:after {
12+
content: '';
13+
position: absolute;
14+
width: 0;
15+
height: 0;
16+
border: solid transparent;
17+
z-index: -1;
18+
}
19+
620
.tooltip {
7-
z-index: 10001; // Over dropdowns
21+
z-index: 100010; // Over dropdowns
22+
position: fixed;
823

9-
.tooltip-inner {
10-
color: $tooltip-text-color;
11-
background: $tooltip-background;
24+
&.top {
25+
padding: $tooltip-arrow-border-width 0;
1226
}
1327

14-
.tooltip-arrow {
15-
// Placement top
16-
/* stylelint-disable-next-line declaration-no-important */
17-
border-top-color: $tooltip-background !important;
18-
// Placemet bottom
28+
&.right {
29+
padding: 0 $tooltip-arrow-border-width;
30+
}
31+
32+
&.bottom {
33+
padding: $tooltip-arrow-border-width 0;
34+
}
35+
36+
&.left {
37+
padding: 0 $tooltip-arrow-border-width;
38+
}
39+
40+
&.in {
1941
/* stylelint-disable-next-line declaration-no-important */
20-
border-bottom-color: $tooltip-background !important;
42+
opacity: 1 !important;
43+
}
44+
45+
&.top .tooltip-arrow {
46+
bottom: 2 * $tooltip-border-width;
47+
border-top-color: $tooltip-background-color;
48+
&:after {
49+
bottom: -2 * $tooltip-border-width;
50+
left: 50%;
51+
margin-left: -$tooltip-arrow-border-width;
52+
border-width: $tooltip-arrow-border-width $tooltip-arrow-border-width 0;
53+
border-top-color: $tooltip-border-color;
54+
}
55+
}
56+
57+
&.bottom .tooltip-arrow {
58+
top: 2 * $tooltip-border-width;
59+
border-bottom-color: $tooltip-background-color;
60+
&:after {
61+
top: -2 * $tooltip-border-width;
62+
left: 50%;
63+
margin-left: -$tooltip-arrow-border-width;
64+
border-width: 0 $tooltip-arrow-border-width $tooltip-arrow-border-width;
65+
border-bottom-color: $tooltip-border-color;
66+
}
67+
}
68+
69+
&.left .tooltip-arrow {
70+
right: 2 * $tooltip-border-width;
71+
border-left-color: $tooltip-background-color;
72+
&:after {
73+
right: -2 * $tooltip-border-width;
74+
top: 50%;
75+
margin-top: -$tooltip-arrow-border-width;
76+
border-width: $tooltip-arrow-border-width 0 $tooltip-arrow-border-width $tooltip-arrow-border-width;
77+
border-left-color: $tooltip-border-color;
78+
}
79+
}
80+
81+
&.right .tooltip-arrow {
82+
left: 2 * $tooltip-border-width;
83+
border-right-color: $tooltip-background-color;
84+
&:after {
85+
left: -2 * $tooltip-border-width;
86+
top: 50%;
87+
margin-top: -$tooltip-arrow-border-width;
88+
border-width: $tooltip-arrow-border-width $tooltip-arrow-border-width $tooltip-arrow-border-width 0;
89+
border-right-color: $tooltip-border-color;
90+
}
2191
}
2292
}

0 commit comments

Comments
 (0)