From df9e8343097d1416e27f91c9aa2d007bd1666ca9 Mon Sep 17 00:00:00 2001 From: bbedward Date: Wed, 1 Oct 2025 14:04:17 -0400 Subject: [PATCH] Some consistent styling for plugins --- Modules/Settings/PluginsTab.qml | 92 +++++++++------------------------ Widgets/DankButton.qml | 75 +++++++++++++++++++++++++++ 2 files changed, 100 insertions(+), 67 deletions(-) create mode 100644 Widgets/DankButton.qml diff --git a/Modules/Settings/PluginsTab.qml b/Modules/Settings/PluginsTab.qml index 886dd6d5..a11901e7 100644 --- a/Modules/Settings/PluginsTab.qml +++ b/Modules/Settings/PluginsTab.qml @@ -32,14 +32,12 @@ Item { width: parent.width spacing: Theme.spacingXL - // Header Section StyledRect { width: parent.width height: headerColumn.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius color: Theme.surfaceContainerHigh - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) - border.width: 1 + border.width: 0 Column { id: headerColumn @@ -54,7 +52,7 @@ Item { DankIcon { name: "extension" - size: Theme.iconSizeLarge + size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter } @@ -65,15 +63,15 @@ Item { StyledText { text: "Plugin Management" - font.pixelSize: Theme.fontSizeXLarge - color: "#FFFFFF" + font.pixelSize: Theme.fontSizeLarge + color: Theme.surfaceText font.weight: Font.Medium } StyledText { text: "Manage and configure plugins for extending DMS functionality" font.pixelSize: Theme.fontSizeSmall - color: "#CCCCCC" + color: Theme.surfaceVariantText } } } @@ -82,42 +80,18 @@ Item { width: parent.width spacing: Theme.spacingM - Button { + DankButton { text: "Scan for Plugins" - background: Rectangle { - color: parent.hovered ? "#4A90E2" : "#3A3A3A" - radius: Theme.cornerRadius - border.color: "#666666" - border.width: 1 - } - contentItem: Text { - text: parent.text - color: "#FFFFFF" - font.pixelSize: Theme.fontSizeMedium - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } + iconName: "refresh" onClicked: { PluginService.scanPlugins() ToastService.showInfo("Scanning for plugins...") } } - Button { + DankButton { text: "Create Plugin Directory" - background: Rectangle { - color: parent.hovered ? "#4A90E2" : "#3A3A3A" - radius: Theme.cornerRadius - border.color: "#666666" - border.width: 1 - } - contentItem: Text { - text: parent.text - color: "#FFFFFF" - font.pixelSize: Theme.fontSizeMedium - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } + iconName: "create_new_folder" onClicked: { PluginService.createPluginDirectory() ToastService.showInfo("Created plugin directory: " + PluginService.pluginDirectory) @@ -127,14 +101,12 @@ Item { } } - // Plugin Directory Info StyledRect { width: parent.width height: directoryColumn.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius color: Theme.surfaceContainerHigh - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) - border.width: 1 + border.width: 0 Column { id: directoryColumn @@ -146,35 +118,33 @@ Item { StyledText { text: "Plugin Directory" font.pixelSize: Theme.fontSizeLarge - color: "#FFFFFF" + color: Theme.surfaceText font.weight: Font.Medium } StyledText { text: PluginService.pluginDirectory font.pixelSize: Theme.fontSizeSmall - color: "#CCCCCC" + color: Theme.surfaceVariantText font.family: "monospace" } StyledText { text: "Place plugin directories here. Each plugin should have a plugin.json manifest file." font.pixelSize: Theme.fontSizeSmall - color: "#CCCCCC" + color: Theme.surfaceVariantText wrapMode: Text.WordWrap width: parent.width } } } - // Available Plugins Section StyledRect { width: parent.width height: Math.max(200, availableColumn.implicitHeight + Theme.spacingL * 2) radius: Theme.cornerRadius color: Theme.surfaceContainerHigh - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) - border.width: 1 + border.width: 0 Column { id: availableColumn @@ -186,7 +156,7 @@ Item { StyledText { text: "Available Plugins" font.pixelSize: Theme.fontSizeLarge - color: "#FFFFFF" + color: Theme.surfaceText font.weight: Font.Medium } @@ -208,7 +178,6 @@ Item { height: pluginItemColumn.implicitHeight + Theme.spacingM * 2 + settingsContainer.height radius: Theme.cornerRadius - // Store plugin data in properties to avoid scope issues property var pluginData: modelData property string pluginId: pluginData ? pluginData.id : "" property string pluginName: pluginData ? (pluginData.name || pluginData.id) : "" @@ -225,9 +194,8 @@ Item { console.log("Plugin", pluginId, "isExpanded changed to:", isExpanded) } - color: pluginMouseArea.containsMouse ? Theme.surfacePressed : (isExpanded ? Theme.surfaceContainerHigh : Theme.surfaceContainer) - border.color: isExpanded ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) - border.width: isExpanded ? 2 : 1 + color: pluginMouseArea.containsMouse ? Theme.surfacePressed : (isExpanded ? Theme.surfaceContainerHighest : Theme.surfaceContainer) + border.width: 0 Behavior on height { NumberAnimation { @@ -243,13 +211,6 @@ Item { } } - Behavior on border.color { - ColorAnimation { - duration: Theme.shortDuration - easing.type: Theme.standardEasing - } - } - MouseArea { id: pluginMouseArea anchors.fill: parent @@ -286,7 +247,7 @@ Item { DankIcon { name: pluginDelegate.pluginIcon size: Theme.iconSize - color: PluginService.isPluginLoaded(pluginDelegate.pluginId) ? Theme.primary : "#CCCCCC" + color: PluginService.isPluginLoaded(pluginDelegate.pluginId) ? Theme.primary : Theme.surfaceVariantText anchors.verticalCenter: parent.verticalCenter } @@ -302,7 +263,7 @@ Item { StyledText { text: pluginDelegate.pluginName font.pixelSize: Theme.fontSizeMedium - color: "#FFFFFF" + color: Theme.surfaceText font.weight: Font.Medium anchors.verticalCenter: parent.verticalCenter } @@ -326,7 +287,7 @@ Item { StyledText { text: "v" + pluginDelegate.pluginVersion + " by " + pluginDelegate.pluginAuthor font.pixelSize: Theme.fontSizeSmall - color: "#CCCCCC" + color: Theme.surfaceVariantText width: parent.width elide: Text.ElideRight } @@ -367,7 +328,7 @@ Item { width: parent.width text: pluginDelegate.pluginDescription font.pixelSize: Theme.fontSizeSmall - color: "#CCCCCC" + color: Theme.surfaceVariantText wrapMode: Text.WordWrap visible: pluginDelegate.pluginDescription !== "" } @@ -422,11 +383,10 @@ Item { Rectangle { anchors.fill: parent - color: Qt.rgba(Theme.surfaceContainerHighest.r, Theme.surfaceContainerHighest.g, Theme.surfaceContainerHighest.b, 0.5) + color: Theme.surfaceContainerHighest radius: Theme.cornerRadius anchors.topMargin: Theme.spacingXS - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1) - border.width: 1 + border.width: 0 } DankFlickable { @@ -514,7 +474,7 @@ Item { "Failed to load settings" : "No configurable settings") font.pixelSize: Theme.fontSizeSmall - color: "#CCCCCC" + color: Theme.surfaceVariantText visible: pluginDelegate.isExpanded && (!settingsLoader.active || settingsLoader.status === Loader.Error) } } @@ -525,7 +485,7 @@ Item { anchors.centerIn: parent text: "No plugins found.\nPlace plugins in " + PluginService.pluginDirectory font.pixelSize: Theme.fontSizeMedium - color: "#CCCCCC" + color: Theme.surfaceVariantText horizontalAlignment: Text.AlignHCenter visible: pluginListView.model.length === 0 } @@ -535,7 +495,6 @@ Item { } } - // Connections to update plugin list when plugins are loaded/unloaded Connections { target: PluginService function onPluginLoaded() { @@ -543,7 +502,6 @@ Item { } function onPluginUnloaded() { pluginListView.model = PluginService.getAvailablePlugins() - // Close expanded plugin if it was unloaded if (pluginsTab.expandedPluginId !== "" && !PluginService.isPluginLoaded(pluginsTab.expandedPluginId)) { pluginsTab.expandedPluginId = "" } diff --git a/Widgets/DankButton.qml b/Widgets/DankButton.qml new file mode 100644 index 00000000..f01421ff --- /dev/null +++ b/Widgets/DankButton.qml @@ -0,0 +1,75 @@ +import QtQuick +import qs.Common +import qs.Widgets + +Rectangle { + id: root + + property string text: "" + property string iconName: "" + property int iconSize: Theme.iconSizeSmall + property bool enabled: true + property bool hovered: mouseArea.containsMouse + property bool pressed: mouseArea.pressed + property color backgroundColor: Theme.primary + property color textColor: Theme.primaryText + property int buttonHeight: 40 + property int horizontalPadding: Theme.spacingL + + signal clicked() + + width: Math.max(contentRow.implicitWidth + horizontalPadding * 2, 64) + height: buttonHeight + radius: Theme.cornerRadius + color: backgroundColor + opacity: enabled ? 1 : 0.4 + + Rectangle { + id: stateLayer + anchors.fill: parent + radius: parent.radius + color: { + if (pressed) return Theme.primaryPressed + if (hovered) return Theme.primaryHover + return "transparent" + } + + Behavior on color { + ColorAnimation { + duration: Theme.shorterDuration + easing.type: Theme.standardEasing + } + } + } + + Row { + id: contentRow + anchors.centerIn: parent + spacing: Theme.spacingS + + DankIcon { + name: root.iconName + size: root.iconSize + color: root.textColor + visible: root.iconName !== "" + anchors.verticalCenter: parent.verticalCenter + } + + StyledText { + text: root.text + font.pixelSize: Theme.fontSizeMedium + font.weight: Font.Medium + color: root.textColor + anchors.verticalCenter: parent.verticalCenter + } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor + enabled: root.enabled + onClicked: root.clicked() + } +}