New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Macro UI #87
Macro UI #87
Changes from all commits
74c9e3d
2509a28
fa28404
b0b151c
e1fd445
0f2f483
0a15dea
f3c55d1
046546f
c7e3282
cacb397
9788c5c
a583bcf
7e582b4
2c6b45a
d69a4ed
dc93758
cbeea59
de59feb
bdaad15
030f130
4899f1e
ebd8cd0
9a647aa
d0d7ca8
7d2ffcc
667bf07
3c819cd
69e46b0
0825500
633fe1d
c720870
2ace247
beb546a
ddf4ece
c143f8e
4dd6801
3356926
08491fb
edf73b4
f54e3f9
10ca5fb
5d2b7ce
a464e66
8732200
9d7dd35
11702e7
f8d5056
9adf0ed
f344aca
b1f251c
631bff3
34caf8a
4c7a96b
e702641
cf1d15a
9906933
d518aaa
db39209
7dbf147
8af5c83
22cd0a0
628f3eb
e94aabb
b8913e7
dd19610
d285b82
3628206
498ada3
8bb5aaf
8610214
4414dc2
2a91b32
eff03e3
fbd6512
0aa361c
4931a5a
7204ae1
5ed2e29
9becd28
aa1f354
0c9a71a
ff7bcae
618bcff
f6045c1
3debd46
446a0bf
0539d36
5afe1b9
c555f46
7645146
8343e77
44a84de
904314b
65f8458
a509145
171541a
f1056f5
85b30b3
9ca1d24
0954e55
541daca
4dcac59
07f1f89
5a4a924
1ea4038
a5538c1
bcb9922
e977438
e43dbcf
ae03dc3
4682bcc
2da6530
3a03ca3
878e263
87d479f
cdc0a16
dabe5b2
5c92c50
30dc1fe
908bf2b
6d0473a
01e0b30
bcd57fa
1f1d6ef
1d0ff4f
d84e400
43c92d5
cd9acf9
688055a
8461949
a432661
506b101
c624f30
cee957d
50f937d
0a70e67
83baee1
86e4d2b
38bc89e
e71cf1a
a9a67ac
f91a740
37b19d9
4ab02d5
d54440a
6275023
8aecd0c
87a8e42
7778a6e
60471eb
d6edf90
098f397
8bd4100
f3b044e
7c11292
9dc0c5c
31ab5e5
3b76a46
0f11c49
acedc85
d3e52de
4d79cb2
32df395
b7d9c51
7df4bdf
c431a39
0bf1738
046f51c
a8a2c85
91872a9
2508a91
30bbbff
b1273d0
91fb7fe
89d8dd1
94bf12f
64188dc
6a66441
532e3fc
9d5ad67
a8878fd
3b66130
62b2bee
035c890
3ecfcbe
b3e9dd9
10701be
7b89636
db8c8be
65f46e0
2f6d26c
705f817
e75123b
d230637
b1ffd54
97be07f
45635b5
c7d97f9
821c50c
d20aaf8
c2f8ad5
86ca150
427867b
7ee7bff
59b3c2c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,3 +4,5 @@ npm-debug.log | |
dist | ||
.idea | ||
*.iml | ||
*.sublime-project | ||
*.sublime-workspace |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,5 @@ | ||
export * from './macro.component'; | ||
export * from './macro.routes'; | ||
export * from './macro-item'; | ||
export * from './macro-action-editor'; | ||
export * from './macro-action-editor/tab'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { MacroActionEditorComponent } from './macro-action-editor.component'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<div class="action--editor"> | ||
<div class="row"> | ||
<div class="col-xs-4 editor__tab-links"> | ||
<ul class="nav nav-pills nav-stacked"> | ||
<li #macroText [class.active]="activeTab === TabName.Text" (click)="selectTab(TabName.Text)"> | ||
<a> | ||
<i class="fa fa-font"></i> | ||
<span>Type text</span> | ||
</a> | ||
</li> | ||
<li #macroKeypress [class.active]="activeTab === TabName.Keypress" (click)="selectTab(TabName.Keypress)"> | ||
<a> | ||
<i class="fa fa-keyboard-o"></i> | ||
<span>Key action</span> | ||
</a> | ||
</li> | ||
<li #macroMouse [class.active]="activeTab === TabName.Mouse" (click)="selectTab(TabName.Mouse)"> | ||
<a> | ||
<i class="fa fa-mouse-pointer"></i> | ||
<span>Mouse action</span> | ||
</a> | ||
</li> | ||
<li #macroDelay [class.active]="activeTab === TabName.Delay" (click)="selectTab(TabName.Delay)"> | ||
<a> | ||
<i class="fa fa-clock-o"></i> | ||
<span>Delay</span> | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
<div class="col-xs-8 editor__tabs" [ngSwitch]="activeTab"> | ||
<macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction"></macro-text-tab> | ||
<macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction"></macro-key-tab> | ||
<macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction"></macro-mouse-tab> | ||
<macro-delay-tab #tab *ngSwitchCase="TabName.Delay" [macroAction]="editableMacroAction"></macro-delay-tab> | ||
</div> | ||
</div> | ||
<div class="row"> | ||
<div class="col-xs-12 flex-button-wrapper editor__actions-container"> | ||
<div class="editor__actions"> | ||
<button class="btn btn-sm btn-default flex-button" type="button" (click)="onCancelClick()"> Cancel </button> | ||
<button class="btn btn-sm btn-primary flex-button" type="button" (click)="onSaveClick()"> Save </button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
.action--editor { | ||
padding-top: 0; | ||
padding-bottom: 0; | ||
border-radius: 0; | ||
border: 0; | ||
} | ||
|
||
.nav { | ||
padding-bottom: 1rem; | ||
|
||
li { | ||
a { | ||
border-top-right-radius: 0; | ||
border-bottom-right-radius: 0; | ||
|
||
&.selected { | ||
font-style: italic; | ||
} | ||
|
||
&:hover { | ||
cursor: pointer; | ||
} | ||
} | ||
|
||
&.active { | ||
z-index: 2; | ||
|
||
a { | ||
&.selected { | ||
font-style: normal; | ||
} | ||
|
||
&: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; | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
||
.editor { | ||
&__tabs, | ||
&__tab-links { | ||
padding-top: 1rem; | ||
} | ||
|
||
&__tabs { | ||
border-left: 1px solid #ddd; | ||
margin-left: -1.6rem; | ||
padding-left: 3rem; | ||
} | ||
|
||
&__actions { | ||
float: right; | ||
|
||
&-container { | ||
background: #f5f5f5; | ||
border-top: 1px solid #ddd; | ||
padding: 1rem 1.5rem; | ||
} | ||
} | ||
} | ||
|
||
.flex-button-wrapper { | ||
display: flex; | ||
flex-direction: row-reverse; | ||
} | ||
|
||
.flex-button { | ||
align-self: flex-end; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; | ||
|
||
import { | ||
EditableMacroAction, | ||
MacroAction, | ||
TextMacroAction, | ||
macroActionType | ||
} from '../../../config-serializer/config-items/macro-action'; | ||
import { MacroKeyTabComponent } from './tab/macro-key'; | ||
|
||
enum TabName { | ||
Keypress, | ||
Text, | ||
Mouse, | ||
Delay | ||
}; | ||
|
||
@Component({ | ||
selector: 'macro-action-editor', | ||
template: require('./macro-action-editor.component.html'), | ||
styles: [require('./macro-action-editor.component.scss')], | ||
host: { 'class': 'macro-action-editor' } | ||
}) | ||
export class MacroActionEditorComponent implements OnInit { | ||
@Input() macroAction: MacroAction; | ||
|
||
@Output() save = new EventEmitter<MacroAction>(); | ||
@Output() cancel = new EventEmitter<void>(); | ||
|
||
@ViewChild('tab') selectedTab: any; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use/create the proper type instead of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. any is fine here because each tab is quite unique, only some of them implement Tab and I didn't want to create a completely redundant class or interface for these as there are no shared properties or methods. |
||
|
||
private editableMacroAction: EditableMacroAction; | ||
private activeTab: TabName; | ||
/* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */ | ||
/* tslint:disable:no-unused-variable: It is used in the template. */ | ||
private TabName = TabName; | ||
/* tslint:enable:no-unused-variable */ | ||
/* tslint:enable:variable-name */ | ||
|
||
ngOnInit() { | ||
let macroAction: MacroAction = this.macroAction ? this.macroAction : new TextMacroAction(); | ||
this.editableMacroAction = new EditableMacroAction(macroAction.toJsObject()); | ||
let tab: TabName = this.getTabName(this.editableMacroAction); | ||
this.activeTab = tab; | ||
} | ||
|
||
onCancelClick(): void { | ||
this.cancel.emit(); | ||
} | ||
|
||
onSaveClick(): void { | ||
try { | ||
const action = this.editableMacroAction; | ||
if (action.isKeyAction()) { | ||
// Could updating the saved keys be done in a better way? | ||
const tab = this.selectedTab as MacroKeyTabComponent; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The selected tab isn't always There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It should work fine because of the isKeyAction check as changing the tab means also changing EditableMacroAction.macroActionType. So it should not be possible to select a different tab and have isKeyAction pass. The real solution would be to update the EditableMacroAction every time something is changed in the key press component by providing an output event that gets run every time you change something in it. The reason I didn't do this is because I wanted to keep my changes in the macro components as much as possible and not mess with the other stuff. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Okay, now I understand, it is fine. |
||
action.fromKeyAction(tab.getKeyAction()); | ||
} | ||
this.save.emit(action.toClass()); | ||
} catch (e) { | ||
// TODO: show error dialog | ||
console.error(e); | ||
} | ||
} | ||
|
||
selectTab(tab: TabName): void { | ||
this.activeTab = tab; | ||
this.editableMacroAction.macroActionType = this.getTabMacroActionType(tab); | ||
} | ||
|
||
getTabName(action: EditableMacroAction): TabName { | ||
switch (action.macroActionType) { | ||
// Delay action | ||
case macroActionType.DelayMacroAction: | ||
return TabName.Delay; | ||
// Text action | ||
case macroActionType.TextMacroAction: | ||
return TabName.Text; | ||
// Keypress actions | ||
case macroActionType.KeyMacroAction: | ||
return TabName.Keypress; | ||
// Mouse actions | ||
case macroActionType.MouseButtonMacroAction: | ||
case macroActionType.MoveMouseMacroAction: | ||
case macroActionType.ScrollMouseMacroAction: | ||
return TabName.Mouse; | ||
default: | ||
return TabName.Keypress; | ||
} | ||
} | ||
|
||
getTabMacroActionType(tab: TabName): string { | ||
switch (tab) { | ||
case TabName.Delay: | ||
return macroActionType.DelayMacroAction; | ||
case TabName.Keypress: | ||
return macroActionType.KeyMacroAction; | ||
case TabName.Mouse: | ||
return macroActionType.MouseButtonMacroAction; | ||
case TabName.Text: | ||
return macroActionType.TextMacroAction; | ||
default: | ||
throw new Error('Could not get macro action type'); | ||
} | ||
} | ||
|
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export { MacroDelayTabComponent } from './macro-delay'; | ||
export { MacroKeyTabComponent } from './macro-key'; | ||
export { MacroMouseTabComponent } from './macro-mouse'; | ||
export { MacroTextTabComponent } from './macro-text'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { MacroDelayTabComponent } from './macro-delay.component'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<div class="macro-delay"> | ||
<div class="row"> | ||
<div class="col-xs-12"> | ||
<h4>Enter delay in seconds</h4> | ||
</div> | ||
</div> | ||
<div class="row"> | ||
<div class="col-xs-4"> | ||
<input #macroDelayInput | ||
type="number" | ||
min="0" | ||
max="1000" | ||
step="0.1" | ||
placeholder="Delay amount" | ||
class="form-control" | ||
[(ngModel)]="delay" | ||
(ngModelChange)="setDelay($event)"> | ||
</div> | ||
</div> | ||
<div class="row macro-delay__presets"> | ||
<div class="col-xs-12"> | ||
<h6>Choose a preset</h6> | ||
<button *ngFor="let delay of presets" class="btn btn-sm btn-default"(click)="setDelay(delay)">{{delay}}s</button> | ||
</div> | ||
</div> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
:host { | ||
display: flex; | ||
flex-direction: column; | ||
position: relative; | ||
} | ||
|
||
.macro-delay { | ||
&__presets { | ||
margin-top: 1rem; | ||
|
||
button { | ||
margin-right: 0.25rem; | ||
margin-bottom: 0.25rem; | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add a new line before services.