diff --git a/terminus-core/src/components/appRoot.component.pug b/terminus-core/src/components/appRoot.component.pug index 21e018cc..7630ade9 100644 --- a/terminus-core/src/components/appRoot.component.pug +++ b/terminus-core/src/components/appRoot.component.pug @@ -4,11 +4,15 @@ title-bar( ) .content( - [class.tabs-on-top]='config.store.appearance.tabsLocation == "top"' + [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"', + [class.tabs-on-side]='hasVerticalTabs()', ) .tab-bar - .inset.background(*ngIf='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"') + .inset.background(*ngIf='hostApp.platform == Platform.macOS \ + && config.store.appearance.frame == "thin" \ + && (config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left")') .tabs( + *ngIf='config.store.appearance.tabsLocation != "bottom"' dnd-sortable-container, [sortableData]='app.tabs', ) @@ -24,6 +28,7 @@ title-bar( [active]='tab == app.activeTab', [hasActivity]='tab.activity$|async', @animateTab, + [@.disabled]='hasVerticalTabs()', (click)='app.selectTab(tab)', [class.fully-draggable]='hostApp.platform != Platform.macOS', [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging', @@ -87,7 +92,8 @@ title-bar( ) window-controls.background( - *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)', + *ngIf='config.store.appearance.frame == "thin" \ + && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)', ) start-page(*ngIf='ready && app.tabs.length == 0') diff --git a/terminus-core/src/components/appRoot.component.scss b/terminus-core/src/components/appRoot.component.scss index 689fc7f4..76daa36b 100644 --- a/terminus-core/src/components/appRoot.component.scss +++ b/terminus-core/src/components/appRoot.component.scss @@ -15,10 +15,18 @@ $tabs-height: 38px; $tab-border-radius: 4px; +$side-tab-width: 200px; +.wrap { + display: flex; + width: 100vw; + height: 100vh; + flex-direction: row; +} .content { - height: 100%; + width: 100vw; + height: 100vh; flex: auto; display: flex; flex-direction: column-reverse; @@ -26,15 +34,50 @@ $tab-border-radius: 4px; &.tabs-on-top { flex-direction: column; } + + &.tabs-on-side { + flex-direction: row-reverse; + + &.tabs-on-top { + flex-direction: row; + } + } + } +.content.tabs-on-side > .tab-bar { + height: 100%; + width: $side-tab-width; + overflow-y: auto; + overflow-x: hidden; + flex-direction: column; + background: rgba(0, 0, 0, 0.25); + + .tabs { + width: $side-tab-width; + flex: none; + flex-direction: column; + + tab-header { + flex: 0 0 $tabs-height; + } + } + + .drag-space { + flex: auto; + } +} + + .tab-bar { flex: none; height: $tabs-height; display: flex; + width: 100%; .btn-tab-bar { line-height: $tabs-height + 2px; + height: $tabs-height; cursor: pointer; display: flex; @@ -74,7 +117,10 @@ $tab-border-radius: 4px; & > .inset { width: 85px; + height: $tabs-height; flex: none; + opacity: 0; + -webkit-app-region: drag; } window-controls { diff --git a/terminus-core/src/components/appRoot.component.ts b/terminus-core/src/components/appRoot.component.ts index 0ae1171f..16c06999 100644 --- a/terminus-core/src/components/appRoot.component.ts +++ b/terminus-core/src/components/appRoot.component.ts @@ -184,6 +184,10 @@ export class AppRootComponent { return false } + hasVerticalTabs () { + return this.config.store.appearance.tabsLocation === 'left' || this.config.store.appearance.tabsLocation === 'right' + } + async updateApp () { if ((await this.electron.showMessageBox( this.hostApp.getWindow(), diff --git a/terminus-core/src/components/tabHeader.component.scss b/terminus-core/src/components/tabHeader.component.scss index 09ed4c87..1c5c45e5 100644 --- a/terminus-core/src/components/tabHeader.component.scss +++ b/terminus-core/src/components/tabHeader.component.scss @@ -13,6 +13,11 @@ $tabs-height: 38px; overflow: hidden; + &.vertical { + flex: none; + height: $tabs-height; + } + .index { flex: none; font-weight: bold; diff --git a/terminus-settings/src/components/settingsTab.component.pug b/terminus-settings/src/components/settingsTab.component.pug index 841e8744..7a787471 100644 --- a/terminus-settings/src/components/settingsTab.component.pug +++ b/terminus-settings/src/components/settingsTab.component.pug @@ -43,14 +43,28 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab') ngbButton, [value]='"top"' ) - | On the top + | Top label.btn.btn-secondary(ngbButtonLabel) input( type='radio', ngbButton, [value]='"bottom"' ) - | At the bottom + | Bottom + label.btn.btn-secondary(ngbButtonLabel) + input( + type='radio', + ngbButton, + [value]='"left"' + ) + | Left + label.btn.btn-secondary(ngbButtonLabel) + input( + type='radio', + ngbButton, + [value]='"right"' + ) + | Right .form-line .header diff --git a/terminus-settings/src/components/settingsTab.component.ts b/terminus-settings/src/components/settingsTab.component.ts index 4f26efd2..a10ad4ec 100644 --- a/terminus-settings/src/components/settingsTab.component.ts +++ b/terminus-settings/src/components/settingsTab.component.ts @@ -65,7 +65,7 @@ export class SettingsTabComponent extends BaseTabComponent { const onConfigChange = () => { this.configFile = config.readRaw() this.padWindowControls = hostApp.platform === Platform.macOS - && config.store.appearance.tabsLocation === 'bottom' + && config.store.appearance.tabsLocation !== 'top' } this.configSubscription = config.changed$.subscribe(onConfigChange) diff --git a/terminus-ssh/package.json b/terminus-ssh/package.json index a1e7d0fe..673d5328 100644 --- a/terminus-ssh/package.json +++ b/terminus-ssh/package.json @@ -10,9 +10,7 @@ "scripts": { "build": "webpack --progress --color", "watch": "webpack --progress --color --watch", - "postinstall": "run-script-os", - "postinstall:win32": "xcopy /i node_modules\\ssh2\\util\\pagent.exe util\\", - "postinstall:darwin:linux": "exit" + "postinstall": "xcopy /i /y node_modules\\ssh2\\util\\pagent.exe util\\" }, "files": [ "dist", diff --git a/terminus-terminal/src/api/baseTerminalTab.component.ts b/terminus-terminal/src/api/baseTerminalTab.component.ts index b622b020..15e9f7d5 100644 --- a/terminus-terminal/src/api/baseTerminalTab.component.ts +++ b/terminus-terminal/src/api/baseTerminalTab.component.ts @@ -360,7 +360,7 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit this.topPadded = this.hostApp.platform === Platform.macOS && this.config.store.appearance.frame === 'thin' - && this.config.store.appearance.tabsLocation === 'bottom' + && this.config.store.appearance.tabsLocation !== 'top' if (this.config.store.terminal.background === 'colorScheme') { if (this.config.store.terminal.colorScheme.background) {