From 63374f532c3f1529f40a54eb10a417729a14617b Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Sat, 29 Jan 2022 17:20:23 +0100 Subject: [PATCH] cleaned up terminal toolbar implementation --- tabby-core/src/theme.paper.scss | 4 +- tabby-core/src/theme.scss | 2 +- .../src/components/serialTab.component.pug | 5 +-- tabby-ssh/src/components/sshTab.component.pug | 9 ++--- .../src/components/telnetTab.component.pug | 5 +-- .../src/api/baseTerminalTab.component.ts | 11 ++---- .../components/baseTerminalTab.component.pug | 7 +--- .../components/baseTerminalTab.component.scss | 37 +++++++------------ .../components/terminalToolbar.component.pug | 11 ++++++ .../components/terminalToolbar.component.scss | 14 +++++++ .../components/terminalToolbar.component.ts | 21 +++++++++++ tabby-terminal/src/index.ts | 3 ++ 12 files changed, 76 insertions(+), 53 deletions(-) create mode 100644 tabby-terminal/src/components/terminalToolbar.component.pug create mode 100644 tabby-terminal/src/components/terminalToolbar.component.scss create mode 100644 tabby-terminal/src/components/terminalToolbar.component.ts diff --git a/tabby-core/src/theme.paper.scss b/tabby-core/src/theme.paper.scss index 1495cc66..7615007d 100644 --- a/tabby-core/src/theme.paper.scss +++ b/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; -} \ No newline at end of file +} diff --git a/tabby-core/src/theme.scss b/tabby-core/src/theme.scss index c9345e8a..c31ee173 100644 --- a/tabby-core/src/theme.scss +++ b/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; } } diff --git a/tabby-serial/src/components/serialTab.component.pug b/tabby-serial/src/components/serialTab.component.pug index 7da72f6e..f058409b 100644 --- a/tabby-serial/src/components/serialTab.component.pug +++ b/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}}) diff --git a/tabby-ssh/src/components/sshTab.component.pug b/tabby-ssh/src/components/sshTab.component.pug index 02799010..60af07ba 100644 --- a/tabby-ssh/src/components/sshTab.component.pug +++ b/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 diff --git a/tabby-telnet/src/components/telnetTab.component.pug b/tabby-telnet/src/components/telnetTab.component.pug index 521cbd0e..50badf54 100644 --- a/tabby-telnet/src/components/telnetTab.component.pug +++ b/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}} diff --git a/tabby-terminal/src/api/baseTerminalTab.component.ts b/tabby-terminal/src/api/baseTerminalTab.component.ts index 34386ef7..ffde073f 100644 --- a/tabby-terminal/src/api/baseTerminalTab.component.ts +++ b/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 (observable: Observable, handler: (v: T) => void): void { this.sessionHandlers.subscribe(observable, handler) } diff --git a/tabby-terminal/src/components/baseTerminalTab.component.pug b/tabby-terminal/src/components/baseTerminalTab.component.pug index 5e5be81b..23d1efc7 100644 --- a/tabby-terminal/src/components/baseTerminalTab.component.pug +++ b/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 diff --git a/tabby-terminal/src/components/baseTerminalTab.component.scss b/tabby-terminal/src/components/baseTerminalTab.component.scss index 41d4a4d8..0b829645 100644 --- a/tabby-terminal/src/components/baseTerminalTab.component.scss +++ b/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; + } } diff --git a/tabby-terminal/src/components/terminalToolbar.component.pug b/tabby-terminal/src/components/terminalToolbar.component.pug new file mode 100644 index 00000000..e4fc6fea --- /dev/null +++ b/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 diff --git a/tabby-terminal/src/components/terminalToolbar.component.scss b/tabby-terminal/src/components/terminalToolbar.component.scss new file mode 100644 index 00000000..1a13f070 --- /dev/null +++ b/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; +} diff --git a/tabby-terminal/src/components/terminalToolbar.component.ts b/tabby-terminal/src/components/terminalToolbar.component.ts new file mode 100644 index 00000000..a83a289f --- /dev/null +++ b/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() + } +} diff --git a/tabby-terminal/src/index.ts b/tabby-terminal/src/index.ts index c8e59f2a..6de3d67c 100644 --- a/tabby-terminal/src/index.ts +++ b/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