Eugeny/tabby
1
1
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2024-12-24 02:53:43 +03:00
Code Issues Projects Releases Wiki Activity

Adding Tab Location "left"

Browse Source
This commit is contained in:
TakuroOnoda 2020-10-18 18:48:10 +09:00
parent a15e79ad5a
commit 5c7256ffe5
7 changed files with 162 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
terminus-core/src/components/appRoot.component.pug
View File

@ -3,99 +3,133 @@ title-bar(
[class.inset]='hostApp.platform == Platform.macOS'
)
.content(
[class.tabs-on-top]='config.store.appearance.tabsLocation == "top"'
)
.tab-bar
.inset.background(*ngIf='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"')
.tabs(
dnd-sortable-container,
[sortableData]='app.tabs',
)
tab-header(
*ngFor='let tab of app.tabs; let idx = index',
dnd-sortable,
[sortableIndex]='idx',
(onDragStart)='onTabDragStart()',
(onDragEnd)='onTabDragEnd()',
.wrap
.tab-bar.vertical(
*ngIf='config.store.appearance.tabsLocation == "left"'
)
.inset.background(*ngIf='hostApp.platform == Platform.macOS \
&& config.store.appearance.frame == "thin"')
.tabs.vertical(
dnd-sortable-container,
[sortableData]='app.tabs',
)
tab-header(
*ngFor='let tab of app.tabs; let idx = index',
dnd-sortable,
[sortableIndex]='idx',
(onDragStart)='onTabDragStart()',
(onDragEnd)='onTabDragEnd()',
[index]='idx',
[tab]='tab',
[active]='tab == app.activeTab',
[hasActivity]='tab.activity$|async',
@animateTab,
(click)='app.selectTab(tab)',
[class.fully-draggable]='hostApp.platform != Platform.macOS',
[class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
)
[index]='idx',
[tab]='tab',
[active]='tab == app.activeTab',
[hasActivity]='tab.activity$|async',
@animateTab,
(click)='app.selectTab(tab)',
[class.fully-draggable]='hostApp.platform != Platform.macOS',
[class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
[class.vertical]='true',
)
.btn-group.background
.d-flex(
*ngFor='let button of leftToolbarButtons',
ngbDropdown,
(openChange)='generateButtonSubmenu(button)',
)
button.btn.btn-secondary.btn-tab-bar(
[title]='button.title',
(click)='button.click && button.click()',
[fastHtmlBind]='button.icon',
ngbDropdownToggle,
)
div(*ngIf='button.submenu', ngbDropdownMenu)
button.dropdown-item.d-flex.align-items-center(
*ngFor='let item of button.submenuItems',
(click)='item.click()',
ngbDropdownItem,
)
.icon-wrapper(
*ngIf='hasIcons(button.submenuItems)',
[fastHtmlBind]='item.icon'
)
div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
.drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
.content(
[class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
[class.with-side-tab]='config.store.appearance.tabsLocation == "left"',
)
.tab-bar
.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 != "left"'
dnd-sortable-container,
[sortableData]='app.tabs',
)
tab-header(
*ngFor='let tab of app.tabs; let idx = index',
dnd-sortable,
[sortableIndex]='idx',
(onDragStart)='onTabDragStart()',
(onDragEnd)='onTabDragEnd()',
.btn-group.background
.d-flex(
*ngFor='let button of rightToolbarButtons',
ngbDropdown,
(openChange)='generateButtonSubmenu(button)',
)
button.btn.btn-secondary.btn-tab-bar(
[title]='button.title',
(click)='button.click && button.click()',
[fastHtmlBind]='button.icon',
ngbDropdownToggle,
)
div(*ngIf='button.submenu', ngbDropdownMenu)
button.dropdown-item.d-flex.align-items-center(
*ngFor='let item of button.submenuItems',
(click)='item.click()',
ngbDropdownItem,
)
.icon-wrapper(
*ngIf='hasIcons(button.submenuItems)',
[fastHtmlBind]='item.icon'
)
div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
[index]='idx',
[tab]='tab',
[active]='tab == app.activeTab',
[hasActivity]='tab.activity$|async',
@animateTab,
(click)='app.selectTab(tab)',
[class.fully-draggable]='hostApp.platform != Platform.macOS',
[class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
)
button.btn.btn-secondary.btn-tab-bar.btn-update(
*ngIf='updatesAvailable',
title='Update available - Click to install',
(click)='updateApp()',
[fastHtmlBind]='updateIcon'
)
.btn-group.background
.d-flex(
*ngFor='let button of leftToolbarButtons',
ngbDropdown,
(openChange)='generateButtonSubmenu(button)',
)
button.btn.btn-secondary.btn-tab-bar(
[title]='button.title',
(click)='button.click && button.click()',
[fastHtmlBind]='button.icon',
ngbDropdownToggle,
)
div(*ngIf='button.submenu', ngbDropdownMenu)
button.dropdown-item.d-flex.align-items-center(
*ngFor='let item of button.submenuItems',
(click)='item.click()',
ngbDropdownItem,
)
.icon-wrapper(
*ngIf='hasIcons(button.submenuItems)',
[fastHtmlBind]='item.icon'
)
div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
window-controls.background(
*ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
)
.drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
start-page(*ngIf='ready && app.tabs.length == 0')
.btn-group.background
.d-flex(
*ngFor='let button of rightToolbarButtons',
ngbDropdown,
(openChange)='generateButtonSubmenu(button)',
)
button.btn.btn-secondary.btn-tab-bar(
[title]='button.title',
(click)='button.click && button.click()',
[fastHtmlBind]='button.icon',
ngbDropdownToggle,
)
div(*ngIf='button.submenu', ngbDropdownMenu)
button.dropdown-item.d-flex.align-items-center(
*ngFor='let item of button.submenuItems',
(click)='item.click()',
ngbDropdownItem,
)
.icon-wrapper(
*ngIf='hasIcons(button.submenuItems)',
[fastHtmlBind]='item.icon'
)
div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
tab-body(
*ngFor='let tab of unsortedTabs',
[active]='tab == app.activeTab',
[tab]='tab',
)
button.btn.btn-secondary.btn-tab-bar.btn-update(
*ngIf='updatesAvailable',
title='Update available - Click to install',
(click)='updateApp()',
[fastHtmlBind]='updateIcon'
)
window-controls.background(
*ngIf='config.store.appearance.frame == "thin" \
&& (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
)
start-page(*ngIf='ready && app.tabs.length == 0')
tab-body(
*ngFor='let tab of unsortedTabs',
[active]='tab == app.activeTab',
[tab]='tab',
)
ng-template(ngbModalContainer)

28
terminus-core/src/components/appRoot.component.scss
View File

@ -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,12 +34,24 @@ $tab-border-radius: 4px;
&.tabs-on-top {
flex-direction: column;
}
&.with-side-tab {
width: calc(100% - #{$side-tab-width});
}
}
.tab-bar {
flex: none;
height: $tabs-height;
display: flex;
width: 100%;
&.vertical {
height: 100%;
width: $side-tab-width;
overflow-y: auto;
overflow-x: hidden;
}
.btn-tab-bar {
line-height: $tabs-height + 2px;
@ -59,6 +79,12 @@ $tab-border-radius: 4px;
flex: 0 1 auto;
display: flex;
min-width: 0;
&.vertical {
width: $side-tab-width;
flex: auto;
flex-direction: column;
}
}
&>.drag-space {

5
terminus-core/src/components/tabHeader.component.scss
View File

@ -13,6 +13,11 @@ $tabs-height: 38px;
overflow: hidden;
&.vertical {
flex: none;
height: $tabs-height;
}
.index {
flex: none;
font-weight: bold;

7
terminus-settings/src/components/settingsTab.component.pug
View File

@ -51,6 +51,13 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
[value]='"bottom"'
)
| At the bottom
label.btn.btn-secondary(ngbButtonLabel)
input(
type='radio',
ngbButton,
[value]='"left"'
)
| At the left
.form-line
.header

2
terminus-settings/src/components/settingsTab.component.ts
View File

@ -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)

2
terminus-ssh/package.json
View File

@ -10,7 +10,7 @@
"scripts": {
"build": "webpack --progress --color",
"watch": "webpack --progress --color --watch",
"postinstall": "xcopy /i node_modules\\ssh2\\util\\pagent.exe util\\"
"postinstall": "xcopy /i /y node_modules\\ssh2\\util\\pagent.exe util\\"
},
"files": [
"dist",

2
terminus-terminal/src/api/baseTerminalTab.component.ts
View File

@ -348,7 +348,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) {