diff --git a/terminus-core/src/components/baseTab.component.ts b/terminus-core/src/components/baseTab.component.ts index 72214f3a..9cc8aec2 100644 --- a/terminus-core/src/components/baseTab.component.ts +++ b/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() protected focused = new Subject() protected blurred = new Subject() diff --git a/terminus-core/src/components/tabHeader.component.pug b/terminus-core/src/components/tabHeader.component.pug index b60f1c2e..b59dfb63 100644 --- a/terminus-core/src/components/tabHeader.component.pug +++ b/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)') × diff --git a/terminus-core/src/components/tabHeader.component.ts b/terminus-core/src/components/tabHeader.component.ts index 65efb1b6..92e0ca59 100644 --- a/terminus-core/src/components/tabHeader.component.ts +++ b/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()