mirror of
https://github.com/Eugeny/tabby.git
synced 2024-11-23 21:34:13 +03:00
.
This commit is contained in:
Eugene Pankov
parent
2d1dca41d7
commit
633ef9e791
@ -1,21 +1,12 @@
|
||||
title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"')
|
||||
//title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"')
|
||||
|
||||
.content(
|
||||
[class.tabs-on-top]='config.store.appearance.tabsOnTop'
|
||||
)
|
||||
.tab-bar(*ngIf='app.tabs.length > 0')
|
||||
button.btn.btn-secondary(
|
||||
*ngFor='let button of getLeftToolbarButtons()',
|
||||
[title]='button.title',
|
||||
(click)='button.click()',
|
||||
)
|
||||
i.fa([class]='"fa fa-" + button.icon')
|
||||
|
||||
.tabs
|
||||
tab-header(
|
||||
*ngFor='let tab of app.tabs; let idx = index',
|
||||
[class.pre-selected]='idx == app.tabs.indexOf(app.activeTab) - 1',
|
||||
[class.post-selected]='idx == app.tabs.indexOf(app.activeTab) + 1',
|
||||
[index]='idx',
|
||||
[tab]='tab',
|
||||
[active]='tab == app.activeTab',
|
||||
@ -24,6 +15,15 @@ title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appeara
|
||||
(click)='app.selectTab(tab)',
|
||||
(closeClicked)='app.closeTab(tab)',
|
||||
)
|
||||
|
||||
button.btn.btn-secondary(
|
||||
*ngFor='let button of getLeftToolbarButtons()',
|
||||
[title]='button.title',
|
||||
(click)='button.click()',
|
||||
)
|
||||
i.fa([class]='"fa fa-" + button.icon')
|
||||
|
||||
.drag-space
|
||||
|
||||
button.btn.btn-secondary(
|
||||
*ngFor='let button of getRightToolbarButtons()',
|
||||
|
||||
@ -47,8 +47,15 @@ $tab-border-radius: 4px;
|
||||
}
|
||||
|
||||
&>.tabs {
|
||||
flex: auto;
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&>.drag-space {
|
||||
min-width: 100px;
|
||||
flex: 1 0 25%;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,16 +23,19 @@ import { AppService, IToolbarButton, ToolbarButtonProvider } from '../api'
|
||||
trigger('animateTab', [
|
||||
state('in', style({
|
||||
'flex-grow': '1000',
|
||||
'flex-basis': '200px',
|
||||
})),
|
||||
transition(':enter', [
|
||||
style({
|
||||
'flex-grow': '1',
|
||||
'flex-basis': '1px',
|
||||
}),
|
||||
animate('250ms ease-in-out')
|
||||
]),
|
||||
transition(':leave', [
|
||||
animate('250ms ease-in-out', style({
|
||||
'flex-grow': '1',
|
||||
'flex-basis': '1px',
|
||||
}))
|
||||
])
|
||||
])
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
.wrapper
|
||||
.index {{index + 1}}
|
||||
.name {{(tab.title$ || "Terminal") | async}}
|
||||
button((click)='closeClicked.emit()') ×
|
||||
.index {{index + 1}}
|
||||
.name {{(tab.title$ || "Terminal") | async}}
|
||||
button((click)='closeClicked.emit()') ×
|
||||
|
||||
@ -4,67 +4,61 @@ $tabs-height: 40px;
|
||||
line-height: $tabs-height - 2px;
|
||||
cursor: pointer;
|
||||
|
||||
flex: auto;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1000;
|
||||
flex: 1000 1 200px;
|
||||
width: 200px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-width: 0;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
min-width: 0;
|
||||
transition: 0.25s ease-out all;
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
border-top: 1px solid transparent;
|
||||
|
||||
.index {
|
||||
flex: none;
|
||||
font-weight: bold;
|
||||
|
||||
margin-left: 10px;
|
||||
width: 20px;
|
||||
border-radius: 10px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
transition: 0.25s all;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.index {
|
||||
flex: none;
|
||||
font-weight: bold;
|
||||
.name {
|
||||
flex: auto;
|
||||
margin: 0 1px 0 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
margin-left: 10px;
|
||||
width: 20px;
|
||||
border-radius: 10px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
transition: 0.25s all;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
flex: none;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
|
||||
.name {
|
||||
flex: auto;
|
||||
margin: 0 1px 0 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
$button-size: $tabs-height * 0.6;
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: $button-size / 2;
|
||||
line-height: $button-size * 0.8;
|
||||
margin-top: ($tabs-height - $button-size) * 0.4;
|
||||
margin-right: 10px;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
flex: none;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
$button-size: $tabs-height * 0.6;
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: $button-size / 2;
|
||||
line-height: $button-size * 0.8;
|
||||
margin-top: ($tabs-height - $button-size) * 0.4;
|
||||
margin-right: 10px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
transition: 0.25s opacity;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover button {
|
||||
transition: 0.25s opacity;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,75 +98,47 @@ app-root {
|
||||
}
|
||||
}
|
||||
|
||||
.drag-space {
|
||||
background: $body-bg2;
|
||||
}
|
||||
|
||||
&>.tabs {
|
||||
&:empty {
|
||||
background: $body-bg2;
|
||||
}
|
||||
|
||||
tab-header {
|
||||
background: $body-bg;
|
||||
background: $body-bg2;
|
||||
|
||||
.wrapper {
|
||||
background: $body-bg2;
|
||||
.index {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.index {
|
||||
color: #555;
|
||||
}
|
||||
button {
|
||||
color: $body-color;
|
||||
border: none;
|
||||
transition: 0.25s all;
|
||||
|
||||
button {
|
||||
color: $body-color;
|
||||
border: none;
|
||||
transition: 0.25s all;
|
||||
|
||||
&:hover { background: $button-hover-bg !important; }
|
||||
&:active { background: $button-active-bg !important; }
|
||||
}
|
||||
&:hover { background: $button-hover-bg !important; }
|
||||
&:active { background: $button-active-bg !important; }
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $body-bg2;
|
||||
|
||||
.wrapper {
|
||||
background: $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-activity:not(.active) {
|
||||
/*
|
||||
.wrapper .index {
|
||||
background: $blue;
|
||||
color: white;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.95);
|
||||
}
|
||||
*/
|
||||
background: $body-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabs-on-top .tab-bar {
|
||||
margin-top: 5px;
|
||||
|
||||
tab-header {
|
||||
.wrapper {
|
||||
border-top: 1px solid transparent;
|
||||
border-top-left-radius: $tab-border-radius;
|
||||
border-top-right-radius: $tab-border-radius;
|
||||
}
|
||||
border-top: 1px solid transparent;
|
||||
|
||||
&.pre-selected .wrapper {
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
|
||||
&.post-selected .wrapper {
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
}
|
||||
|
||||
&.active .wrapper {
|
||||
&.active {
|
||||
border-top: 1px solid $teal;
|
||||
}
|
||||
|
||||
&.has-activity:not(.active) .wrapper {
|
||||
&.has-activity:not(.active) {
|
||||
border-top: 1px solid $green;
|
||||
}
|
||||
}
|
||||
@ -176,25 +148,13 @@ app-root {
|
||||
margin-bottom: 3px;
|
||||
|
||||
tab-header {
|
||||
.wrapper {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
&.pre-selected .wrapper {
|
||||
border-top-right-radius: $tab-border-radius;
|
||||
}
|
||||
|
||||
&.post-selected .wrapper {
|
||||
border-top-left-radius: $tab-border-radius;
|
||||
}
|
||||
|
||||
&.active .wrapper {
|
||||
&.active {
|
||||
border-bottom: 1px solid $teal;
|
||||
}
|
||||
|
||||
&.has-activity:not(.active) .wrapper {
|
||||
&.has-activity:not(.active) {
|
||||
border-bottom: 1px solid $green;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@ export class TerminalSettingsTabComponent {
|
||||
}
|
||||
if (this.hostApp.platform == Platform.Linux) {
|
||||
exec('fc-list :spacing=mono').then(([stdout, _]) => {
|
||||
this.fonts = stdout
|
||||
this.fonts = stdout.toString()
|
||||
.split('\n')
|
||||
.filter(x => !!x)
|
||||
.map(x => x.split(':')[1].trim())
|
||||
|
||||
@ -5,5 +5,6 @@ module.exports = [
|
||||
require('./terminus-terminal/webpack.config.js'),
|
||||
require('./terminus-clickable-links/webpack.config.js'),
|
||||
require('./terminus-community-color-schemes/webpack.config.js'),
|
||||
require('./terminus-plugin-manager/webpack.config.js'),
|
||||
require('./terminus-theme-hype/webpack.config.js'),
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user