Newer
Older
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.2
import QGroundControl.Palette 1.0
import QGroundControl.Controls 1.0
import QGroundControl.ScreenTools 1.0
Gus Grubba
committed
anchors.fill: parent
anchors.margins: ScreenTools.defaultFontPixelWidth
color: "white"
property var palette: QGCPalette { colorGroupEnabled: true }
property var enabledPalette: QGCPalette { colorGroupEnabled: true }
property var disabledPalette: QGCPalette { colorGroupEnabled: false }
Gus Grubba
committed
QGCFlickable {
anchors.fill: parent
contentWidth: _rootCol.width
contentHeight: _rootCol.height
clip: true
Gus Grubba
committed
Column {
id: _rootCol
Gus Grubba
committed
Rectangle {
Gus Grubba
committed
width: parent.width
height: themeChoice.height * 2
color: palette.window
QGCLabel {
Gus Grubba
committed
text: qsTr("Window Color")
anchors.left: parent.left
anchors.leftMargin: 20
}
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
function exportPaletteColors(pal) {
var objToExport = {}
for(var clrName in pal) {
if(pal[clrName].r !== undefined) {
objToExport[clrName] = pal[clrName].toString();
}
}
return objToExport;
}
function fillPalette(pal, colorsObj) {
for(var clrName in colorsObj) {
pal[clrName] = colorsObj[clrName];
}
}
function exportTheme() {
var themeObj = {"light": {}, "dark":{}}
var oldTheme = palette.globalTheme;
palette.globalTheme = QGCPalette.Light
palette.colorGroupEnabled = true
themeObj.light["enabled"] = exportPaletteColors(palette);
palette.colorGroupEnabled = false
themeObj.light["disabled"] = exportPaletteColors(palette);
palette.globalTheme = QGCPalette.Dark
palette.colorGroupEnabled = true
themeObj.dark["enabled"] = exportPaletteColors(palette);
palette.colorGroupEnabled = false
themeObj.dark["disabled"] = exportPaletteColors(palette);
palette.globalTheme = oldTheme;
palette.colorGroupEnabled = true;
var jsonString = JSON.stringify(themeObj);
themeImportExportEdit.text = jsonString
paletteImportExportPopup.open()
}
function importTheme(jsonStr) {
var jsonObj = JSON.parse(jsonStr)
var themeObj = {"light": {}, "dark":{}}
var oldTheme = palette.globalTheme;
palette.globalTheme = QGCPalette.Light
palette.colorGroupEnabled = true
fillPalette(palette, jsonObj.light.enabled)
palette.colorGroupEnabled = false
fillPalette(palette, jsonObj.light.disabled);
palette.globalTheme = QGCPalette.Dark
palette.colorGroupEnabled = true
fillPalette(palette, jsonObj.dark.enabled);
palette.colorGroupEnabled = false
fillPalette(palette, jsonObj.dark.disabled);
palette.globalTheme = oldTheme;
palette.colorGroupEnabled = true;
paletteImportExportPopup.close()
}
Popup {
id: paletteImportExportPopup
focus: true
parent: Overlay.overlay
x: (_root.width - width)/2
y: (_root.height - height)/2
width: _root.width * 0.666
height: _root.height * 0.666
modal: true
Column {
anchors.fill: parent
spacing: 5
Rectangle {
width: parent.width
height: parent.height - importButton.height
border.width: 1
Flickable {
id: flick
anchors.fill: parent
contentWidth: themeImportExportEdit.paintedWidth
contentHeight: themeImportExportEdit.paintedHeight
clip: true
function ensureVisible(r)
{
if (contentX >= r.x)
contentX = r.x;
else if (contentX+width <= r.x+r.width)
contentX = r.x+r.width-width;
if (contentY >= r.y)
contentY = r.y;
else if (contentY+height <= r.y+r.height)
contentY = r.y+r.height-height;
}
TextEdit {
id: themeImportExportEdit
width: flick.width
focus: true
wrapMode: TextEdit.Wrap
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
}
}
}
Button {
id: importButton
text: "Import"
onPressed: {
_header.importTheme(themeImportExportEdit.text);
}
}
}
}
Button {
id: exportButton
text: "Import/Export"
width: 200
height: 30
anchors.left: windowColorLabel.right
anchors.leftMargin: 20
onPressed: _header.exportTheme()
}
Gus Grubba
committed
Row {
id: themeChoice
anchors.centerIn: parent
anchors.margins: 20
spacing: 20
ButtonGroup { id: themeGroup; exclusive: true }
Gus Grubba
committed
QGCRadioButton {
text: qsTr("Light")
checked: palette.globalTheme === QGCPalette.Light
Gus Grubba
committed
onClicked: { palette.globalTheme = QGCPalette.Light }
}
QGCRadioButton {
text: qsTr("Dark")
checked: palette.globalTheme === QGCPalette.Dark
Gus Grubba
committed
onClicked: { palette.globalTheme = QGCPalette.Dark }
Gus Grubba
committed
Row {
spacing: 30
// Edit theme GroupBox
GroupBox {
title: "Preview and edit theme"
Column {
id: editRoot
Gus Grubba
committed
spacing: 5
width: editRoot.cellSize.width * 2
height: editRoot.cellSize.height
text: ""
}
Text {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
horizontalAlignment: Text.AlignLeft
text: qsTr("Enabled")
}
Text {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Value")
}
Text {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Disabled")
}
Text {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Value")
// Populate the model with all color names in the global palette
Component.onCompleted: {
for(var colorNameStr in palette) {
if(palette[colorNameStr].r !== undefined) {
paletteColorList.append({ colorName: colorNameStr });
}
}
Gus Grubba
committed
}
Gus Grubba
committed
}
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
// Reproduce all the models
Repeater {
model: paletteColorList
delegate: Row {
spacing: 5
Text {
width: editRoot.cellSize.width * 2
height: editRoot.cellSize.height
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
color: "black"
text: colorName
}
ClickableColor {
id: enabledColorPicker
color: enabledPalette[colorName]
onColorSelected: enabledPalette[colorName] = color
}
TextField {
id: enabledTextField
width: editRoot.cellSize.width; height: editRoot.cellSize.height
inputMask: "\\#>HHHHHHhh;"
horizontalAlignment: Text.AlignLeft
text: enabledPalette[colorName]
onEditingFinished: enabledPalette[colorName] = text
}
ClickableColor {
id: disabledColorPicker
color: disabledPalette[colorName]
onColorSelected: disabledPalette[colorName] = color
}
TextField {
width: editRoot.cellSize.width; height: editRoot.cellSize.height
inputMask: enabledTextField.inputMask
horizontalAlignment: Text.AlignLeft
text: disabledPalette[colorName]
onEditingFinished: disabledPalette[colorName] = text
}
}
Gus Grubba
committed
}
} // Column
} // GroupBox { title: "Preview and edit theme"
Gus Grubba
committed
// QGC controls preview
Gus Grubba
committed
Column {
id: ctlPrevColumn
property real _colWidth: ScreenTools.defaultFontPointSize * 18
property real _height: _colWidth*0.15
Gus Grubba
committed
property color _bkColor: qgcPal.window
spacing: 10
width: previewGrid.width
Grid {
id: previewGrid
columns: 3
spacing: 10
Component {
id: ctlRowHeader
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: "white"
Text {
anchors.fill: parent
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
color: "black"
text: parent.parent.text
}
}
}
// Header row
Text {
Gus Grubba
committed
height: ctlPrevColumn._height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("QGC name")
}
Text {
Gus Grubba
committed
height: ctlPrevColumn._height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Enabled")
}
Text {
Gus Grubba
committed
height: ctlPrevColumn._height
color: "black"
horizontalAlignment: Text.AlignHCenter
text: qsTr("Disabled")
}
// QGCLabel
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCLabel"
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCLabel {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Label")
}
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCLabel {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Label")
enabled: false
}
}
// QGCButton
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCButton"
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
enabled: false
}
// QGCButton - primary
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCButton(primary)"
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
primary: true
text: qsTr("Button")
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
primary: true
enabled: false
}
// QGCHoverButton
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCHoverButton"
}
QGCHoverButton {
Gus Grubba
committed
height: ctlPrevColumn._height * 2
text: qsTr("Hover Button")
radius: ScreenTools.defaultFontPointSize
imageSource: "/qmlimages/Gears.svg"
}
QGCHoverButton {
Gus Grubba
committed
height: ctlPrevColumn._height * 2
text: qsTr("Hover Button")
radius: ScreenTools.defaultFontPointSize
imageSource: "/qmlimages/Gears.svg"
enabled: false
}
// QGCButton - menu
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCButton(menu)"
}
Menu {
id: buttonMenu
MenuItem {
text: qsTr("Item 1")
}
MenuItem {
text: qsTr("Item 2")
}
MenuItem {
text: qsTr("Item 3")
}
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
Gus Grubba
committed
}
QGCButton {
Gus Grubba
committed
height: ctlPrevColumn._height
text: qsTr("Button")
enabled: false
Gus Grubba
committed
}
// QGCRadioButton
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCRadioButton"
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCRadioButton {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Radio")
}
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCRadioButton {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Radio")
enabled: false
}
}
// QGCCheckBox
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCCheckBox"
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCCheckBox {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Check Box")
}
}
Rectangle {
Gus Grubba
committed
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCCheckBox {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Check Box")
enabled: false
}
}
// QGCTextField
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCTextField"
}
QGCTextField {
Gus Grubba
committed
height: ctlPrevColumn._height
text: "QGCTextField"
}
QGCTextField {
Gus Grubba
committed
height: ctlPrevColumn._height
text: "QGCTextField"
enabled: false
}
// QGCComboBox
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCComboBox"
}
QGCComboBox {
Gus Grubba
committed
height: ctlPrevColumn._height
model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
}
QGCComboBox {
Gus Grubba
committed
height: ctlPrevColumn._height
model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
enabled: false
}
// SubMenuButton
Loader {
sourceComponent: ctlRowHeader
property string text: "SubMenuButton"
}
SubMenuButton {
width: ctlPrevColumn._colWidth
height: ctlPrevColumn._colWidth/3
Gus Grubba
committed
text: qsTr("SUB MENU")
}
SubMenuButton {
width: ctlPrevColumn._colWidth
height: ctlPrevColumn._colWidth/3
Gus Grubba
committed
text: qsTr("SUB MENU")
enabled: false
}
}
Rectangle {
width: previewGrid.width
height: 60
radius: 3
color: palette.alertBackground
border.color: palette.alertBorder
anchors.horizontalCenter: parent.horizontalCenter
Label {
text: "Alert Message"
Gus Grubba
committed
anchors.centerIn: parent
}
}
} // Column
} // GroupBox { title: "Controls preview"
Gus Grubba
committed
Item{
height: 10;
width: 1;
Gus Grubba
committed
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
Component {
id: arbBox
Rectangle {
width: arbGrid.width * 1.5
height: arbGrid.height * 1.5
color: backgroundColor
border.color: qgcPal.text
border.width: 1
anchors.horizontalCenter: parent.horizontalCenter
GridLayout {
id: arbGrid
columns: 4
rowSpacing: 10
anchors.centerIn: parent
QGCColoredImage {
color: qgcPal.colorGreen
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorGreen"; color: qgcPal.colorGreen; }
QGCColoredImage {
color: qgcPal.colorOrange
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorOrange"; color: qgcPal.colorOrange; }
QGCColoredImage {
color: qgcPal.colorRed
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorRed"; color: qgcPal.colorRed; }
QGCColoredImage {
color: qgcPal.colorGrey
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorGrey"; color: qgcPal.colorGrey; }
QGCColoredImage {
color: qgcPal.colorBlue
width: ScreenTools.defaultFontPixelWidth * 2
height: width
sourceSize.height: width
mipmap: true
fillMode: Image.PreserveAspectFit
source: "/qmlimages/Gears.svg"
}
Label { text: "colorBlue"; color: qgcPal.colorBlue; }
}
}
}
Gus Grubba
committed
Row {
spacing: 10
anchors.horizontalCenter: parent.horizontalCenter
Loader {
property color backgroundColor: qgcPal.window
sourceComponent: arbBox
}
Loader {
property color backgroundColor: qgcPal.windowShade
sourceComponent: arbBox
}
Loader {
property color backgroundColor: qgcPal.windowShadeDark
sourceComponent: arbBox
}
Gus Grubba
committed