1
1
mirror of https://github.com/Eugeny/tabby.git synced 2024-12-24 19:13:31 +03:00

added drag handles to toolbars

This commit is contained in:
Eugene Pankov 2022-01-30 20:58:43 +01:00
parent 448fe29f50
commit 8b5b53ab26
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
4 changed files with 56 additions and 12 deletions

View File

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

View File

@ -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

View File

@ -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 {

View File

@ -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()
}