Better light palette for mobile

Plus lots of other tweaks to ui for visuals

qgroundcontrol.qrc

@@ -120,6 +120,7 @@
         <file alias="QGroundControl/Controls/RoundButton.qml">src/QmlControls/RoundButton.qml</file>
         <file alias="QGroundControl/Controls/QGCCanvas.qml">src/QmlControls/QGCCanvas.qml</file>
         <file alias="QGroundControl/Controls/ExclusiveGroupItem.qml">src/QmlControls/ExclusiveGroupItem.qml</file>
+        <file alias="QGroundControl/Controls/ClickableColor.qml">src/QmlControls/ClickableColor.qml</file>
 
         <!-- Main Window -->
         <file alias="MainWindow.qml">src/ui/MainWindow.qml</file>

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

src/AutoPilotPlugins/PX4/SensorsComponent.qml

@@ -354,6 +354,7 @@ QGCView {
 
                 QGCButton {
                     id:         cancelButton
+                    showBorder: true
                     text:       "Cancel"
                     enabled:    false
                     onClicked:  controller.cancelCalibration()

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

src/QGCPalette.cc

@@ -34,22 +34,22 @@ QList<QGCPalette*>   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();
+}

src/QmlControls/ClickableColor.qml

+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
+        }
+    }
+}

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:  {

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 {

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 }
 

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 {

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

src/QmlControls/QmlTestWidget.cc

@@ -26,11 +26,30 @@
 
 #include "QmlTestWidget.h"
 
+#include <QColorDialog>
+
 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);
+}
+

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

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: {

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

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

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

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 {

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

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 }
 

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