mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-04-04 04:42:05 -04:00
feat(Notepad): Implement tab reordering via drag-and-drop functionality
This commit is contained in:
purian23
@@ -10,6 +10,10 @@ Column {
|
||||
|
||||
property var currentTab: NotepadStorageService.tabs.length > NotepadStorageService.currentTabIndex ? NotepadStorageService.tabs[NotepadStorageService.currentTabIndex] : null
|
||||
property bool contentLoaded: false
|
||||
property int draggedIndex: -1
|
||||
property int dropTargetIndex: -1
|
||||
property bool suppressShiftAnimation: false
|
||||
readonly property real tabItemSize: 128 + Theme.spacingXS
|
||||
|
||||
signal tabSwitched(int tabIndex)
|
||||
signal tabClosed(int tabIndex)
|
||||
@@ -46,92 +50,221 @@ Column {
|
||||
Repeater {
|
||||
model: NotepadStorageService.tabs
|
||||
|
||||
delegate: Rectangle {
|
||||
delegate: Item {
|
||||
id: delegateItem
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
readonly property bool isActive: NotepadStorageService.currentTabIndex === index
|
||||
readonly property bool isHovered: tabMouseArea.containsMouse && !closeMouseArea.containsMouse
|
||||
readonly property real tabWidth: 128
|
||||
property bool longPressing: false
|
||||
property bool dragging: false
|
||||
property point dragStartPos: Qt.point(0, 0)
|
||||
property int targetIndex: -1
|
||||
property int originalIndex: -1
|
||||
property real dragAxisOffset: 0
|
||||
|
||||
Timer {
|
||||
id: longPressTimer
|
||||
interval: 200
|
||||
repeat: false
|
||||
onTriggered: {
|
||||
if (NotepadStorageService.tabs.length > 1) {
|
||||
delegateItem.longPressing = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
readonly property real shiftOffset: {
|
||||
if (root.draggedIndex < 0)
|
||||
return 0
|
||||
if (index === root.draggedIndex)
|
||||
return 0
|
||||
var dragIdx = root.draggedIndex
|
||||
var dropIdx = root.dropTargetIndex
|
||||
var myIdx = index
|
||||
var shiftAmount = root.tabItemSize
|
||||
if (dropIdx < 0)
|
||||
return 0
|
||||
if (dragIdx < dropIdx && myIdx > dragIdx && myIdx <= dropIdx)
|
||||
return -shiftAmount
|
||||
if (dragIdx > dropIdx && myIdx >= dropIdx && myIdx < dragIdx)
|
||||
return shiftAmount
|
||||
return 0
|
||||
}
|
||||
|
||||
width: tabWidth
|
||||
height: 32
|
||||
radius: Theme.cornerRadius
|
||||
color: isActive ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryPressed, 0)
|
||||
border.width: isActive ? 0 : 1
|
||||
border.color: Theme.outlineMedium
|
||||
clip: true
|
||||
z: dragging ? 100 : 0
|
||||
|
||||
transform: Translate {
|
||||
x: shiftOffset
|
||||
Behavior on x {
|
||||
enabled: !root.suppressShiftAnimation
|
||||
NumberAnimation {
|
||||
duration: 150
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: tabVisual
|
||||
anchors.fill: parent
|
||||
z: 1
|
||||
layer.enabled: dragging
|
||||
layer.smooth: true
|
||||
|
||||
transform: Translate {
|
||||
x: dragging ? dragAxisOffset : 0
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: tabRect
|
||||
anchors.fill: parent
|
||||
radius: Theme.cornerRadius
|
||||
color: isActive ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryPressed, 0)
|
||||
border.width: isActive || dragging ? 0 : 1
|
||||
border.color: dragging ? Theme.primary : Theme.outlineMedium
|
||||
clip: true
|
||||
|
||||
Row {
|
||||
id: tabContent
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
StyledText {
|
||||
id: tabText
|
||||
width: parent.width - (tabCloseButton.visible ? tabCloseButton.width + Theme.spacingXS : 0)
|
||||
text: {
|
||||
var prefix = ""
|
||||
if (hasUnsavedChangesForTab(modelData)) {
|
||||
prefix = "● "
|
||||
}
|
||||
return prefix + (modelData.title || "Untitled")
|
||||
}
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: isActive ? Theme.primary : Theme.surfaceText
|
||||
font.weight: isActive ? Font.Medium : Font.Normal
|
||||
elide: Text.ElideMiddle
|
||||
maximumLineCount: 1
|
||||
wrapMode: Text.NoWrap
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: tabCloseButton
|
||||
width: 20
|
||||
height: 20
|
||||
radius: Theme.cornerRadius
|
||||
color: closeMouseArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
|
||||
visible: NotepadStorageService.tabs.length > 1
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
DankIcon {
|
||||
name: "close"
|
||||
size: 14
|
||||
color: Theme.surfaceTextMedium
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: closeMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
z: 100
|
||||
|
||||
onClicked: root.tabClosed(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: tabMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
preventStealing: dragging || longPressing
|
||||
cursorShape: dragging || longPressing ? Qt.ClosedHandCursor : Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton
|
||||
|
||||
onClicked: root.tabSwitched(index)
|
||||
}
|
||||
|
||||
Row {
|
||||
id: tabContent
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
StyledText {
|
||||
id: tabText
|
||||
width: parent.width - (tabCloseButton.visible ? tabCloseButton.width + Theme.spacingXS : 0)
|
||||
text: {
|
||||
var prefix = "";
|
||||
if (hasUnsavedChangesForTab(modelData)) {
|
||||
prefix = "● ";
|
||||
}
|
||||
return prefix + (modelData.title || "Untitled");
|
||||
}
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: isActive ? Theme.primary : Theme.surfaceText
|
||||
font.weight: isActive ? Font.Medium : Font.Normal
|
||||
elide: Text.ElideMiddle
|
||||
maximumLineCount: 1
|
||||
wrapMode: Text.NoWrap
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: tabCloseButton
|
||||
width: 20
|
||||
height: 20
|
||||
radius: Theme.cornerRadius
|
||||
color: closeMouseArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
|
||||
visible: NotepadStorageService.tabs.length > 1
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
DankIcon {
|
||||
name: "close"
|
||||
size: 14
|
||||
color: Theme.surfaceTextMedium
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: closeMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
z: 100
|
||||
|
||||
onClicked: {
|
||||
root.tabClosed(index);
|
||||
}
|
||||
onPressed: mouse => {
|
||||
if (mouse.button === Qt.LeftButton && NotepadStorageService.tabs.length > 1) {
|
||||
delegateItem.dragStartPos = Qt.point(mouse.x, mouse.y)
|
||||
longPressTimer.start()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
onReleased: mouse => {
|
||||
longPressTimer.stop()
|
||||
var wasDragging = delegateItem.dragging
|
||||
var didReorder = wasDragging && delegateItem.targetIndex >= 0 && delegateItem.targetIndex !== delegateItem.originalIndex
|
||||
|
||||
if (didReorder) {
|
||||
root.suppressShiftAnimation = true
|
||||
NotepadStorageService.reorderTab(delegateItem.originalIndex, delegateItem.targetIndex)
|
||||
}
|
||||
|
||||
delegateItem.longPressing = false
|
||||
delegateItem.dragging = false
|
||||
delegateItem.dragAxisOffset = 0
|
||||
delegateItem.targetIndex = -1
|
||||
delegateItem.originalIndex = -1
|
||||
root.draggedIndex = -1
|
||||
root.dropTargetIndex = -1
|
||||
if (didReorder) {
|
||||
Qt.callLater(() => {
|
||||
root.suppressShiftAnimation = false
|
||||
})
|
||||
}
|
||||
|
||||
if (wasDragging || mouse.button !== Qt.LeftButton)
|
||||
return
|
||||
root.tabSwitched(index)
|
||||
}
|
||||
|
||||
onPositionChanged: mouse => {
|
||||
if (delegateItem.longPressing && !delegateItem.dragging) {
|
||||
var distance = Math.sqrt(Math.pow(mouse.x - delegateItem.dragStartPos.x, 2) + Math.pow(mouse.y - delegateItem.dragStartPos.y, 2))
|
||||
if (distance > 5) {
|
||||
delegateItem.dragging = true
|
||||
delegateItem.targetIndex = index
|
||||
delegateItem.originalIndex = index
|
||||
root.draggedIndex = index
|
||||
root.dropTargetIndex = index
|
||||
}
|
||||
}
|
||||
|
||||
if (!delegateItem.dragging)
|
||||
return
|
||||
|
||||
var axisOffset = mouse.x - delegateItem.dragStartPos.x
|
||||
delegateItem.dragAxisOffset = axisOffset
|
||||
|
||||
var itemSize = root.tabItemSize
|
||||
var rawSlot = axisOffset / itemSize
|
||||
var slotOffset = rawSlot >= 0
|
||||
? Math.floor(rawSlot + 0.4)
|
||||
: Math.ceil(rawSlot - 0.4)
|
||||
var tabCount = NotepadStorageService.tabs.length
|
||||
var newTargetIndex = Math.max(0, Math.min(tabCount - 1, delegateItem.originalIndex + slotOffset))
|
||||
|
||||
if (newTargetIndex !== delegateItem.targetIndex) {
|
||||
delegateItem.targetIndex = newTargetIndex
|
||||
root.dropTargetIndex = newTargetIndex
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user