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/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];

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/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"
                 }

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