Skip to content

Commit f9ff715

Browse files
luisbocanegraluisbocanegra
committed
feat: colors preview in widget
1 parent c354ba7 commit f9ff715

3 files changed

Lines changed: 240 additions & 3 deletions

File tree

‎src/plasmoid/package/contents/ui/FullRepresentation.qml‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Qt.labs.platform
2-
import Qt.labs.settings
1+
// import Qt.labs.platform
2+
import QtCore
33
import Qt5Compat.GraphicalEffects
44

55
import QtQuick
@@ -10,7 +10,6 @@ import QtQuick.Layouts
1010
import "components" as Components
1111
import org.kde.coreaddons 1.0 as KCoreAddons
1212
import org.kde.kirigami as Kirigami
13-
import org.kde.kquickcontrols
1413
import org.kde.plasma.components as PlasmaComponents3
1514
import org.kde.plasma.core as PlasmaCore
1615
import org.kde.plasma.plasma5support as P5Support
@@ -2194,6 +2193,25 @@ ColumnLayout {
21942193
opacity: dividerOpacity
21952194
}
21962195

2196+
PlasmaExtras.Heading {
2197+
level: 1
2198+
text: "Colors"
2199+
Layout.alignment: Qt.AlignHCenter
2200+
visible: fullRepresentation.showAdvanced
2201+
}
2202+
2203+
Components.ColorsPreview {
2204+
mdc: mainLayout.materialYouData
2205+
}
2206+
2207+
Rectangle {
2208+
Layout.topMargin: Kirigami.Units.mediumSpacing
2209+
Layout.preferredWidth: mainLayout.width
2210+
height: 1
2211+
color: dividerColor
2212+
opacity: dividerOpacity
2213+
}
2214+
21972215
ColumnLayout {
21982216
spacing: Kirigami.Units.mediumSpacing
21992217
opacity: 0.9

‎src/plasmoid/package/contents/ui/components/ColorRolePreview.qml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import QtQuick
2+
import QtQuick.Layouts
3+
import org.kde.kirigami as Kirigami
4+
5+
6+
Rectangle {
7+
id: root
8+
property string role
9+
property string onRole
10+
property string customName
11+
property var scheme
12+
Layout.fillWidth: true
13+
implicitHeight: col.implicitHeight + Kirigami.Units.mediumSpacing
14+
color: scheme[root.role]
15+
ColumnLayout {
16+
id: col
17+
spacing: 2
18+
anchors.fill: parent
19+
20+
Text {
21+
text: root.customName !== "" ? `${root.customName}` : `${root.role}`
22+
color: root.scheme[root.onRole]
23+
font.bold: true
24+
font.pixelSize: Kirigami.Theme.defaultFont.pixelSize
25+
elide: Text.ElideRight
26+
Layout.fillWidth: true
27+
}
28+
29+
Text {
30+
text: `${root.onRole}`
31+
color: root.scheme[root.onRole]
32+
font.pixelSize: Kirigami.Theme.smallFont.pixelSize
33+
visible: root.customName === ""
34+
elide: Text.ElideRight
35+
Layout.fillWidth: true
36+
}
37+
}
38+
}
39+
40+

‎src/plasmoid/package/contents/ui/components/ColorsPreview.qml‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
pragma ComponentBehavior: Bound
2+
import QtQuick
3+
import QtQuick.Layouts
4+
import org.kde.kirigami as Kirigami
5+
import org.kde.plasma.extras as PlasmaExtras
6+
7+
ColumnLayout {
8+
id: r
9+
property var mdc: ({})
10+
Layout.alignment: Qt.AlignHCenter
11+
spacing: Kirigami.Units.mediumSpacing
12+
readonly property bool light: mdc.light ?? false
13+
readonly property string theme: light ? "light" : "dark"
14+
property var scheme: r.mdc.schemes[r.theme]
15+
16+
PlasmaExtras.Heading {
17+
level: 4
18+
text: "Surfaces"
19+
color: Kirigami.Theme.textColor
20+
wrapMode: Text.NoWrap
21+
Layout.alignment: Qt.AlignHCenter
22+
}
23+
24+
GridLayout {
25+
columns: 2
26+
rows: 7
27+
columnSpacing: 0
28+
rowSpacing: 0
29+
flow: GridLayout.TopToBottom
30+
Layout.fillWidth: true
31+
Repeater {
32+
model: [
33+
{ role: "background", onRole: "onBackground" },
34+
{ role: "surfaceDim", onRole: "onSurface" },
35+
{ role: "surfaceContainerLowest", onRole: "onSurface" },
36+
{ role: "surfaceContainerLow", onRole: "onSurface" },
37+
{ role: "surfaceContainer", onRole: "onSurface" },
38+
{ role: "surfaceContainerHigh", onRole: "onSurface" },
39+
{ role: "surfaceContainerHighest", onRole: "onSurface" },
40+
{ role: "surface", onRole: "onSurface" },
41+
{ role: "surfaceBright", onRole: "onSurface" }
42+
]
43+
delegate: ColorRolePreview {
44+
required property var modelData
45+
role: modelData.role
46+
onRole: modelData.onRole
47+
scheme: r.scheme
48+
}
49+
}
50+
}
51+
52+
PlasmaExtras.Heading {
53+
level: 4
54+
text: "Content"
55+
color: Kirigami.Theme.textColor
56+
wrapMode: Text.NoWrap
57+
Layout.alignment: Qt.AlignHCenter
58+
}
59+
60+
GridLayout {
61+
columns: 2
62+
rows: 10
63+
columnSpacing: 0
64+
rowSpacing: 0
65+
flow: GridLayout.TopToBottom
66+
Repeater {
67+
model: [
68+
{ role: "primary", onRole: "onPrimary" },
69+
{ role: "primaryContainer", onRole: "onPrimaryContainer" },
70+
{ role: "primaryFixed", onRole: "onPrimaryFixed" },
71+
{ role: "primaryFixed", onRole: "onPrimaryFixedVariant" },
72+
{ role: "primaryFixedDim", onRole: "onPrimaryFixed" },
73+
{ role: "tertiary", onRole: "onTertiary" },
74+
{ role: "tertiaryContainer", onRole: "onTertiaryContainer" },
75+
{ role: "tertiaryFixed", onRole: "onTertiaryFixed" },
76+
{ role: "tertiaryFixed", onRole: "onTertiaryFixedVariant" },
77+
{ role: "tertiaryFixedDim", onRole: "onTertiaryFixed" },
78+
{ role: "secondary", onRole: "onSecondary" },
79+
{ role: "secondaryContainer", onRole: "onSecondaryContainer" },
80+
{ role: "secondaryFixed", onRole: "onSecondaryFixed" },
81+
{ role: "secondaryFixed", onRole: "onSecondaryFixedVariant" },
82+
{ role: "secondaryFixedDim", onRole: "onSecondaryFixed" },
83+
]
84+
delegate: ColorRolePreview {
85+
required property var modelData
86+
role: modelData.role
87+
onRole: modelData.onRole
88+
scheme: r.scheme
89+
}
90+
}
91+
}
92+
93+
PlasmaExtras.Heading {
94+
level: 4
95+
text: "Inverse"
96+
color: Kirigami.Theme.textColor
97+
wrapMode: Text.NoWrap
98+
Layout.alignment: Qt.AlignHCenter
99+
}
100+
101+
GridLayout {
102+
columns: 2
103+
columnSpacing: 0
104+
rowSpacing: 0
105+
Repeater {
106+
model: [
107+
{ role: "inverseSurface", onRole: "inverseOnSurface" },
108+
{ role: "inversePrimary", onRole: "onPrimaryContainer" }
109+
]
110+
delegate: ColorRolePreview {
111+
required property var modelData
112+
role: modelData.role
113+
onRole: modelData.onRole
114+
scheme: r.scheme
115+
}
116+
}
117+
}
118+
119+
PlasmaExtras.Heading {
120+
level: 4
121+
text: "Utility"
122+
color: Kirigami.Theme.textColor
123+
wrapMode: Text.NoWrap
124+
Layout.alignment: Qt.AlignHCenter
125+
}
126+
127+
GridLayout {
128+
columns: 2
129+
columnSpacing: 0
130+
rowSpacing: 0
131+
Repeater {
132+
model: [
133+
{ role: "error", onRole: "onError" },
134+
{ role: "errorContainer", onRole: "onErrorContainer" },
135+
{ role: "outline", onRole: "onSurface" },
136+
{ role: "outlineVariant", onRole: "onSurface" },
137+
{ role: "shadow", onRole: "onSurface" },
138+
{ role: "scrim", onRole: "onSurface" }
139+
]
140+
delegate: ColorRolePreview {
141+
required property var modelData
142+
role: modelData.role
143+
onRole: modelData.onRole
144+
scheme: r.scheme
145+
}
146+
}
147+
}
148+
149+
PlasmaExtras.Heading {
150+
level: 4
151+
text: "Custom color-container (color/onColor)"
152+
color: Kirigami.Theme.textColor
153+
wrapMode: Text.NoWrap
154+
Layout.alignment: Qt.AlignHCenter
155+
}
156+
157+
GridLayout {
158+
columns: 2
159+
columnSpacing: 0
160+
rowSpacing: 0
161+
Repeater {
162+
model: {
163+
let pairs = []
164+
for (const key of Object.keys(r.mdc.custom)) {
165+
pairs.push({name: key, role: "color", onRole: "onColor"})
166+
pairs.push({name: key, role: "container", onRole: "onContainer"})
167+
}
168+
return pairs
169+
}
170+
delegate: ColorRolePreview {
171+
required property var modelData
172+
role: modelData.role
173+
onRole: modelData.onRole
174+
scheme: r.mdc.custom[modelData.name][r.theme]
175+
customName: `${modelData.name}`
176+
}
177+
}
178+
}
179+
}

0 commit comments

Comments
 (0)