never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

BarSettings: better D&D

Browse source
This commit is contained in:
LemmyCook 2025-09-04 00:27:38 -04:00
parent 9e819084af
commit 4a45e73125
2 changed files with 315 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

522
Modules/SettingsPanel/Extras/BarSectionEditor.qml
View file

@ -117,254 +117,316 @@ NBox {
// Drag and Drop Widget Area // Drag and Drop Widget Area
// Replace your Flow section with this: // Replace your Flow section with this:
// Drag and Drop Widget Area - use Item container // Drag and Drop Widget Area - use Item container
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.minimumHeight: 65 * scaling Layout.minimumHeight: 65 * scaling
Flow { Flow {
id: widgetFlow id: widgetFlow
anchors.fill: parent anchors.fill: parent
spacing: Style.marginS * scaling spacing: Style.marginS * scaling
flow: Flow.LeftToRight flow: Flow.LeftToRight
Repeater { Repeater {
model: widgetModel model: widgetModel
delegate: Rectangle { delegate: Rectangle {
id: widgetItem id: widgetItem
required property int index required property int index
required property var modelData required property var modelData
width: widgetContent.implicitWidth + Style.marginL * scaling width: widgetContent.implicitWidth + Style.marginL * scaling
height: Style.baseWidgetSize * 1.15 * scaling height: Style.baseWidgetSize * 1.15 * scaling
radius: Style.radiusL * scaling radius: Style.radiusL * scaling
color: root.getWidgetColor(modelData) color: root.getWidgetColor(modelData)
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderS * scaling) border.width: Math.max(1, Style.borderS * scaling)
// Store the widget index for drag operations // Store the widget index for drag operations
property int widgetIndex: index property int widgetIndex: index
readonly property int buttonsWidth: Math.round(20 * scaling) readonly property int buttonsWidth: Math.round(20 * scaling)
readonly property int buttonsCount: 1 + BarWidgetRegistry.widgetHasUserSettings(modelData.id) readonly property int buttonsCount: 1 + BarWidgetRegistry.widgetHasUserSettings(modelData.id)
// Visual feedback during drag // Visual feedback during drag
states: State { states: State {
when: flowDragArea.draggedIndex === index when: flowDragArea.draggedIndex === index
PropertyChanges { PropertyChanges {
target: widgetItem target: widgetItem
scale: 1.1 scale: 1.1
opacity: 0.9 opacity: 0.9
z: 1000 z: 1000
} }
} }
RowLayout { RowLayout {
id: widgetContent id: widgetContent
anchors.centerIn: parent anchors.centerIn: parent
spacing: Style.marginXXS * scaling spacing: Style.marginXXS * scaling
NText { NText {
text: modelData.id text: modelData.id
font.pointSize: Style.fontSizeS * scaling font.pointSize: Style.fontSizeS * scaling
color: Color.mOnPrimary color: Color.mOnPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight elide: Text.ElideRight
Layout.preferredWidth: 80 * scaling Layout.preferredWidth: 80 * scaling
} }
RowLayout { RowLayout {
spacing: 0 spacing: 0
Layout.preferredWidth: buttonsCount * buttonsWidth Layout.preferredWidth: buttonsCount * buttonsWidth
Loader { Loader {
active: BarWidgetRegistry.widgetHasUserSettings(modelData.id) active: BarWidgetRegistry.widgetHasUserSettings(modelData.id)
sourceComponent: NIconButton { sourceComponent: NIconButton {
icon: "settings" icon: "settings"
sizeRatio: 0.6 sizeRatio: 0.6
colorBorder: Color.applyOpacity(Color.mOutline, "40") colorBorder: Color.applyOpacity(Color.mOutline, "40")
colorBg: Color.mOnSurface colorBg: Color.mOnSurface
colorFg: Color.mOnPrimary colorFg: Color.mOnPrimary
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40") colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
colorFgHover: Color.mOnPrimary colorFgHover: Color.mOnPrimary
onClicked: { onClicked: {
var dialog = Qt.createComponent("BarWidgetSettingsDialog.qml").createObject(root, { var dialog = Qt.createComponent("BarWidgetSettingsDialog.qml").createObject(root, {
"widgetIndex": index, "widgetIndex": index,
"widgetData": modelData, "widgetData": modelData,
"widgetId": modelData.id, "widgetId": modelData.id,
"parent": Overlay.overlay "parent": Overlay.overlay
}) })
dialog.open() dialog.open()
}
}
}
NIconButton {
icon: "close"
sizeRatio: 0.6
colorBorder: Color.applyOpacity(Color.mOutline, "40")
colorBg: Color.mOnSurface
colorFg: Color.mOnPrimary
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
colorFgHover: Color.mOnPrimary
onClicked: {
removeWidget(sectionId, index)
}
} }
} }
} }
NIconButton {
icon: "close"
sizeRatio: 0.6
colorBorder: Color.applyOpacity(Color.mOutline, "40")
colorBg: Color.mOnSurface
colorFg: Color.mOnPrimary
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
colorFgHover: Color.mOnPrimary
onClicked: {
removeWidget(sectionId, index)
}
}
} }
} }
} }
}
}
// MouseArea outside Flow, covering the same area // MouseArea outside Flow, covering the same area
MouseArea { MouseArea {
id: flowDragArea id: flowDragArea
anchors.fill: parent anchors.fill: parent
z: 999 // Above all widgets to ensure it gets events first z: 999 // Above all widgets to ensure it gets events first
// Critical properties for proper event handling // Critical properties for proper event handling
acceptedButtons: Qt.LeftButton acceptedButtons: Qt.LeftButton
preventStealing: true // Prevent child items from stealing events preventStealing: false // Prevent child items from stealing events
propagateComposedEvents: false // Don't propagate to children during drag propagateComposedEvents: draggedIndex != -1 // Don't propagate to children during drag
hoverEnabled: true hoverEnabled: draggedIndex != -1
property point startPos: Qt.point(0, 0) property point startPos: Qt.point(0, 0)
property bool dragStarted: false property bool dragStarted: false
property int draggedIndex: -1 property int draggedIndex: -1
property real dragThreshold: 15 * scaling property real dragThreshold: 15 * scaling
property Item draggedWidget: null property Item draggedWidget: null
property point clickOffsetInWidget: Qt.point(0, 0) // Add this line property point clickOffsetInWidget: Qt.point(0, 0)
property point originalWidgetPos: Qt.point(0, 0) // ADD THIS: Store original position
onPressed: mouse => {
startPos = Qt.point(mouse.x, mouse.y) onPressed: mouse => {
dragStarted = false startPos = Qt.point(mouse.x, mouse.y)
draggedIndex = -1 dragStarted = false
draggedWidget = null draggedIndex = -1
draggedWidget = null
console.log("Mouse pressed at:", mouse.x, mouse.y)
// Find which widget was clicked
// Find which widget was clicked for (var i = 0; i < widgetModel.length; i++) {
for (var i = 0; i < widgetModel.length; i++) { const widget = widgetFlow.children[i]
const widget = widgetFlow.children[i] if (widget && widget.widgetIndex !== undefined) {
if (widget && widget.widgetIndex !== undefined) { if (mouse.x >= widget.x && mouse.x <= widget.x + widget.width && mouse.y >= widget.y
if (mouse.x >= widget.x && mouse.x <= widget.x + widget.width && && mouse.y <= widget.y + widget.height) {
mouse.y >= widget.y && mouse.y <= widget.y + widget.height) {
const localX = mouse.x - widget.x
const localX = mouse.x - widget.x const buttonsStartX = widget.width - (widget.buttonsCount * widget.buttonsWidth)
const buttonsStartX = widget.width - (widget.buttonsCount * widget.buttonsWidth)
if (localX < buttonsStartX) {
if (localX < buttonsStartX) { draggedIndex = widget.widgetIndex
draggedIndex = widget.widgetIndex draggedWidget = widget
draggedWidget = widget
// Calculate and store where within the widget the user clicked
// Calculate and store where within the widget the user clicked const clickOffsetX = mouse.x - widget.x
const clickOffsetX = mouse.x - widget.x // Distance from widget's left edge const clickOffsetY = mouse.y - widget.y
const clickOffsetY = mouse.y - widget.y // Distance from widget's top edge clickOffsetInWidget = Qt.point(clickOffsetX, clickOffsetY)
clickOffsetInWidget = Qt.point(clickOffsetX, clickOffsetY)
// STORE ORIGINAL POSITION
Logger.log("BarSectionEditor", "Selected widget:", widgetModel[i].id, "at index", i) originalWidgetPos = Qt.point(widget.x, widget.y)
Logger.log("BarSectionEditor", "Widget position:", widget.x, widget.y)
Logger.log("BarSectionEditor", "Mouse position:", mouse.x, mouse.y) // Immediately set prevent stealing to true when drag candidate is found
Logger.log("BarSectionEditor", "Click offset within widget:", clickOffsetInWidget.x, clickOffsetInWidget.y) preventStealing = true
break
// Immediately set prevent stealing to true when drag candidate is found } else {
preventStealing = true // Click was on buttons - allow event propagation
break mouse.accepted = false
}else { return
// Click was on buttons - allow event propagation }
mouse.accepted = false }
return }
} }
}
onPositionChanged: mouse => {
if (draggedIndex !== -1) {
const deltaX = mouse.x - startPos.x
const deltaY = mouse.y - startPos.y
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
if (!dragStarted && distance > dragThreshold) {
dragStarted = true
//Logger.log("BarSectionEditor", "Drag started")
// Enable visual feedback
if (draggedWidget) {
draggedWidget.z = 1000
}
}
if (dragStarted && draggedWidget) {
// Adjust position to account for where within the widget the user clicked
draggedWidget.x = mouse.x - clickOffsetInWidget.x
draggedWidget.y = mouse.y - clickOffsetInWidget.y
}
}
}
onReleased: mouse => {
if (dragStarted && draggedWidget) {
// Find drop target using improved logic
let targetIndex = -1
let minDistance = Infinity
const mouseX = mouse.x
const mouseY = mouse.y
// Check if we should insert at the beginning
let insertAtBeginning = true
let insertAtEnd = true
// Check if the dragged item is already the last item
let isLastItem = true
for (var k = 0; k < widgetModel.length; k++) {
if (k !== draggedIndex && k > draggedIndex) {
isLastItem = false
break
}
}
for (var i = 0; i < widgetModel.length; i++) {
if (i !== draggedIndex) {
const widget = widgetFlow.children[i]
if (widget && widget.widgetIndex !== undefined) {
const centerX = widget.x + widget.width / 2
const centerY = widget.y + widget.height / 2
const distance = Math.sqrt(Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2))
// Check if mouse is to the right of this widget
if (mouseX > widget.x + widget.width / 2) {
insertAtBeginning = false
}
// Check if mouse is to the left of this widget
if (mouseX < widget.x + widget.width / 2) {
insertAtEnd = false
}
if (distance < minDistance) {
minDistance = distance
targetIndex = widget.widgetIndex
}
}
}
}
// If dragging the last item to the right, don't reorder
if (isLastItem && insertAtEnd) {
insertAtEnd = false
targetIndex = -1
Logger.log("BarSectionEditor", "Last item dropped to right - no reordering needed")
}
// Determine final target index based on position
let finalTargetIndex = targetIndex
if (insertAtBeginning && widgetModel.length > 1) {
// Insert at the very beginning (position 0)
finalTargetIndex = 0
Logger.log("BarSectionEditor", "Inserting at beginning")
} else if (insertAtEnd && widgetModel.length > 1) {
// Insert at the very end
let maxIndex = -1
for (var j = 0; j < widgetModel.length; j++) {
if (j !== draggedIndex) {
maxIndex = Math.max(maxIndex, j)
}
}
finalTargetIndex = maxIndex
Logger.log("BarSectionEditor", "Inserting at end, target:", finalTargetIndex)
} else if (targetIndex !== -1) {
// Normal case - determine if we should insert before or after the target
const targetWidget = widgetFlow.children[targetIndex]
if (targetWidget) {
const targetCenterX = targetWidget.x + targetWidget.width / 2
if (mouseX > targetCenterX) {
// Mouse is to the right of target center, insert after
Logger.log("BarSectionEditor", "Inserting after widget at index:", targetIndex)
} else {
// Mouse is to the left of target center, insert before
finalTargetIndex = targetIndex
Logger.log("BarSectionEditor", "Inserting before widget at index:", targetIndex)
}
}
}
Logger.log("BarSectionEditor", "Final drop target index:", finalTargetIndex)
// Check if reordering is needed
if (finalTargetIndex !== -1 && finalTargetIndex !== draggedIndex) {
// Reordering will happen - reset position for the Flow to handle
draggedWidget.x = 0
draggedWidget.y = 0
draggedWidget.z = 0
reorderWidget(sectionId, draggedIndex, finalTargetIndex)
} else {
// No reordering - restore original position
draggedWidget.x = originalWidgetPos.x
draggedWidget.y = originalWidgetPos.y
draggedWidget.z = 0
Logger.log("BarSectionEditor", "No reordering - restoring original position")
}
} else if (draggedIndex !== -1 && !dragStarted) {
// This was a click without drag - could add click handling here if needed
}
// Reset everything
dragStarted = false
draggedIndex = -1
draggedWidget = null
preventStealing = false // Allow normal event propagation again
originalWidgetPos = Qt.point(0, 0) // Reset stored position
}
// Handle case where mouse leaves the area during drag
onExited: {
if (dragStarted && draggedWidget) {
// Restore original position when mouse leaves area
draggedWidget.x = originalWidgetPos.x
draggedWidget.y = originalWidgetPos.y
draggedWidget.z = 0
} }
} }
} }
} }
onPositionChanged: mouse => {
if (draggedIndex !== -1) {
const deltaX = mouse.x - startPos.x
const deltaY = mouse.y - startPos.y
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
//Logger.log("BarSectionEditor", "Position changed - distance:", distance.toFixed(2))
if (!dragStarted && distance > dragThreshold) {
dragStarted = true
Logger.log("BarSectionEditor", "Drag started")
// Enable visual feedback
if (draggedWidget) {
draggedWidget.z = 1000
}
}
if (dragStarted && draggedWidget) {
// Adjust position to account for where within the widget the user clicked
draggedWidget.x = mouse.x - clickOffsetInWidget.x
draggedWidget.y = mouse.y - clickOffsetInWidget.y
}
}
}
onReleased: mouse => {
if (dragStarted && draggedWidget) {
// Find drop target using current mouse position
let targetIndex = -1
let minDistance = Infinity
for (var i = 0; i < widgetModel.length; i++) {
if (i !== draggedIndex) {
const widget = widgetFlow.children[i]
if (widget && widget.widgetIndex !== undefined) {
const centerX = widget.x + widget.width / 2
const centerY = widget.y + widget.height / 2
const distance = Math.sqrt(Math.pow(mouse.x - centerX, 2) + Math.pow(mouse.y - centerY, 2))
if (distance < minDistance) {
minDistance = distance
targetIndex = widget.widgetIndex
}
}
}
}
Logger.log("BarSectionEditor", "Drop target index:", targetIndex)
// Reset widget position and z-order
draggedWidget.x = 0
draggedWidget.y = 0
draggedWidget.z = 0
if (targetIndex !== -1 && targetIndex !== draggedIndex) {
reorderWidget(sectionId, draggedIndex, targetIndex)
}
} else if (draggedIndex !== -1 && !dragStarted) {
// This was a click without drag - simulate click on the widget
// Find the clicked widget and trigger appropriate action
const widget = draggedWidget
if (widget) {
// Could add click handling here if needed
}
}
// Reset everything
dragStarted = false
draggedIndex = -1
draggedWidget = null
preventStealing = false // Allow normal event propagation again
}
// Handle case where mouse leaves the area during drag
onExited: {
if (dragStarted && draggedWidget) {
// Reset position but keep drag state until release
draggedWidget.x = 0
draggedWidget.y = 0
draggedWidget.z = 0
}
}
}
}
} }
} }

45
Modules/SettingsPanel/Tabs/BarTab.qml
View file

@ -163,10 +163,10 @@ ColumnLayout {
sectionId: "left" sectionId: "left"
widgetModel: Settings.data.bar.widgets.left widgetModel: Settings.data.bar.widgets.left
availableWidgets: availableWidgets availableWidgets: availableWidgets
onAddWidget: (widgetId, section) => addWidgetToSection(widgetId, section) onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index) onRemoveWidget: (section, index) => _removeWidgetFromSection(section, index)
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex) onReorderWidget: (section, fromIndex, toIndex) => _reorderWidgetInSection(section, fromIndex, toIndex)
onUpdateWidgetSettings: (section, index, settings) => updateWidgetSettingsInSection(section, index, settings) onUpdateWidgetSettings: (section, index, settings) => _updateWidgetSettingsInSection(section, index, settings)
} }
// Center Section // Center Section
@ -175,10 +175,10 @@ ColumnLayout {
sectionId: "center" sectionId: "center"
widgetModel: Settings.data.bar.widgets.center widgetModel: Settings.data.bar.widgets.center
availableWidgets: availableWidgets availableWidgets: availableWidgets
onAddWidget: (widgetId, section) => addWidgetToSection(widgetId, section) onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index) onRemoveWidget: (section, index) => _removeWidgetFromSection(section, index)
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex) onReorderWidget: (section, fromIndex, toIndex) => _reorderWidgetInSection(section, fromIndex, toIndex)
onUpdateWidgetSettings: (section, index, settings) => updateWidgetSettingsInSection(section, index, settings) onUpdateWidgetSettings: (section, index, settings) => _updateWidgetSettingsInSection(section, index, settings)
} }
// Right Section // Right Section
@ -187,10 +187,10 @@ ColumnLayout {
sectionId: "right" sectionId: "right"
widgetModel: Settings.data.bar.widgets.right widgetModel: Settings.data.bar.widgets.right
availableWidgets: availableWidgets availableWidgets: availableWidgets
onAddWidget: (widgetId, section) => addWidgetToSection(widgetId, section) onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index) onRemoveWidget: (section, index) => _removeWidgetFromSection(section, index)
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex) onReorderWidget: (section, fromIndex, toIndex) => _reorderWidgetInSection(section, fromIndex, toIndex)
onUpdateWidgetSettings: (section, index, settings) => updateWidgetSettingsInSection(section, index, settings) onUpdateWidgetSettings: (section, index, settings) => _updateWidgetSettingsInSection(section, index, settings)
} }
} }
} }
@ -202,14 +202,9 @@ ColumnLayout {
} }
// --------------------------------- // ---------------------------------
// Helper functions // Signal functions
function updateWidgetSettingsInSection(section, index, settings) { // ---------------------------------
// Update the widget settings in the Settings data function _addWidgetToSection(widgetId, section) {
Settings.data.bar.widgets[section][index] = settings
//Logger.log("BarTab", `Updated widget settings for ${settings.id} in ${section} section`)
}
function addWidgetToSection(widgetId, section) {
var newWidget = { var newWidget = {
"id": widgetId "id": widgetId
} }
@ -226,7 +221,7 @@ ColumnLayout {
Settings.data.bar.widgets[section].push(newWidget) Settings.data.bar.widgets[section].push(newWidget)
} }
function removeWidgetFromSection(section, index) { function _removeWidgetFromSection(section, index) {
if (index >= 0 && index < Settings.data.bar.widgets[section].length) { if (index >= 0 && index < Settings.data.bar.widgets[section].length) {
var newArray = Settings.data.bar.widgets[section].slice() var newArray = Settings.data.bar.widgets[section].slice()
newArray.splice(index, 1) newArray.splice(index, 1)
@ -234,7 +229,7 @@ ColumnLayout {
} }
} }
function reorderWidgetInSection(section, fromIndex, toIndex) { function _reorderWidgetInSection(section, fromIndex, toIndex) {
if (fromIndex >= 0 && fromIndex < Settings.data.bar.widgets[section].length && toIndex >= 0 if (fromIndex >= 0 && fromIndex < Settings.data.bar.widgets[section].length && toIndex >= 0
&& toIndex < Settings.data.bar.widgets[section].length) { && toIndex < Settings.data.bar.widgets[section].length) {
@ -249,6 +244,12 @@ ColumnLayout {
} }
} }
function _updateWidgetSettingsInSection(section, index, settings) {
// Update the widget settings in the Settings data
Settings.data.bar.widgets[section][index] = settings
//Logger.log("BarTab", `Updated widget settings for ${settings.id} in ${section} section`)
}
// Base list model for all combo boxes // Base list model for all combo boxes
ListModel { ListModel {
id: availableWidgets id: availableWidgets