Custom buttons: improved UI, still wip

This commit is contained in:
LemmyCook 2025-09-03 20:51:51 -04:00
parent 7f34ca4122
commit 598bc48957
3 changed files with 279 additions and 48 deletions

View file

@ -1,26 +1,57 @@
import Quickshell
import QtQuick
import QtQuick.Layouts
import qs.Commons
import qs.Widgets
import qs.Services
import qs.Widgets
NIconButton {
id: root
property ShellScreen screen
// Widget properties passed from Bar.qml
property var screen
property real scaling: 1.0
property bool allowUserSettings: true
icon: "favorite"
tooltipText: "Hello world"
sizeRatio: 0.8
colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface
colorBorder: Color.transparent
colorBorderHover: Color.transparent
anchors.verticalCenter: parent.verticalCenter
onClicked: {
property string barSection: ""
property int sectionWidgetIndex: -1
property int sectionWidgetsCount: 0
// Get user settings from Settings data
property var widgetSettings: {
var section = barSection.replace("Section", "").toLowerCase()
if (section && sectionWidgetIndex >= 0) {
var widgets = Settings.data.bar.widgets[section]
if (widgets && sectionWidgetIndex < widgets.length) {
return widgets[sectionWidgetIndex]
}
}
return {}
}
}
// Use settings or defaults from BarWidgetRegistry
property string userIcon: widgetSettings.icon || BarWidgetRegistry.widgetMetadata["CustomButton"].icon
property string userExecute: widgetSettings.execute || BarWidgetRegistry.widgetMetadata["CustomButton"].execute
icon: userIcon
tooltipText: userExecute ? `Execute: ${userExecute}` : "Custom Button - Configure in settings"
colorBg: Color.transparent
colorFg: Color.mOnSurface
colorBgHover: Color.applyOpacity(Color.mPrimary, "20")
colorFgHover: Color.mPrimary
onClicked: {
if (userExecute) {
// Execute the user's command
Quickshell.execDetached(userExecute.split(" "))
Logger.log("CustomButton", `Executing command: ${userExecute}`)
} else {
Logger.warn("CustomButton", "No command configured for this button")
}
}
// Visual feedback when no command is set
opacity: userExecute ? 1.0 : 0.6
Component.onCompleted: {
Logger.log("CustomButton", `Initialized with icon: ${userIcon}, command: ${userExecute}`)
}
}

View file

@ -165,6 +165,7 @@ ColumnLayout {
onAddWidget: (widgetId, section) => addWidgetToSection(widgetId, section)
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index)
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex)
onUpdateWidgetSettings: (section, index, settings) => updateWidgetSettingsInSection(section, index, settings)
}
// Center Section
@ -176,6 +177,7 @@ ColumnLayout {
onAddWidget: (widgetId, section) => addWidgetToSection(widgetId, section)
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index)
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex)
onUpdateWidgetSettings: (section, index, settings) => updateWidgetSettingsInSection(section, index, settings)
}
// Right Section
@ -187,6 +189,7 @@ ColumnLayout {
onAddWidget: (widgetId, section) => addWidgetToSection(widgetId, section)
onRemoveWidget: (section, index) => removeWidgetFromSection(section, index)
onReorderWidget: (section, fromIndex, toIndex) => reorderWidgetInSection(section, fromIndex, toIndex)
onUpdateWidgetSettings: (section, index, settings) => updateWidgetSettingsInSection(section, index, settings)
}
}
}
@ -197,6 +200,12 @@ ColumnLayout {
Layout.bottomMargin: Style.marginXL * scaling
}
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`)
}
// Helper functions
function addWidgetToSection(widgetId, section) {
//Logger.log("BarTab", "Adding widget", widgetId, "to section", section)