mirror of
https://github.com/Eugeny/tabby.git
synced 2024-09-11 13:13:59 +03:00
.
This commit is contained in:
parent
065837bdbb
commit
90d7ee21ae
@ -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) => {
|
||||
|
@ -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()
|
||||
})
|
||||
}
|
||||
|
@ -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('-'))
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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
|
||||
|
22
app/src/settings/components/hotkeyInputModal.scss
Normal file
22
app/src/settings/components/hotkeyInputModal.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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)
|
||||
|
@ -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)
|
||||
})
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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 {
|
||||
|
@ -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(
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user