Skip to content

Commit fedefd9

Browse files
luisbocanegraluisbocanegra
committed
feat: option to show a grid behind the panel while configuring
1 parent f266ab2 commit fedefd9

File tree

5 files changed

+240
-2
lines changed

5 files changed

+240
-2
lines changed

‎package/contents/config/main.xml

+5
Original file line numberDiff line numberDiff line change
@@ -92,5 +92,10 @@
9292
type="Int">
9393
<default>250</default>
9494
</entry>
95+
<entry
96+
name="editModeGridSettings"
97+
type="String">
98+
<default>{"enabled":false,"spacing":4,"majorLineEvery":0,"background":{"color":"#00ffff","alpha":0.25},"minorLine":{"color":"#000000","alpha":1},"majorLine":{"color":"#ff0000","alpha":1},"mayorLineEvery":2}</default>
99+
</entry>
95100
</group>
96101
</kcfg>

‎package/contents/ui/RectangularGrid.qml

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
pragma ComponentBehavior: Bound
2+
import QtQuick 2.15
3+
4+
5+
Item {
6+
id: root
7+
anchors.fill: parent
8+
property color backgroundColor: "#dd00ffff"
9+
property real backgroundOpacity: 0.8
10+
property int spacing: 4
11+
property color minorLineColor: "black"
12+
property real minorLineOpacity: .3
13+
property color majorLineColor: "black"
14+
property real majorLineOpacity: .6
15+
property int majorLineEvery: 2
16+
property int verticalCount: root.width / spacing
17+
property int horizontalCount: root.height / spacing
18+
19+
Rectangle {
20+
anchors.fill: parent
21+
color: root.backgroundColor
22+
opacity: root.backgroundOpacity
23+
}
24+
25+
// Vertical lines
26+
Repeater {
27+
model: root.verticalCount
28+
Rectangle {
29+
width: 1
30+
height: root.height
31+
color: isMajor ? root.majorLineColor : root.minorLineColor
32+
opacity: isMajor ? root.majorLineOpacity : root.minorLineOpacity
33+
required property int index
34+
property bool isMajor: index !== 0 && (index % root.majorLineEvery === 0)
35+
x: index * (root.width / (root.verticalCount))
36+
}
37+
}
38+
// Horizontal lines
39+
Repeater {
40+
model: root.horizontalCount
41+
Rectangle {
42+
width: root.width
43+
height: 1
44+
color: isMajor ? root.majorLineColor : root.minorLineColor
45+
opacity: isMajor ? root.majorLineOpacity : root.minorLineOpacity
46+
required property int index
47+
property bool isMajor: index !== 0 && (index % root.majorLineEvery === 0)
48+
y: index * (root.height / (root.horizontalCount))
49+
}
50+
}
51+
52+
Component.onCompleted: console.log("grid created in", root.parent)
53+
}

‎package/contents/ui/code/globals.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -271,5 +271,16 @@ const ignoredConfigs = [
271271
"pythonExecutable",
272272
"forceForegroundColor",
273273
"animatePropertyChanges",
274-
"animationDuration"
274+
"animationDuration",
275+
"editModeGridSettings"
275276
]
277+
278+
const editModeGridSettings = {
279+
enabled: true,
280+
spacing: 4,
281+
majorLineEvery: 0,
282+
background: { color: "#00ffff", alpha: 0.25 },
283+
minorLine: { color: "#000000", alpha: 1 },
284+
majorLine: { color: "#ff0000", alpha: 0 },
285+
mayorLineEvery: 2,
286+
};

‎package/contents/ui/configGeneral.qml

+138-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import QtQuick.Layouts
55
import org.kde.kcmutils as KCM
66
import org.kde.kirigami as Kirigami
77
import org.kde.plasma.plasmoid
8-
import org.kde.plasma.plasma5support as P5Support
98

109
import "components" as Components
1110
import "code/utils.js" as Utils
@@ -21,6 +20,8 @@ KCM.SimpleKCM {
2120
property alias cfg_dBusPollingRate: dBusPollingRate.value
2221
property alias cfg_animatePropertyChanges: animatePropertyChanges.checked
2322
property alias cfg_animationDuration: animationDuration.value
23+
property string cfg_editModeGridSettings
24+
property var editModeGridSettings: JSON.parse(cfg_editModeGridSettings)
2425

2526
property string presetsDir: StandardPaths.writableLocation(
2627
StandardPaths.HomeLocation).toString().substring(7) + "/.config/panel-colorizer/presets"
@@ -36,16 +37,22 @@ KCM.SimpleKCM {
3637
}
3738
}
3839

40+
function updateConfig() {
41+
cfg_editModeGridSettings = JSON.stringify(editModeGridSettings, null, null)
42+
}
43+
3944
ColumnLayout {
4045
Kirigami.FormLayout {
4146
id: form
47+
4248
CheckBox {
4349
Kirigami.FormData.label: i18n("Hide widget:")
4450
id: hideWidget
4551
checked: cfg_hideWidget
4652
onCheckedChanged: cfg_hideWidget = checked
4753
text: i18n("visible in Panel Edit Mode")
4854
}
55+
4956
CheckBox {
5057
Kirigami.FormData.label: i18n("Debug mode:")
5158
id: enableDebug
@@ -54,6 +61,136 @@ KCM.SimpleKCM {
5461
text: i18n("Show debugging information")
5562
}
5663

64+
Kirigami.Separator {
65+
Kirigami.FormData.isSection: true
66+
Kirigami.FormData.label: i18n("Grid")
67+
Layout.fillWidth: true
68+
}
69+
70+
CheckBox {
71+
Kirigami.FormData.label: i18n("Enabled")
72+
id: editGridEnabled
73+
checked: root.editModeGridSettings.enabled
74+
onCheckedChanged: {
75+
root.editModeGridSettings.enabled = checked
76+
root.updateConfig()
77+
}
78+
text: i18n("Visible while configuring")
79+
}
80+
81+
RowLayout {
82+
enabled: editGridEnabled.checked
83+
Kirigami.FormData.label: i18n("Background")
84+
Components.ColorButton {
85+
id: bgColorBtn
86+
showAlphaChannel: false
87+
dialogTitle: bgColorBtn.Kirigami.FormData.label
88+
color: root.editModeGridSettings.background.color
89+
onAccepted: (color) => {
90+
root.editModeGridSettings.background.color = color.toString()
91+
root.updateConfig()
92+
}
93+
}
94+
Label {
95+
text: i18n("Alpha:")
96+
}
97+
Components.SpinBoxDecimal {
98+
Layout.preferredWidth: root.Kirigami.Units.gridUnit * 5
99+
from: 0
100+
to: 1
101+
value: root.editModeGridSettings.background.alpha ?? 0
102+
onValueChanged: {
103+
root.editModeGridSettings.background.alpha = value
104+
root.updateConfig()
105+
}
106+
}
107+
}
108+
109+
RowLayout {
110+
enabled: editGridEnabled.checked
111+
Kirigami.FormData.label: i18n("Minor line:")
112+
Components.ColorButton {
113+
id: minorLineColorBtn
114+
showAlphaChannel: false
115+
dialogTitle: minorLineColorBtn.Kirigami.FormData.label
116+
color: root.editModeGridSettings.minorLine.color
117+
onAccepted: (color) => {
118+
root.editModeGridSettings.minorLine.color = color.toString()
119+
root.updateConfig()
120+
}
121+
}
122+
Label {
123+
text: i18n("Alpha:")
124+
}
125+
Components.SpinBoxDecimal {
126+
Layout.preferredWidth: root.Kirigami.Units.gridUnit * 5
127+
from: 0
128+
to: 1
129+
value: root.editModeGridSettings.minorLine.alpha ?? 0
130+
onValueChanged: {
131+
root.editModeGridSettings.minorLine.alpha = value
132+
root.updateConfig()
133+
}
134+
}
135+
Label {
136+
text: i18n("spacing")
137+
}
138+
SpinBox {
139+
from: 1
140+
to: 99999
141+
stepSize: 1
142+
value: root.editModeGridSettings.spacing
143+
onValueModified: {
144+
root.editModeGridSettings.spacing = value
145+
root.updateConfig()
146+
}
147+
}
148+
}
149+
150+
RowLayout {
151+
enabled: editGridEnabled.checked
152+
Kirigami.FormData.label: i18n("Major line:")
153+
Components.ColorButton {
154+
id: majorLineColorBtn
155+
showAlphaChannel: false
156+
dialogTitle: majorLineColorBtn.Kirigami.FormData.label
157+
color: root.editModeGridSettings.majorLine.color
158+
onAccepted: (color) => {
159+
root.editModeGridSettings.majorLine.color = color.toString()
160+
root.updateConfig()
161+
}
162+
enabled: majorLineEverySpinbox.value !== 0
163+
}
164+
Label {
165+
text: i18n("Alpha:")
166+
}
167+
Components.SpinBoxDecimal {
168+
Layout.preferredWidth: root.Kirigami.Units.gridUnit * 5
169+
from: 0
170+
to: 1
171+
value: root.editModeGridSettings.majorLine.alpha ?? 0
172+
onValueChanged: {
173+
root.editModeGridSettings.majorLine.alpha = value
174+
root.updateConfig()
175+
}
176+
enabled: majorLineEverySpinbox.value !== 0
177+
}
178+
Label {
179+
text: i18n("every")
180+
}
181+
SpinBox {
182+
id: majorLineEverySpinbox
183+
from: 0
184+
to: 99999
185+
stepSize: 1
186+
value: root.editModeGridSettings.majorLineEvery
187+
onValueModified: {
188+
root.editModeGridSettings.majorLineEvery = value
189+
root.updateConfig()
190+
}
191+
}
192+
}
193+
57194
Kirigami.Separator {
58195
Kirigami.FormData.isSection: true
59196
Kirigami.FormData.label: i18n("Property change animations")

‎package/contents/ui/main.qml

+32
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,8 @@ PlasmoidItem {
149149
property var panelHeight: panelElement?.height ?? 0
150150
property bool debug: plasmoid.configuration.enableDebug
151151
property var plasmaVersion: new VersionUtil.Version("999.999.999") // to assume latest
152+
property var editModeGrid: JSON.parse(plasmoid.configuration.editModeGridSettings)
153+
property bool showEditingGrid: (editModeGrid?.enabled ?? false) && Plasmoid.userConfiguring
152154
signal recolorCountChanged()
153155
signal refreshNeeded()
154156
signal updateUnified()
@@ -1337,6 +1339,29 @@ PlasmoidItem {
13371339
Utils.panelOpacity(panelElement, isEnabled, nativePanelBackgroundOpacity)
13381340
}
13391341

1342+
property Component gridComponent: RectangularGrid {
1343+
id: gridComponent
1344+
backgroundColor: editModeGrid.background.color
1345+
backgroundOpacity: editModeGrid.background.alpha
1346+
1347+
minorLineColor: editModeGrid.minorLine.color
1348+
minorLineOpacity: editModeGrid.minorLine.alpha
1349+
1350+
majorLineColor: editModeGrid.majorLine.color
1351+
majorLineOpacity: editModeGrid.majorLine.alpha
1352+
1353+
spacing: editModeGrid.spacing
1354+
majorLineEvery: editModeGrid.majorLineEvery
1355+
Component.onCompleted: {
1356+
main.onShowEditingGridChanged.connect(function release() {
1357+
if (!main.showEditingGrid) {
1358+
main.onShowEditingGridChanged.disconnect(release)
1359+
gridComponent.destroy()
1360+
}
1361+
})
1362+
}
1363+
}
1364+
13401365
onNativePanelBackgroundOpacityChanged: {
13411366
if(!panelElement) return
13421367
Utils.panelOpacity(panelElement, isEnabled, nativePanelBackgroundOpacity)
@@ -1538,6 +1563,13 @@ PlasmoidItem {
15381563
}
15391564
}
15401565

1566+
onShowEditingGridChanged: {
1567+
if (showEditingGrid) {
1568+
gridComponent.createObject(main.panelView, {"z": -1})
1569+
// gridComponent.createObject(main.panelBg, {"z": -1})
1570+
}
1571+
}
1572+
15411573
function updateCurrentWidgets() {
15421574
panelWidgets = []
15431575
panelWidgets = Utils.findWidgets(panelLayout, panelWidgets)

0 commit comments

Comments
 (0)