Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-05 21:15:38 -05:00
Code Packages Releases Activity

Some consistent styling for plugins

Browse Source
This commit is contained in:
bbedward
2025-10-01 14:04:17 -04:00
parent ab1c0bb129
commit df9e834309
2 changed files with 100 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
Modules/Settings/PluginsTab.qml
View File

@@ -32,14 +32,12 @@ Item {
width: parent.width width: parent.width
spacing: Theme.spacingXL spacing: Theme.spacingXL
// Header Section
StyledRect { StyledRect {
width: parent.width width: parent.width
height: headerColumn.implicitHeight + Theme.spacingL * 2 height: headerColumn.implicitHeight + Theme.spacingL * 2
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Theme.surfaceContainerHigh color: Theme.surfaceContainerHigh
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) border.width: 0
border.width: 1
Column { Column {
id: headerColumn id: headerColumn
@@ -54,7 +52,7 @@ Item {
DankIcon { DankIcon {
name: "extension" name: "extension"
size: Theme.iconSizeLarge size: Theme.iconSize
color: Theme.primary color: Theme.primary
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@@ -65,15 +63,15 @@ Item {
StyledText { StyledText {
text: "Plugin Management" text: "Plugin Management"
font.pixelSize: Theme.fontSizeXLarge font.pixelSize: Theme.fontSizeLarge
color: "#FFFFFF" color: Theme.surfaceText
font.weight: Font.Medium font.weight: Font.Medium
} }
StyledText { StyledText {
text: "Manage and configure plugins for extending DMS functionality" text: "Manage and configure plugins for extending DMS functionality"
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
color: "#CCCCCC" color: Theme.surfaceVariantText
} }
} }
} }
@@ -82,42 +80,18 @@ Item {
width: parent.width width: parent.width
spacing: Theme.spacingM spacing: Theme.spacingM
Button { DankButton {
text: "Scan for Plugins" text: "Scan for Plugins"
background: Rectangle { iconName: "refresh"
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
}
onClicked: { onClicked: {
PluginService.scanPlugins() PluginService.scanPlugins()
ToastService.showInfo("Scanning for plugins...") ToastService.showInfo("Scanning for plugins...")
} }
} }
Button { DankButton {
text: "Create Plugin Directory" text: "Create Plugin Directory"
background: Rectangle { iconName: "create_new_folder"
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
}
onClicked: { onClicked: {
PluginService.createPluginDirectory() PluginService.createPluginDirectory()
ToastService.showInfo("Created plugin directory: " + PluginService.pluginDirectory) ToastService.showInfo("Created plugin directory: " + PluginService.pluginDirectory)
@@ -127,14 +101,12 @@ Item {
} }
} }
// Plugin Directory Info
StyledRect { StyledRect {
width: parent.width width: parent.width
height: directoryColumn.implicitHeight + Theme.spacingL * 2 height: directoryColumn.implicitHeight + Theme.spacingL * 2
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Theme.surfaceContainerHigh color: Theme.surfaceContainerHigh
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) border.width: 0
border.width: 1
Column { Column {
id: directoryColumn id: directoryColumn
@@ -146,35 +118,33 @@ Item {
StyledText { StyledText {
text: "Plugin Directory" text: "Plugin Directory"
font.pixelSize: Theme.fontSizeLarge font.pixelSize: Theme.fontSizeLarge
color: "#FFFFFF" color: Theme.surfaceText
font.weight: Font.Medium font.weight: Font.Medium
} }
StyledText { StyledText {
text: PluginService.pluginDirectory text: PluginService.pluginDirectory
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
color: "#CCCCCC" color: Theme.surfaceVariantText
font.family: "monospace" font.family: "monospace"
} }
StyledText { StyledText {
text: "Place plugin directories here. Each plugin should have a plugin.json manifest file." text: "Place plugin directories here. Each plugin should have a plugin.json manifest file."
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
color: "#CCCCCC" color: Theme.surfaceVariantText
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
width: parent.width width: parent.width
} }
} }
} }
// Available Plugins Section
StyledRect { StyledRect {
width: parent.width width: parent.width
height: Math.max(200, availableColumn.implicitHeight + Theme.spacingL * 2) height: Math.max(200, availableColumn.implicitHeight + Theme.spacingL * 2)
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Theme.surfaceContainerHigh color: Theme.surfaceContainerHigh
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) border.width: 0
border.width: 1
Column { Column {
id: availableColumn id: availableColumn
@@ -186,7 +156,7 @@ Item {
StyledText { StyledText {
text: "Available Plugins" text: "Available Plugins"
font.pixelSize: Theme.fontSizeLarge font.pixelSize: Theme.fontSizeLarge
color: "#FFFFFF" color: Theme.surfaceText
font.weight: Font.Medium font.weight: Font.Medium
} }
@@ -208,7 +178,6 @@ Item {
height: pluginItemColumn.implicitHeight + Theme.spacingM * 2 + settingsContainer.height height: pluginItemColumn.implicitHeight + Theme.spacingM * 2 + settingsContainer.height
radius: Theme.cornerRadius radius: Theme.cornerRadius
// Store plugin data in properties to avoid scope issues
property var pluginData: modelData property var pluginData: modelData
property string pluginId: pluginData ? pluginData.id : "" property string pluginId: pluginData ? pluginData.id : ""
property string pluginName: pluginData ? (pluginData.name || pluginData.id) : "" property string pluginName: pluginData ? (pluginData.name || pluginData.id) : ""
@@ -225,9 +194,8 @@ Item {
console.log("Plugin", pluginId, "isExpanded changed to:", isExpanded) console.log("Plugin", pluginId, "isExpanded changed to:", isExpanded)
} }
color: pluginMouseArea.containsMouse ? Theme.surfacePressed : (isExpanded ? Theme.surfaceContainerHigh : Theme.surfaceContainer) color: pluginMouseArea.containsMouse ? Theme.surfacePressed : (isExpanded ? Theme.surfaceContainerHighest : Theme.surfaceContainer)
border.color: isExpanded ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) border.width: 0
border.width: isExpanded ? 2 : 1
Behavior on height { Behavior on height {
NumberAnimation { NumberAnimation {
@@ -243,13 +211,6 @@ Item {
} }
} }
Behavior on border.color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
MouseArea { MouseArea {
id: pluginMouseArea id: pluginMouseArea
anchors.fill: parent anchors.fill: parent
@@ -286,7 +247,7 @@ Item {
DankIcon { DankIcon {
name: pluginDelegate.pluginIcon name: pluginDelegate.pluginIcon
size: Theme.iconSize size: Theme.iconSize
color: PluginService.isPluginLoaded(pluginDelegate.pluginId) ? Theme.primary : "#CCCCCC" color: PluginService.isPluginLoaded(pluginDelegate.pluginId) ? Theme.primary : Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@@ -302,7 +263,7 @@ Item {
StyledText { StyledText {
text: pluginDelegate.pluginName text: pluginDelegate.pluginName
font.pixelSize: Theme.fontSizeMedium font.pixelSize: Theme.fontSizeMedium
color: "#FFFFFF" color: Theme.surfaceText
font.weight: Font.Medium font.weight: Font.Medium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@@ -326,7 +287,7 @@ Item {
StyledText { StyledText {
text: "v" + pluginDelegate.pluginVersion + " by " + pluginDelegate.pluginAuthor text: "v" + pluginDelegate.pluginVersion + " by " + pluginDelegate.pluginAuthor
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
color: "#CCCCCC" color: Theme.surfaceVariantText
width: parent.width width: parent.width
elide: Text.ElideRight elide: Text.ElideRight
} }
@@ -367,7 +328,7 @@ Item {
width: parent.width width: parent.width
text: pluginDelegate.pluginDescription text: pluginDelegate.pluginDescription
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
color: "#CCCCCC" color: Theme.surfaceVariantText
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
visible: pluginDelegate.pluginDescription !== "" visible: pluginDelegate.pluginDescription !== ""
} }
@@ -422,11 +383,10 @@ Item {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(Theme.surfaceContainerHighest.r, Theme.surfaceContainerHighest.g, Theme.surfaceContainerHighest.b, 0.5) color: Theme.surfaceContainerHighest
radius: Theme.cornerRadius radius: Theme.cornerRadius
anchors.topMargin: Theme.spacingXS anchors.topMargin: Theme.spacingXS
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1) border.width: 0
border.width: 1
} }
DankFlickable { DankFlickable {
@@ -514,7 +474,7 @@ Item {
"Failed to load settings" : "Failed to load settings" :
"No configurable settings") "No configurable settings")
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
color: "#CCCCCC" color: Theme.surfaceVariantText
visible: pluginDelegate.isExpanded && (!settingsLoader.active || settingsLoader.status === Loader.Error) visible: pluginDelegate.isExpanded && (!settingsLoader.active || settingsLoader.status === Loader.Error)
} }
} }
@@ -525,7 +485,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: "No plugins found.\nPlace plugins in " + PluginService.pluginDirectory text: "No plugins found.\nPlace plugins in " + PluginService.pluginDirectory
font.pixelSize: Theme.fontSizeMedium font.pixelSize: Theme.fontSizeMedium
color: "#CCCCCC" color: Theme.surfaceVariantText
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
visible: pluginListView.model.length === 0 visible: pluginListView.model.length === 0
} }
@@ -535,7 +495,6 @@ Item {
} }
} }
// Connections to update plugin list when plugins are loaded/unloaded
Connections { Connections {
target: PluginService target: PluginService
function onPluginLoaded() { function onPluginLoaded() {
@@ -543,7 +502,6 @@ Item {
} }
function onPluginUnloaded() { function onPluginUnloaded() {
pluginListView.model = PluginService.getAvailablePlugins() pluginListView.model = PluginService.getAvailablePlugins()
// Close expanded plugin if it was unloaded
if (pluginsTab.expandedPluginId !== "" && !PluginService.isPluginLoaded(pluginsTab.expandedPluginId)) { if (pluginsTab.expandedPluginId !== "" && !PluginService.isPluginLoaded(pluginsTab.expandedPluginId)) {
pluginsTab.expandedPluginId = "" pluginsTab.expandedPluginId = ""
} }

75
Widgets/DankButton.qml Normal file
View File

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