Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
后端镜像
Tabby
提交
dff6a247
T
Tabby
项目概览
后端镜像
/
Tabby
通知
31
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
Tabby
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
dff6a247
编写于
12月 06, 2020
作者:
E
Eugene Pankov
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refined vertical tabs
上级
cbebc095
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
140 addition
and
137 deletion
+140
-137
terminus-core/src/components/appRoot.component.pug
terminus-core/src/components/appRoot.component.pug
+92
-120
terminus-core/src/components/appRoot.component.scss
terminus-core/src/components/appRoot.component.scss
+34
-14
terminus-core/src/components/appRoot.component.ts
terminus-core/src/components/appRoot.component.ts
+4
-0
terminus-settings/src/components/settingsTab.component.pug
terminus-settings/src/components/settingsTab.component.pug
+10
-3
未找到文件。
terminus-core/src/components/appRoot.component.pug
浏览文件 @
dff6a247
...
...
@@ -3,133 +3,105 @@ title-bar(
[class.inset]='hostApp.platform == Platform.macOS'
)
.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',
[class.vertical]='true',
)
.content(
[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" || config.store.appearance.tabsLocation == "left")')
.tabs(
*ngIf='config.store.appearance.tabsLocation != "bottom"'
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()',
.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()',
[index]='idx',
[tab]='tab',
[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',
)
[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',
)
.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}}
.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')
.drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
.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}}
.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}}
button.btn.btn-secondary.btn-tab-bar.btn-update(
*ngIf='updatesAvailable',
title='Update available - Click to install',
(click)='updateApp()',
[fastHtmlBind]='updateIcon'
)
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)',
)
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')
start-page(*ngIf='ready && app.tabs.length == 0')
tab-body(
*ngFor='let tab of unsortedTabs',
[active]='tab == app.activeTab',
[tab]='tab',
)
tab-body(
*ngFor='let tab of unsortedTabs',
[active]='tab == app.activeTab',
[tab]='tab',
)
ng-template(ngbModalContainer)
terminus-core/src/components/appRoot.component.scss
浏览文件 @
dff6a247
...
...
@@ -35,26 +35,49 @@ $side-tab-width: 200px;
flex-direction
:
column
;
}
&
.with-side-tab
{
width
:
calc
(
100%
-
#{
$side-tab-width
}
);
&
.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%
;
&
.vertical
{
height
:
100%
;
width
:
$side-tab-width
;
overflow-y
:
auto
;
overflow-x
:
hidden
;
}
.btn-tab-bar
{
line-height
:
$tabs-height
+
2px
;
height
:
$tabs-height
;
cursor
:
pointer
;
display
:
flex
;
...
...
@@ -79,12 +102,6 @@ $side-tab-width: 200px;
flex
:
0
1
auto
;
display
:
flex
;
min-width
:
0
;
&
.vertical
{
width
:
$side-tab-width
;
flex
:
auto
;
flex-direction
:
column
;
}
}
&
>
.drag-space
{
...
...
@@ -100,7 +117,10 @@ $side-tab-width: 200px;
&
>
.inset
{
width
:
85px
;
height
:
$tabs-height
;
flex
:
none
;
opacity
:
0
;
-webkit-app-region
:
drag
;
}
window-controls
{
...
...
terminus-core/src/components/appRoot.component.ts
浏览文件 @
dff6a247
...
...
@@ -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
(),
...
...
terminus-settings/src/components/settingsTab.component.pug
浏览文件 @
dff6a247
...
...
@@ -43,21 +43,28 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
ngbButton,
[value]='"top"'
)
|
On the t
op
|
T
op
label.btn.btn-secondary(ngbButtonLabel)
input(
type='radio',
ngbButton,
[value]='"bottom"'
)
|
At the b
ottom
|
B
ottom
label.btn.btn-secondary(ngbButtonLabel)
input(
type='radio',
ngbButton,
[value]='"left"'
)
| At the left
| Left
label.btn.btn-secondary(ngbButtonLabel)
input(
type='radio',
ngbButton,
[value]='"right"'
)
| Right
.form-line
.header
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录