Skip to content

Commit eb03909

Browse files
sithlord48sithlord48
committed
Qml Palette Viewer, Begin to update the palette for qml items
1 parent 0e004a5 commit eb03909

File tree

4 files changed

+333
-9
lines changed

4 files changed

+333
-9
lines changed

‎demos/ff7tkQmlGallery/PaletteView.qml‎

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
// SPDX-FileCopyrightText: 2024 Chris Rizzitello <sithlord48@gmail.com>
2+
// SPDX-License-Identifier: LGPL-3.0-or-later
3+
4+
import QtQuick
5+
import QtQuick.Controls
6+
import ff7tkQuick.Controls
7+
8+
Item {
9+
id: root
10+
property color labelColor: "red"
11+
Rectangle {
12+
id: rect1
13+
anchors.top: parent.top
14+
anchors.left: parent.left
15+
anchors.right: parent.right
16+
height: 32
17+
color: palette.window
18+
Label {
19+
anchors.centerIn: parent
20+
text: "Your system Palette"
21+
}
22+
Label {
23+
id: comboLabel
24+
anchors.left: parent.left
25+
text: "Label Color"
26+
}
27+
ComboBox {
28+
id: colorCombo
29+
anchors.left: comboLabel.right
30+
anchors.leftMargin: 6
31+
model: ListModel {
32+
ListElement{text: "Red"}
33+
ListElement{text: "Blue"}
34+
ListElement{text: "Yellow"}
35+
ListElement{text: "Green"}
36+
ListElement{text: "White"}
37+
ListElement{text: "Black"}
38+
}
39+
onCurrentIndexChanged: {
40+
root.labelColor = Qt.binding(function() {
41+
return String(currentText).toLowerCase()
42+
})
43+
}
44+
}
45+
}
46+
Rectangle {
47+
anchors.bottom: parent.bottom
48+
anchors.left: parent.left
49+
anchors.right: parent.right
50+
anchors.top: rect1.bottom
51+
Column {
52+
id: palCols
53+
property int rectW: 100
54+
anchors.fill: parent
55+
anchors.margins: 6
56+
spacing: 6
57+
Row {
58+
height: palCols.rectW
59+
spacing: 6
60+
Rectangle {
61+
width: palCols.rectW; height: width
62+
color: palette.accent
63+
border.color: root.labelColor
64+
border.width: 1
65+
Text {
66+
anchors.centerIn: parent
67+
color: root.labelColor
68+
text: "accent"
69+
}
70+
}
71+
Rectangle {
72+
width: palCols.rectW; height: width
73+
color: palette.active
74+
border.color: root.labelColor
75+
border.width: 1
76+
Text {
77+
anchors.centerIn: parent
78+
color: root.labelColor
79+
text: "active"
80+
}
81+
}
82+
Rectangle {
83+
width: palCols.rectW; height: width
84+
color: palette.alternateBase
85+
border.color: root.labelColor
86+
border.width: 1
87+
Text {
88+
anchors.centerIn: parent
89+
color: root.labelColor
90+
text: "alt. Base"
91+
}
92+
}
93+
Rectangle {
94+
width: palCols.rectW; height: width
95+
color: palette.base
96+
border.color: root.labelColor
97+
border.width: 1
98+
Text {
99+
anchors.centerIn: parent
100+
color: root.labelColor
101+
text: "base"
102+
}
103+
}
104+
Rectangle {
105+
width: palCols.rectW; height: width
106+
color: palette.button
107+
border.color: root.labelColor
108+
border.width: 1
109+
Text {
110+
anchors.centerIn: parent
111+
color: root.labelColor
112+
text: "button"
113+
}
114+
}
115+
Rectangle {
116+
width: palCols.rectW; height: width
117+
color: palette.buttonText
118+
border.color: root.labelColor
119+
border.width: 1
120+
Text {
121+
anchors.centerIn: parent
122+
color: root.labelColor
123+
text: "buttonText"
124+
}
125+
}
126+
Rectangle {
127+
width: palCols.rectW; height: width
128+
color: palette.dark
129+
border.color: root.labelColor
130+
border.width: 1
131+
Text {
132+
anchors.centerIn: parent
133+
color: root.labelColor
134+
text: "dark"
135+
}
136+
}
137+
}
138+
Row {
139+
spacing: 6
140+
Rectangle {
141+
width: palCols.rectW; height: width
142+
color: palette.disabled
143+
border.color: root.labelColor
144+
border.width: 1
145+
Text {
146+
anchors.centerIn: parent
147+
color: root.labelColor
148+
text: "disabled"
149+
}
150+
}
151+
Rectangle {
152+
width: palCols.rectW; height: width
153+
color: palette.highlight
154+
border.color: root.labelColor
155+
border.width: 1
156+
Text {
157+
anchors.centerIn: parent
158+
color: root.labelColor
159+
text: "highlight"
160+
}
161+
}
162+
Rectangle {
163+
width: palCols.rectW; height: width
164+
color: palette.highlightedText
165+
border.color: root.labelColor
166+
border.width: 1
167+
Text {
168+
anchors.centerIn: parent
169+
color: root.labelColor
170+
text: "highlightText"
171+
}
172+
}
173+
Rectangle {
174+
width: palCols.rectW; height: width
175+
color: palette.light
176+
border.color: root.labelColor
177+
border.width: 1
178+
Text {
179+
anchors.centerIn: parent
180+
color: root.labelColor
181+
text: "light"
182+
}
183+
}
184+
Rectangle {
185+
width: palCols.rectW; height: width
186+
color: palette.link
187+
border.color: root.labelColor
188+
border.width: 1
189+
Text {
190+
anchors.centerIn: parent
191+
color: root.labelColor
192+
text: "link"
193+
}
194+
}
195+
Rectangle {
196+
width: palCols.rectW; height: width
197+
color: palette.linkVisited
198+
border.color: root.labelColor
199+
border.width: 1
200+
Text {
201+
anchors.centerIn: parent
202+
color: root.labelColor
203+
text: "linkVisited"
204+
}
205+
}
206+
Rectangle {
207+
width: palCols.rectW; height: width
208+
color: palette.mid
209+
border.color: root.labelColor
210+
border.width: 1
211+
Text {
212+
anchors.centerIn: parent
213+
color: root.labelColor
214+
text: "mid"
215+
}
216+
}
217+
}
218+
Row {
219+
spacing: 6
220+
Rectangle {
221+
width: palCols.rectW; height: width
222+
color: palette.midlight
223+
border.color: root.labelColor
224+
border.width: 1
225+
Text {
226+
anchors.centerIn: parent
227+
color: root.labelColor
228+
text: "midLight"
229+
}
230+
}
231+
Rectangle {
232+
width: palCols.rectW; height: width
233+
color: palette.placeholderText
234+
border.color: root.labelColor
235+
border.width: 1
236+
Text {
237+
anchors.centerIn: parent
238+
color: root.labelColor
239+
text: "placeholder text"
240+
}
241+
}
242+
Rectangle {
243+
width: palCols.rectW; height: width
244+
color: palette.shadow
245+
border.color: root.labelColor
246+
border.width: 1
247+
Text {
248+
anchors.centerIn: parent
249+
color: root.labelColor
250+
text: "shadow"
251+
}
252+
}
253+
Rectangle {
254+
width: palCols.rectW; height: width
255+
color: palette.text
256+
border.color: root.labelColor
257+
border.width: 1
258+
Text {
259+
anchors.centerIn: parent
260+
color: root.labelColor
261+
text: "text"
262+
}
263+
}
264+
Rectangle {
265+
width: palCols.rectW; height: width
266+
color: palette.toolTipBase
267+
border.color: root.labelColor
268+
border.width: 1
269+
Text {
270+
anchors.centerIn: parent
271+
color: root.labelColor
272+
text: "tooltip base"
273+
}
274+
}
275+
Rectangle {
276+
width: palCols.rectW; height: width
277+
color: palette.toolTipText
278+
border.color: root.labelColor
279+
border.width: 1
280+
Text {
281+
anchors.centerIn: parent
282+
color: root.labelColor
283+
text: "tooltipText"
284+
}
285+
}
286+
Rectangle {
287+
width: palCols.rectW; height: width
288+
color: palette.window
289+
border.color: root.labelColor
290+
border.width: 1
291+
Text {
292+
anchors.centerIn: parent
293+
color: root.labelColor
294+
text: "window"
295+
}
296+
}
297+
}
298+
Row {
299+
spacing: 6
300+
Rectangle {
301+
width: palCols.rectW; height: width
302+
color: palette.windowText
303+
border.color: root.labelColor
304+
border.width: 1
305+
Text {
306+
anchors.centerIn: parent
307+
color: root.labelColor
308+
text: "windowText"
309+
}
310+
}
311+
}
312+
}
313+
}
314+
}

‎demos/ff7tkQmlGallery/main.qml‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,8 @@ ApplicationWindow {
1414
title: "ff7tkQmlGallery - " + FF7tkInfo.ff7tkVersion
1515
header: Rectangle {
1616
id: headerItem
17-
color: palette.alternateBase
18-
border.color: palette.dark
19-
border.width: 2
20-
height: comboSelector.height + 12
17+
color: palette.window
18+
height: comboSelector.height + 18
2119
Label {
2220
id: previewLabel
2321
text: "Current Preview:"
@@ -26,16 +24,17 @@ ApplicationWindow {
2624
ComboBox {
2725
id: comboSelector
2826
anchors {
29-
margins: 6
30-
top: parent.top
31-
left: previewLabel.right; right: parent.right
27+
verticalCenter: parent.verticalCenter
28+
left: previewLabel.right; leftMargin: 6
29+
right: parent.right; rightMargin: 6
3230
}
3331
model: ListModel {
3432
ListElement{text: ""}
3533
ListElement{text: "Text Demo"}
3634
ListElement{text: "ItemPreview"}
3735
ListElement{text: "Materia Button"}
3836
ListElement{text: "Materia Editor"}
37+
ListElement{text: "Palette Preview"}
3938
}
4039
onCurrentIndexChanged: {
4140
itemLoader.sourceComponent = Qt.binding(function() {
@@ -44,12 +43,14 @@ ApplicationWindow {
4443
case 2: return itemPreviewComponent
4544
case 3: return materiaButtonComponent
4645
case 4: return materiaEditorComponent
46+
case 5: return paletteComponent;
4747
default: return testComponent;
4848
}
4949
})
5050
}
5151
}
5252
}
53+
5354
Loader {
5455
id: itemLoader
5556
anchors.fill: parent
@@ -61,12 +62,20 @@ ApplicationWindow {
6162
Rectangle {
6263
color: palette.base
6364
Label {
64-
anchors.centerIn:parent
65+
anchors.centerIn: parent
6566
text: "Please Select an Item to Preview"
6667
}
6768
}
6869
}
6970

71+
Component {
72+
id: paletteComponent
73+
PaletteView {
74+
anchors.fill: parent
75+
anchors.topMargin: 6
76+
}
77+
}
78+
7079
Component {
7180
id: materiaButtonComponent
7281
Item {

‎demos/ff7tkQmlGallery/qml.qrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
<qresource prefix="/">
77
<file>main.qml</file>
88
<file>TextDemo.qml</file>
9+
<file>PaletteView.qml</file>
910
</qresource>
1011
</RCC>

0 commit comments

Comments
 (0)