GuanM/tabby
1
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2025-06-08 13:30:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed #7081 - laggy tab open/close animation

Browse Source
This commit is contained in:
Eugene Pankov 2022-11-01 16:38:17 +01:00
parent 8d10bc1a78
commit 856c042bb8
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
3 changed files with 51 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tabby-core/src/components/appRoot.component.pug
View File

@ -25,7 +25,7 @@ title-bar(
[index]='idx',
[tab]='tab',
[active]='tab == app.activeTab',
@animateTab,
[@animateTab]='{value: "in", params: {size: targetTabSize}}',
[@.disabled]='hasVerticalTabs() || !config.store.accessibility.animations',
(click)='app.selectTab(tab)',
[class.fully-draggable]='hostApp.platform != Platform.macOS',

68
tabby-core/src/components/appRoot.component.ts
View File

@ -17,38 +17,47 @@ import { TabBodyComponent } from './tabBody.component'
import { SplitTabComponent } from './splitTab.component'
import { AppService, FileTransfer, HostWindowService, PlatformService, ToolbarButton, ToolbarButtonProvider } from '../api'
function makeTabAnimation (dimension: string, size: number) {
return [
state('in', style({
'flex-basis': '{{size}}',
[dimension]: '{{size}}',
}), {
params: { size: `${size}px` },
}),
transition(':enter', [
style({
'flex-basis': '1px',
[dimension]: '1px',
}),
animate('250ms ease-out', style({
'flex-basis': '{{size}}',
[dimension]: '{{size}}',
})),
]),
transition(':leave', [
style({
'flex-basis': 'auto',
'padding-left': '*',
'padding-right': '*',
[dimension]: '*',
}),
animate('250ms ease-in-out', style({
'padding-left': 0,
'padding-right': 0,
[dimension]: '0',
})),
]),
]
}
/** @hidden */
@Component({
selector: 'app-root',
template: require('./appRoot.component.pug'),
styles: [require('./appRoot.component.scss')],
animations: [
trigger('animateTab', [
state('in', style({
'flex-basis': 'auto',
width: 'auto',
})),
transition(':enter', [
style({
'flex-basis': '1px',
width: '1px',
}),
animate('250ms ease-in-out', style({
'flex-basis': 'auto',
width: 'auto',
})),
]),
transition(':leave', [
style({
'flex-basis': 'auto',
width: 'auto',
}),
animate('250ms ease-in-out', style({
'flex-basis': '1px',
width: '1px',
})),
]),
]),
trigger('animateTab', makeTabAnimation('width', 200)),
],
})
export class AppRootComponent {
@ -196,6 +205,13 @@ export class AppRootComponent {
return this.config.store.appearance.tabsLocation === 'left' || this.config.store.appearance.tabsLocation === 'right'
}
get targetTabSize (): any {
if (this.hasVerticalTabs()) {
return '*'
}
return this.config.store.appearance.flexTabs ? '*' : '200px'
}
async generateButtonSubmenu (button: ToolbarButton) {
if (button.submenu) {
button.submenuItems = await button.submenu()

13
tabby-core/src/components/tabHeader.component.scss
View File

@ -3,17 +3,15 @@ $tabs-height: 38px;
:host {
position: relative;
cursor: pointer;
box-sizing: content-box;
> * { cursor: pointer; }
flex: 1000 1 200px;
width: 200px;
padding: 0 10px;
// flex-basis and width are also set through animation on AppRoot
&.flex-width {
flex: 1000 1 auto;
width: auto;
}
padding: 0 10px;
display: flex;
flex-direction: row;
@ -21,6 +19,11 @@ $tabs-height: 38px;
overflow: hidden;
&.flex-width {
flex: 1000 1 auto;
width: auto;
}
&.vertical {
flex: none;
height: $tabs-height;