uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

KeyAction Editor Popover first steps.

Browse Source
This commit is contained in:
József Farkas
2016-05-11 22:52:47 +02:00
parent d4ef07a6b0
commit 956f22fc8c
5 changed files with 289 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/popover/capture-keystroke-button.component.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'capture-keystroke-button',
template:
`
<button type="button" class="btn btn-sm btn--capture-keystroke"
[ngClass]="{'btn-default': !record, 'btn-info': record}"
(click)="record ? stop() : start()">
<i class="fa" [ngClass]=" { 'fa-circle' : !record, 'fa-square': record }"></i>
<template [ngIf]="!record">
Capture keystroke
</template>
<template [ngIf]="record">
Stop capturing
</template>
</button>
`,
styles:
[`
button {
display: inline-block;
margin: 0 0 0 .25rem;
}
.fa-circle {
color:#c00;
}
`]
})
export class CaptureKeystrokeButtonComponent implements OnInit {
private record: boolean;
constructor() { }
ngOnInit() { }
private start(): void {
this.record = true;
}
private stop(): void {
this.record = false;
}
}

55
src/components/popover/keypress-edit.component.ts Normal file
View File

@@ -0,0 +1,55 @@
import { Component, OnInit } from '@angular/core';
import {CaptureKeystrokeButtonComponent} from './capture-keystroke-button.component';
@Component({
moduleId: module.id,
selector: 'keypress-edit',
template:
`
<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
<b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
<select class="scancode" style="width: 200px">
</select>
<capture-keystroke-button></capture-keystroke-button>
</div>
<div class="scancode-options">
<b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
<div class="btn-toolbar modifiers" style="display:inline-block">
<div class="btn-group btn-group-sm modifiers__left">
<button type="button" class="btn btn-default" *ngFor="let modifier of leftModifiers">
{{modifier}}
</button>
</div>
<div class="btn-group btn-group-sm modifiers__right">
<button type="button" class="btn btn-default" *ngFor="let modifier of rightModifiers">
{{modifier}}
</button>
</div>
</div>
</div>
<div style="margin-top: 3rem;">
<b class="setting-label" style="position:relative;">Long press action:</b>
<select class="secondary-role" style="width:135px">
</select>
<i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right"
title="This action happens when the key is being held along with another key.">
</i>
</div>
`,
directives: [CaptureKeystrokeButtonComponent]
})
export class KeypressEditComponent implements OnInit {
private leftModifiers: string[];
private rightModifiers: string[];
constructor() {
this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
}
ngOnInit() { }
}

154
src/components/popover/popover.component.ts Normal file
View File

@@ -0,0 +1,154 @@
import {
Component,
OnInit,
AfterViewInit,
Output,
EventEmitter,
ViewChildren,
ElementRef,
Renderer,
QueryList,
ChangeDetectorRef
} from '@angular/core';
import {NgSwitch, NgSwitchWhen} from '@angular/common';
import {KeypressEditComponent} from './keypress-edit.component';
@Component({
moduleId: module.id,
selector: 'popover',
template:
`
<div class="container-fluid">
<div class="row">
<div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu">
<li #keypress (click)="onListItemClick(0)">
<a class="menu-tabs--item">
<i class="fa fa-keyboard-o"></i>
Keypress
</a>
</li>
<li #layer (click)="onListItemClick(1)">
<a class="menu-tabs--item">
<i class="fa fa-clone"></i>
Layer
</a>
</li>
<li #mouse (click)="onListItemClick(2)">
<a class="menu-tabs--item">
<i class="fa fa-mouse-pointer"></i>
Mouse
</a>
</li>
<li #macro (click)="onListItemClick(3)">
<a class="menu-tabs--item">
<i class="fa fa-play"></i>
Macro
</a>
</li>
<li #keymap (click)="onListItemClick(4)">
<a class="menu-tabs--item">
<i class="fa fa-keyboard-o"></i>
Keymap
</a>
</li>
<li #none (click)="onListItemClick(5)">
<a class="menu-tabs--item">
<i class="fa fa-ban"></i>
None
</a>
</li>
</ul>
</div>
</div>
<div class="row" [ngSwitch]="activeListItemIndex">
<div class="popover-content">
<keypress-edit *ngSwitchWhen="0"></keypress-edit>
<div *ngSwitchWhen="1"> Layer </div>
<div *ngSwitchWhen="2"> Mouse </div>
<div *ngSwitchWhen="3"> Macro </div>
<div *ngSwitchWhen="4"> Keymap </div>
<div *ngSwitchWhen="5"> None </div>
</div>
</div>
<div class="row">
<div class="popover-action">
<button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
<button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
</div>
</div>
</div>
`,
styles:
[`
:host {
display: flex;
flex-direction: column;
min-width: 577px;
padding: 0;
}
.popover-action {
padding: 8px 14px;
margin: 0;
font-size: 14px;
background-color: #f7f7f7;
border-top: 1px solid #ebebeb;
border-radius: 0 0 5px 5px;
text-align: right;
}
.popover-title.menu-tabs {
padding: .5rem .5rem 0;
display: block;
}
.popover-title.menu-tabs .nav-tabs {
position: relative;
top: 1px;
}
.popover-content {
padding: 10px 24px;
}
`],
host: { 'class': 'popover' },
directives: [NgSwitch, NgSwitchWhen, KeypressEditComponent]
})
export class PopoverComponent implements OnInit, AfterViewInit {
@Output() cancel = new EventEmitter<any>();
@ViewChildren('keypress,layer,mouse,macro,keymap,none') liElementRefs: QueryList<ElementRef>;
private activeListItemIndex: number;
constructor(private renderer: Renderer, private changeDetectorRef: ChangeDetectorRef) {
this.activeListItemIndex = -1;
}
ngOnInit() { }
ngAfterViewInit() {
this.onListItemClick(0);
this.changeDetectorRef.detectChanges();
}
onCancelClick(): void {
this.cancel.emit(undefined);
}
onRemapKey(): void {
}
onListItemClick(index: number): void {
let listItems: HTMLLIElement[] = this.liElementRefs.toArray().map(liElementRef => liElementRef.nativeElement);
if (this.activeListItemIndex >= 0) {
this.renderer.setElementClass(listItems[this.activeListItemIndex], 'active', false);
}
this.renderer.setElementClass(listItems[index], 'active', true);
this.activeListItemIndex = index;
}
}