mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-04-03 20:32:07 -04:00
plugins: support control center plugins
This commit is contained in:
bbedward
138
PLUGINS/ControlCenterDetailExample/DetailExampleWidget.qml
Normal file
138
PLUGINS/ControlCenterDetailExample/DetailExampleWidget.qml
Normal file
@@ -0,0 +1,138 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import qs.Modules.Plugins
|
||||
|
||||
PluginComponent {
|
||||
id: root
|
||||
|
||||
property bool isEnabled: pluginData.isEnabled || false
|
||||
property var options: pluginData.options || ["Option A", "Option B", "Option C"]
|
||||
|
||||
ccWidgetIcon: isEnabled ? "settings" : "settings"
|
||||
ccWidgetPrimaryText: "Detail Example"
|
||||
ccWidgetSecondaryText: {
|
||||
if (isEnabled) {
|
||||
const selected = pluginData.selectedOption || "Option A"
|
||||
return selected
|
||||
}
|
||||
return "Disabled"
|
||||
}
|
||||
ccWidgetIsActive: isEnabled
|
||||
|
||||
onCcWidgetToggled: {
|
||||
isEnabled = !isEnabled
|
||||
if (pluginService) {
|
||||
pluginService.savePluginData("controlCenterDetailExample", "isEnabled", isEnabled)
|
||||
}
|
||||
}
|
||||
|
||||
ccDetailContent: Component {
|
||||
Rectangle {
|
||||
id: detailRoot
|
||||
implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
|
||||
radius: Theme.cornerRadius
|
||||
color: Theme.surfaceContainerHigh
|
||||
border.width: 0
|
||||
visible: true
|
||||
|
||||
property var options: ["Option A", "Option B", "Option C"]
|
||||
property string currentSelection: SettingsData.getPluginSetting("controlCenterDetailExample", "selectedOption", "Option A")
|
||||
|
||||
Column {
|
||||
id: detailColumn
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingM
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: "Detail Example Settings"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Select an option below:"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: detailRoot.options
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 40
|
||||
radius: Theme.cornerRadius
|
||||
color: optionMouseArea.containsMouse ? Theme.surfaceContainerHighest : "transparent"
|
||||
border.color: detailRoot.currentSelection === modelData ? Theme.primary : "transparent"
|
||||
border.width: detailRoot.currentSelection === modelData ? 2 : 0
|
||||
|
||||
MouseArea {
|
||||
id: optionMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
z: 100
|
||||
onClicked: {
|
||||
SettingsData.setPluginSetting("controlCenterDetailExample", "selectedOption", modelData)
|
||||
detailRoot.currentSelection = modelData
|
||||
PluginService.pluginDataChanged("controlCenterDetailExample")
|
||||
ToastService.showInfo("Option Selected", modelData)
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
spacing: Theme.spacingS
|
||||
enabled: false
|
||||
|
||||
DankIcon {
|
||||
name: detailRoot.currentSelection === modelData ? "radio_button_checked" : "radio_button_unchecked"
|
||||
color: detailRoot.currentSelection === modelData ? Theme.primary : Theme.surfaceVariantText
|
||||
size: Theme.iconSize
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: modelData
|
||||
color: detailRoot.currentSelection === modelData ? Theme.primary : Theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
horizontalBarPill: Component {
|
||||
Row {
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
DankIcon {
|
||||
name: root.isEnabled ? "settings" : "settings_off"
|
||||
color: root.isEnabled ? Theme.primary : Theme.surfaceVariantText
|
||||
font.pixelSize: Theme.iconSize - 4
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: {
|
||||
const selected = root.pluginData.selectedOption || "Option A"
|
||||
return selected.substring(0, 1)
|
||||
}
|
||||
color: root.isEnabled ? Theme.primary : Theme.surfaceVariantText
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
PLUGINS/ControlCenterDetailExample/plugin.json
Normal file
11
PLUGINS/ControlCenterDetailExample/plugin.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"id": "controlCenterDetailExample",
|
||||
"name": "CC Detail Example",
|
||||
"description": "Example plugin with Control Center detail dropdown",
|
||||
"version": "1.0.0",
|
||||
"author": "DankMaterialShell",
|
||||
"icon": "settings",
|
||||
"type": "widget",
|
||||
"component": "./DetailExampleWidget.qml",
|
||||
"permissions": ["settings_read", "settings_write"]
|
||||
}
|
||||
68
PLUGINS/ControlCenterExample/ControlCenterExampleWidget.qml
Normal file
68
PLUGINS/ControlCenterExample/ControlCenterExampleWidget.qml
Normal file
@@ -0,0 +1,68 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import qs.Modules.Plugins
|
||||
|
||||
PluginComponent {
|
||||
id: root
|
||||
|
||||
property bool isEnabled: pluginData.isEnabled || false
|
||||
property int clickCount: pluginData.clickCount || 0
|
||||
|
||||
ccWidgetIcon: isEnabled ? "toggle_on" : "toggle_off"
|
||||
ccWidgetPrimaryText: "Example Toggle"
|
||||
ccWidgetSecondaryText: isEnabled ? `Active • ${clickCount} clicks` : "Inactive"
|
||||
ccWidgetIsActive: isEnabled
|
||||
|
||||
onCcWidgetToggled: {
|
||||
isEnabled = !isEnabled
|
||||
clickCount += 1
|
||||
if (pluginService) {
|
||||
pluginService.savePluginData("controlCenterExample", "isEnabled", isEnabled)
|
||||
pluginService.savePluginData("controlCenterExample", "clickCount", clickCount)
|
||||
}
|
||||
ToastService.showInfo("Example Toggle", isEnabled ? "Activated!" : "Deactivated!")
|
||||
}
|
||||
|
||||
horizontalBarPill: Component {
|
||||
Row {
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
DankIcon {
|
||||
name: root.isEnabled ? "toggle_on" : "toggle_off"
|
||||
color: root.isEnabled ? Theme.primary : Theme.surfaceVariantText
|
||||
font.pixelSize: Theme.iconSize - 4
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: `${root.clickCount}`
|
||||
color: root.isEnabled ? Theme.primary : Theme.surfaceVariantText
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
verticalBarPill: Component {
|
||||
Column {
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
DankIcon {
|
||||
name: root.isEnabled ? "toggle_on" : "toggle_off"
|
||||
color: root.isEnabled ? Theme.primary : Theme.surfaceVariantText
|
||||
font.pixelSize: Theme.iconSize - 4
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: `${root.clickCount}`
|
||||
color: root.isEnabled ? Theme.primary : Theme.surfaceVariantText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
PLUGINS/ControlCenterExample/plugin.json
Normal file
11
PLUGINS/ControlCenterExample/plugin.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"id": "controlCenterExample",
|
||||
"name": "CC Toggle Example",
|
||||
"description": "Example plugin with Control Center toggle widget",
|
||||
"version": "1.0.0",
|
||||
"author": "DankMaterialShell",
|
||||
"icon": "toggle_on",
|
||||
"type": "widget",
|
||||
"component": "./ControlCenterExampleWidget.qml",
|
||||
"permissions": ["settings_read", "settings_write"]
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
# Plugin System
|
||||
|
||||
The DMS shell includes an experimental plugin system that allows extending functionality through self-contained, dynamically-loaded QML components.
|
||||
Create widgets for DankBar and Control Center using dynamically-loaded QML components.
|
||||
|
||||
## Overview
|
||||
|
||||
The plugin system enables developers to create custom widgets that can be displayed in the DankBar alongside built-in widgets. Plugins are discovered, loaded, and managed through the **PluginService**, providing a clean separation between core shell functionality and user extensions.
|
||||
Plugins let you add custom widgets to DankBar and Control Center. They're discovered from `~/.config/DankMaterialShell/plugins/` and managed via PluginService.
|
||||
|
||||
## Architecture
|
||||
|
||||
@@ -161,25 +161,65 @@ PluginComponent {
|
||||
- `popoutHeight`: Popout window height
|
||||
- `pillClickAction`: Custom click handler function (overrides popout)
|
||||
|
||||
**Custom Click Actions:**
|
||||
### Control Center Integration
|
||||
|
||||
Override the default popout behavior with `pillClickAction`:
|
||||
Add your plugin to Control Center by defining CC properties:
|
||||
|
||||
```qml
|
||||
PluginComponent {
|
||||
horizontalBarPill: Component {
|
||||
StyledText { text: "Click Me" }
|
||||
ccWidgetIcon: "toggle_on"
|
||||
ccWidgetPrimaryText: "My Feature"
|
||||
ccWidgetSecondaryText: isEnabled ? "Active" : "Inactive"
|
||||
ccWidgetIsActive: isEnabled
|
||||
|
||||
onCcWidgetToggled: {
|
||||
isEnabled = !isEnabled
|
||||
if (pluginService) {
|
||||
pluginService.savePluginData("myPlugin", "isEnabled", isEnabled)
|
||||
}
|
||||
}
|
||||
|
||||
// Simple 0-parameter function
|
||||
pillClickAction: () => {
|
||||
Process.exec("bash", ["-c", "notify-send 'Clicked!'"])
|
||||
ccDetailContent: Component {
|
||||
Rectangle {
|
||||
implicitHeight: 200
|
||||
color: Theme.surfaceContainerHigh
|
||||
radius: Theme.cornerRadius
|
||||
// Your detail UI here
|
||||
}
|
||||
}
|
||||
|
||||
// Or with position parameters for popouts: (x, y, width, section, screen)
|
||||
pillClickAction: (x, y, width, section, screen) => {
|
||||
popoutService?.toggleControlCenter(x, y, width, section, screen)
|
||||
}
|
||||
horizontalBarPill: Component { /* ... */ }
|
||||
}
|
||||
```
|
||||
|
||||
**CC Properties:**
|
||||
- `ccWidgetIcon`: Material icon name
|
||||
- `ccWidgetPrimaryText`: Main label
|
||||
- `ccWidgetSecondaryText`: Subtitle/status
|
||||
- `ccWidgetIsActive`: Active state styling
|
||||
- `ccDetailContent`: Optional dropdown panel (use for CompoundPill)
|
||||
|
||||
**Signals:**
|
||||
- `ccWidgetToggled()`: Fired when icon clicked
|
||||
- `ccWidgetExpanded()`: Fired when expand area clicked (CompoundPill only)
|
||||
|
||||
**Widget Sizing:**
|
||||
- 25% width → SmallToggleButton (icon only)
|
||||
- 50% width → ToggleButton (no detail) or CompoundPill (with detail)
|
||||
- Users can resize in edit mode
|
||||
|
||||
**Custom Click Actions:**
|
||||
|
||||
Override default popout with `pillClickAction`:
|
||||
|
||||
```qml
|
||||
pillClickAction: () => {
|
||||
Process.exec("bash", ["-c", "notify-send 'Clicked!'"])
|
||||
}
|
||||
|
||||
// Or with position params: (x, y, width, section, screen)
|
||||
pillClickAction: (x, y, width, section, screen) => {
|
||||
popoutService?.toggleControlCenter(x, y, width, section, screen)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user