From 90d7ee21aef9ca4890c1ca5c3482fea0bea06fb7 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Thu, 30 Mar 2017 23:50:26 +0200 Subject: [PATCH] . --- app/src/components/appRoot.ts | 53 ++++++++++--------- app/src/services/hotkeys.ts | 12 ++--- app/src/services/hotkeys.util.ts | 6 ++- .../settings/components/hotkeyInputModal.less | 23 -------- .../settings/components/hotkeyInputModal.pug | 12 +++-- .../settings/components/hotkeyInputModal.scss | 22 ++++++++ .../settings/components/hotkeyInputModal.ts | 38 ++++++++++--- .../settings/components/multiHotkeyInput.ts | 13 ++--- app/src/settings/components/settingsPane.pug | 6 +-- app/src/settings/components/settingsPane.scss | 5 +- app/src/terminal/components/settings.pug | 4 +- app/src/theme.scss | 31 +++++++++++ 12 files changed, 148 insertions(+), 77 deletions(-) delete mode 100644 app/src/settings/components/hotkeyInputModal.less create mode 100644 app/src/settings/components/hotkeyInputModal.scss diff --git a/app/src/components/appRoot.ts b/app/src/components/appRoot.ts index 5b82437d..4d5fc6aa 100644 --- a/app/src/components/appRoot.ts +++ b/app/src/components/appRoot.ts @@ -88,42 +88,45 @@ export class AppRootComponent { } }) - this.hotkeys.registerHotkeys() - this.hotkeys.globalHotkey.subscribe(() => { - this.hostApp.toggleWindow() - }) - this.docking.dock() this.hostApp.shown.subscribe(() => { this.docking.dock() }) + this.hotkeys.registerHotkeys() this.hostApp.secondInstance.subscribe(() => { - if (this.electron.app.window.isFocused()) { - // focused - this.electron.app.window.hide() - } else { - if (!this.electron.app.window.isVisible()) { - // unfocused, invisible - this.electron.app.window.show() - } else { - if (this.config.full().appearance.dock == 'off') { - // not docked, visible - setTimeout(() => { - this.electron.app.window.focus() - }) - } else { - // docked, visible - this.electron.app.window.hide() - } - } - } - this.docking.dock() + this.onGlobalHotkey() + }) + this.hotkeys.globalHotkey.subscribe(() => { + this.onGlobalHotkey() }) this.app.restoreTabs() } + onGlobalHotkey () { + if (this.electron.app.window.isFocused()) { + // focused + this.electron.app.window.hide() + } else { + if (!this.electron.app.window.isVisible()) { + // unfocused, invisible + this.electron.app.window.show() + } else { + if (this.config.full().appearance.dock == 'off') { + // not docked, visible + setTimeout(() => { + this.electron.app.window.focus() + }) + } else { + // docked, visible + this.electron.app.window.hide() + } + } + } + this.docking.dock() + } + getToolbarButtons (aboveZero: boolean): IToolbarButton[] { let buttons: IToolbarButton[] = [] this.toolbarButtonProviders.forEach((provider) => { diff --git a/app/src/services/hotkeys.ts b/app/src/services/hotkeys.ts index d536326e..66f5502c 100644 --- a/app/src/services/hotkeys.ts +++ b/app/src/services/hotkeys.ts @@ -36,7 +36,7 @@ export class HotkeysService { let events = ['keydown', 'keyup'] events.forEach((event) => { document.addEventListener(event, (nativeEvent) => { - if (document.querySelectorAll(':focus').length == 0) { + if (document.querySelectorAll('input:focus').length == 0) { this.pushKeystroke(event, nativeEvent) this.processKeystrokes() this.emitKeyEvent(nativeEvent) @@ -52,16 +52,16 @@ export class HotkeysService { } processKeystrokes () { - this.zone.run(() => { - if (this.isEnabled()) { + if (this.isEnabled()) { + this.zone.run(() => { let matched = this.getCurrentFullyMatchedHotkey() if (matched) { console.log('Matched hotkey', matched) this.matchedHotkey.emit(matched) this.clearCurrentKeystrokes() } - } - }) + }) + } } emitKeyEvent (nativeEvent) { @@ -82,7 +82,7 @@ export class HotkeysService { registerHotkeys () { this.electron.globalShortcut.unregisterAll() // TODO - this.electron.globalShortcut.register('PrintScreen', () => { + this.electron.globalShortcut.register('Ctrl+Space', () => { this.globalHotkey.emit() }) } diff --git a/app/src/services/hotkeys.util.ts b/app/src/services/hotkeys.util.ts index dd74fba3..331b2173 100644 --- a/app/src/services/hotkeys.util.ts +++ b/app/src/services/hotkeys.util.ts @@ -50,7 +50,11 @@ export function stringifyKeySequence(events: NativeKeyEvent[]): string[] { // TODO make this optional? continue } - itemKeys.push(event.key) + if (event.key.length == 1) { + itemKeys.push(event.key.toUpperCase()) + } else { + itemKeys.push(event.key) + } items.push(itemKeys.join('-')) } } diff --git a/app/src/settings/components/hotkeyInputModal.less b/app/src/settings/components/hotkeyInputModal.less deleted file mode 100644 index 85c3710b..00000000 --- a/app/src/settings/components/hotkeyInputModal.less +++ /dev/null @@ -1,23 +0,0 @@ -:host { - >.modal-body { - padding: 30px 20px !important; - } - - .input { - background: #111; - font-size: 24px; - line-height: 24px; - height: 50px; - } - - .timeout { - background: #111; - height: 5px; - margin: 0 0 15px; - - div { - height: 5px; - background: #666; - } - } -} diff --git a/app/src/settings/components/hotkeyInputModal.pug b/app/src/settings/components/hotkeyInputModal.pug index 9fcd933b..95c165c3 100644 --- a/app/src/settings/components/hotkeyInputModal.pug +++ b/app/src/settings/components/hotkeyInputModal.pug @@ -1,8 +1,12 @@ -div.modal-body - label Press the key now +.modal-header + h5 Press the key now + +.modal-body .input - hotkey-display([model]='value', [animate]='true') + .stroke(*ngFor='let stroke of value', [@animateKey]='true') {{stroke}} .timeout div([style.width]='timeoutProgress + "%"') - a.btn.btn-default.pull-right((click)='close()') Cancel + +.modal-footer + button.btn.btn-outline-primary((click)='close()') Cancel diff --git a/app/src/settings/components/hotkeyInputModal.scss b/app/src/settings/components/hotkeyInputModal.scss new file mode 100644 index 00000000..df860919 --- /dev/null +++ b/app/src/settings/components/hotkeyInputModal.scss @@ -0,0 +1,22 @@ +:host { + >.modal-body { + padding: 0 !important; + } + + .input { + display: flex; + + .stroke { + flex: none; + } + } + + .timeout { + height: 5px; + margin: 0 0 15px; + + div { + height: 5px; + } + } +} diff --git a/app/src/settings/components/hotkeyInputModal.ts b/app/src/settings/components/hotkeyInputModal.ts index 88f1a17f..7a8a3d4e 100644 --- a/app/src/settings/components/hotkeyInputModal.ts +++ b/app/src/settings/components/hotkeyInputModal.ts @@ -1,15 +1,39 @@ -import { Component, Input } from '@angular/core' +import { Component, Input, trigger, transition, style, animate } from '@angular/core' import { HotkeysService } from 'services/hotkeys' import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' import { Subscription } from 'rxjs' -const INPUT_TIMEOUT = 2000 +const INPUT_TIMEOUT = 1000 @Component({ selector: 'hotkey-input-modal', template: require('./hotkeyInputModal.pug'), - styles: [require('./hotkeyInputModal.less')], + styles: [require('./hotkeyInputModal.scss')], + animations: [ + trigger('animateKey', [ + transition(':enter', [ + style({ + transform: 'translateX(25px)', + opacity: '0', + }), + animate('250ms ease-out', style({ + transform: 'translateX(0)', + opacity: '1', + })) + ]), + transition(':leave', [ + style({ + transform: 'translateX(0)', + opacity: '1', + }), + animate('250ms ease-in', style({ + transform: 'translateX(25px)', + opacity: '0', + })) + ]) + ]) + ] }) export class HotkeyInputModalComponent { private keySubscription: Subscription @@ -24,9 +48,11 @@ export class HotkeyInputModalComponent { public hotkeys: HotkeysService, ) { this.hotkeys.clearCurrentKeystrokes() - this.keySubscription = hotkeys.key.subscribe(() => { + this.keySubscription = hotkeys.key.subscribe((event) => { this.lastKeyEvent = performance.now() this.value = this.hotkeys.getCurrentKeystrokes() + event.preventDefault() + event.stopPropagation() }) } @@ -39,8 +65,8 @@ export class HotkeyInputModalComponent { if (!this.lastKeyEvent) { return } - this.timeoutProgress = (performance.now() - this.lastKeyEvent) * 100 / INPUT_TIMEOUT - if (this.timeoutProgress >= 100) { + this.timeoutProgress = Math.min(100, (performance.now() - this.lastKeyEvent) * 100 / INPUT_TIMEOUT) + if (this.timeoutProgress == 100) { this.modalInstance.close(this.value) } }, 25) diff --git a/app/src/settings/components/multiHotkeyInput.ts b/app/src/settings/components/multiHotkeyInput.ts index 29a8803c..8267bd7f 100644 --- a/app/src/settings/components/multiHotkeyInput.ts +++ b/app/src/settings/components/multiHotkeyInput.ts @@ -1,5 +1,5 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core' -import { ModalService } from 'services/modal' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { HotkeyInputModalComponent } from './hotkeyInputModal' @@ -11,7 +11,7 @@ import { HotkeyInputModalComponent } from './hotkeyInputModal' }) export class MultiHotkeyInputComponent { constructor ( - private modal: ModalService, + private ngbModal: NgbModal, ) { } ngOnInit () { @@ -25,15 +25,16 @@ export class MultiHotkeyInputComponent { } editItem (item) { - this.modal.open(HotkeyInputModalComponent).result.then((value: string[]) => { - Object.assign(item, value) + this.ngbModal.open(HotkeyInputModalComponent).result.then((value: string[]) => { + this.model[this.model.findIndex(x => x === item)] = value + this.model = this.model.slice() this.modelChange.emit(this.model) }) } addItem () { - this.modal.open(HotkeyInputModalComponent).result.then((value: string[]) => { - this.model.push(value) + this.ngbModal.open(HotkeyInputModalComponent).result.then((value: string[]) => { + this.model = this.model.concat([value]) this.modelChange.emit(this.model) }) } diff --git a/app/src/settings/components/settingsPane.pug b/app/src/settings/components/settingsPane.pug index 14c8adf4..3a478acf 100644 --- a/app/src/settings/components/settingsPane.pug +++ b/app/src/settings/components/settingsPane.pug @@ -11,7 +11,7 @@ ngb-tabset.vertical(type='tabs') | Application template(ngbTabContent) .row - .col.col-sm-6 + .col.col-lg-6 .form-group label Show tabs br @@ -32,13 +32,13 @@ ngb-tabset.vertical(type='tabs') [value]='false' ) | At the bottom - .col.col-sm-6 + .col.col-lg-6 .form-group label Window frame br div( '[(ngModel)]'='config.store.appearance.useNativeFrame' - '(ngModelChange)'='config.save(); requestRestart()' + '(ngModelChange)'='config.save(); config.requestRestart()' ngbRadioGroup ) label.btn.btn-secondary diff --git a/app/src/settings/components/settingsPane.scss b/app/src/settings/components/settingsPane.scss index 4e08ab46..1fb34d22 100644 --- a/app/src/settings/components/settingsPane.scss +++ b/app/src/settings/components/settingsPane.scss @@ -1,9 +1,12 @@ :host { display: flex; + flex-direction: column; flex: auto; >.btn-block { - margin-bottom: 20px; + margin: 20px; + width: auto; + flex: none; } >.modal-body { diff --git a/app/src/terminal/components/settings.pug b/app/src/terminal/components/settings.pug index 3c552c04..a424209a 100644 --- a/app/src/terminal/components/settings.pug +++ b/app/src/terminal/components/settings.pug @@ -1,5 +1,5 @@ .row - .col-sm-6 + .col-lg-6 .form-group label Preview .appearance-preview( @@ -8,7 +8,7 @@ ) .text john@doe-pc$ ls .text foo bar - .col-sm-6 + .col-lg-6 .form-group label Font input.form-control( diff --git a/app/src/theme.scss b/app/src/theme.scss index 95eddb02..1c29a33f 100644 --- a/app/src/theme.scss +++ b/app/src/theme.scss @@ -47,6 +47,11 @@ $input-bg-focus: $input-bg; //$input-box-shadow-focus: $input-box-shadow, rgba($input-border-focus, .6); $input-color-focus: $input-color; +$modal-content-bg: $body-bg; +$modal-content-border-color: $body-bg2; +$modal-header-border-color: $body-bg2; +$modal-footer-border-color: $body-bg2; + @import '~bootstrap/scss/bootstrap.scss'; @@ -238,3 +243,29 @@ multi-hotkey-input { &:active { background: darken($body-bg3, 15%); } } } + +hotkey-input-modal { + .input { + background: $input-bg; + padding: 10px; + font-size: 24px; + line-height: 27px; + height: 55px; + + .stroke { + background: $body-bg3; + border: 1px solid $blue; + border-radius: 3px; + margin-right: 10px; + padding: 3px 10px; + } + } + + .timeout { + background: $input-bg; + + div { + background: $blue; + } + } +}