refactore: create feature modules (#387)
* add @angular/cli to the project * increase nodejs version -> 8.2.1 * add lerna * merge web and shared module * move electron module into packages as uhk-agent Electron agent functionality is not working * delete symlinker * convert private properties to public of component if used in html * revert uhk-message.component * fix component path * fix the correct name of the uhk-message.component.scss * building web and electron module * delete uhk-renderer package * handle device connect disconnect state * add privilege detection * fix set privilege functionality * turn back download keymap functionality * add bootstrap, select2 js and fix null pointer exception * turn back upload data to keyboard * fix send keymap * fix test-serializer * add missing package.json * merging * fix appveyor build * fix linting * turn back electron storage service * commit the missing electron-datastorage-repository * update node to 8.3.0 in .nvmrc and log node version in appveyor build * set exact version number in appveyor build * vertical align privilege and missing device components * set back node version to 8 in appveyor * move node-usb dependency from usb dir to root maybe it is fix the appveyor build * revert usb to root * fix electron builder script * fix electron builder script * turn off electron devtools * remove CTRL+U functionality * fix CTRL+o * fix lint error * turnoff store freeze * start process when got `Error: EPERM: operation not permitted` error * move files from root usb dir -> packages/usb
This commit is contained in:
Róbert Kiss
committed by
László Monda
László Monda
parent
97770f67c0
commit
0f558e4132
@@ -0,0 +1,37 @@
|
||||
<div class="row list-container">
|
||||
<div class="col-xs-10 col-xs-offset-1 list-group">
|
||||
<div class="macro-actions-container" [dragula]="'macroActions'" [dragulaModel]="macro.macroActions">
|
||||
<macro-item *ngFor="let macroAction of macro.macroActions; let macroActionIndex = index"
|
||||
[macroAction]="macroAction"
|
||||
[editable]="true"
|
||||
[deletable]="true"
|
||||
[movable]="true"
|
||||
(save)="saveAction($event, macroActionIndex)"
|
||||
(edit)="editAction(macroActionIndex)"
|
||||
(cancel)="cancelAction()"
|
||||
(delete)="deleteAction(macroAction, macroActionIndex)"
|
||||
[attr.data-index]="macroActionIndex"
|
||||
></macro-item>
|
||||
|
||||
<macro-item *ngIf="showNew"
|
||||
[@togglerNew]="showNew ? 'active' : 'inactive'"
|
||||
[macroAction]="newMacro"
|
||||
[editable]="true"
|
||||
[deletable]="false"
|
||||
[movable]="false"
|
||||
(save)="addNewAction($event)"
|
||||
(cancel)="hideNewAction()"
|
||||
></macro-item>
|
||||
</div>
|
||||
<div class="list-group add-new__action-container" [@toggler]="(!showNew) ? 'active' : 'inactive'">
|
||||
<div class="list-group-item action--item add-new__action-item no-reorder clearfix">
|
||||
<a class="add-new__action-item--link" (click)="showNewAction()">
|
||||
<i class="fa fa-plus"></i> Add macro action
|
||||
</a>
|
||||
<a class="add-new__action-item--link">
|
||||
<i class="fa fa fa-circle"></i> Add captured keystroke
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,153 @@
|
||||
@import '../../../../styles/variables';
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.action {
|
||||
&--edit__form {
|
||||
background-color: #fff;
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -15px;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
&--item {
|
||||
padding-left: 8px;
|
||||
|
||||
&.active,
|
||||
&.active:hover {
|
||||
background-color: white;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
border-color: black;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.macro__name {
|
||||
border-bottom: 2px dotted #999;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.macro-settings {
|
||||
border: 1px solid black;
|
||||
border-top-color: #999;
|
||||
z-index: 100;
|
||||
|
||||
.helper {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 13px;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: -14px;
|
||||
}
|
||||
}
|
||||
|
||||
.action--item.active.callout,
|
||||
.macro-settings.callout {
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.macro-actions-container {
|
||||
margin-bottom: 0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.list-group-item .move-handle:hover {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.flex-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.flex-button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.add-new__action-container {
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.add-new__action-item {
|
||||
border-radius: 0 0 4px 4px;
|
||||
border-top: 0;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--link {
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 10px 5px;
|
||||
text-align: center;
|
||||
color: $icon-hover;
|
||||
|
||||
&:first-of-type {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-circle {
|
||||
color: #c00;
|
||||
}
|
||||
}
|
||||
|
||||
// Dragula styles
|
||||
.gu {
|
||||
&-mirror {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
z-index: 9999;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-unselectable {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { Component, EventEmitter, Input, Output, QueryList, ViewChildren, forwardRef } from '@angular/core';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
|
||||
import { DragulaService } from 'ng2-dragula/ng2-dragula';
|
||||
|
||||
import { Macro } from '../../../config-serializer/config-items/macro';
|
||||
import { MacroAction } from '../../../config-serializer/config-items/macro-action';
|
||||
import { MacroItemComponent } from '../item';
|
||||
|
||||
@Component({
|
||||
animations: [
|
||||
trigger('toggler', [
|
||||
state('inactive', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('active', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('inactive <=> active', animate('500ms ease-out'))
|
||||
]),
|
||||
trigger('togglerNew', [
|
||||
state('void', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('active', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition(':enter', animate('500ms ease-out')),
|
||||
transition(':leave', animate('500ms ease-out'))
|
||||
])
|
||||
],
|
||||
selector: 'macro-list',
|
||||
templateUrl: './macro-list.component.html',
|
||||
styleUrls: ['./macro-list.component.scss'],
|
||||
viewProviders: [DragulaService]
|
||||
})
|
||||
export class MacroListComponent {
|
||||
@Input() macro: Macro;
|
||||
@ViewChildren(forwardRef(() => MacroItemComponent)) macroItems: QueryList<MacroItemComponent>;
|
||||
|
||||
@Output() add = new EventEmitter();
|
||||
@Output() edit = new EventEmitter();
|
||||
@Output() delete = new EventEmitter();
|
||||
@Output() reorder = new EventEmitter();
|
||||
|
||||
newMacro: Macro = undefined;
|
||||
showNew: boolean = false;
|
||||
private activeEdit: number = undefined;
|
||||
private dragIndex: number;
|
||||
|
||||
constructor(dragulaService: DragulaService) {
|
||||
/* tslint:disable:no-unused-variable: Used by Dragula. */
|
||||
dragulaService.setOptions('macroActions', {
|
||||
moves: function (el: any, container: any, handle: any) {
|
||||
return handle.className.includes('action--movable');
|
||||
}
|
||||
});
|
||||
|
||||
dragulaService.drag.subscribe((value: any) => {
|
||||
this.dragIndex = +value[1].getAttribute('data-index');
|
||||
});
|
||||
|
||||
dragulaService.drop.subscribe((value: any) => {
|
||||
if (value[4]) {
|
||||
this.reorder.emit({
|
||||
macroId: this.macro.id,
|
||||
oldIndex: this.dragIndex,
|
||||
newIndex: +value[4].getAttribute('data-index')
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showNewAction() {
|
||||
this.hideActiveEditor();
|
||||
|
||||
this.newMacro = undefined;
|
||||
this.showNew = true;
|
||||
}
|
||||
|
||||
hideNewAction() {
|
||||
this.showNew = false;
|
||||
}
|
||||
|
||||
addNewAction(macroAction: MacroAction) {
|
||||
this.add.emit({
|
||||
macroId: this.macro.id,
|
||||
action: macroAction
|
||||
});
|
||||
|
||||
this.newMacro = undefined;
|
||||
this.showNew = false;
|
||||
}
|
||||
|
||||
editAction(index: number) {
|
||||
// Hide other editors when clicking edit button of a macro action
|
||||
this.hideActiveEditor();
|
||||
this.showNew = false;
|
||||
this.activeEdit = index;
|
||||
}
|
||||
|
||||
cancelAction() {
|
||||
this.activeEdit = undefined;
|
||||
}
|
||||
|
||||
saveAction(macroAction: MacroAction, index: number) {
|
||||
this.edit.emit({
|
||||
macroId: this.macro.id,
|
||||
index: index,
|
||||
action: macroAction
|
||||
});
|
||||
|
||||
this.hideActiveEditor();
|
||||
}
|
||||
|
||||
deleteAction(macroAction: MacroAction, index: number) {
|
||||
this.delete.emit({
|
||||
macroId: this.macro.id,
|
||||
index: index,
|
||||
action: macroAction
|
||||
});
|
||||
|
||||
this.hideActiveEditor();
|
||||
}
|
||||
|
||||
private hideActiveEditor() {
|
||||
if (this.activeEdit !== undefined) {
|
||||
this.macroItems.toArray()[this.activeEdit].cancelEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user