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
This commit is contained in:
Róbert Kiss
2017-07-19 23:27:25 +02:00
committed by László Monda
parent a4d41f36d5
commit ce55cac380
8 changed files with 145 additions and 33 deletions

View File

@@ -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-original-title="Remove keymap"
data-placement="bottom"
(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-original-title="Duplicate keymap"
data-placement="bottom"
(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>

View File

@@ -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<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 {

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>