cleaned up terminal toolbar implementation

tabby-core/src/theme.paper.scss

@@ -382,11 +382,11 @@ start-page footer {
     background: $white !important;
 }
 
-.terminal-toolbar {
+terminal-toolbar {
     background: #ffffff4a !important;
     border-bottom: 1px solid #00000026 !important;
 }
 
 .bg-dark{
     background-color: $base2 !important;
-}
+}

tabby-core/src/theme.scss

@@ -138,7 +138,7 @@ app-root  {
 tab-body {
     background: $content-bg;
 
-    .terminal-toolbar .btn, .toolbar-pin-button {
+    terminal-toolbar .btn, .toolbar-pin-button {
         font-weight: bold;
     }
 }

tabby-serial/src/components/serialTab.component.pug

@@ -1,7 +1,4 @@
-.terminal-toolbar(
-    (mouseenter)='showToolbar()',
-    (mouseleave)='hideToolbar()'
-)
+terminal-toolbar([tab]='this')
     i.fas.fa-xs.fa-circle.text-success.mr-2(*ngIf='session && session.open')
     i.fas.fa-xs.fa-circle.text-danger.mr-2(*ngIf='!session || !session.open')
     strong {{profile.options.port}} ({{profile.options.baudrate}})

tabby-ssh/src/components/sshTab.component.pug

@@ -1,7 +1,4 @@
-.terminal-toolbar(
-    (mouseenter)='showToolbar()',
-    (mouseleave)='hideToolbar()'
-)
+terminal-toolbar([tab]='this')
     i.fas.fa-xs.fa-circle.text-success.mr-2(*ngIf='session && session.open')
     i.fas.fa-xs.fa-circle.text-danger.mr-2(*ngIf='!session || !session.open')
     strong.mr-auto {{profile.options.user}}@{{profile.options.host}}:{{profile.options.port}}
@@ -10,10 +7,10 @@
         ngbDropdown,
         container='body',
         *ngIf='session && !session.supportsWorkingDirectory()',
-        placement='bottom-right'
+        placement='bottom-right bottom-left bottom'
     )
         button.btn.btn-sm.btn-link(ngbDropdownToggle)
-            i.far.fa-lightbulb
+            i.far.fa-lightbulb.text-primary
         .bg-dark(ngbDropdownMenu)
             a.d-flex.align-items-center(ngbDropdownItem, (click)='platform.openExternal("https://tabby.sh/go/cwd-detection")')
                 .mr-auto

tabby-telnet/src/components/telnetTab.component.pug

@@ -1,7 +1,4 @@
-.terminal-toolbar(
-    (mouseenter)='showToolbar()',
-    (mouseleave)='hideToolbar()'
-)
+terminal-toolbar([tab]='this')
     i.fas.fa-xs.fa-circle.text-success.mr-2(*ngIf='session && session.open')
     i.fas.fa-xs.fa-circle.text-danger.mr-2(*ngIf='!session || !session.open')
     strong.mr-auto {{profile.options.host}}:{{profile.options.port}}

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

@@ -71,9 +71,6 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
     /** @hidden */
     @HostBinding('style.background-color') backgroundColor: string|null = null
 
-    /** @hidden */
-    @HostBinding('class.top-padded') topPadded: boolean
-
     /** @hidden */
     @HostBinding('class.toolbar-enabled') enableToolbar = false
 
@@ -478,10 +475,6 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
     configure (): void {
         this.frontend?.configure()
 
-        this.topPadded = this.hostApp.platform === Platform.macOS
-            && this.config.store.appearance.frame === 'thin'
-            && this.config.store.appearance.tabsLocation !== 'top'
-
         if (this.config.store.terminal.background === 'colorScheme') {
             if (this.config.store.terminal.colorScheme.background) {
                 this.backgroundColor = this.config.store.terminal.colorScheme.background
@@ -714,6 +707,10 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
         window.localStorage.pinTerminalToolbar = this.pinToolbar
     }
 
+    @HostBinding('class.with-title-inset') get hasTitleInset (): boolean {
+        return this.hostApp.platform === Platform.macOS && this.config.store.appearance.tabsLocation !== 'top' && this.config.store.appearance.frame === 'thin'
+    }
+
     protected attachSessionHandler <T> (observable: Observable<T>, handler: (v: T) => void): void {
         this.sessionHandlers.subscribe(observable, handler)
     }

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

@@ -8,12 +8,9 @@ search-panel(
 )
 
 button.btn.btn-sm.btn-link.toolbar-pin-button(
-    *ngIf='enableToolbar',
+    *ngIf='enableToolbar && !pinToolbar',
     (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', translate) Unpin
-    span(*ngIf='!pinToolbar && revealToolbar', translate) Pin
+    i.fas.fa-wrench

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

@@ -5,10 +5,6 @@
     overflow: hidden;
     position: relative;
 
-    &.top-padded {
-        padding-top: 20px;
-    }
-
     &> .content {
         flex: auto;
         position: relative;
@@ -26,45 +22,34 @@
 
     $toolbarHeight: 40px;
 
-    &>.terminal-toolbar {
+    > 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;
-
-        > .btn {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
+        height: $toolbarHeight;
     }
 
     &.toolbar-revealed, &.toolbar-pinned {
-        > .terminal-toolbar {
+        > terminal-toolbar {
             opacity: 1;
             transform: translate(0, 0);
         }
     }
 
-    &>.toolbar-pin-button {
+    > .toolbar-pin-button {
         position: absolute;
-        right: 10px;
-        top: 2px;
+        right: 34px;
+        top: 5px;
         z-index: 4;
+        background: #00000047;
     }
 
     &.toolbar-pinned > .terminal-toolbar-spacer {
@@ -73,6 +58,10 @@
     }
 }
 
-:host-context(.platform-darwin) .terminal-toolbar {
-    padding-left: 90px;
+:host-context(.with-title-inset) {
+    padding-top: 20px;
+
+    terminal-toolbar {
+        padding-left: 90px;
+    }
 }

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

@@ -0,0 +1,11 @@
+ng-content
+
+button.btn.btn-sm.btn-link(
+    *ngIf='tab.enableToolbar',
+    (click)='tab.togglePinToolbar()',
+    (mouseenter)='tab.showToolbar()',
+    (mouseleave)='tab.hideToolbar()'
+)
+    i.fas.fa-thumbtack
+    span(*ngIf='tab.pinToolbar', translate) Unpin
+    span(*ngIf='!tab.pinToolbar', translate) Pin

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

@@ -0,0 +1,14 @@
+:host {
+    background: rgba(0, 0, 0, .75);
+    padding: 5px 15px 5px 15px;
+
+    display: flex;
+    align-items: center;
+    z-index: 3;
+}
+
+::ng-deep .btn {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}

tabby-terminal/src/components/terminalToolbar.component.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { Component, HostListener, Input } from '@angular/core'
+import { BaseTerminalTabComponent } from '../api/baseTerminalTab.component'
+
+/** @hidden */
+@Component({
+    selector: 'terminal-toolbar',
+    template: require('./terminalToolbar.component.pug'),
+    styles: [require('./terminalToolbar.component.scss')],
+})
+export class TerminalToolbarComponent {
+    @Input() tab: BaseTerminalTabComponent
+
+    @HostListener('mouseenter') onMouseEnter () {
+        this.tab.showToolbar()
+    }
+
+    @HostListener('mouseleave') onMouseLeave () {
+        this.tab.hideToolbar()
+    }
+}

tabby-terminal/src/index.ts

@@ -15,6 +15,7 @@ import { ColorSchemePreviewComponent } from './components/colorSchemePreview.com
 import { SearchPanelComponent } from './components/searchPanel.component'
 import { StreamProcessingSettingsComponent } from './components/streamProcessingSettings.component'
 import { LoginScriptsSettingsComponent } from './components/loginScriptsSettings.component'
+import { TerminalToolbarComponent } from './components/terminalToolbar.component'
 
 import { TerminalDecorator } from './api/decorator'
 import { TerminalContextMenuItemProvider } from './api/contextMenuProvider'
@@ -71,12 +72,14 @@ import { TerminalCLIHandler } from './cli'
         SearchPanelComponent,
         StreamProcessingSettingsComponent,
         LoginScriptsSettingsComponent,
+        TerminalToolbarComponent,
     ],
     exports: [
         ColorPickerComponent,
         SearchPanelComponent,
         StreamProcessingSettingsComponent,
         LoginScriptsSettingsComponent,
+        TerminalToolbarComponent,
     ],
 })
 export default class TerminalModule { } // eslint-disable-line @typescript-eslint/no-extraneous-class