diff --git a/qgroundcontrol.qrc b/qgroundcontrol.qrc
index 7604c5a9fc686a0bc81e43f8c054a291555f9733..a07d060fdfc762fc0dd3d12bc568a6b87be73bb5 100644
--- a/qgroundcontrol.qrc
+++ b/qgroundcontrol.qrc
@@ -187,6 +187,7 @@
src/FlightMap/MapItems/VehicleMapItem.qml
src/QmlControls/QGroundControl.ScreenTools.qmldir
src/QmlControls/ScreenTools.qml
+ src/QmlControls/QGCHoverButton.qml
src/QmlControls/QmlTest.qml
src/AutoPilotPlugins/Common/RadioComponent.qml
src/ui/preferences/SerialSettings.qml
diff --git a/src/QmlControls/QGCHoverButton.qml b/src/QmlControls/QGCHoverButton.qml
new file mode 100644
index 0000000000000000000000000000000000000000..83b9e4c48315c9d0bd9e3b91820900e84cc83eb3
--- /dev/null
+++ b/src/QmlControls/QGCHoverButton.qml
@@ -0,0 +1,158 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.2
+import QtGraphicalEffects 1.0
+
+// TODO: Use QT styles. Use default button style + custom style entries
+import QGroundControl.ScreenTools 1.0
+import QGroundControl.Palette 1.0
+
+Button {
+ id: button
+ width: columnItem.contentWidth + contentLayoutItem.margins * 2
+ height: width
+ flat: true
+
+ property color color: qgcPal.button
+ property color disabledColor: qgcPalDisabled.button
+ property color pressedColor: qgcPal.buttonHighlight
+ // TODO: remove after we add it to the palette
+ property color hoverColor: qgcPal.hoverColor
+ property color contentColor: qgcPal.buttonText
+ property color contentPressedColor: qgcPal.buttonHighlightText
+ property color borderColor: qgcPal.windowShadeDark
+
+ property alias radius: buttonBkRect.radius
+ property alias fontPointSize: innerText.font.pointSize
+ property alias imageSource: innerImage.source
+ property alias contentWidth: innerText.contentWidth
+
+ property real imageScale: 0.8
+ property real borderWidth: 0
+ property real contentMargins: innerText.height * 0.1
+
+ property color _currentColor: checked ? pressedColor : color
+ property color _currentContentColor: contentColor
+
+ QGCPalette { id: qgcPal }
+ QGCPalette { id: qgcPalDisabled; colorGroupEnabled: false }
+
+ // Initial state
+ state: "Default"
+ // Update state on status changed
+ onEnabledChanged: state = "Default"
+
+ property real _contentVDist: innerImage.height/innerText.contentHeight
+
+ // Content Icon + Text
+ contentItem: Item {
+ id: contentLayoutItem
+ anchors.fill: parent
+ anchors.margins: contentMargins
+
+ Column {
+ id: columnItem
+ anchors.fill: parent
+
+ Item {
+ width: parent.width
+ height: (contentLayoutItem.height - innerText.height)
+ Image {
+ id: innerImage
+
+ anchors.centerIn: parent
+
+ height: parent.height * imageScale
+ width: parent.width * imageScale
+
+ visible: false
+ smooth: true
+ antialiasing: true
+ mipmap: true
+ fillMode: Image.PreserveAspectFit
+ sourceSize.height: height
+ sourceSize.width: width
+ horizontalAlignment: Image.AlignHCenter
+ verticalAlignment: Image.AlignVCenter
+ }
+
+ ColorOverlay {
+ id: imageOverlay
+ anchors.fill: innerImage
+ source: innerImage
+
+ color: _currentContentColor
+ }
+ }
+
+ Text {
+ id: innerText
+
+ text: button.text
+ color: _currentContentColor
+ width: parent.width
+
+ font.pointSize: ScreenTools.defaultFontPointSize
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ }
+ } // Column - content
+ } // Item - content
+
+ background: Rectangle {
+ id: buttonBkRect
+ anchors.fill: parent
+ color: _currentColor
+
+ border.width: borderWidth
+ border.color: borderColor
+ }
+
+ // Change the aspect of the content in differen button states
+ states: [
+ State {
+ name: "Hovering"
+ PropertyChanges {
+ target: button;
+ _currentColor: pressed || checked ? pressedColor : hoverColor
+ _currentContentColor: pressed || checked ? contentPressedColor : contentColor
+ }
+ },
+ State {
+ name: "Default"
+ PropertyChanges {
+ target: button;
+ _currentColor: enabled ? ((checked || pressed) ? pressedColor : color) : disabledColor
+ _currentContentColor: contentColor
+ }
+ }
+ ]
+
+ transitions: [
+ Transition {
+ from: ""; to: "Hovering"
+ ColorAnimation { duration: 200 }
+ },
+ Transition {
+ from: "*"; to: "Pressed"
+ ColorAnimation { duration: 10 }
+ }
+ ]
+
+ // Process hover events
+ MouseArea {
+ enabled: !ScreenTools.isMobile
+ hoverEnabled: true
+ propagateComposedEvents: true
+ preventStealing: true
+ anchors.fill: button
+ onEntered: { button.state = 'Hovering'; }
+ onExited: { button.state = 'Default'; }
+ // Propagate events down
+ onClicked: { mouse.accepted = false; }
+ onDoubleClicked: { mouse.accepted = false; }
+ onPositionChanged: { mouse.accepted = false; }
+ onPressAndHold: { mouse.accepted = false; }
+ onPressed: { mouse.accepted = false }
+ onReleased: { mouse.accepted = false }
+ }
+}
diff --git a/src/QmlControls/QGroundControl.Controls.qmldir b/src/QmlControls/QGroundControl.Controls.qmldir
index 86296c5713721575f379cabb57833175a44d66f3..44bb36ff4a0bb4c337c0a0f14edaff5f1d3bc5b4 100644
--- a/src/QmlControls/QGroundControl.Controls.qmldir
+++ b/src/QmlControls/QGroundControl.Controls.qmldir
@@ -77,3 +77,4 @@ ToolStrip 1.0 ToolStrip.qml
VehicleRotationCal 1.0 VehicleRotationCal.qml
VehicleSummaryRow 1.0 VehicleSummaryRow.qml
ViewWidget 1.0 ViewWidget.qml
+QGCHoverButton 1.0 QGCHoverButton.qml
diff --git a/src/QmlControls/QmlTest.qml b/src/QmlControls/QmlTest.qml
index b6918617d6f54d752c80f6cc201672cbd81a0697..02e856d1e99d22259966bb7781dd53fa72c3549e 100644
--- a/src/QmlControls/QmlTest.qml
+++ b/src/QmlControls/QmlTest.qml
@@ -8,12 +8,11 @@ import QGroundControl.Controls 1.0
import QGroundControl.ScreenTools 1.0
Rectangle {
-
-
- QGCPalette { id: qgcPal; colorGroupEnabled: enabled }
+ anchors.fill: parent
+ anchors.margins: ScreenTools.defaultFontPixelWidth
+ color: "white"
property var palette: QGCPalette { colorGroupEnabled: true }
- color: "white"
Component {
id: arbBox
@@ -83,811 +82,58 @@ Rectangle {
}
}
- Column {
-
- Rectangle {
- width: parent.width
- height: themeChoice.height * 2
- color: palette.window
- QGCLabel {
- text: qsTr("Window Color")
- anchors.left: parent.left
- anchors.leftMargin: 20
- }
- Row {
- id: themeChoice
- anchors.centerIn: parent
- anchors.margins: 20
- spacing: 20
- ExclusiveGroup { id: themeGroup }
- QGCRadioButton {
- text: qsTr("Light")
- checked: palette.globalTheme === QGCPalette.Light
- exclusiveGroup: themeGroup
- onClicked: { palette.globalTheme = QGCPalette.Light }
- }
- QGCRadioButton {
- text: qsTr("Dark")
- checked: palette.globalTheme === QGCPalette.Dark
- exclusiveGroup: themeGroup
- onClicked: { palette.globalTheme = QGCPalette.Dark }
- }
- }
- }
-
- Row {
- spacing: 30
+ QGCFlickable {
+ anchors.fill: parent
+ contentWidth: _rootCol.width
+ contentHeight: _rootCol.height
+ clip: true
- Grid {
- columns: 5
- spacing: 5
+ Column {
+ id: _rootCol
- Component {
- id: rowHeader
-
- Text {
- width: 180
- height: 20
- horizontalAlignment: Text.AlignRight
- verticalAlignment: Text.AlignVCenter
- color: "black"
- text: parent.text
+ Rectangle {
+ width: parent.width
+ height: themeChoice.height * 2
+ color: palette.window
+ QGCLabel {
+ text: qsTr("Window Color")
+ anchors.left: parent.left
+ anchors.leftMargin: 20
+ }
+ Row {
+ id: themeChoice
+ anchors.centerIn: parent
+ anchors.margins: 20
+ spacing: 20
+ ExclusiveGroup { id: themeGroup }
+ QGCRadioButton {
+ text: qsTr("Light")
+ checked: palette.globalTheme === QGCPalette.Light
+ exclusiveGroup: themeGroup
+ onClicked: { palette.globalTheme = QGCPalette.Light }
+ }
+ QGCRadioButton {
+ text: qsTr("Dark")
+ checked: palette.globalTheme === QGCPalette.Dark
+ exclusiveGroup: themeGroup
+ onClicked: { palette.globalTheme = QGCPalette.Dark }
}
}
-
- // Header row
- Loader {
- sourceComponent: rowHeader
- property string text: ""
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- text: qsTr("Disabled")
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- text: qsTr("Enabled")
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- text: qsTr("Value")
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- text: qsTr("Value")
- }
-
- // window
- Loader {
- sourceComponent: rowHeader
- property string text: "window"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.window
- onColorSelected: palette.window = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.window
- onColorSelected: palette.window = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.window
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.window
- }
-
- // windowShade
- Loader {
- sourceComponent: rowHeader
- property string text: "windowShade"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.windowShade
- onColorSelected: palette.windowShade = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.windowShade
- onColorSelected: palette.windowShade = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.windowShade
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.windowShade
- }
-
- // windowShadeDark
- Loader {
- sourceComponent: rowHeader
- property string text: "windowShadeDark"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.windowShadeDark
- onColorSelected: palette.windowShadeDark = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.windowShadeDark
- onColorSelected: palette.windowShadeDark = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.windowShadeDark
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.windowShadeDark
- }
-
- // text
- Loader {
- sourceComponent: rowHeader
- property string text: "text"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.text
- onColorSelected: palette.text = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.text
- onColorSelected: palette.text = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.text
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.text
- }
-
- // button
- Loader {
- sourceComponent: rowHeader
- property string text: "button"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.button
- onColorSelected: palette.button = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.button
- onColorSelected: palette.button = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.button
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.button
- }
-
- // buttonText
- Loader {
- sourceComponent: rowHeader
- property string text: "buttonText"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.buttonText
- onColorSelected: palette.buttonText = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.buttonText
- onColorSelected: palette.buttonText = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.buttonText
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.buttonText
- }
-
- // buttonHighlight
- Loader {
- sourceComponent: rowHeader
- property string text: "buttonHighlight"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.buttonHighlight
- onColorSelected: palette.buttonHighlight = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.buttonHighlight
- onColorSelected: palette.buttonHighlight = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.buttonHighlight
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.buttonHighlight
- }
-
- // buttonHighlightText
- Loader {
- sourceComponent: rowHeader
- property string text: "buttonHighlightText"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.buttonHighlightText
- onColorSelected: palette.buttonHighlightText = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.buttonHighlightText
- onColorSelected: palette.buttonHighlightText = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.buttonHighlightText
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.buttonHighlightText
- }
-
- // primaryButton
- Loader {
- sourceComponent: rowHeader
- property string text: "primaryButton"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.primaryButton
- onColorSelected: palette.primaryButton = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.primaryButton
- onColorSelected: palette.primaryButton = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.primaryButton
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.primaryButton
- }
-
- // primaryButtonText
- Loader {
- sourceComponent: rowHeader
- property string text: "primaryButtonText"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.primaryButtonText
- onColorSelected: palette.primaryButtonText = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.primaryButtonText
- onColorSelected: palette.primaryButtonText = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.primaryButtonText
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.primaryButtonText
- }
-
- // textField
- Loader {
- sourceComponent: rowHeader
- property string text: "textField"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.textField
- onColorSelected: palette.textField = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.textField
- onColorSelected: palette.textField = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.textField
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.textField
- }
-
- // textFieldText
- Loader {
- sourceComponent: rowHeader
- property string text: "textFieldText"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.textFieldText
- onColorSelected: palette.textFieldText = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.textFieldText
- onColorSelected: palette.textFieldText = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.textFieldText
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.textFieldText
- }
-
- // warningText
- Loader {
- sourceComponent: rowHeader
- property string text: "warningText"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.warningText
- onColorSelected: palette.warningText = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.warningText
- onColorSelected: palette.warningText = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.warningText
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.warningText
- }
-
- // colorGreen
- Loader {
- sourceComponent: rowHeader
- property string text: "colorGreen"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.colorGreen
- onColorSelected: palette.colorGreen = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.colorGreen
- onColorSelected: palette.colorGreen = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.colorGreen
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.colorGreen
- }
-
- // colorOrange
- Loader {
- sourceComponent: rowHeader
- property string text: "colorOrange"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.colorOrange
- onColorSelected: palette.colorOrange = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.colorOrange
- onColorSelected: palette.colorOrange = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.colorOrange
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.colorOrange
- }
-
- // colorRed
- Loader {
- sourceComponent: rowHeader
- property string text: "colorRed"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.colorRed
- onColorSelected: palette.colorRed = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.colorRed
- onColorSelected: palette.colorRed = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.colorRed
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.colorRed
- }
-
- // colorGrey
- Loader {
- sourceComponent: rowHeader
- property string text: "colorGrey"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.colorGrey
- onColorSelected: palette.colorGrey = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.colorGrey
- onColorSelected: palette.colorGrey = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.colorGrey
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.colorGrey
- }
-
- // colorBlue
- Loader {
- sourceComponent: rowHeader
- property string text: "colorBlue"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.colorBlue
- onColorSelected: palette.colorBlue = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.colorBlue
- onColorSelected: palette.colorBlue = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.colorBlue
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.colorBlue
- }
-
- // alertBackground
- Loader {
- sourceComponent: rowHeader
- property string text: "alertBackground"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.alertBackground
- onColorSelected: palette.alertBackground = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.alertBackground
- onColorSelected: palette.alertBackground = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.alertBackground
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.alertBackground
- }
-
- // alertBorder
- Loader {
- sourceComponent: rowHeader
- property string text: "alertBorder"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.alertBorder
- onColorSelected: palette.alertBorder = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.alertBorder
- onColorSelected: palette.alertBorder = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.alertBorder
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.alertBorder
- }
-
- // alertText
- Loader {
- sourceComponent: rowHeader
- property string text: "alertText"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.alertText
- onColorSelected: palette.alertText = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.alertText
- onColorSelected: palette.alertText = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.alertText
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.alertText
- }
-
- // missionItemEditor
- Loader {
- sourceComponent: rowHeader
- property var text: "missionItemEditor"
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: false }
- color: palette.missionItemEditor
- onColorSelected: palette.missionItemEditor = color
- }
- ClickableColor {
- property var palette: QGCPalette { colorGroupEnabled: true }
- color: palette.missionItemEditor
- onColorSelected: palette.missionItemEditor = color
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: false }
- text: palette.missionItemEditor
- }
- Text {
- width: 80
- height: 20
- color: "black"
- horizontalAlignment: Text.AlignHCenter
- property var palette: QGCPalette { colorGroupEnabled: true }
- text: palette.missionItemEditor
- }
-
}
- Column {
- spacing: 10
- width: leftGrid.width
+ Row {
+ spacing: 30
+
+ // Theme preview
Grid {
- id: leftGrid
- columns: 3
- spacing: 10
+ columns: 5
+ spacing: 5
Component {
- id: ctlRowHeader
+ id: rowHeader
Text {
- width: 120
+ width: 180
height: 20
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
@@ -896,232 +142,1058 @@ Rectangle {
}
}
-
// Header row
Loader {
- sourceComponent: ctlRowHeader
+ sourceComponent: rowHeader
property string text: ""
}
Text {
- width: 100
+ width: 80
height: 20
color: "black"
horizontalAlignment: Text.AlignHCenter
- text: qsTr("Enabled")
+ text: qsTr("Disabled")
}
Text {
- width: 100
+ width: 80
height: 20
color: "black"
horizontalAlignment: Text.AlignHCenter
- text: qsTr("Disabled")
- }
-
- // QGCLabel
- Loader {
- sourceComponent: ctlRowHeader
- property string text: "QGCLabel"
+ text: qsTr("Enabled")
}
- QGCLabel {
- width: 100
+ Text {
+ width: 80
height: 20
- text: qsTr("Label")
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ text: qsTr("Value")
}
- QGCLabel {
- width: 100
+ Text {
+ width: 80
height: 20
- text: qsTr("Label")
- enabled: false
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ text: qsTr("Value")
}
- // QGCButton
+ // window
Loader {
- sourceComponent: ctlRowHeader
- property string text: "QGCButton"
- }
- QGCButton {
- width: 100
- height: 20
- text: qsTr("Button")
+ sourceComponent: rowHeader
+ property string text: "window"
}
- QGCButton {
- width: 100
- height: 20
- text: qsTr("Button")
- enabled: false
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.window
+ onColorSelected: palette.window = color
}
-
- // QGCButton - primary
- Loader {
- sourceComponent: ctlRowHeader
- property string text: "QGCButton(primary)"
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.window
+ onColorSelected: palette.window = color
}
- QGCButton {
- width: 100
+ Text {
+ width: 80
height: 20
- primary: true
- text: qsTr("Button")
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.window
}
- QGCButton {
- width: 100
+ Text {
+ width: 80
height: 20
- text: qsTr("Button")
- primary: true
- enabled: false
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.window
}
- // QGCButton - menu
+ // windowShade
Loader {
- sourceComponent: ctlRowHeader
- property string text: "QGCButton(menu)"
+ sourceComponent: rowHeader
+ property string text: "windowShade"
}
- Menu {
- id: buttonMenu
- MenuItem {
- text: qsTr("Item 1")
- }
- MenuItem {
- text: qsTr("Item 2")
- }
- MenuItem {
- text: qsTr("Item 3")
- }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.windowShade
+ onColorSelected: palette.windowShade = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.windowShade
+ onColorSelected: palette.windowShade = color
}
- QGCButton {
- width: 100
+ Text {
+ width: 80
height: 20
- text: qsTr("Button")
- menu: buttonMenu
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.windowShade
}
- QGCButton {
- width: 100
+ Text {
+ width: 80
height: 20
- text: qsTr("Button")
- enabled: false
- menu: buttonMenu
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.windowShade
}
- // QGCRadioButton
+ // windowShadeDark
Loader {
- sourceComponent: ctlRowHeader
- property string text: "QGCRadioButton"
+ sourceComponent: rowHeader
+ property string text: "windowShadeDark"
}
- QGCRadioButton {
- width: 100
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.windowShadeDark
+ onColorSelected: palette.windowShadeDark = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.windowShadeDark
+ onColorSelected: palette.windowShadeDark = color
+ }
+ Text {
+ width: 80
height: 20
- text: qsTr("Radio")
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.windowShadeDark
}
- QGCRadioButton {
- width: 100
+ Text {
+ width: 80
height: 20
- text: qsTr("Radio")
- enabled: false
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.windowShadeDark
}
- // QGCCheckBox
+ // text
Loader {
- sourceComponent: ctlRowHeader
- property string text: "QGCCheckBox"
+ sourceComponent: rowHeader
+ property string text: "text"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.text
+ onColorSelected: palette.text = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.text
+ onColorSelected: palette.text = color
}
- QGCCheckBox {
- width: 100
+ Text {
+ width: 80
height: 20
- text: qsTr("Check Box")
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.text
}
- QGCCheckBox {
- width: 100
+ Text {
+ width: 80
height: 20
- text: qsTr("Check Box")
- enabled: false
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.text
}
- // QGCTextField
+ // button
Loader {
- sourceComponent: ctlRowHeader
- property string text: "QGCTextField"
+ sourceComponent: rowHeader
+ property string text: "button"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.button
+ onColorSelected: palette.button = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.button
+ onColorSelected: palette.button = color
}
- QGCTextField {
- width: 100
+ Text {
+ width: 80
height: 20
- text: "QGCTextField"
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.button
}
- QGCTextField {
- width: 100
+ Text {
+ width: 80
height: 20
- text: "QGCTextField"
- enabled: false
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.button
}
- // QGCComboBox
+ // buttonText
Loader {
- sourceComponent: ctlRowHeader
- property string text: "QGCComboBox"
+ sourceComponent: rowHeader
+ property string text: "buttonText"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.buttonText
+ onColorSelected: palette.buttonText = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.buttonText
+ onColorSelected: palette.buttonText = color
}
- QGCComboBox {
- width: 100
+ Text {
+ width: 80
height: 20
- model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.buttonText
}
- QGCComboBox {
- width: 100
+ Text {
+ width: 80
height: 20
- model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
- enabled: false
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.buttonText
}
- // SubMenuButton
+ // buttonHighlight
Loader {
- sourceComponent: ctlRowHeader
- property string text: "SubMenuButton"
+ sourceComponent: rowHeader
+ property string text: "buttonHighlight"
}
- SubMenuButton {
- width: 100
- height: 100
- text: qsTr("SUB MENU")
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.buttonHighlight
+ onColorSelected: palette.buttonHighlight = color
}
- SubMenuButton {
- width: 100
- height: 100
- text: qsTr("SUB MENU")
- enabled: false
- }
- }
- Rectangle {
- width: leftGrid.width
- height: 60
- radius: 3
- color: palette.alertBackground
- border.color: palette.alertBorder
- anchors.horizontalCenter: parent.horizontalCenter
- Label {
- text: "Alert Message"
- color: palette.alertText
- anchors.centerIn: parent
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.buttonHighlight
+ onColorSelected: palette.buttonHighlight = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.buttonHighlight
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.buttonHighlight
}
- }
- }
- }
- Item{
- height: 10;
- width: 1;
- }
+ // buttonHighlightText
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "buttonHighlightText"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.buttonHighlightText
+ onColorSelected: palette.buttonHighlightText = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.buttonHighlightText
+ onColorSelected: palette.buttonHighlightText = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.buttonHighlightText
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.buttonHighlightText
+ }
- Row {
- spacing: 10
- anchors.horizontalCenter: parent.horizontalCenter
- Loader {
- property color backgroundColor: qgcPal.window
- sourceComponent: arbBox
+ // primaryButton
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "primaryButton"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.primaryButton
+ onColorSelected: palette.primaryButton = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.primaryButton
+ onColorSelected: palette.primaryButton = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.primaryButton
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.primaryButton
+ }
+
+ // primaryButtonText
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "primaryButtonText"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.primaryButtonText
+ onColorSelected: palette.primaryButtonText = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.primaryButtonText
+ onColorSelected: palette.primaryButtonText = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.primaryButtonText
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.primaryButtonText
+ }
+
+ // textField
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "textField"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.textField
+ onColorSelected: palette.textField = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.textField
+ onColorSelected: palette.textField = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.textField
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.textField
+ }
+
+ // textFieldText
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "textFieldText"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.textFieldText
+ onColorSelected: palette.textFieldText = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.textFieldText
+ onColorSelected: palette.textFieldText = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.textFieldText
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.textFieldText
+ }
+
+ // warningText
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "warningText"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.warningText
+ onColorSelected: palette.warningText = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.warningText
+ onColorSelected: palette.warningText = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.warningText
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.warningText
+ }
+
+ // colorGreen
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "colorGreen"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.colorGreen
+ onColorSelected: palette.colorGreen = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.colorGreen
+ onColorSelected: palette.colorGreen = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.colorGreen
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.colorGreen
+ }
+
+ // colorOrange
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "colorOrange"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.colorOrange
+ onColorSelected: palette.colorOrange = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.colorOrange
+ onColorSelected: palette.colorOrange = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.colorOrange
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.colorOrange
+ }
+
+ // colorRed
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "colorRed"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.colorRed
+ onColorSelected: palette.colorRed = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.colorRed
+ onColorSelected: palette.colorRed = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.colorRed
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.colorRed
+ }
+
+ // colorGrey
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "colorGrey"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.colorGrey
+ onColorSelected: palette.colorGrey = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.colorGrey
+ onColorSelected: palette.colorGrey = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.colorGrey
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.colorGrey
+ }
+
+ // colorBlue
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "colorBlue"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.colorBlue
+ onColorSelected: palette.colorBlue = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.colorBlue
+ onColorSelected: palette.colorBlue = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.colorBlue
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.colorBlue
+ }
+
+ // alertBackground
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "alertBackground"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.alertBackground
+ onColorSelected: palette.alertBackground = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.alertBackground
+ onColorSelected: palette.alertBackground = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.alertBackground
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.alertBackground
+ }
+
+ // alertBorder
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "alertBorder"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.alertBorder
+ onColorSelected: palette.alertBorder = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.alertBorder
+ onColorSelected: palette.alertBorder = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.alertBorder
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.alertBorder
+ }
+
+ // alertText
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "alertText"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.alertText
+ onColorSelected: palette.alertText = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.alertText
+ onColorSelected: palette.alertText = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.alertText
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.alertText
+ }
+
+ // missionItemEditor
+ Loader {
+ sourceComponent: rowHeader
+ property string text: "missionItemEditor"
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ color: palette.missionItemEditor
+ onColorSelected: palette.missionItemEditor = color
+ }
+ ClickableColor {
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ color: palette.missionItemEditor
+ onColorSelected: palette.missionItemEditor = color
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: false }
+ text: palette.missionItemEditor
+ }
+ Text {
+ width: 80
+ height: 20
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ property var palette: QGCPalette { colorGroupEnabled: true }
+ text: palette.missionItemEditor
+ }
+
+ } // Theme preview
+
+ // QGC controls preview
+ Column {
+ id: ctlPrevColumn
+ property real _width: ScreenTools.defaultFontPointSize * 18
+ property real _height: _width*0.15
+ property color _bkColor: qgcPal.window
+ spacing: 10
+ width: previewGrid.width
+ Grid {
+ id: previewGrid
+ columns: 3
+ spacing: 10
+
+ Component {
+ id: ctlRowHeader
+
+ Rectangle {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ color: "white"
+ Text {
+ anchors.fill: parent
+ horizontalAlignment: Text.AlignRight
+ verticalAlignment: Text.AlignVCenter
+ color: "black"
+
+ text: parent.parent.text
+ }
+ }
+ }
+
+ // Header row
+ Text {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ text: qsTr("QGC name")
+ }
+ Text {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ text: qsTr("Enabled")
+ }
+ Text {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ color: "black"
+ horizontalAlignment: Text.AlignHCenter
+ text: qsTr("Disabled")
+ }
+
+ // QGCLabel
+ Loader {
+ sourceComponent: ctlRowHeader
+ property string text: "QGCLabel"
+ }
+ Rectangle {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ color: ctlPrevColumn._bkColor
+ QGCLabel {
+ anchors.fill: parent
+ anchors.margins: 5
+ text: qsTr("Label")
+ }
+ }
+ Rectangle {
+ width: ctlPrevColumn._width
+ 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 {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ text: qsTr("Button")
+ }
+ QGCButton {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ text: qsTr("Button")
+ enabled: false
+ }
+
+ // QGCButton - primary
+ Loader {
+ sourceComponent: ctlRowHeader
+ property string text: "QGCButton(primary)"
+ }
+ QGCButton {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ primary: true
+ text: qsTr("Button")
+ }
+ QGCButton {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ text: qsTr("Button")
+ primary: true
+ enabled: false
+ }
+
+ // QGCHoverButton
+ Loader {
+ sourceComponent: ctlRowHeader
+ property string text: "QGCHoverButton"
+ }
+ QGCHoverButton {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height * 2
+ text: qsTr("Hover Button")
+ radius: ScreenTools.defaultFontPointSize
+ imageSource: "/qmlimages/Gears.svg"
+ }
+ QGCHoverButton {
+ width: ctlPrevColumn._width
+ 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 {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ text: qsTr("Button")
+ menu: buttonMenu
+ }
+ QGCButton {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ text: qsTr("Button")
+ enabled: false
+ menu: buttonMenu
+ }
+
+ // QGCRadioButton
+ Loader {
+ sourceComponent: ctlRowHeader
+ property string text: "QGCRadioButton"
+ }
+ Rectangle {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ color: ctlPrevColumn._bkColor
+ QGCRadioButton {
+ anchors.fill: parent
+ anchors.margins: 5
+ text: qsTr("Radio")
+ }
+ }
+ Rectangle {
+ width: ctlPrevColumn._width
+ 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 {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ color: ctlPrevColumn._bkColor
+ QGCCheckBox {
+ anchors.fill: parent
+ anchors.margins: 5
+ text: qsTr("Check Box")
+ }
+ }
+ Rectangle {
+ width: ctlPrevColumn._width
+ 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 {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ text: "QGCTextField"
+ }
+ QGCTextField {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ text: "QGCTextField"
+ enabled: false
+ }
+
+ // QGCComboBox
+ Loader {
+ sourceComponent: ctlRowHeader
+ property string text: "QGCComboBox"
+ }
+ QGCComboBox {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._height
+ model: [ qsTr("Item 1"), qsTr("Item 2"), qsTr("Item 3") ]
+ }
+ QGCComboBox {
+ width: ctlPrevColumn._width
+ 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._width
+ height: ctlPrevColumn._width/3
+ text: qsTr("SUB MENU")
+ }
+ SubMenuButton {
+ width: ctlPrevColumn._width
+ height: ctlPrevColumn._width/3
+ 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"
+ color: palette.alertText
+ anchors.centerIn: parent
+ }
+ }
+ } // QGC controls preview
}
- Loader {
- property color backgroundColor: qgcPal.windowShade
- sourceComponent: arbBox
+
+ Item{
+ height: 10;
+ width: 1;
}
- Loader {
- property color backgroundColor: qgcPal.windowShadeDark
- sourceComponent: arbBox
+
+ 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
+ }
}
+
}
}
diff --git a/src/api/QGCCorePlugin.cc b/src/api/QGCCorePlugin.cc
index 99d50e6013c9315e52fc24e42c502cd089c91f19..0fc9861ba36514df576a65b7de5d7d0849cd0999 100644
--- a/src/api/QGCCorePlugin.cc
+++ b/src/api/QGCCorePlugin.cc
@@ -61,6 +61,8 @@ public:
delete pMockLink;
if(pDebug)
delete pDebug;
+ if(pQmlTest)
+ delete pQmlTest;
#endif
if(defaultOptions)
delete defaultOptions;
@@ -84,6 +86,7 @@ public:
#if defined(QT_DEBUG)
QmlComponentInfo* pMockLink = nullptr;
QmlComponentInfo* pDebug = nullptr;
+ QmlComponentInfo* pQmlTest = nullptr;
#endif
QmlComponentInfo* valuesPageWidgetInfo = nullptr;
@@ -173,6 +176,9 @@ QVariantList &QGCCorePlugin::settingsPages()
_p->pDebug = new QmlComponentInfo(tr("Debug"),
QUrl::fromUserInput("qrc:/qml/DebugWindow.qml"));
_p->settingsList.append(QVariant::fromValue(reinterpret_cast(_p->pDebug)));
+ _p->pQmlTest = new QmlComponentInfo(tr("Palette Test"),
+ QUrl::fromUserInput("qrc:/qml/QmlTest.qml"));
+ _p->settingsList.append(QVariant::fromValue(reinterpret_cast(_p->pQmlTest)));
#endif
}
return _p->settingsList;