refactor: Create uhk-header component (#354)

Create a header wrapper component that will contains the undo
notification component.
This commit is contained in:
Róbert Kiss
2017-07-15 14:41:06 +02:00
committed by László Monda
parent 3b0540f0d4
commit 131fdea0c5
7 changed files with 89 additions and 67 deletions

View File

@@ -1,39 +1,42 @@
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="fa fa-keyboard-o"></i>
<input #name cancelable
class="keymap__name pane-title__name"
type="text"
value="{{ keymap.name }}"
(change)="editKeymapName($event.target.value)"
(keyup.enter)="name.blur()"
/> keymap
(<input #abbr cancelable
class="keymap__abbrev pane-title__abbrev"
type="text"
value="{{ keymap.abbreviation }}"
(change)="editKeymapAbbr($event.target.value)"
(keyup.enter)="abbr.blur()"
[attr.maxLength]="3"
<uhk-header>
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="fa fa-keyboard-o"></i>
<input #name cancelable
class="keymap__name pane-title__name"
type="text"
value="{{ keymap.name }}"
(change)="editKeymapName($event.target.value)"
(keyup.enter)="name.blur()"
/> keymap
(<input #abbr cancelable
class="keymap__abbrev pane-title__abbrev"
type="text"
value="{{ keymap.abbreviation }}"
(change)="editKeymapAbbr($event.target.value)"
(keyup.enter)="abbr.blur()"
[attr.maxLength]="3"
/>)
<i class="fa keymap__is-default"
[ngClass]="{'fa-star-o': !keymap.isDefault, 'fa-star': keymap.isDefault}"
[title]="starTitle"
(click)="setDefault()"
></i>
<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"
(click)="removeKeymap()"
></i>
<i class="fa fa-files-o keymap__duplicate pull-right" title=""
data-toggle="tooltip"
data-placement="left"
data-original-title="Duplicate keymap"
(click)="duplicateKeymap()"
></i>
<i class="fa fa-download keymap__download pull-right" title="Download keymap" (click)="onDownloadIconClick()"></i>
</h1>
</div>
<i class="fa keymap__is-default"
[ngClass]="{'fa-star-o': !keymap.isDefault, 'fa-star': keymap.isDefault}"
[title]="starTitle"
(click)="setDefault()"
></i>
<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"
(click)="removeKeymap()"
></i>
<i class="fa fa-files-o keymap__duplicate pull-right" title=""
data-toggle="tooltip"
data-placement="left"
data-original-title="Duplicate keymap"
(click)="duplicateKeymap()"
></i>
<i class="fa fa-download keymap__download pull-right" title="Download keymap"
(click)="onDownloadIconClick()"></i>
</h1>
</div>
</uhk-header>

View File

@@ -1,24 +1,26 @@
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="fa fa-play"></i>
<input #macroName cancelable
class="pane-title__name"
type="text"
value="{{ macro.name }}"
(change)="editMacroName($event.target.value)"
(keyup.enter)="macroName.blur()"
/>
<i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
data-toggle="tooltip"
data-placement="left"
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-original-title="Duplicate macro"
(click)="duplicateMacro()"
></i>
</h1>
</div>
<uhk-header>
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="fa fa-play"></i>
<input #macroName cancelable
class="pane-title__name"
type="text"
value="{{ macro.name }}"
(change)="editMacroName($event.target.value)"
(keyup.enter)="macroName.blur()"
/>
<i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
data-toggle="tooltip"
data-placement="left"
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-original-title="Duplicate macro"
(click)="duplicateMacro()"
></i>
</h1>
</div>
</uhk-header>

View File

@@ -1,3 +1,4 @@
<uhk-header></uhk-header>
<div class="not-found">
You don't have any macros. Try to add one!
</div>
</div>

View File

@@ -0,0 +1,3 @@
<div>
<ng-content></ng-content>
</div>

View File

@@ -0,0 +1,9 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'uhk-header',
templateUrl: './uhk-header.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UhkHeader {
}