From 44afaa86856a9db8a2301355ccd601e06c9ebaf6 Mon Sep 17 00:00:00 2001 From: Gus Grubba Date: Wed, 24 Apr 2019 11:04:07 -0300 Subject: [PATCH] Moving QmtTest to the Settings Panel (in debug builds only). This used to be a separate "QtWidget". --- qgroundcontrol.qrc | 1 + src/QmlControls/QGCHoverButton.qml | 158 ++ .../QGroundControl.Controls.qmldir | 1 + src/QmlControls/QmlTest.qml | 1974 +++++++++-------- src/api/QGCCorePlugin.cc | 6 + 5 files changed, 1189 insertions(+), 951 deletions(-) create mode 100644 src/QmlControls/QGCHoverButton.qml diff --git a/qgroundcontrol.qrc b/qgroundcontrol.qrc index 7604c5a9f..a07d060fd 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 000000000..83b9e4c48 --- /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 86296c571..44bb36ff4 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 b6918617d..02e856d1e 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 99d50e601..0fc9861ba 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; -- 2.22.0