diff --git a/terminus-core/src/components/appRoot.component.pug b/terminus-core/src/components/appRoot.component.pug index 81d76ef0..40cf2d16 100644 --- a/terminus-core/src/components/appRoot.component.pug +++ b/terminus-core/src/components/appRoot.component.pug @@ -25,7 +25,6 @@ title-bar( [index]='idx', [tab]='tab', [active]='tab == app.activeTab', - [hasActivity]='tab.activity$|async', @animateTab, [@.disabled]='hasVerticalTabs()', (click)='app.selectTab(tab)', diff --git a/terminus-core/src/components/tabHeader.component.pug b/terminus-core/src/components/tabHeader.component.pug index 4e335f65..33dec67a 100644 --- a/terminus-core/src/components/tabHeader.component.pug +++ b/terminus-core/src/components/tabHeader.component.pug @@ -1,8 +1,8 @@ +.colorbar([style.background-color]='tab.color', *ngIf='tab.color != null') .progressbar([style.width]='progress + "%"', *ngIf='progress != null') -.index(*ngIf='!config.store.terminal.hideTabIndex', - #handle, - [style.background-color]='tab.color', -) {{index + 1}} +.activity-indicator(*ngIf='tab.activity$|async') + +.index(*ngIf='!config.store.terminal.hideTabIndex', #handle) {{index + 1}} .name( [title]='tab.customTitle || tab.title', [class.no-hover]='config.store.terminal.hideCloseButton' diff --git a/terminus-core/src/components/tabHeader.component.scss b/terminus-core/src/components/tabHeader.component.scss index 62e14145..3ed19830 100644 --- a/terminus-core/src/components/tabHeader.component.scss +++ b/terminus-core/src/components/tabHeader.component.scss @@ -4,6 +4,8 @@ $tabs-height: 38px; position: relative; cursor: pointer; + > * { cursor: pointer; } + flex: 1000 1 200px; width: 200px; padding: 0 10px; @@ -101,8 +103,30 @@ $tabs-height: 38px; position: absolute; left: 0; top: 0; - height: 5px; - z-index: -1; + height: 3px; + z-index: 1; transition: 0.25s width; } + + .colorbar { + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 100%; + z-index: 1; + } + + &.active .activity-indicator { + display: none; + } + + .activity-indicator { + position: absolute; + left: 10px; + right: 10px; + bottom: 4px; + height: 2px; + z-index: -1; + } } diff --git a/terminus-core/src/components/tabHeader.component.ts b/terminus-core/src/components/tabHeader.component.ts index 99e62b51..273507bb 100644 --- a/terminus-core/src/components/tabHeader.component.ts +++ b/terminus-core/src/components/tabHeader.component.ts @@ -26,7 +26,6 @@ export interface SortableComponentProxy { export class TabHeaderComponent { @Input() index: number @Input() @HostBinding('class.active') active: boolean - @Input() @HostBinding('class.has-activity') hasActivity: boolean @Input() tab: BaseTabComponent @Input() progress: number|null @ViewChild('handle') handle?: ElementRef diff --git a/terminus-core/src/theme.paper.scss b/terminus-core/src/theme.paper.scss index c3eecd78..a864e67c 100644 --- a/terminus-core/src/theme.paper.scss +++ b/terminus-core/src/theme.paper.scss @@ -169,6 +169,10 @@ app-root { background: $blue; } + .activity-indicator { + background:rgba(0, 0, 0, 0.2); + } + &.active { color: $black; background: $content-bg; @@ -190,10 +194,6 @@ app-root { &.active { border-bottom-color: transparent; } - - &.has-activity:not(.active) { - background: linear-gradient(to bottom, rgba(208, 0, 0, 0) 95%, #36beff 96%); - } } } @@ -208,10 +208,6 @@ app-root { &.active { margin-top: -1px; } - - &.has-activity:not(.active) { - background: linear-gradient(to top, rgba(208, 0, 0, 0) 95%, #36beff 96%); - } } } } diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss index 261ddfea..1bea9dd5 100644 --- a/terminus-core/src/theme.scss +++ b/terminus-core/src/theme.scss @@ -76,6 +76,10 @@ app-root { background: $green; } + .activity-indicator { + background:rgba(255, 255, 255, 0.2); + } + &.active { color: white; background: $content-bg; @@ -97,10 +101,6 @@ app-root { &.active { border-bottom-color: transparent; } - - &.has-activity:not(.active) { - background: linear-gradient(to bottom, rgba(208, 0, 0, 0) 95%, #1aa99c 100%); - } } } @@ -115,10 +115,6 @@ app-root { &.active { margin-top: -1px; } - - &.has-activity:not(.active) { - background: linear-gradient(to top, rgba(208, 0, 0, 0) 95%, #1aa99c 100%); - } } } }