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

Popover: Mouse tab

Browse Source
This commit is contained in:
József Farkas
2016-05-25 22:25:10 +02:00
parent 283e10be83
commit 004364b9fd
4 changed files with 159 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/popover/popover.component.scss
View File

@@ -27,4 +27,10 @@
.popover-content {
padding: 10px 24px;
}
mouse-tab.popover-content{
padding: 10px;
display: flex;
align-items: center;
}

40
src/components/popover/tab/mouse-tab.component.scss
View File

@@ -1,12 +1,38 @@
:host {
display: flex;
}
.mouse-action {
flex: 1;
border-right: 1px solid black;
}
.mouse-action {
flex: 1;
ul{
border-right: 1px solid #ccc;
li {
a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.details {
flex: 2;
&.active {
a:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
top: 0;
right: -4rem;
border-color: transparent transparent transparent #337ab7;
border-style: solid;
border-width: 2rem;
}
}
}
}
}
.details {
flex: 2;
.btn-placeholder {
visibility: hidden;
}
}
}

131
src/components/popover/tab/mouse-tab.component.ts
View File

@@ -1,7 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Renderer} from '@angular/core';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from '@angular/common';
import { KeyActionSaver } from '../key-action-saver';
import { KeyAction } from '../../../../config-serializer/config-items/KeyAction';
import {MouseAction, MouseActionParam} from '../../../../config-serializer/config-items/MouseAction';
@Component({
moduleId: module.id,
@@ -10,28 +11,134 @@ import { KeyAction } from '../../../../config-serializer/config-items/KeyAction'
`
<div class="mouse-action">
<ul class="nav nav-pills nav-stacked">
<li><a> Move </a></li>
<li><a> Scroll </a></li>
<li><a> Click </a></li>
<li><a> Speed </a></li>
<li (click)="changePage(0)" [ngClass]="{active: selectedIndex===0}"><a> Move </a></li>
<li (click)="changePage(1)" [ngClass]="{active: selectedIndex===1}"><a> Scroll </a></li>
<li (click)="changePage(2)" [ngClass]="{active: selectedIndex===2}"><a> Click </a></li>
<li (click)="changePage(3)" [ngClass]="{active: selectedIndex===3}"><a> Speed </a></li>
</ul>
</div>
<div class="details">
<div class="details" [ngSwitch]="selectedIndex">
<div *ngSwitchWhen="0" class="mouse__config mouse__config--move text-center">
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveUp)">
<i class="fa fa-arrow-up"></i>
</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveLeft)">
<i class="fa fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-default btn-lg btn-placeholder">
<i class="fa fa-square"></i>
</button>
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveRight)">
<i class="fa fa-arrow-right"></i>
</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveDown)">
<i class="fa fa-arrow-down"></i>
</button>
</div>
</div>
<div *ngSwitchWhen="1" class="mouse__config mouse__config--scroll text-center">
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollUp)">
<i class="fa fa-angle-double-up"></i>
</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollLeft)">
<i class="fa fa-angle-double-left"></i>
</button>
<button type="button" class="btn btn-default btn-lg btn-placeholder">
<i class="fa fa-square"></i>
</button>
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollRight)">
<i class="fa fa-angle-double-right"></i>
</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollDown)">
<i class="fa fa-angle-double-down"></i>
</button>
</div>
</div>
<div *ngSwitchWhen="2" class="mouse__config mouse__config--click">
<div class="btn-group col-xs-12" role="group">
<button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.leftClick)">Left</button>
<button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.middleClick)">Middle</button>
<button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.rightClick)">Right</button>
</div>
</div>
<div *ngSwitchWhen="3" class="mouse__config mouse__config--speed text-center">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default"
(click)="onMouseActionClick($event.target, MouseActionParam.decelerate)">-</button>
<button type="button" class="btn btn-default"
(click)="onMouseActionClick($event.target, MouseActionParam.accelerate)">+</button>
</div>
</div>
<div *ngSwitchDefault>
</div>
</div>
`,
styles: [require('./mouse-tab.component.scss')]
styles: [require('./mouse-tab.component.scss')],
directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
})
export class MouseTabComponent implements OnInit, KeyActionSaver {
constructor() { }
private MouseActionParam = MouseActionParam;
private mouseActionParam: MouseActionParam;
private selectedIndex: number;
private selectedButton: HTMLButtonElement;
constructor(private renderer: Renderer) {
this.selectedIndex = 0;
}
ngOnInit() { }
keyActionValid(): boolean {
return false;
return !!this.mouseActionParam;
}
toKeyAction(): KeyAction {
return undefined;
toKeyAction(): MouseAction {
if (!this.keyActionValid()) {
throw new Error('KeyAction is not valid. No selected mouse action!');
}
let mouseAction: MouseAction = new MouseAction();
mouseAction.mouseAction = this.mouseActionParam;
return mouseAction;
}
changePage(index: number) {
if (index < -1 || index > 3) {
console.error(`Invalid index error: ${index}`);
return;
}
this.selectedIndex = index;
this.mouseActionParam = undefined;
this.selectedButton = undefined;
}
onMouseActionClick(target: HTMLButtonElement, mouseActionParam: MouseActionParam) {
if (this.selectedButton) {
this.renderer.setElementClass(this.selectedButton, 'btn-primary', false);
}
this.selectedButton = target;
this.renderer.setElementClass(target, 'btn-primary', true);
this.mouseActionParam = mouseActionParam;
}
}