Skip to content

Commit

Permalink
Qml Palette Viewer, Begin to update the palette for qml items
Browse files Browse the repository at this point in the history
  • Loading branch information
@sithlord48
sithlord48 committed Jan 28, 2024
1 parent 0e004a5 commit eb03909
Show file tree
Hide file tree
Showing 4 changed files with 333 additions and 9 deletions.
314 changes: 314 additions & 0 deletions demos/ff7tkQmlGallery/PaletteView.qml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,314 @@
// SPDX-FileCopyrightText: 2024 Chris Rizzitello <[email protected]>
// SPDX-License-Identifier: LGPL-3.0-or-later

import QtQuick
import QtQuick.Controls
import ff7tkQuick.Controls

Item {
id: root
property color labelColor: "red"
Rectangle {
id: rect1
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 32
color: palette.window
Label {
anchors.centerIn: parent
text: "Your system Palette"
}
Label {
id: comboLabel
anchors.left: parent.left
text: "Label Color"
}
ComboBox {
id: colorCombo
anchors.left: comboLabel.right
anchors.leftMargin: 6
model: ListModel {
ListElement{text: "Red"}
ListElement{text: "Blue"}
ListElement{text: "Yellow"}
ListElement{text: "Green"}
ListElement{text: "White"}
ListElement{text: "Black"}
}
onCurrentIndexChanged: {
root.labelColor = Qt.binding(function() {
return String(currentText).toLowerCase()
})
}
}
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.top: rect1.bottom
Column {
id: palCols
property int rectW: 100
anchors.fill: parent
anchors.margins: 6
spacing: 6
Row {
height: palCols.rectW
spacing: 6
Rectangle {
width: palCols.rectW; height: width
color: palette.accent
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "accent"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.active
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "active"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.alternateBase
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "alt. Base"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.base
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "base"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.button
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "button"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.buttonText
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "buttonText"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.dark
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "dark"
}
}
}
Row {
spacing: 6
Rectangle {
width: palCols.rectW; height: width
color: palette.disabled
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "disabled"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.highlight
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "highlight"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.highlightedText
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "highlightText"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.light
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "light"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.link
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "link"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.linkVisited
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "linkVisited"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.mid
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "mid"
}
}
}
Row {
spacing: 6
Rectangle {
width: palCols.rectW; height: width
color: palette.midlight
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "midLight"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.placeholderText
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "placeholder text"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.shadow
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "shadow"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.text
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "text"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.toolTipBase
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "tooltip base"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.toolTipText
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "tooltipText"
}
}
Rectangle {
width: palCols.rectW; height: width
color: palette.window
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "window"
}
}
}
Row {
spacing: 6
Rectangle {
width: palCols.rectW; height: width
color: palette.windowText
border.color: root.labelColor
border.width: 1
Text {
anchors.centerIn: parent
color: root.labelColor
text: "windowText"
}
}
}
}
}
}
25 changes: 17 additions & 8 deletions demos/ff7tkQmlGallery/main.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,8 @@ ApplicationWindow {
title: "ff7tkQmlGallery - " + FF7tkInfo.ff7tkVersion
header: Rectangle {
id: headerItem
color: palette.alternateBase
border.color: palette.dark
border.width: 2
height: comboSelector.height + 12
color: palette.window
height: comboSelector.height + 18
Label {
id: previewLabel
text: "Current Preview:"
Expand All @@ -26,16 +24,17 @@ ApplicationWindow {
ComboBox {
id: comboSelector
anchors {
margins: 6
top: parent.top
left: previewLabel.right; right: parent.right
verticalCenter: parent.verticalCenter
left: previewLabel.right; leftMargin: 6
right: parent.right; rightMargin: 6
}
model: ListModel {
ListElement{text: ""}
ListElement{text: "Text Demo"}
ListElement{text: "ItemPreview"}
ListElement{text: "Materia Button"}
ListElement{text: "Materia Editor"}
ListElement{text: "Palette Preview"}
}
onCurrentIndexChanged: {
itemLoader.sourceComponent = Qt.binding(function() {
Expand All @@ -44,12 +43,14 @@ ApplicationWindow {
case 2: return itemPreviewComponent
case 3: return materiaButtonComponent
case 4: return materiaEditorComponent
case 5: return paletteComponent;
default: return testComponent;
}
})
}
}
}

Loader {
id: itemLoader
anchors.fill: parent
Expand All @@ -61,12 +62,20 @@ ApplicationWindow {
Rectangle {
color: palette.base
Label {
anchors.centerIn:parent
anchors.centerIn: parent
text: "Please Select an Item to Preview"
}
}
}

Component {
id: paletteComponent
PaletteView {
anchors.fill: parent
anchors.topMargin: 6
}
}

Component {
id: materiaButtonComponent
Item {
Expand Down
1 change: 1 addition & 0 deletions demos/ff7tkQmlGallery/qml.qrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@
<qresource prefix="/">
<file>main.qml</file>
<file>TextDemo.qml</file>
<file>PaletteView.qml</file>
</qresource>
</RCC>
Loading

0 comments on commit eb03909

Please sign in to comment.