Popover: Mouse tab

config-serializer/config-items/MouseAction.ts

@@ -2,7 +2,7 @@ import {keyActionType, KeyActionId, KeyAction} from './KeyAction';
 import {UhkBuffer} from '../UhkBuffer';
 import {assertEnum} from '../assert';
 
-enum MouseActionParam {
+export enum MouseActionParam {
     leftClick,
     middleClick,
     rightClick,

src/components/popover/popover.component.scss

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

src/components/popover/tab/mouse-tab.component.scss

@@ -1,12 +1,38 @@
 :host {
     display: flex;
-}
 
-.mouse-action {
+    .mouse-action {
-    flex: 1;
+        flex: 1;
-    border-right: 1px solid black;
+        ul{
-}
+            border-right: 1px solid #ccc;
+            li {
+                a {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
 
-.details {
+                &.active {
-    flex: 2;
+                    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;
+        }
+    }
 }

src/components/popover/tab/mouse-tab.component.ts

@@ -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 (click)="changePage(0)" [ngClass]="{active: selectedIndex===0}"><a>     Move    </a></li>
-                <li><a>     Scroll  </a></li>
+                <li (click)="changePage(1)" [ngClass]="{active: selectedIndex===1}"><a>     Scroll  </a></li>
-                <li><a>     Click   </a></li>
+                <li (click)="changePage(2)" [ngClass]="{active: selectedIndex===2}"><a>     Click   </a></li>
-                <li><a>     Speed   </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 {
+    toKeyAction(): MouseAction {
-        return undefined;
+        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;
     }
 
 }