From 8b5b53ab26331a5a85d5d5ea07a31ddc16ba2907 Mon Sep 17 00:00:00 2001
From: Eugene Pankov <e@ajenti.org>
Date: Sun, 30 Jan 2022 20:58:43 +0100
Subject: [PATCH] added drag handles to toolbars

---
 tabby-core/src/index.ts                       |  1 +
 .../components/terminalToolbar.component.pug  | 32 +++++++++++++------
 .../components/terminalToolbar.component.scss | 14 ++++++--
 .../components/terminalToolbar.component.ts   | 21 ++++++++++++
 4 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/tabby-core/src/index.ts b/tabby-core/src/index.ts
index 2218f5cf..b83f7c80 100644
--- a/tabby-core/src/index.ts
+++ b/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
diff --git a/tabby-terminal/src/components/terminalToolbar.component.pug b/tabby-terminal/src/components/terminalToolbar.component.pug
index e4fc6fea..b7c62b2f 100644
--- a/tabby-terminal/src/components/terminalToolbar.component.pug
+++ b/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
diff --git a/tabby-terminal/src/components/terminalToolbar.component.scss b/tabby-terminal/src/components/terminalToolbar.component.scss
index 1a13f070..65b352f3 100644
--- a/tabby-terminal/src/components/terminalToolbar.component.scss
+++ b/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 {
diff --git a/tabby-terminal/src/components/terminalToolbar.component.ts b/tabby-terminal/src/components/terminalToolbar.component.ts
index a83a289f..559cba1a 100644
--- a/tabby-terminal/src/components/terminalToolbar.component.ts
+++ b/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()
     }