nicer touch bar buttons

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

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',

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')
                 }
             })
         })

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<string>()
     protected focused = new Subject<void>()
     protected blurred = new Subject<void>()
     protected progress = new Subject<number>()
+    protected activity = new Subject<boolean>()
 
     get focused$ (): Observable<void> { return this.focused }
     get blurred$ (): Observable<void> { return this.blurred }
     get titleChange$ (): Observable<string> { return this.titleChange }
     get progress$ (): Observable<number> { return this.progress }
+    get activity$ (): Observable<boolean> { 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 {

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

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
     }
 

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<BaseTabComponent, Subscription>()
     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) + '...'

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(),
         }]

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()
             }

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()
             }