1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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
}
}
}
}
|