diff --git a/src/app.module.ts b/src/app.module.ts index 7316c057..c4f6b050 100644 --- a/src/app.module.ts +++ b/src/app.module.ts @@ -7,8 +7,6 @@ import { StoreModule } from '@ngrx/store'; import { DragulaModule } from 'ng2-dragula/ng2-dragula'; import { Select2Component } from 'ng2-select2/ng2-select2'; -import { ContenteditableDirective } from './directives/contenteditable'; - import { AddOnComponent } from './components/add-on'; import { KeymapAddComponent, KeymapComponent, KeymapHeaderComponent } from './components/keymap'; import { LayersComponent } from './components/layers'; @@ -17,6 +15,7 @@ import { MacroAddComponent, MacroComponent, MacroDelayTabComponent, + MacroHeaderComponent, MacroItemComponent, MacroKeyTabComponent, MacroMouseTabComponent, @@ -105,6 +104,7 @@ const storeConfig = { CaptureKeystrokeButtonComponent, IconComponent, MacroComponent, + MacroHeaderComponent, MacroAddComponent, MacroItemComponent, MacroActionEditorComponent, @@ -112,7 +112,6 @@ const storeConfig = { MacroKeyTabComponent, MacroMouseTabComponent, MacroTextTabComponent, - ContenteditableDirective, AddOnComponent, SettingsComponent ], diff --git a/src/components/macro/header/macro-header.component.html b/src/components/macro/header/macro-header.component.html new file mode 100644 index 00000000..e95e1aa0 --- /dev/null +++ b/src/components/macro/header/macro-header.component.html @@ -0,0 +1,21 @@ +
+

+ + + + +

+
\ No newline at end of file diff --git a/src/components/macro/header/macro-header.component.scss b/src/components/macro/header/macro-header.component.scss new file mode 100644 index 00000000..c10c2192 --- /dev/null +++ b/src/components/macro/header/macro-header.component.scss @@ -0,0 +1,43 @@ +@import '../../../main-app/global-styles'; + +.macro { + &__remove { + font-size: 0.75em; + top: 8px; + + &:hover { + cursor: pointer; + color: $icon-hover-delete; + } + } + + &__duplicate { + font-size: 0.75em; + top: 7px; + margin-right: 15px; + position: relative; + + &:hover { + cursor: pointer; + color: $icon-hover; + } + } +} + +.pane-title { + margin-bottom: 1em; + + &__name { + border: none; + border-bottom: 2px dotted #999; + padding: 0; + margin: 0 0.25rem; + width: 330px; + text-overflow: ellipsis; + + &:focus { + box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc; + border-color: transparent; + } + } +} diff --git a/src/components/macro/header/macro-header.component.ts b/src/components/macro/header/macro-header.component.ts new file mode 100644 index 00000000..27200670 --- /dev/null +++ b/src/components/macro/header/macro-header.component.ts @@ -0,0 +1,27 @@ +import { Component, Input } from '@angular/core'; + +import { Macro } from '../../../config-serializer/config-items/Macro'; + +@Component({ + selector: 'macro-header', + template: require('./macro-header.component.html'), + styles: [require('./macro-header.component.scss')] +}) +export class MacroHeaderComponent { + @Input() macro: Macro; + + constructor() { } + + removeMacro() { + // TODO implement + } + + duplicateMacro() { + // TODO implement + } + + /* tslint:disable:no-unused-variable */ + editMacroName(name: string) { + // TODO implement + } +} diff --git a/src/components/macro/index.ts b/src/components/macro/index.ts index 16936128..3b24c0e1 100644 --- a/src/components/macro/index.ts +++ b/src/components/macro/index.ts @@ -1,5 +1,6 @@ export * from './macro.component'; export * from './add/macro-add.component'; +export * from './header/macro-header.component'; export * from './macro.routes'; export * from './item'; export * from './action-editor'; diff --git a/src/components/macro/macro.component.html b/src/components/macro/macro.component.html index ba1d71e6..3854f364 100644 --- a/src/components/macro/macro.component.html +++ b/src/components/macro/macro.component.html @@ -1,14 +1,4 @@ -
-

- - {{macro.name}} -

-
+
diff --git a/src/components/macro/macro.component.ts b/src/components/macro/macro.component.ts index 554f9089..742bdf2f 100644 --- a/src/components/macro/macro.component.ts +++ b/src/components/macro/macro.component.ts @@ -21,7 +21,6 @@ export class MacroComponent implements OnInit, OnDestroy { @ViewChildren(MacroItemComponent) macroItems: QueryList; private macro: Macro; - private routeSubscription: Subscription; private hasChanges: boolean = false; @@ -58,10 +57,6 @@ export class MacroComponent implements OnInit, OnDestroy { throw new Error('Macro not found'); } - saveMacro() { - // @todo Save macro to keyboard - } - addAction() { this.hideOtherActionEditors(this.macro.macroActions.elements.length); this.macro.macroActions.elements.push(undefined); @@ -81,10 +76,6 @@ export class MacroComponent implements OnInit, OnDestroy { }); } - onNameChange() { - this.hasChanges = true; - } - onEditAction(index: number) { // Hide other editors when clicking edit button of a macro action this.hideOtherActionEditors(index); diff --git a/src/directives/contenteditable/contenteditable.directive.ts b/src/directives/contenteditable/contenteditable.directive.ts deleted file mode 100644 index 46f618a6..00000000 --- a/src/directives/contenteditable/contenteditable.directive.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Directive, ElementRef, EventEmitter, Input, OnChanges, Output, Renderer, SimpleChanges } from '@angular/core'; - -const KEY_ENTER = 13; - -@Directive({ - selector: '[contenteditableModel]', - host: { - '(blur)': 'onBlur()', - '(keypress)': 'onKeypress($event)' - } -}) -export class ContenteditableDirective implements OnChanges { - @Input('contenteditableModel') model: any; - @Input('contenteditableUpdateOnEnter') updateOnEnter: boolean; - @Output('contenteditableModelChange') update = new EventEmitter(); - - private lastViewModel: any; - - constructor(private elRef: ElementRef, private renderer: Renderer) {} - - ngOnChanges(changes: SimpleChanges) { - if (changes[this.lastViewModel]) { - this.lastViewModel = this.model; - this.refreshView(); - } - } - - onKeypress(event: any) { - if (this.updateOnEnter && (event.which === KEY_ENTER)) { - // Finish editing when Enter pressed - this.renderer.invokeElementMethod(this.elRef.nativeElement, 'blur'); - return false; - } - } - - onBlur() { - let value = this.elRef.nativeElement.innerText; - this.lastViewModel = value; - this.update.emit(value); - } - - private refreshView() { - this.elRef.nativeElement.innerText = this.model; - } -} diff --git a/src/directives/contenteditable/index.ts b/src/directives/contenteditable/index.ts deleted file mode 100644 index d101dfe9..00000000 --- a/src/directives/contenteditable/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ContenteditableDirective } from './contenteditable.directive'; diff --git a/src/main-app/global-styles.scss b/src/main-app/global-styles.scss index 6a864db8..4d96d669 100644 --- a/src/main-app/global-styles.scss +++ b/src/main-app/global-styles.scss @@ -1 +1,2 @@ $icon-hover: #337ab7; +$icon-hover-delete: #900;