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:
committed by
László Monda
parent
a4d41f36d5
commit
ce55cac380
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user