fixed tab header animations, allow disabling animations globally #6147

tabby-core/src/components/appRoot.component.pug

@@ -26,7 +26,7 @@ title-bar(
                 [tab]='tab',
                 [active]='tab == app.activeTab',
                 @animateTab,
-                [@.disabled]='hasVerticalTabs()',
+                [@.disabled]='hasVerticalTabs() || !config.store.accessibility.animations',
                 (click)='app.selectTab(tab)',
                 [class.fully-draggable]='hostApp.platform != Platform.macOS',
                 [class.drag-region]='hostApp.platform == Platform.macOS && !(app.tabDragActive$|async)',

tabby-core/src/components/appRoot.component.ts

@@ -25,8 +25,8 @@ import { AppService, FileTransfer, HostWindowService, PlatformService, ToolbarBu
     animations: [
         trigger('animateTab', [
             state('in', style({
-                'flex-basis': '200px',
+                'flex-basis': 'auto',
-                width: '200px',
+                width: 'auto',
             })),
             transition(':enter', [
                 style({
@@ -34,14 +34,14 @@ import { AppService, FileTransfer, HostWindowService, PlatformService, ToolbarBu
                     width: '1px',
                 }),
                 animate('250ms ease-in-out', style({
-                    'flex-basis': '200px',
+                    'flex-basis': 'auto',
-                    width: '200px',
+                    width: 'auto',
                 })),
             ]),
             transition(':leave', [
                 style({
-                    'flex-basis': '200px',
+                    'flex-basis': 'auto',
-                    width: '200px',
+                    width: 'auto',
                 }),
                 animate('250ms ease-in-out', style({
                     'flex-basis': '1px',

tabby-core/src/configDefaults.yaml

@@ -1,3 +1,5 @@
+accessibility:
+  animations: true
 appearance:
   dock: off
   dockScreen: current

tabby-settings/src/components/hotkeyInputModal.component.pug

@@ -3,7 +3,11 @@
 
 .modal-body
     .input
-        .stroke(*ngFor='let stroke of value', [@animateKey]='true') {{stroke}}
+        .stroke(
+            *ngFor='let stroke of value',
+            [@animateKey]='true',
+            [@.disabled]='!config.store.accessibility.animations'
+        ) {{stroke}}
 
     .timeout
         div([style.width]='timeoutProgress + "%"')

tabby-settings/src/components/hotkeyInputModal.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { trigger, transition, style, animate } from '@angular/animations'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { HotkeysService, BaseComponent, Keystroke } from 'tabby-core'
+import { HotkeysService, BaseComponent, Keystroke, ConfigService } from 'tabby-core'
 
 const INPUT_TIMEOUT = 1000
 
@@ -45,6 +45,7 @@ export class HotkeyInputModalComponent extends BaseComponent {
     constructor (
         private modalInstance: NgbActiveModal,
         public hotkeys: HotkeysService,
+        public config: ConfigService,
     ) {
         super()
         this.hotkeys.clearCurrentKeystrokes()

tabby-settings/src/components/settingsTab.component.pug

@@ -105,6 +105,12 @@
                             i.fas.fa-bug
                             span(translate) Open DevTools
 
+                    h3(translate) Accessibility
+                    .form-line
+                        .header
+                            .title(translate) Enable animations
+                        toggle([(ngModel)]='config.store.accessibility.animations', (ngModelChange)='saveConfiguration()')
+
         ng-container(*ngFor='let provider of settingsProviders')
             li(*ngIf='provider.prioritized', [ngbNavItem]='provider.id')
                 a.d-flex.align-items-center(ngbNavLink)

tabby-ssh/src/components/sshTab.component.pug

@@ -36,6 +36,7 @@ terminal-toolbar([tab]='this')
 
 sftp-panel.bg-dark(
     @panelSlide,
+    [@.disabled]='!config.store.accessibility.animations'
     [(path)]='sftpPath',
     *ngIf='sftpPanelVisible',
     (click)='$event.stopPropagation()',

tabby-terminal/src/components/baseTerminalTab.component.pug

@@ -3,6 +3,7 @@
 search-panel(
     *ngIf='showSearchPanel && hasFocus',
     @toolbarSlide,
+    [@.disabled]='!config.store.accessibility.animations'
     [frontend]='frontend',
     (close)='showSearchPanel = false; frontend?.cancelSearch()'
 )