Moved list of macros to the new component
This commit is contained in:
NejcZdovc
József Farkas
35
src/components/macro/list/macro-list.component.html
Normal file
35
src/components/macro/list/macro-list.component.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<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"
|
||||
[moveable]="true"
|
||||
(save)="saveAction($event, macroActionIndex)"
|
||||
(edit)="editAction(macroActionIndex)"
|
||||
(cancel)="cancelAction()"
|
||||
(delete)="deleteAction(macroAction, macroActionIndex)"
|
||||
[attr.data-index]="macroActionIndex"
|
||||
></macro-item>
|
||||
|
||||
<macro-item *ngIf="showNew" [macroAction]="newMacro"
|
||||
[editable]="true"
|
||||
[deletable]="false"
|
||||
[moveable]="false"
|
||||
(save)="addNewAction($event)"
|
||||
(cancel)="hideNewAction()"
|
||||
></macro-item>
|
||||
</div>
|
||||
<div class="list-group add-new__action-container" *ngIf="!showNew">
|
||||
<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 new macro action
|
||||
</a>
|
||||
<a class="add-new__action-item--link">
|
||||
<i class="fa fa fa-circle"></i> Add new capture keystroke
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
158
src/components/macro/list/macro-list.component.scss
Normal file
158
src/components/macro/list/macro-list.component.scss
Normal file
@@ -0,0 +1,158 @@
|
||||
@import '../../../main-app/global-styles';
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
109
src/components/macro/list/macro-list.component.ts
Normal file
109
src/components/macro/list/macro-list.component.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import { Component, EventEmitter, Input, Output, QueryList, ViewChild, forwardRef } from '@angular/core';
|
||||
|
||||
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 './../index';
|
||||
|
||||
@Component({
|
||||
selector: 'macro-list',
|
||||
template: require('./macro-list.component.html'),
|
||||
styles: [require('./macro-list.component.scss')],
|
||||
viewProviders: [DragulaService]
|
||||
})
|
||||
export class MacroListComponent {
|
||||
@Input() macro: Macro;
|
||||
@ViewChild(forwardRef(() => MacroItemComponent)) macroItems: QueryList<MacroItemComponent>;
|
||||
|
||||
@Output() add = new EventEmitter();
|
||||
@Output() edit = new EventEmitter();
|
||||
@Output() delete = new EventEmitter();
|
||||
@Output() reorder = new EventEmitter();
|
||||
|
||||
private showNew: boolean = false;
|
||||
private newMacro: Macro = undefined;
|
||||
private activeEdit: number = undefined;
|
||||
private dragIndex: number;
|
||||
|
||||
constructor(private 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