new toolbar design

tabby-terminal/src/api/baseTerminalTab.component.ts

@@ -3,7 +3,7 @@ import { Spinner } from 'cli-spinner'
 import colors from 'ansi-colors'
 import { NgZone, OnInit, OnDestroy, Injector, ViewChild, HostBinding, Input, ElementRef, InjectFlags } from '@angular/core'
 import { trigger, transition, style, animate, AnimationTriggerMetadata } from '@angular/animations'
-import { AppService, ConfigService, BaseTabComponent, HostAppService, HotkeysService, NotificationsService, Platform, LogService, Logger, TabContextMenuItemProvider, SplitTabComponent, SubscriptionContainer, MenuItemOptions, PlatformService, HostWindowService } from 'tabby-core'
+import { AppService, ConfigService, BaseTabComponent, HostAppService, HotkeysService, NotificationsService, Platform, LogService, Logger, TabContextMenuItemProvider, SplitTabComponent, SubscriptionContainer, MenuItemOptions, PlatformService, HostWindowService, ResettableTimeout } from 'tabby-core'
 
 import { BaseSession } from '../session'
 import { TerminalFrontendService } from '../services/terminalFrontend.service'
@@ -75,6 +75,15 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
     /** @hidden */
     @HostBinding('class.top-padded') topPadded: boolean
 
+    /** @hidden */
+    @HostBinding('class.toolbar-enabled') enableToolbar = false
+
+    /** @hidden */
+    @HostBinding('class.toolbar-pinned') pinToolbar = false
+
+    /** @hidden */
+    @HostBinding('class.toolbar-revealed') revealToolbar = false
+
     frontend?: Frontend
 
     /** @hidden */
@@ -125,6 +134,9 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
         },
     })
     private spinnerActive = false
+    private toolbarRevealTimeout = new ResettableTimeout(() => {
+        this.revealToolbar = false
+    }, 1000)
 
     get input$ (): Observable<Buffer> {
         if (!this.frontend) {
@@ -260,6 +272,8 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
         this.bellPlayer.src = require('../bell.ogg').default
 
         this.contextMenuProviders.sort((a, b) => a.weight - b.weight)
+
+        this.pinToolbar = (window.localStorage.pinTerminalToolbar ?? 'true') === 'true'
     }
 
     /** @hidden */
@@ -646,6 +660,20 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
         this.sessionChanged.next(session)
     }
 
+    showToolbar (): void {
+        this.revealToolbar = true
+        this.toolbarRevealTimeout.clear()
+    }
+
+    hideToolbar (): void {
+        this.toolbarRevealTimeout.set()
+    }
+
+    togglePinToolbar (): void {
+        this.pinToolbar = !this.pinToolbar
+        window.localStorage.pinTerminalToolbar = this.pinToolbar
+    }
+
     protected attachSessionHandler <T> (observable: Observable<T>, handler: (v: T) => void): void {
         this.sessionHandlers.subscribe(observable, handler)
     }

tabby-terminal/src/components/baseTerminalTab.component.pug

@@ -5,3 +5,14 @@ search-panel(
     [frontend]='frontend',
     (close)='showSearchPanel = false'
 )
+
+button.btn.btn-sm.btn-link.toolbar-pin-button(
+    *ngIf='enableToolbar',
+    (click)='togglePinToolbar()',
+    (mouseenter)='showToolbar()',
+    (mouseleave)='hideToolbar()'
+)
+    i.fas.fa-thumbtack(*ngIf='revealToolbar || pinToolbar')
+    i.fas.fa-wrench.mr-3(*ngIf='!revealToolbar && !pinToolbar')
+    span(*ngIf='pinToolbar') Unpin
+    span(*ngIf='!pinToolbar && revealToolbar') Pin

tabby-terminal/src/components/baseTerminalTab.component.scss

@@ -3,6 +3,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    position: relative;
 
     &.top-padded {
         padding-top: 20px;
@@ -22,4 +23,47 @@
             color: white !important;
         }
     }
+
+    $toolbarHeight: 40px;
+
+    &>.terminal-toolbar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 4;
+        height: $toolbarHeight;
+
+        opacity: 0;
+        background: rgba(0, 0, 0, .75);
+        padding: 5px 85px 5px 15px;
+        transition: 0.25s opacity;
+
+        display: flex;
+        align-items: center;
+        z-index: 3;
+        will-change: transform;
+        transform: translate(0, -100px);
+        transition: 0.25s transform ease-out;
+    }
+
+    &.toolbar-revealed, &.toolbar-pinned {
+        > .terminal-toolbar {
+            opacity: 1;
+            transform: translate(0, 0);
+        }
+    }
+
+    &>.toolbar-pin-button {
+        position: absolute;
+        right: 10px;
+        top: 2px;
+        z-index: 4;
+    }
+
+    &.toolbar-pinned {
+        .content {
+            margin-top: 15px + $toolbarHeight;
+        }
+    }
 }