From 7f45bb57fc4fef52797a48cca20c0a3aec36371b Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Sat, 25 Aug 2018 10:11:32 +0200 Subject: [PATCH] nicer touch bar buttons --- .../src/api/toolbarButtonProvider.ts | 1 + .../src/components/appRoot.component.pug | 2 +- .../src/components/appRoot.component.ts | 2 +- .../src/components/baseTab.component.ts | 10 +++++++- terminus-core/src/services/app.service.ts | 2 +- .../src/services/electron.service.ts | 2 ++ .../src/services/touchbar.service.ts | 25 ++++++++----------- terminus-settings/src/buttonProvider.ts | 2 +- terminus-ssh/src/buttonProvider.ts | 2 +- terminus-terminal/src/buttonProvider.ts | 2 +- 10 files changed, 29 insertions(+), 21 deletions(-) diff --git a/terminus-core/src/api/toolbarButtonProvider.ts b/terminus-core/src/api/toolbarButtonProvider.ts index 80199a63..16189c90 100644 --- a/terminus-core/src/api/toolbarButtonProvider.ts +++ b/terminus-core/src/api/toolbarButtonProvider.ts @@ -2,6 +2,7 @@ import { SafeHtml } from '@angular/platform-browser' export interface IToolbarButton { icon: SafeHtml + touchBarNSImage?: string title: string touchBarTitle?: string weight?: number diff --git a/terminus-core/src/components/appRoot.component.pug b/terminus-core/src/components/appRoot.component.pug index 8d05f2f9..9bbd6486 100644 --- a/terminus-core/src/components/appRoot.component.pug +++ b/terminus-core/src/components/appRoot.component.pug @@ -24,7 +24,7 @@ title-bar( [index]='idx', [tab]='tab', [active]='tab == app.activeTab', - [hasActivity]='tab.hasActivity', + [hasActivity]='tab.activity$|async', @animateTab, (click)='app.selectTab(tab)', [class.fully-draggable]='hostApp.platform != Platform.macOS', diff --git a/terminus-core/src/components/appRoot.component.ts b/terminus-core/src/components/appRoot.component.ts index c08a9af0..b7f9527e 100644 --- a/terminus-core/src/components/appRoot.component.ts +++ b/terminus-core/src/components/appRoot.component.ts @@ -144,7 +144,7 @@ export class AppRootComponent { if (progress !== null) { this.hostApp.getWindow().setProgressBar(progress / 100.0, 'normal') } else { - this.hostApp.getWindow().setProgressBar(0, 'none') + this.hostApp.getWindow().setProgressBar(-1, 'none') } }) }) diff --git a/terminus-core/src/components/baseTab.component.ts b/terminus-core/src/components/baseTab.component.ts index d923922c..d236cce3 100644 --- a/terminus-core/src/components/baseTab.component.ts +++ b/terminus-core/src/components/baseTab.component.ts @@ -6,18 +6,20 @@ export abstract class BaseTabComponent { id: number title: string customTitle: string - hasActivity = false hasFocus = false + hasActivity = false hostView: ViewRef protected titleChange = new Subject() protected focused = new Subject() protected blurred = new Subject() protected progress = new Subject() + protected activity = new Subject() get focused$ (): Observable { return this.focused } get blurred$ (): Observable { return this.blurred } get titleChange$ (): Observable { return this.titleChange } get progress$ (): Observable { return this.progress } + get activity$ (): Observable { return this.activity } constructor () { this.id = BaseTabComponent.lastTabID++ @@ -42,6 +44,12 @@ export abstract class BaseTabComponent { displayActivity (): void { this.hasActivity = true + this.activity.next(true) + } + + clearActivity (): void { + this.hasActivity = false + this.activity.next(false) } getRecoveryToken (): any { diff --git a/terminus-core/src/services/app.service.ts b/terminus-core/src/services/app.service.ts index 5b678233..8a2e896c 100644 --- a/terminus-core/src/services/app.service.ts +++ b/terminus-core/src/services/app.service.ts @@ -66,7 +66,7 @@ export class AppService { this.lastTabIndex = null } if (this.activeTab) { - this.activeTab.hasActivity = false + this.activeTab.clearActivity() this.activeTab.emitBlurred() } this.activeTab = tab diff --git a/terminus-core/src/services/electron.service.ts b/terminus-core/src/services/electron.service.ts index b15821d2..ccc238b3 100644 --- a/terminus-core/src/services/electron.service.ts +++ b/terminus-core/src/services/electron.service.ts @@ -9,6 +9,7 @@ export class ElectronService { dialog: any clipboard: any globalShortcut: any + nativeImage: any screen: any remote: any TouchBar: typeof TouchBar @@ -24,6 +25,7 @@ export class ElectronService { this.clipboard = this.electron.clipboard this.ipcRenderer = this.electron.ipcRenderer this.globalShortcut = this.remote.globalShortcut + this.nativeImage = this.remote.nativeImage this.TouchBar = this.remote.TouchBar } diff --git a/terminus-core/src/services/touchbar.service.ts b/terminus-core/src/services/touchbar.service.ts index b98a64ee..ad9db0e3 100644 --- a/terminus-core/src/services/touchbar.service.ts +++ b/terminus-core/src/services/touchbar.service.ts @@ -1,15 +1,12 @@ import { Injectable, Inject, NgZone } from '@angular/core' import { TouchBarSegmentedControl, SegmentedControlSegment } from 'electron' -import { Subscription } from 'rxjs' import { AppService } from './app.service' import { ConfigService } from './config.service' import { ElectronService } from './electron.service' -import { BaseTabComponent } from '../components/baseTab.component' import { IToolbarButton, ToolbarButtonProvider } from '../api' @Injectable() export class TouchbarService { - private titleSubscriptions = new Map() private tabsSegmentedControl: TouchBarSegmentedControl private tabSegments: SegmentedControlSegment[] = [] @@ -23,15 +20,10 @@ export class TouchbarService { app.tabsChanged$.subscribe(() => this.update()) app.activeTabChange$.subscribe(() => this.update()) app.tabOpened$.subscribe(tab => { - let sub = tab.titleChange$.subscribe(title => { + tab.titleChange$.subscribe(title => { this.tabSegments[app.tabs.indexOf(tab)].label = this.shortenTitle(title) this.tabsSegmentedControl.segments = this.tabSegments }) - this.titleSubscriptions.set(tab, sub) - }) - app.tabClosed$.subscribe(tab => { - this.titleSubscriptions.get(tab).unsubscribe() - this.titleSubscriptions.delete(tab) }) } @@ -56,16 +48,21 @@ export class TouchbarService { this.tabsSegmentedControl, new this.electron.TouchBar.TouchBarSpacer({size: 'flexible'}), new this.electron.TouchBar.TouchBarSpacer({size: 'small'}), - ...buttons.map(button => new this.electron.TouchBar.TouchBarButton({ - label: this.shortenTitle(button.touchBarTitle || button.title), - // backgroundColor: '#0022cc', - click: () => this.zone.run(() => button.click()), - })) + ...buttons.map(button => this.getButton(button)) ] }) this.electron.app.window.setTouchBar(touchBar) } + private getButton (button: IToolbarButton): Electron.TouchBarButton { + return new this.electron.TouchBar.TouchBarButton({ + label: button.touchBarNSImage ? null : this.shortenTitle(button.touchBarTitle || button.title), + icon: button.touchBarNSImage ? + this.electron.nativeImage.createFromNamedImage(button.touchBarNSImage, [0, 0, 1]) : null, + click: () => this.zone.run(() => button.click()), + }) + } + private shortenTitle (title: string): string { if (title.length > 15) { title = title.substring(0, 15) + '...' diff --git a/terminus-settings/src/buttonProvider.ts b/terminus-settings/src/buttonProvider.ts index eae7b3e5..59a497e2 100644 --- a/terminus-settings/src/buttonProvider.ts +++ b/terminus-settings/src/buttonProvider.ts @@ -19,7 +19,7 @@ export class ButtonProvider extends ToolbarButtonProvider { return [{ icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/cog.svg')), title: 'Settings', - touchBarTitle: '⚙️', + touchBarNSImage: 'NSTouchBarComposeTemplate', weight: 10, click: () => this.open(), }] diff --git a/terminus-ssh/src/buttonProvider.ts b/terminus-ssh/src/buttonProvider.ts index 666d08ed..054821a2 100644 --- a/terminus-ssh/src/buttonProvider.ts +++ b/terminus-ssh/src/buttonProvider.ts @@ -28,7 +28,7 @@ export class ButtonProvider extends ToolbarButtonProvider { icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/globe.svg')), weight: 5, title: 'SSH connections', - touchBarTitle: 'SSH', + touchBarNSImage: 'NSTouchBarOpenInBrowserTemplate', click: async () => { this.activate() } diff --git a/terminus-terminal/src/buttonProvider.ts b/terminus-terminal/src/buttonProvider.ts index 4438051c..23ff5758 100644 --- a/terminus-terminal/src/buttonProvider.ts +++ b/terminus-terminal/src/buttonProvider.ts @@ -55,7 +55,7 @@ export class ButtonProvider extends ToolbarButtonProvider { return [{ icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/plus.svg')), title: 'New terminal', - touchBarTitle: 'New', + touchBarNSImage: 'NSTouchBarAddDetailTemplate', click: async () => { this.openNewTab() }