import QtQuick 2.3
import QtQuick.Controls 1.2
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
Rectangle {
anchors.fill: parent
anchors.margins: ScreenTools.defaultFontPixelWidth
color: "white"
property var palette: QGCPalette { colorGroupEnabled: true }
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; }
}
}
}
QGCFlickable {
anchors.fill: parent
contentWidth: _rootCol.width
contentHeight: _rootCol.height
clip: true
Column {
id: _rootCol
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
// Theme preview
Grid {
columns: 5
spacing: 5
Component {
id: rowHeader
Text {
width: 180
height: 20
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
color: "black"
text: parent.text
}
}
// 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 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
}
Item{
height: 10;
width: 1;
}
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
}
}
}
}
}