added drag handles to toolbars

tabby-core/src/index.ts

@@ -149,6 +149,7 @@ const PROVIDERS = [
         SortablejsModule,
         DragDropModule,
         TranslateModule,
+        CdkAutoDropGroup,
     ],
 })
 export default class AppModule { // eslint-disable-line @typescript-eslint/no-extraneous-class

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

@@ -1,11 +1,23 @@
-ng-content
-
-button.btn.btn-sm.btn-link(
-    *ngIf='tab.enableToolbar',
-    (click)='tab.togglePinToolbar()',
-    (mouseenter)='tab.showToolbar()',
-    (mouseleave)='tab.hideToolbar()'
+.content(
+    cdkDropList
+    cdkAutoDropGroup='app-tabs'
 )
-    i.fas.fa-thumbtack
-    span(*ngIf='tab.pinToolbar', translate) Unpin
-    span(*ngIf='!tab.pinToolbar', translate) Pin
+    i.fas.fa-grip-vertical.drag-handle(
+        *ngIf='shouldShowDragHandle',
+        cdkDrag,
+        [cdkDragData]='tab',
+        (cdkDragStarted)='onTabDragStart()',
+        (cdkDragEnded)='onTabDragEnd()'
+    )
+
+    ng-content
+
+    button.btn.btn-sm.btn-link(
+        *ngIf='tab.enableToolbar',
+        (click)='tab.togglePinToolbar()',
+        (mouseenter)='tab.showToolbar()',
+        (mouseleave)='tab.hideToolbar()'
+    )
+        i.fas.fa-thumbtack
+        span(*ngIf='tab.pinToolbar', translate) Unpin
+        span(*ngIf='!tab.pinToolbar', translate) Pin

tabby-terminal/src/components/terminalToolbar.component.scss

@@ -1,10 +1,20 @@
 :host {
-    background: rgba(0, 0, 0, .75);
+    background: #000000bf;
     padding: 5px 15px 5px 15px;
+    display: flex;
+    z-index: 3;
+}
 
+.content {
+    flex-grow: 1;
     display: flex;
     align-items: center;
-    z-index: 3;
+}
+
+.drag-handle {
+    margin: 0 10px 0 0;
+    cursor: move;
+    opacity: .3;
 }
 
 ::ng-deep .btn {

tabby-terminal/src/components/terminalToolbar.component.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { Component, HostListener, Input } from '@angular/core'
+import { AppService, SplitTabComponent } from 'tabby-core'
 import { BaseTerminalTabComponent } from '../api/baseTerminalTab.component'
 
 /** @hidden */
@@ -11,6 +12,26 @@ import { BaseTerminalTabComponent } from '../api/baseTerminalTab.component'
 export class TerminalToolbarComponent {
     @Input() tab: BaseTerminalTabComponent
 
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor (
+        private app: AppService,
+    ) { }
+
+    onTabDragStart (): void {
+        this.app.emitTabDragStarted(this.tab)
+    }
+
+    onTabDragEnd (): void {
+        setTimeout(() => {
+            this.app.emitTabDragEnded()
+            this.app.emitTabsChanged()
+        })
+    }
+
+    get shouldShowDragHandle (): boolean {
+        return this.tab.parent instanceof SplitTabComponent && this.tab.parent.getAllTabs().length > 1
+    }
+
     @HostListener('mouseenter') onMouseEnter () {
         this.tab.showToolbar()
     }