tab colors

terminus-core/src/components/baseTab.component.ts

@@ -13,6 +13,7 @@ export abstract class BaseTabComponent {
     hasFocus = false
     hasActivity = false
     hostView: ViewRef
+    color: string = null
     protected titleChange = new Subject<string>()
     protected focused = new Subject<void>()
     protected blurred = new Subject<void>()

terminus-core/src/components/tabHeader.component.pug

@@ -1,4 +1,7 @@
 .progressbar([style.width]='progress + "%"', *ngIf='progress != null')
-.index(#handle) {{index + 1}}
+.index(
+    #handle,
+    [style.background-color]='tab.color',
+) {{index + 1}}
 .name([title]='tab.customTitle || tab.title') {{tab.customTitle || tab.title}}
 button((click)='app.closeTab(tab, true)') ×

terminus-core/src/components/tabHeader.component.ts

@@ -7,6 +7,16 @@ import { ElectronService } from '../services/electron.service'
 import { AppService } from '../services/app.service'
 import { HostAppService, Platform } from '../services/hostApp.service'
 
+const COLORS = [
+    { name: 'No color', value: null },
+    { name: 'Blue', value: '#0275d8' },
+    { name: 'Green', value: '#5cb85c' },
+    { name: 'Orange', value: '#f0ad4e' },
+    { name: 'Purple', value: '#613d7c' },
+    { name: 'Red', value: '#d9534f' },
+    { name: 'Yellow', value: '#ffd500' },
+]
+
 @Component({
     selector: 'tab-header',
     template: require('./tabHeader.component.pug'),
@@ -87,6 +97,18 @@ export class TabHeaderComponent {
                         }
                     })
                 },
+                {
+                    label: 'Color',
+                    sublabel: COLORS.find(x => x.value === this.tab.color).name,
+                    submenu: COLORS.map(color => ({
+                        label: color.name,
+                        type: 'radio',
+                        checked: this.tab.color === color.value,
+                        click: () => this.zone.run(() => {
+                            this.tab.color = color.value
+                        }),
+                    })),
+                }
             ])
 
             let process = await this.tab.getCurrentProcess()