From 96f845d3a73d0fec5199afad3edfd477d4190305 Mon Sep 17 00:00:00 2001 From: Don Gagne Date: Tue, 20 Oct 2015 19:37:22 -0700 Subject: [PATCH] Better light palette for mobile Plus lots of other tweaks to ui for visuals --- qgroundcontrol.qrc | 1 + src/AutoPilotPlugins/PX4/RadioComponent.qml | 21 +- src/AutoPilotPlugins/PX4/SensorsComponent.qml | 1 + src/QGCApplication.cc | 4 + src/QGCPalette.cc | 37 +- src/QGCPalette.h | 131 +++--- src/QmlControls/ClickableColor.qml | 30 ++ src/QmlControls/DropButton.qml | 2 +- src/QmlControls/IndicatorButton.qml | 2 + src/QmlControls/ModeSwitchDisplay.qml | 2 +- src/QmlControls/QGCButton.qml | 15 +- .../QGroundControl.Controls.qmldir | 4 +- src/QmlControls/QmlTest.qml | 380 +++++++++++++----- src/QmlControls/QmlTestWidget.cc | 19 + src/QmlControls/QmlTestWidget.h | 6 + src/QmlControls/RoundButton.qml | 3 +- src/QmlControls/ScreenToolsController.cc | 2 + src/QmlControls/SubMenuButton.qml | 4 +- src/VehicleSetup/SetupView.qml | 17 +- src/VehicleSetup/VehicleSummary.qml | 4 +- src/ui/MainWindow.qml | 3 +- src/ui/toolbar/MainToolBar.qml | 9 +- .../MainToolBarActiveVehicleComponent.qml | 4 +- 23 files changed, 491 insertions(+), 210 deletions(-) create mode 100644 src/QmlControls/ClickableColor.qml diff --git a/qgroundcontrol.qrc b/qgroundcontrol.qrc index b01ecdd1b..bbbf47efe 100644 --- a/qgroundcontrol.qrc +++ b/qgroundcontrol.qrc @@ -120,6 +120,7 @@ src/QmlControls/RoundButton.qml src/QmlControls/QGCCanvas.qml src/QmlControls/ExclusiveGroupItem.qml + src/QmlControls/ClickableColor.qml src/ui/MainWindow.qml diff --git a/src/AutoPilotPlugins/PX4/RadioComponent.qml b/src/AutoPilotPlugins/PX4/RadioComponent.qml index e59449ec6..f8c743956 100644 --- a/src/AutoPilotPlugins/PX4/RadioComponent.qml +++ b/src/AutoPilotPlugins/PX4/RadioComponent.qml @@ -410,15 +410,17 @@ QGCView { spacing: 10 QGCButton { - id: skipButton - text: "Skip" + id: skipButton + showBorder: true + text: "Skip" onClicked: controller.skipButtonClicked() } QGCButton { - id: cancelButton - text: "Cancel" + id: cancelButton + showBorder: true + text: "Cancel" onClicked: controller.cancelButtonClicked() } @@ -426,6 +428,7 @@ QGCView { QGCButton { id: nextButton primary: true + showBorder: true text: "Calibrate" onClicked: { @@ -468,16 +471,18 @@ QGCView { } QGCButton { - id: bindButton - text: "Spektrum Bind" + id: bindButton + showBorder: true + text: "Spektrum Bind" onClicked: showDialog(spektrumBindDialogComponent, dialogTitle, 50, StandardButton.Ok | StandardButton.Cancel) } } QGCButton { - text: "Copy Trims" - onClicked: showDialog(copyTrimsDialogComponent, dialogTitle, 50, StandardButton.Ok | StandardButton.Cancel) + showBorder: true + text: "Copy Trims" + onClicked: showDialog(copyTrimsDialogComponent, dialogTitle, 50, StandardButton.Ok | StandardButton.Cancel) } } // Column - Left Column diff --git a/src/AutoPilotPlugins/PX4/SensorsComponent.qml b/src/AutoPilotPlugins/PX4/SensorsComponent.qml index c08e7acb7..8147775e4 100644 --- a/src/AutoPilotPlugins/PX4/SensorsComponent.qml +++ b/src/AutoPilotPlugins/PX4/SensorsComponent.qml @@ -354,6 +354,7 @@ QGCView { QGCButton { id: cancelButton + showBorder: true text: "Cancel" enabled: false onClicked: controller.cancelCalibration() diff --git a/src/QGCApplication.cc b/src/QGCApplication.cc index cbe4e537c..51baaad31 100644 --- a/src/QGCApplication.cc +++ b/src/QGCApplication.cc @@ -434,7 +434,11 @@ bool QGCApplication::_initForNormalAppBoot(void) _createSingletons(); +#ifdef __mobile__ + _styleIsDark = false; +#else _styleIsDark = settings.value(_styleKey, _styleIsDark).toBool(); +#endif _loadCurrentStyle(); // Exit main application when last window is closed diff --git a/src/QGCPalette.cc b/src/QGCPalette.cc index 0a5c3fd0a..cf0b1aa53 100644 --- a/src/QGCPalette.cc +++ b/src/QGCPalette.cc @@ -34,22 +34,22 @@ QList QGCPalette::_paletteObjects; QGCPalette::Theme QGCPalette::_theme = QGCPalette::Dark; QColor QGCPalette::_window[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(0xDD, 0xDD, 0xDD), QColor(0xDD, 0xDD, 0xDD) }, + { QColor("#ffffff"), QColor("#ffffff") }, { QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22) } }; QColor QGCPalette::_windowShade[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(204, 204, 204), QColor(204, 204, 204) }, + { QColor("#d9d9d9"), QColor("#d9d9d9") }, { QColor(51, 51, 51), QColor(51, 51, 51) } }; QColor QGCPalette::_windowShadeDark[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(216, 216, 216), QColor(216, 216, 216) }, + { QColor("#bdbdbd"), QColor("#bdbdbd") }, { QColor(40, 40, 40), QColor(40, 40, 40) } }; QColor QGCPalette::_text[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(0x58, 0x58, 0x58), QColor(0, 0, 0) }, + { QColor("#cccccc"), QColor("#000000") }, { QColor(0x58, 0x58, 0x58), QColor(0xFF, 0xFF, 0xFF) } }; @@ -59,17 +59,17 @@ QColor QGCPalette::_warningText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] }; QColor QGCPalette::_button[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(0x58, 0x58, 0x58), QColor(0x1b, 0x6f, 0xad) }, + { QColor("#ffffff"), QColor("#ffffff") }, { QColor(0x58, 0x58, 0x58), QColor(98, 98, 100) }, }; QColor QGCPalette::_buttonText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF) }, + { QColor("#dedede"), QColor("#000000") }, { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF) }, }; QColor QGCPalette::_buttonHighlight[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(0x58, 0x58, 0x58), QColor(237, 235, 51) }, + { QColor("#e4e4e4"), QColor("#e4e4e4") }, { QColor(0x58, 0x58, 0x58), QColor(237, 235, 51) }, }; @@ -89,12 +89,12 @@ QColor QGCPalette::_primaryButtonText[QGCPalette::_cThemes][QGCPalette::_cColorG }; QColor QGCPalette::_textField[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(0x58, 0x58, 0x58), QColor(255, 255, 255) }, + { QColor("#ffffff"), QColor("#ffffff") }, { QColor(0x58, 0x58, 0x58), QColor(255, 255, 255) }, }; QColor QGCPalette::_textFieldText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = { - { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) }, + { QColor("#dedede"), QColor("#000000") }, { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) }, }; @@ -131,18 +131,23 @@ void QGCPalette::setColorGroupEnabled(bool enabled) void QGCPalette::setGlobalTheme(Theme newTheme) { + // Mobile build does not have themes if (_theme != newTheme) { _theme = newTheme; - - // Notify all objects of the new theme - foreach(QGCPalette* palette, _paletteObjects) { - palette->_themeChanged(); - } + _signalPaletteChangeToAll(); } } -void QGCPalette::_themeChanged(void) +void QGCPalette::_signalPaletteChangeToAll(void) { - emit paletteChanged(); + // Notify all objects of the new theme + foreach (QGCPalette* palette, _paletteObjects) { + palette->_signalPaletteChanged(); + } } + +void QGCPalette::_signalPaletteChanged(void) +{ + emit paletteChanged(); +} diff --git a/src/QGCPalette.h b/src/QGCPalette.h index 99cea6bbc..6bf5f6866 100644 --- a/src/QGCPalette.h +++ b/src/QGCPalette.h @@ -45,52 +45,41 @@ class QGCPalette : public QObject Q_PROPERTY(bool colorGroupEnabled READ colorGroupEnabled WRITE setColorGroupEnabled NOTIFY paletteChanged) - /// Background color for windows - Q_PROPERTY(QColor window READ window NOTIFY paletteChanged) - - /// Color for shaded areas within a window. The windowShade color should be a color somewhere between window and button. - Q_PROPERTY(QColor windowShade READ windowShade NOTIFY paletteChanged) - - /// Color for darker shared areas within a window. The windowShadeDark color should be a color somewhere between window and windowShade. - Q_PROPERTY(QColor windowShadeDark READ windowShadeDark NOTIFY paletteChanged) - - /// Standard text color for label text - Q_PROPERTY(QColor text READ text NOTIFY paletteChanged) - - /// Color for warning text - Q_PROPERTY(QColor warningText READ warningText NOTIFY paletteChanged) + // The colors are: + // window - Background color for windows + // windowShade - Color for shaded areas within a window. The windowShade color should be a color somewhere between window and button. + // windowShadeDark - Color for darker shared areas within a window. The windowShadeDark color should be a color somewhere between window and windowShade. + // text - Standard text color for label text + // warningText - Color for warning text + // button - Background color for buttons + // buttonText - Text color for buttons + // buttonHighlight - Background color for button in selected or hover state + // buttonHighlightText - Text color for button in selected or hover state - /// Background color for buttons - Q_PROPERTY(QColor button READ button NOTIFY paletteChanged) - - /// Text color for buttons - Q_PROPERTY(QColor buttonText READ buttonText NOTIFY paletteChanged) - - /// Background color for button in selected or hover state - Q_PROPERTY(QColor buttonHighlight READ buttonHighlight NOTIFY paletteChanged) - - /// Text color for button in selected or hover state - Q_PROPERTY(QColor buttonHighlightText READ buttonHighlightText NOTIFY paletteChanged) + // primaryButton - Background color for primary buttons. A primary button is the button which would be the + // normal default button to press. For example in an Ok/Cancel situation where Ok would normally + // be pressed, Ok is the primary button. + // primaryButtonText - Text color for primary buttons + // textField - Background color for TextFields + // textFieldText - Text color for TextFields + // mapButton - Background color for map buttons + // mapButtonHighlight - Background color for map button in selected or hover state - /// Background color for primary buttons. A primary button is the button which would be the - /// normal default button to press. For example in an Ok/Cancel situation where Ok would normally - /// be pressed, Ok is the primary button. - Q_PROPERTY(QColor primaryButton READ primaryButton NOTIFY paletteChanged) - - /// Text color for buttons - Q_PROPERTY(QColor primaryButtonText READ primaryButtonText NOTIFY paletteChanged) - - // Background color for TextFields - Q_PROPERTY(QColor textField READ textField NOTIFY paletteChanged) - - // Text color for TextFields - Q_PROPERTY(QColor textFieldText READ textFieldText NOTIFY paletteChanged) - - /// Background color for map buttons - Q_PROPERTY(QColor mapButton READ mapButton NOTIFY paletteChanged) - - /// Background color for map button in selected or hover state - Q_PROPERTY(QColor mapButtonHighlight READ mapButtonHighlight NOTIFY paletteChanged) + Q_PROPERTY(QColor window READ window WRITE setWindow NOTIFY paletteChanged) + Q_PROPERTY(QColor windowShade READ windowShade WRITE setWindowShade NOTIFY paletteChanged) + Q_PROPERTY(QColor windowShadeDark READ windowShadeDark WRITE setWindowShadeDark NOTIFY paletteChanged) + Q_PROPERTY(QColor text READ text WRITE setText NOTIFY paletteChanged) + Q_PROPERTY(QColor warningText READ warningText WRITE setWarningText NOTIFY paletteChanged) + Q_PROPERTY(QColor button READ button WRITE setButton NOTIFY paletteChanged) + Q_PROPERTY(QColor buttonText READ buttonText WRITE setButtonText NOTIFY paletteChanged) + Q_PROPERTY(QColor buttonHighlight READ buttonHighlight WRITE setButtonHighlight NOTIFY paletteChanged) + Q_PROPERTY(QColor buttonHighlightText READ buttonHighlightText WRITE setButtonHighlightText NOTIFY paletteChanged) + Q_PROPERTY(QColor primaryButton READ primaryButton WRITE setPrimaryButton NOTIFY paletteChanged) + Q_PROPERTY(QColor primaryButtonText READ primaryButtonText WRITE setPrimaryButtonText NOTIFY paletteChanged) + Q_PROPERTY(QColor textField READ textField WRITE setTextField NOTIFY paletteChanged) + Q_PROPERTY(QColor textFieldText READ textFieldText WRITE setTextFieldText NOTIFY paletteChanged) + Q_PROPERTY(QColor mapButton READ mapButton WRITE setMapButton NOTIFY paletteChanged) + Q_PROPERTY(QColor mapButtonHighlight READ mapButtonHighlight WRITE setMapButtonHighlight NOTIFY paletteChanged) public: enum ColorGroup { @@ -109,26 +98,37 @@ public: bool colorGroupEnabled(void) const { return _colorGroupEnabled; } void setColorGroupEnabled(bool enabled); - QColor window(void) const { return _window[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor windowShade(void) const { return _windowShade[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor windowShadeDark(void) const { return _windowShadeDark[_theme][_colorGroupEnabled ? 1 : 0]; } - - QColor text(void) const { return _text[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor warningText(void) const { return _warningText[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor window(void) const { return _window[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor windowShade(void) const { return _windowShade[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor windowShadeDark(void) const { return _windowShadeDark[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor text(void) const { return _text[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor warningText(void) const { return _warningText[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor button(void) const { return _button[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor buttonText(void) const { return _buttonText[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor buttonHighlight(void) const { return _buttonHighlight[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor buttonHighlightText(void) const { return _buttonHighlightText[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor primaryButton(void) const { return _primaryButton[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor primaryButtonText(void) const { return _primaryButtonText[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor textField(void) const { return _textField[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor textFieldText(void) const { return _textFieldText[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor mapButton(void) const { return _mapButton[_theme][_colorGroupEnabled ? 1 : 0]; } + QColor mapButtonHighlight(void) const { return _mapButtonHighlight[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor button(void) const { return _button[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor buttonText(void) const { return _buttonText[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor buttonHighlight(void) const { return _buttonHighlight[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor buttonHighlightText(void) const { return _buttonHighlightText[_theme][_colorGroupEnabled ? 1 : 0]; } - - QColor primaryButton(void) const { return _primaryButton[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor primaryButtonText(void) const { return _primaryButtonText[_theme][_colorGroupEnabled ? 1 : 0]; } - - QColor textField(void) const { return _textField[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor textFieldText(void) const { return _textFieldText[_theme][_colorGroupEnabled ? 1 : 0]; } - - QColor mapButton(void) const { return _mapButton[_theme][_colorGroupEnabled ? 1 : 0]; } - QColor mapButtonHighlight(void) const { return _mapButtonHighlight[_theme][_colorGroupEnabled ? 1 : 0]; } + void setWindow(QColor& color) { _window[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setWindowShade(QColor& color) { _windowShade[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setWindowShadeDark(QColor& color) { _windowShadeDark[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setText(QColor& color) { _text[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setWarningText(QColor& color) { _warningText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setButton(QColor& color) { _button[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setButtonText(QColor& color) { _buttonText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setButtonHighlight(QColor& color) { _buttonHighlight[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setButtonHighlightText(QColor& color) { _buttonHighlightText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setPrimaryButton(QColor& color) { _primaryButton[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setPrimaryButtonText(QColor& color) { _primaryButtonText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setTextField(QColor& color) { _textField[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setTextFieldText(QColor& color) { _textFieldText[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setMapButton(QColor& color) { _mapButton[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } + void setMapButtonHighlight(QColor& color) { _mapButtonHighlight[_theme][_colorGroupEnabled ? 1 : 0] = color; _signalPaletteChangeToAll(); } static Theme globalTheme(void) { return _theme; } static void setGlobalTheme(Theme newTheme); @@ -137,12 +137,15 @@ signals: void paletteChanged(void); private: + static void _signalPaletteChangeToAll(void); + void _signalPaletteChanged(void); + static Theme _theme; ///< There is a single theme for all palettes bool _colorGroupEnabled; ///< Currently selected ColorGroup. true: enabled, false: disabled static const int _cThemes = 2; static const int _cColorGroups = 2; - + static QColor _window[_cThemes][_cColorGroups]; static QColor _windowShade[_cThemes][_cColorGroups]; static QColor _windowShadeDark[_cThemes][_cColorGroups]; diff --git a/src/QmlControls/ClickableColor.qml b/src/QmlControls/ClickableColor.qml new file mode 100644 index 000000000..28c7e5744 --- /dev/null +++ b/src/QmlControls/ClickableColor.qml @@ -0,0 +1,30 @@ +import QtQuick 2.2 +import QtQuick.Controls 1.2 +import QtQuick.Dialogs 1.2 + +Rectangle { + id: _root + width: 80 + height: 20 + border.width: 1 + border.color: "black" + + signal colorSelected(var color) + + ColorDialog { + id: colorDialog + onAccepted: { + _root.colorSelected(colorDialog.color) + colorDialog.close() + } + } + + MouseArea { + anchors.fill: parent + + onClicked: { + colorDialog.color = _root.color + colorDialog.visible = true + } + } +} diff --git a/src/QmlControls/DropButton.qml b/src/QmlControls/DropButton.qml index 493f12a6a..59975b30e 100644 --- a/src/QmlControls/DropButton.qml +++ b/src/QmlControls/DropButton.qml @@ -161,7 +161,6 @@ Item { radius: width / 2 border.width: 2 border.color: "white" - opacity: checked ? 0.95 : 0.65 color: checked ? qgcPal.mapButtonHighlight : qgcPal.mapButton Image { @@ -170,6 +169,7 @@ Item { fillMode: Image.PreserveAspectFit mipmap: true smooth: true + MouseArea { anchors.fill: parent onClicked: { diff --git a/src/QmlControls/IndicatorButton.qml b/src/QmlControls/IndicatorButton.qml index 40d8a2ce4..8706e56b0 100644 --- a/src/QmlControls/IndicatorButton.qml +++ b/src/QmlControls/IndicatorButton.qml @@ -9,6 +9,8 @@ import QGroundControl.ScreenTools 1.0 // indicator on the right edge. QGCButton { + showBorder: true + property bool indicatorGreen: false Rectangle { diff --git a/src/QmlControls/ModeSwitchDisplay.qml b/src/QmlControls/ModeSwitchDisplay.qml index 6cc406ee1..126fd7b25 100644 --- a/src/QmlControls/ModeSwitchDisplay.qml +++ b/src/QmlControls/ModeSwitchDisplay.qml @@ -43,7 +43,7 @@ Rectangle { anchors.left: parent.left anchors.right: parent.right height: column.height + (ScreenTools.defaultFontPixelWidth * 2) - color: _qgcPal.windowShade + color: _qgcPal.window QGCPalette { id: _qgcPal; colorGroupEnabled: enabled } diff --git a/src/QmlControls/QGCButton.qml b/src/QmlControls/QGCButton.qml index 3ffd08ef9..df1aff5f3 100644 --- a/src/QmlControls/QGCButton.qml +++ b/src/QmlControls/QGCButton.qml @@ -7,8 +7,9 @@ import QGroundControl.Palette 1.0 import QGroundControl.ScreenTools 1.0 Button { - // primary: true - this is the primary button for this group of buttons - property bool primary: false + + property bool primary: false // primary: true - primary button for a group of buttons + property bool showBorder: false ///< true: draw border around button property var __qgcPal: QGCPalette { colorGroupEnabled: enabled } @@ -67,10 +68,12 @@ Button { implicitHeight: ScreenTools.isMobile ? ScreenTools.defaultFontPixelHeight * 3 * 0.75 : Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2)) Rectangle { - anchors.fill: parent - color: __showHighlight ? - control.__qgcPal.buttonHighlight : - (primary ? control.__qgcPal.primaryButton : control.__qgcPal.button) + anchors.fill: parent + border.width: showBorder ? 1: 0 + border.color: __qgcPal.buttonText + color: __showHighlight ? + control.__qgcPal.buttonHighlight : + (primary ? control.__qgcPal.primaryButton : control.__qgcPal.button) } Image { diff --git a/src/QmlControls/QGroundControl.Controls.qmldir b/src/QmlControls/QGroundControl.Controls.qmldir index a4c6027b8..ca970c0f3 100644 --- a/src/QmlControls/QGroundControl.Controls.qmldir +++ b/src/QmlControls/QGroundControl.Controls.qmldir @@ -34,4 +34,6 @@ MissionItemIndexLabel 1.0 MissionItemIndexLabel.qml MissionItemSummary 1.0 MissionItemSummary.qml MissionItemEditor 1.0 MissionItemEditor.qml -MainToolBar 1.0 MainToolBar.qml +MainToolBar 1.0 MainToolBar.qml + +ClickableColor 1.0 ClickableColor.qml diff --git a/src/QmlControls/QmlTest.qml b/src/QmlControls/QmlTest.qml index d4f2292c0..f216e70d3 100644 --- a/src/QmlControls/QmlTest.qml +++ b/src/QmlControls/QmlTest.qml @@ -8,7 +8,7 @@ import QGroundControl.Controls 1.0 Rectangle { property var palette: QGCPalette { colorGroupEnabled: true } - color: palette.window + color: "white" Column { @@ -32,21 +32,9 @@ Rectangle { spacing: 30 Grid { - columns: 3 + columns: 5 spacing: 5 - Component { - id: colorSquare - - Rectangle { - width: 80 - height: 20 - border.width: 1 - border.color: "white" - color: parent.color - } - } - Component { id: rowHeader @@ -55,12 +43,11 @@ Rectangle { height: 20 horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter - color: palette.text + color: "black" text: parent.text } } - // Header row Loader { sourceComponent: rowHeader @@ -69,32 +56,62 @@ Rectangle { Text { width: 80 height: 20 - color: palette.text + color: "black" horizontalAlignment: Text.AlignHCenter text: "Disabled" } Text { width: 80 height: 20 - color: palette.text + color: "black" horizontalAlignment: Text.AlignHCenter text: "Enabled" } + Text { + width: 80 + height: 20 + color: "black" + horizontalAlignment: Text.AlignHCenter + text: "Value" + } + Text { + width: 80 + height: 20 + color: "black" + horizontalAlignment: Text.AlignHCenter + text: "Value" + } // window Loader { sourceComponent: rowHeader property var text: "window" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.window - sourceComponent: colorSquare + color: palette.window + onColorSelected: palette.window = color } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: true } - property var color: palette.window - sourceComponent: colorSquare + 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 @@ -102,15 +119,31 @@ Rectangle { sourceComponent: rowHeader property var text: "windowShade" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.windowShade - sourceComponent: colorSquare + color: palette.windowShade + onColorSelected: palette.windowShade = color } - Loader { + 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 } - property var color: palette.windowShade - sourceComponent: colorSquare + text: palette.windowShade } // windowShadeDark @@ -118,15 +151,31 @@ Rectangle { sourceComponent: rowHeader property var text: "windowShadeDark" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.windowShadeDark - sourceComponent: colorSquare + color: palette.windowShadeDark + onColorSelected: palette.windowShadeDark = color } - Loader { + 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 } - property var color: palette.windowShadeDark - sourceComponent: colorSquare + text: palette.windowShadeDark } // text @@ -134,15 +183,31 @@ Rectangle { sourceComponent: rowHeader property var text: "text" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.text - sourceComponent: colorSquare + color: palette.text + onColorSelected: palette.text = color } - Loader { + 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 } - property var color: palette.text - sourceComponent: colorSquare + text: palette.text } // button @@ -150,15 +215,31 @@ Rectangle { sourceComponent: rowHeader property var text: "button" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.button - sourceComponent: colorSquare + color: palette.button + onColorSelected: palette.button = color } - Loader { + 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 } - property var color: palette.button - sourceComponent: colorSquare + text: palette.button } // buttonText @@ -166,15 +247,31 @@ Rectangle { sourceComponent: rowHeader property var text: "buttonText" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.buttonText - sourceComponent: colorSquare + color: palette.buttonText + onColorSelected: palette.buttonText = color } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: true } - property var color: palette.buttonText - sourceComponent: colorSquare + 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 @@ -182,15 +279,31 @@ Rectangle { sourceComponent: rowHeader property var text: "buttonHighlight" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.buttonHighlight - sourceComponent: colorSquare + color: palette.buttonHighlight + onColorSelected: palette.buttonHighlight = color } - Loader { + 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 } - property var color: palette.buttonHighlight - sourceComponent: colorSquare + text: palette.buttonHighlight } // buttonHighlightText @@ -198,15 +311,31 @@ Rectangle { sourceComponent: rowHeader property var text: "buttonHighlightText" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.buttonHighlightText - sourceComponent: colorSquare + color: palette.buttonHighlightText + onColorSelected: palette.buttonHighlightText = color } - Loader { + 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 } - property var color: palette.buttonHighlightText - sourceComponent: colorSquare + text: palette.buttonHighlightText } // primaryButton @@ -214,15 +343,31 @@ Rectangle { sourceComponent: rowHeader property var text: "primaryButton" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.primaryButton - sourceComponent: colorSquare + color: palette.primaryButton + onColorSelected: palette.primaryButton = color } - Loader { + 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 } - property var color: palette.primaryButton - sourceComponent: colorSquare + text: palette.primaryButton } // primaryButtonText @@ -230,15 +375,31 @@ Rectangle { sourceComponent: rowHeader property var text: "primaryButtonText" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.primaryButtonText - sourceComponent: colorSquare + color: palette.primaryButtonText + onColorSelected: palette.primaryButtonText = color } - Loader { + 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 } - property var color: palette.primaryButtonText - sourceComponent: colorSquare + text: palette.primaryButtonText } // textField @@ -246,15 +407,31 @@ Rectangle { sourceComponent: rowHeader property var text: "textField" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.textField - sourceComponent: colorSquare + color: palette.textField + onColorSelected: palette.textField = color } - Loader { + 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 } - property var color: palette.textField - sourceComponent: colorSquare + text: palette.textField } // textFieldText @@ -262,17 +439,32 @@ Rectangle { sourceComponent: rowHeader property var text: "textFieldText" } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: false } - property var color: palette.textFieldText - sourceComponent: colorSquare + color: palette.textFieldText + onColorSelected: palette.textFieldText = color } - Loader { + ClickableColor { property var palette: QGCPalette { colorGroupEnabled: true } - property var color: palette.textFieldText - sourceComponent: colorSquare + 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 } - } Grid { @@ -287,7 +479,7 @@ Rectangle { height: 20 horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter - color: palette.text + color: "black" text: parent.text } } @@ -301,14 +493,14 @@ Rectangle { Text { width: 100 height: 20 - color: palette.text + color: "black" horizontalAlignment: Text.AlignHCenter text: "Enabled" } Text { width: 100 height: 20 - color: palette.text + color: "black" horizontalAlignment: Text.AlignHCenter text: "Disabled" } diff --git a/src/QmlControls/QmlTestWidget.cc b/src/QmlControls/QmlTestWidget.cc index 03987b93d..657cbfa6b 100644 --- a/src/QmlControls/QmlTestWidget.cc +++ b/src/QmlControls/QmlTestWidget.cc @@ -26,11 +26,30 @@ #include "QmlTestWidget.h" +#include + QmlTestWidget::QmlTestWidget(void) : QGCQmlWidgetHolder(QString(), NULL, NULL) { setAttribute(Qt::WA_DeleteOnClose); resize(900, 500); setVisible(true); + + setContextPropertyObject("controller", this); + setSource(QUrl::fromUserInput("qrc:qml/QmlTest.qml")); } + +void QmlTestWidget::showColorDialog(QQuickItem* item) +{ + Q_UNUSED(item) + QColorDialog colorDialog(this); + connect(&colorDialog, &QColorDialog::colorSelected, this, &QmlTestWidget::_colorSelected); + colorDialog.open(); +} + +void QmlTestWidget::_colorSelected(const QColor & color) +{ + Q_UNUSED(color); +} + diff --git a/src/QmlControls/QmlTestWidget.h b/src/QmlControls/QmlTestWidget.h index 4fc6d6027..d52de9ca0 100644 --- a/src/QmlControls/QmlTestWidget.h +++ b/src/QmlControls/QmlTestWidget.h @@ -37,6 +37,12 @@ class QmlTestWidget : public QGCQmlWidgetHolder public: QmlTestWidget(void); + + Q_INVOKABLE void showColorDialog(QQuickItem* item); + +private slots: + void _colorSelected(const QColor & color); + }; #endif diff --git a/src/QmlControls/RoundButton.qml b/src/QmlControls/RoundButton.qml index 93afe5a07..c9e7bc8db 100644 --- a/src/QmlControls/RoundButton.qml +++ b/src/QmlControls/RoundButton.qml @@ -31,14 +31,15 @@ Item { radius: width / 2 border.width: 2 border.color: "white" - opacity: checked ? 0.95 : 0.65 color: checked ? qgcPal.mapButtonHighlight : qgcPal.mapButton + Image { id: button anchors.fill: parent fillMode: Image.PreserveAspectFit mipmap: true smooth: true + MouseArea { anchors.fill: parent onClicked: { diff --git a/src/QmlControls/ScreenToolsController.cc b/src/QmlControls/ScreenToolsController.cc index 2c9a569b5..77c0bd14f 100644 --- a/src/QmlControls/ScreenToolsController.cc +++ b/src/QmlControls/ScreenToolsController.cc @@ -29,6 +29,8 @@ #ifdef Q_OS_WIN const double ScreenToolsController::_defaultFontPixelSizeRatio = 1.0; +#elif __mobile__ +const double ScreenToolsController::_defaultFontPixelSizeRatio = 1.0; #else const double ScreenToolsController::_defaultFontPixelSizeRatio = 0.8; #endif diff --git a/src/QmlControls/SubMenuButton.qml b/src/QmlControls/SubMenuButton.qml index 66aa1fb63..708e8bcde 100644 --- a/src/QmlControls/SubMenuButton.qml +++ b/src/QmlControls/SubMenuButton.qml @@ -28,7 +28,7 @@ Button { background: Rectangle { id: innerRect - color: showHighlight ? qgcPal.buttonHighlight : qgcPal.button + color: showHighlight ? qgcPal.buttonHighlight : qgcPal.windowShade readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 1.5 @@ -59,7 +59,7 @@ Button { anchors.top: titleBar.bottom anchors.bottom: parent.bottom width: parent.width - color: qgcPal.windowShade + color: qgcPal.windowShadeDark QGCColoredImage { anchors.margins: ScreenTools.defaultFontPixelHeight * .75 diff --git a/src/VehicleSetup/SetupView.qml b/src/VehicleSetup/SetupView.qml index 574421785..90cf70e26 100644 --- a/src/VehicleSetup/SetupView.qml +++ b/src/VehicleSetup/SetupView.qml @@ -34,8 +34,10 @@ import QGroundControl.Controls 1.0 import QGroundControl.ScreenTools 1.0 import QGroundControl.MultiVehicleManager 1.0 -Item { - z: zOrder // zOrder comes from the Loader in MainWindow.qml +Rectangle { + anchors.fill: parent + color: qgcPal.window + z: zOrder // zOrder comes from the Loader in MainWindow.qml QGCPalette { id: qgcPal; colorGroupEnabled: true } @@ -44,7 +46,7 @@ Item { readonly property real _defaultTextHeight: ScreenTools.defaultFontPixelHeight readonly property real _defaultTextWidth: ScreenTools.defaultFontPixelWidth readonly property real _margin: _defaultTextHeight / 2 - readonly property real _buttonWidth: _defaultTextWidth * 15 + readonly property real _buttonWidth: _defaultTextWidth * 17 readonly property string _armedVehicleText: "This operation cannot be performed while vehicle is armed." property string _messagePanelText: "missing message panel text" @@ -198,8 +200,7 @@ Item { Rectangle { //anchors.margins: _defaultTextHeight * 2 anchors.fill: parent - color: qgcPal.window - opacity: 0.8 + color: qgcPal.windowShadeDark QGCLabel { id: title @@ -218,12 +219,14 @@ Item { anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right - color: qgcPal.windowShade + color: qgcPal.window Flickable { id: buttonFlickable width: _buttonWidth - height: parent.height + anchors.topMargin: _defaultTextHeight / 2 + anchors.top: parent.top + anchors.bottom: parent.bottom contentWidth: _buttonWidth contentHeight: buttonColumn.height flickableDirection: Flickable.VerticalFlick diff --git a/src/VehicleSetup/VehicleSummary.qml b/src/VehicleSetup/VehicleSummary.qml index 9e37fb461..a000abdaf 100644 --- a/src/VehicleSetup/VehicleSummary.qml +++ b/src/VehicleSetup/VehicleSummary.qml @@ -67,7 +67,7 @@ Rectangle { Rectangle { width: ScreenTools.defaultFontPixelWidth * 28 height: ScreenTools.defaultFontPixelHeight * 13 - color: qgcPal.windowShade + color: qgcPal.window readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 2 @@ -76,7 +76,7 @@ Rectangle { id: titleBar width: parent.width height: titleHeight - color: qgcPal.windowShadeDark + color: qgcPal.windowShade // Title text QGCLabel { diff --git a/src/ui/MainWindow.qml b/src/ui/MainWindow.qml index ef3d138d9..1df038053 100644 --- a/src/ui/MainWindow.qml +++ b/src/ui/MainWindow.qml @@ -33,7 +33,7 @@ import QGroundControl.ScreenTools 1.0 FlightDisplayView { id: _root - topMargin: toolbarLoader.height + topMargin: toolbarLoader.height + (ScreenTools.defaultFontPixelHeight / 2) property var _toolbar: toolbarLoader.item @@ -102,7 +102,6 @@ FlightDisplayView { Loader { id: setupViewLoader - anchors.margins: ScreenTools.defaultFontPixelWidth anchors.left: parent.left anchors.right: parent.right anchors.top: toolbarLoader.bottom diff --git a/src/ui/toolbar/MainToolBar.qml b/src/ui/toolbar/MainToolBar.qml index b31e6d8c4..53be8c499 100644 --- a/src/ui/toolbar/MainToolBar.qml +++ b/src/ui/toolbar/MainToolBar.qml @@ -38,9 +38,12 @@ import QGroundControl.MultiVehicleManager 1.0 import QGroundControl.ScreenTools 1.0 import QGroundControl.Controllers 1.0 -Item { - id: toolBarHolder - height: toolBarHeight +Rectangle { + id: toolBarHolder + anchors.left: parent.left + anchors.right: parent.right + height: toolBarHeight + color: qgcPal.window QGCPalette { id: qgcPal; colorGroupEnabled: true } diff --git a/src/ui/toolbar/MainToolBarActiveVehicleComponent.qml b/src/ui/toolbar/MainToolBarActiveVehicleComponent.qml index ad36b51d1..df788d845 100644 --- a/src/ui/toolbar/MainToolBarActiveVehicleComponent.qml +++ b/src/ui/toolbar/MainToolBarActiveVehicleComponent.qml @@ -105,7 +105,7 @@ Row { } QGCButton { - width: ScreenTools.defaultFontPixelWidth * 12 + width: ScreenTools.defaultFontPixelWidth * 13 height: cellHeight anchors.verticalCenter: parent.verticalCenter text: "Vehicle " + activeVehicle.id @@ -359,7 +359,7 @@ Row { } QGCButton { - width: ScreenTools.defaultFontPixelWidth * 15 + width: ScreenTools.defaultFontPixelWidth * 16 height: cellHeight anchors.verticalCenter: parent.verticalCenter text: activeVehicle.flightMode -- 2.22.0