new tab color and activity indicators

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

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'

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;
+    }
 }

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

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%);
-                }
             }
         }
     }

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%);
-                }
             }
         }
     }