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

Structural refactoring (#68)

Browse Source 
* Moved html in scss to separate files
* Moved components to designated folders
* Moved logic from html to ts
This commit is contained in:
Nejc Zdovc
2016-07-15 19:23:24 +02:00
committed by József Farkas
parent 036c2d0a70
commit baaec669e0
69 changed files with 834 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/popover/tab/mouse/mouse-tab.component.html Normal file
View File

@@ -0,0 +1,88 @@
<div class="mouse-action col-sm-4">
<ul class="nav nav-pills nav-stacked">
<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 col-sm-8" [ngSwitch]="selectedIndex">
<div *ngSwitchCase="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 *ngSwitchCase="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 *ngSwitchCase="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 *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
<div class="help-text--mouse-speed text-left">
<p>Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.</p>
<p>You can set the multiplier in <a href="#" title="link to the setting">link to setting</a>.</p>
</div>
<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>

46
src/components/popover/tab/mouse/mouse-tab.component.scss Normal file
View File

@@ -0,0 +1,46 @@
:host {
display: flex;
.mouse-action {
ul {
border-right: 1px solid #ccc;
li {
a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&.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;
}
}
}
}
}
.help-text--mouse-speed {
margin-bottom: 2rem;
font-size: 0.9em;
color: #666;
p {
margin: 0;
}
}
.details {
.btn-placeholder {
visibility: hidden;
}
}
}

58
src/components/popover/tab/mouse/mouse-tab.component.ts Normal file
View File

@@ -0,0 +1,58 @@
import { Component, OnInit, Renderer} from '@angular/core';
import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
import { KeyActionSaver } from '../../key-action-saver';
import {MouseAction, MouseActionParam} from '../../../../../config-serializer/config-items/MouseAction';
@Component({
moduleId: module.id,
selector: 'mouse-tab',
template: require('./mouse-tab.component.html'),
styles: [require('./mouse-tab.component.scss')],
directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
})
export class MouseTabComponent implements OnInit, KeyActionSaver {
private mouseActionParam: MouseActionParam;
private selectedIndex: number;
private selectedButton: HTMLButtonElement;
private MouseActionParam = MouseActionParam;
constructor(private renderer: Renderer) {
this.selectedIndex = 0;
}
ngOnInit() { }
keyActionValid(): boolean {
return !!this.mouseActionParam;
}
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;
}
}