Updated palette and control implementation

qgroundcontrol.qrc

@@ -247,11 +247,12 @@
         <file alias="QGroundControl/FactControls/FactCheckBox.qml">src/FactSystem/FactControls/FactCheckBox.qml</file>
 
         <file alias="QGroundControl/Controls/qmldir">src/QmlControls/qmldir</file>
-        <file alias="QGroundControl/Controls/SetupButton.qml">src/QmlControls/SetupButton.qml</file>
+        <file alias="QGroundControl/Controls/SubMenuButton.qml">src/QmlControls/SubMenuButton.qml</file>
         <file alias="QGroundControl/Controls/QGCButton.qml">src/QmlControls/QGCButton.qml</file>
         <file alias="QGroundControl/Controls/QGCRadioButton.qml">src/QmlControls/QGCRadioButton.qml</file>
         <file alias="QGroundControl/Controls/QGCCheckBox.qml">src/QmlControls/QGCCheckBox.qml</file>
         <file alias="QGroundControl/Controls/QGCLabel.qml">src/QmlControls/QGCLabel.qml</file>
+        <file alias="QGroundControl/Controls/QGCTextField.qml">src/QmlControls/QGCTextField.qml</file>
 
         <file alias="octo_x.png">files/images/px4/airframes/octo_x.png</file>
         <file alias="px4fmu_2.x.png">files/images/px4/boards/px4fmu_2.x.png</file>
@@ -268,7 +269,7 @@
         <file alias="FlightModesComponentSummary.qml">src/AutoPilotPlugins/PX4/FlightModesComponentSummary.qml</file>
         <file alias="AirframeComponentSummary.qml">src/AutoPilotPlugins/PX4/AirframeComponentSummary.qml</file>
 
-        <file alias="QGroundControl/Controls/setupButtonImage.png">files/Setup/cogwheels.png</file>
+        <file alias="QGroundControl/Controls/subMenuButtonImage.png">files/Setup/cogwheels.png</file>
         <file alias="QGroundControl/Controls/SensorsComponentIcon.png">src/AutoPilotPlugins/PX4/SensorsComponentIcon.png</file>
         <file alias="QGroundControl/Controls/RadioComponentIcon.png">src/AutoPilotPlugins/PX4/RadioComponentIcon.png</file>
         <file alias="QGroundControl/Controls/FlightModesComponentIcon.png">src/AutoPilotPlugins/PX4/FlightModesComponentIcon.png</file>

src/AutoPilotPlugins/PX4/SafetyComponent.cc

@@ -51,7 +51,7 @@ QString SafetyComponent::description(void) const
 QString SafetyComponent::iconResource(void) const
 {
     // FIXME: Need real icon
-    return "setupButtonImage.png";
+    return "subMenuButtonImage.png";
 }
 
 bool SafetyComponent::requiresSetup(void) const

src/AutoPilotPlugins/PX4/SafetyComponent.qml

@@ -7,7 +7,7 @@ import QGroundControl.FactControls 1.0
 import QGroundControl.Palette 1.0
 
 Rectangle {
-    QGCPalette { id: palette; colorGroup: QGCPalette.Active }
+    QGCPalette { id: palette; colorGroupEnabled: true }
 
     width: 600
     height: 600
@@ -21,12 +21,12 @@ Rectangle {
         //-- Return Home Triggers
         Column {
             spacing: 18
-            Label { text: "Triggers For Return Home"; color: palette.windowText; font.pointSize: 20 }
+            Label { text: "Triggers For Return Home"; color: palette.text; font.pointSize: 20 }
             Row {
                 Label {
                     width: leftColWidth
                     text: "RC Transmitter Signal Loss - Return Home After"
-                    color: palette.windowText
+                    color: palette.text
                     anchors.baseline: rcLossField.baseline
                 }
                 FactTextField {
@@ -56,12 +56,12 @@ Rectangle {
         //-- Return Home Options
         Column {
             spacing: 18
-            Label { text: "Return Home Options"; color: palette.windowText; font.pointSize: 20 }
+            Label { text: "Return Home Options"; color: palette.text; font.pointSize: 20 }
             Row {
                 Label {
                     width: leftColWidth
                     text: "Climb to minimum altitude of "
-                    color: palette.windowText
+                    color: palette.text
                     anchors.baseline: climbField.baseline
                 }
                 FactTextField {
@@ -82,7 +82,7 @@ Rectangle {
                     }
                     style: CheckBoxStyle {
                         label: Text {
-                            color: palette.windowText
+                            color: palette.text
                             text: control.text
                         }
                     }
@@ -102,7 +102,7 @@ Rectangle {
                 Label {
                     width: leftColWidth;
                     text: "When Home is reached, loiter at an altitude of ";
-                    color: palette.windowText;
+                    color: palette.text;
                     anchors.baseline: descendField.baseline
                     visible: homeLoiterCheckbox.checked == true
                 }
@@ -120,7 +120,7 @@ Rectangle {
             font.pointSize: 14
             text: "Warning: You have an advanced safety configuration set using the NAV_RCL_OBC parameter. The above settings may not apply.";
             visible: autopilot.parameters["NAV_RCL_OBC"].value != 0
-            color: palette.windowText
+            color: palette.text
             wrapMode: Text.Wrap
         }
         Text {
@@ -128,7 +128,7 @@ Rectangle {
             font.pointSize: 14
             text: "Warning: You have an advanced safety configuration set using the NAV_DLL_OBC parameter. The above settings may not apply.";
             visible: autopilot.parameters["NAV_DLL_OBC"].value != 0
-            color: palette.windowText
+            color: palette.text
             wrapMode: Text.Wrap
         }
     }

src/FactSystem/Fact.cc

@@ -66,36 +66,52 @@ QString Fact::valueString(void) const
 
 QVariant Fact::defaultValue(void)
 {
+    Q_ASSERT(_metaData);
     return _metaData->defaultValue;
 }
 
 FactMetaData::ValueType_t Fact::type(void)
 {
+    Q_ASSERT(_metaData);
     return _metaData->type;
 }
 
 QString Fact::shortDescription(void)
 {
-    return _metaData->shortDescription;
+    if (_metaData) {
+        return _metaData->shortDescription;
+    } else {
+        return QString();
+    }
 }
 
 QString Fact::longDescription(void)
 {
-    return _metaData->longDescription;
+    if (_metaData) {
+        return _metaData->longDescription;
+    } else {
+        return QString();
+    }
 }
 
 QString Fact::units(void)
 {
-    return _metaData->units;
+    if (_metaData) {
+        return _metaData->units;
+    } else {
+        return QString();
+    }
 }
 
 QVariant Fact::min(void)
 {
+    Q_ASSERT(_metaData);
     return _metaData->min;
 }
 
 QVariant Fact::max(void)
 {
+    Q_ASSERT(_metaData);
     return _metaData->max;
 }
 

src/QGCPalette.cc

@@ -33,59 +33,69 @@ QList<QGCPalette*>   QGCPalette::_paletteObjects;
 
 QGCPalette::Theme QGCPalette::_theme = QGCPalette::Dark;
 
-QColor QGCPalette::_alternateBase[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0xF6, 0xF6, 0xF6), QColor(0xF6, 0xF6, 0xF6), QColor(0xF6, 0xF6, 0xF6) },
-    { QColor(2, 2, 2), QColor(2, 2, 2), QColor(2, 2, 2) }
+QColor QGCPalette::_window[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0xF6, 0xF6, 0xF6), QColor(0xF6, 0xF6, 0xF6) },
+    { QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22) }
+};
+
+QColor QGCPalette::_windowShade[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(255, 235, 211), QColor(255, 235, 211) },
+    { QColor(51, 51, 51), QColor(51, 51, 51) }
+};
+
+QColor QGCPalette::_windowShadeDark[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(216, 216, 216), QColor(216, 216, 216) },
+    { QColor(40, 40, 40), QColor(40, 40, 40) }
 };
 
-QColor QGCPalette::_base[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0xF6, 0xF6, 0xF6), QColor(0xF6, 0xF6, 0xF6), QColor(0xF6, 0xF6, 0xF6) },
-    { QColor(2, 2, 2), QColor(2, 2, 2), QColor(2, 2, 2) }
+QColor QGCPalette::_text[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x58, 0x58, 0x58), QColor(0, 0, 0) },
+    { QColor(0x58, 0x58, 0x58), QColor(0xFF, 0xFF, 0xFF) }
 };
 
 QColor QGCPalette::_button[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(0x1b, 0x6f, 0xad), QColor(0x1b, 0x6f, 0xad) },
-    { QColor(0x58, 0x58, 0x58), QColor(0x1b, 0x6f, 0xad), QColor(0x1b, 0x6f, 0xad) },
+    { QColor(0x58, 0x58, 0x58), QColor(0x1b, 0x6f, 0xad) },
+    { QColor(0x58, 0x58, 0x58), QColor(98, 98, 100) },
 };
 
 QColor QGCPalette::_buttonText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) },
-    { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) },
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF) },
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0xFF, 0xFF, 0xFF) },
 };
 
-QColor QGCPalette::_text[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(0, 0, 0), QColor(0, 0, 0) },
-    { QColor(0x58, 0x58, 0x58), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) }
+QColor QGCPalette::_buttonHighlight[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x58, 0x58, 0x58), QColor(237, 235, 51) },
+    { QColor(0x58, 0x58, 0x58), QColor(237, 235, 51) },
 };
 
-QColor QGCPalette::_window[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0xF6, 0xF6, 0xF6), QColor(0xF6, 0xF6, 0xF6), QColor(0xF6, 0xF6, 0xF6) },
-    { QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22) }
+QColor QGCPalette::_buttonHighlightText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
 };
 
-QColor QGCPalette::_windowShade[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(255, 235, 211), QColor(255, 235, 211), QColor(255, 235, 211) },
-    { QColor(51, 51, 51), QColor(51, 51, 51), QColor(51, 51, 51) }
+QColor QGCPalette::_primaryButton[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x58, 0x58, 0x58), QColor(152, 255, 252) },
+    { QColor(0x58, 0x58, 0x58), QColor(152, 255, 252) },
 };
 
-QColor QGCPalette::_windowShadeDark[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(216, 216, 216), QColor(216, 216, 216), QColor(216, 216, 216) },
-    { QColor(40, 40, 40), QColor(40, 40, 40), QColor(40, 40, 40) }
+QColor QGCPalette::_primaryButtonText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
 };
 
-QColor QGCPalette::_windowText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(0, 0, 0), QColor(0, 0, 0) },
-    { QColor(0x58, 0x58, 0x58), QColor(0xFF, 0xFF, 0xFF), QColor(0xFF, 0xFF, 0xFF) }
+QColor QGCPalette::_textField[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x58, 0x58, 0x58), QColor(255, 255, 255) },
+    { QColor(0x58, 0x58, 0x58), QColor(255, 255, 255) },
 };
 
-QColor QGCPalette::_buttonHighlight[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
-    { QColor(0x58, 0x58, 0x58), QColor(238, 227, 51), QColor(238, 227, 51) },
-    { QColor(0x58, 0x58, 0x58), QColor(238, 227, 51), QColor(238, 227, 51) },
+QColor QGCPalette::_textFieldText[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
+    { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
 };
 
 QGCPalette::QGCPalette(QObject* parent) :
     QObject(parent),
-    _colorGroup(Active)
+    _colorGroupEnabled(true)
 {
     // We have to keep track of all QGCPalette objects in the system so we can signal theme change to all of them
     _paletteObjects += this;
@@ -98,9 +108,9 @@ QGCPalette::~QGCPalette()
     Q_UNUSED(fSuccess);
 }
 
-void QGCPalette::setColorGroup(ColorGroup colorGroup)
+void QGCPalette::setColorGroupEnabled(bool enabled)
 {
-    _colorGroup = colorGroup;
+    _colorGroupEnabled = enabled;
     emit paletteChanged();
 }
 

src/QGCPalette.h

@@ -39,34 +39,54 @@ class QGCPalette : public QObject
 {
     Q_OBJECT
     
-    Q_ENUMS(ColorGroup)
+    Q_ENUMS(Theme)
     
-    Q_PROPERTY(ColorGroup colorGroup READ colorGroup WRITE setColorGroup NOTIFY paletteChanged)
+    Q_PROPERTY(Theme globalTheme READ globalTheme WRITE setGlobalTheme NOTIFY paletteChanged)
+    
+    Q_PROPERTY(bool colorGroupEnabled READ colorGroupEnabled WRITE setColorGroupEnabled NOTIFY paletteChanged)
 
-    Q_PROPERTY(QColor alternateBase READ alternateBase NOTIFY paletteChanged)
-    Q_PROPERTY(QColor base READ base 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)
+    
+    /// Background color for buttons
     Q_PROPERTY(QColor button READ button NOTIFY paletteChanged)
+    
+    /// Text color for buttons
     Q_PROPERTY(QColor buttonText READ buttonText NOTIFY paletteChanged)
-    Q_PROPERTY(QColor text READ text NOTIFY paletteChanged)
-    Q_PROPERTY(QColor window READ window NOTIFY paletteChanged)
-    Q_PROPERTY(QColor windowText READ windowText NOTIFY paletteChanged)
     
-    /// The buttonHighlight color identifies the button background color when hovered or selected.
+    /// 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)
 
-    /// The windowShade color should be a color somewhere between window and button. It is used to shade window
-    /// areas.
-    Q_PROPERTY(QColor windowShade READ windowShade NOTIFY paletteChanged)
+    /// 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)
     
-    /// The windowShadeDark color should be a color somewhere between window and windowShade. It is used to shade window
-    /// darker areas.
-    Q_PROPERTY(QColor windowShadeDark READ windowShadeDark 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)
+        
 public:
     enum ColorGroup {
         Disabled = 0,
-        Active,
-        Inactive
+        Enabled
     };
     
     enum Theme {
@@ -77,19 +97,25 @@ public:
     QGCPalette(QObject* parent = NULL);
     ~QGCPalette();
     
-    ColorGroup colorGroup(void) const { return _colorGroup; }
-    void setColorGroup(ColorGroup colorGroup);
+    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 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 alternateBase(void) const { return _alternateBase[_theme][_colorGroup]; }
-    QColor base(void) const { return _base[_theme][_colorGroup]; }
-    QColor button(void) const { return _button[_theme][_colorGroup]; }
-    QColor buttonText(void) const { return _buttonText[_theme][_colorGroup]; }
-    QColor text(void) const { return _text[_theme][_colorGroup]; }
-    QColor window(void) const { return _window[_theme][_colorGroup]; }
-    QColor windowShade(void) const { return _windowShade[_theme][_colorGroup]; }
-    QColor windowShadeDark(void) const { return _windowShadeDark[_theme][_colorGroup]; }
-    QColor windowText(void) const { return _windowText[_theme][_colorGroup]; }
-    QColor buttonHighlight(void) const { return _buttonHighlight[_theme][_colorGroup]; }
+    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]; }
     
     static Theme globalTheme(void) { return _theme; }
     static void setGlobalTheme(Theme newTheme);
@@ -98,22 +124,30 @@ signals:
     void paletteChanged(void);
     
 private:
-    static Theme    _theme;         ///< There is a single theme for all palettes
-    ColorGroup      _colorGroup;    ///< Currently selected ColorGroup
+    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 = 3;
+    static const int _cColorGroups = 2;
     
-    static QColor _alternateBase[_cThemes][_cColorGroups];
-    static QColor _base[_cThemes][_cColorGroups];
-    static QColor _button[_cThemes][_cColorGroups];
-    static QColor _buttonText[_cThemes][_cColorGroups];
-    static QColor _text[_cThemes][_cColorGroups];
     static QColor _window[_cThemes][_cColorGroups];
     static QColor _windowShade[_cThemes][_cColorGroups];
     static QColor _windowShadeDark[_cThemes][_cColorGroups];
-    static QColor _windowText[_cThemes][_cColorGroups];
+    
+    static QColor _text[_cThemes][_cColorGroups];
+    
+    static QColor _button[_cThemes][_cColorGroups];
+    static QColor _buttonText[_cThemes][_cColorGroups];
     static QColor _buttonHighlight[_cThemes][_cColorGroups];
+    static QColor _buttonHighlightText[_cThemes][_cColorGroups];
+    
+    static QColor _primaryButton[_cThemes][_cColorGroups];
+    static QColor _primaryButtonText[_cThemes][_cColorGroups];
+    static QColor _primaryButtonHighlight[_cThemes][_cColorGroups];
+    static QColor _primaryButtonHighlightText[_cThemes][_cColorGroups];
+    
+    static QColor _textField[_cThemes][_cColorGroups];
+    static QColor _textFieldText[_cThemes][_cColorGroups];
     
     void _themeChanged(void);
     

src/QmlControls/QGCButton.qml

@@ -5,13 +5,20 @@ import QtQuick.Controls.Styles 1.2
 import QGroundControl.Palette 1.0
 
 Button {
-    property var __qgcPal: QGCPalette { colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+    // primary: true - this is the primary button for this group of buttons
+    property bool primary: false
+
+    property var __qgcPal: QGCPalette { colorGroupEnabled: enabled }
+
+    property bool __showHighlight: pressed | hovered | checked
 
     style: ButtonStyle {
             background: Rectangle {
                 implicitWidth: 100
                 implicitHeight: 25
-                color: control.pressed ? control.__qgcPal.buttonHighlight : control.__qgcPal.button
+                color: __showHighlight ?
+                    control.__qgcPal.buttonHighlight :
+                    (primary ? control.__qgcPal.primaryButton : control.__qgcPal.button)
             }
 
             label: Text {
@@ -22,7 +29,9 @@ Button {
                 horizontalAlignment: TextEdit.AlignHCenter
 
                 text: control.text
-                color: control.__qgcPal.buttonText
+                color: __showHighlight ?
+                    control.__qgcPal.buttonHighlightText :
+                    (primary ? control.__qgcPal.primaryButtonText : control.__qgcPal.buttonText)
             }
         }
 }

src/QmlControls/QGCCheckBox.qml

@@ -5,7 +5,7 @@ import QtQuick.Controls.Styles 1.2
 import QGroundControl.Palette 1.0
 
 CheckBox {
-    property var __qgcPal: QGCPalette { colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+    property var __qgcPal: QGCPalette { colorGroupEnabled: enabled }
 
     style: CheckBoxStyle {
         label: Item {
@@ -28,7 +28,7 @@ CheckBox {
                 id: text
                 text: control.text
                 anchors.centerIn: parent
-                color: control.__qgcPal.windowText
+                color: control.__qgcPal.text
             }
         }
     }

src/QmlControls/QGCLabel.qml

@@ -5,8 +5,8 @@ import QtQuick.Controls.Styles 1.2
 import QGroundControl.Palette 1.0
 
 Text {
-    property var __palette: QGCPalette { colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+    property var __palette: QGCPalette { colorGroupEnabled: enabled }
     property bool enabled: true
 
-    color: __palette.windowText
+    color: __palette.text
 }

src/QmlControls/QGCRadioButton.qml

@@ -5,7 +5,7 @@ import QtQuick.Controls.Styles 1.2
 import QGroundControl.Palette 1.0
 
 RadioButton {
-    property var __qgcPal: QGCPalette { colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+    property var __qgcPal: QGCPalette { colorGroupEnabled: enabled }
 
     style: RadioButtonStyle {
         label: Item {
@@ -28,7 +28,7 @@ RadioButton {
                 id: text
                 text: control.text
                 anchors.centerIn: parent
-                color: control.__qgcPal.windowText
+                color: control.__qgcPal.text
             }
         }
     }

src/QmlControls/QGCTextField.qml

@@ -2,21 +2,19 @@ import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
 
-import QGroundControl.FactSystem 1.0
 import QGroundControl.Palette 1.0
 
 TextField {
-    property Fact fact: Fact { value: 0 }
     property bool showUnits: false
+    property string unitsLabel: ""
 
-    property var __qgcpal: QGCPalette { colorGroup: QGCPalette.Active }
+    property var __qgcPal: QGCPalette { colorGroupEnabled: true }
 
-    text: fact.valueString
-    textColor: __qgcpal.text
+    textColor: __qgcPal.textFieldText
 
     Label {
         id: unitsLabelWidthGenerator
-        text: parent.fact.units
+        text: unitsLabel
         width: contentWidth + ((parent.__contentHeight/3)*2)
         visible: false
     }
@@ -35,7 +33,7 @@ TextField {
                 anchors.fill: parent
 
                 border.color: control.activeFocus ? "#47b" : "#999"
-                color: __qgcpal.base
+                color: __qgcPal.textField
             }
 
             Text {
@@ -50,7 +48,7 @@ TextField {
                 x: parent.width - width
                 width: unitsLabelWidthGenerator.width
 
-                text: control.fact.units
+                text: control.unitsLabel
                 color: control.textColor
                 visible: control.showUnits
             }
@@ -58,6 +56,4 @@ TextField {
 
         padding.right: control.showUnits ? unitsLabelWidthGenerator.width : control.__contentHeight/3
     }
-
-    onEditingFinished: fact.value = text
 }

src/QmlControls/QmlTest.qml

@@ -4,17 +4,18 @@ import QtQuick.Controls.Styles 1.2
 
 import QGroundControl.Palette 1.0
 import QGroundControl.Controls 1.0
+import QGroundControl.FactControls 1.0
 
 Rectangle {
 
-    property var palette: QGCPalette { colorGroup: QGCPalette.Active }
+    property var palette: QGCPalette { colorGroupEnabled: true }
     color: palette.window
 
-    Column {
-        spacing: 10
+    Row {
+        spacing: 30
 
         Grid {
-            columns: 4
+            columns: 3
             spacing: 5
 
             Component {
@@ -33,11 +34,11 @@ Rectangle {
                 id: rowHeader
 
                 Text {
-                    width: 120
+                    width: 180
                     height: 20
                     horizontalAlignment: Text.AlignRight
                     verticalAlignment: Text.AlignVCenter
-                    color: palette.windowText
+                    color: palette.text
                     text: parent.text
                 }
             }
@@ -51,235 +52,215 @@ Rectangle {
             Text {
                 width: 80
                 height: 20
-                color: palette.windowText
+                color: palette.text
                 horizontalAlignment: Text.AlignHCenter
                 text: "Disabled"
             }
             Text {
                 width: 80
                 height: 20
-                color: palette.windowText
-                horizontalAlignment: Text.AlignHCenter
-                text: "Active"
-            }
-            Text {
-                width: 80
-                height: 20
-                color: palette.windowText
+                color: palette.text
                 horizontalAlignment: Text.AlignHCenter
-                text: "Inactive"
+                text: "Enabled"
             }
 
+            // window
             Loader {
                 sourceComponent: rowHeader
-                property var text: "alternateBase"
-            }
-            Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.alternateBase
-                sourceComponent: colorSquare
+                property var text: "window"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.alternateBase
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.window
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.alternateBase
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.window
                 sourceComponent: colorSquare
             }
 
+            // windowShade
             Loader {
                 sourceComponent: rowHeader
-                property var text: "base"
-            }
-            Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.base
-                sourceComponent: colorSquare
+                property var text: "windowShade"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.base
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.windowShade
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.base
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.windowShade
                 sourceComponent: colorSquare
             }
 
+            // windowShadeDark
             Loader {
                 sourceComponent: rowHeader
-                property var text: "button"
-            }
-            Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.button
-                sourceComponent: colorSquare
+                property var text: "windowShadeDark"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.button
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.windowShadeDark
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.button
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.windowShadeDark
                 sourceComponent: colorSquare
             }
 
+            // text
             Loader {
                 sourceComponent: rowHeader
-                property var text: "buttonHighlight"
+                property var text: "text"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.buttonHighlight
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.text
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.buttonHighlight
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.text
                 sourceComponent: colorSquare
             }
+
+            // button
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.buttonHighlight
+                sourceComponent: rowHeader
+                property var text: "button"
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.button
+                sourceComponent: colorSquare
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.button
                 sourceComponent: colorSquare
             }
 
+            // buttonText
             Loader {
                 sourceComponent: rowHeader
                 property var text: "buttonText"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.buttonText
-                sourceComponent: colorSquare
-            }
-            Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
+                property var palette: QGCPalette { colorGroupEnabled: false }
                 property var color: palette.buttonText
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
+                property var palette: QGCPalette { colorGroupEnabled: true }
                 property var color: palette.buttonText
                 sourceComponent: colorSquare
             }
 
+            // buttonHighlight
             Loader {
                 sourceComponent: rowHeader
-                property var text: "text"
-            }
-            Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.text
-                sourceComponent: colorSquare
+                property var text: "buttonHighlight"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.text
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.buttonHighlight
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.text
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.buttonHighlight
                 sourceComponent: colorSquare
             }
 
+            // buttonHighlightText
             Loader {
                 sourceComponent: rowHeader
-                property var text: "window"
-            }
-            Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.window
-                sourceComponent: colorSquare
+                property var text: "buttonHighlightText"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.window
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.buttonHighlightText
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.window
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.buttonHighlightText
                 sourceComponent: colorSquare
             }
 
+            // primaryButton
             Loader {
                 sourceComponent: rowHeader
-                property var text: "windowShade"
-            }
-            Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.windowShade
-                sourceComponent: colorSquare
+                property var text: "primaryButton"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.windowShade
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.primaryButton
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.windowShade
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.primaryButton
                 sourceComponent: colorSquare
             }
 
+            // primaryButtonText
             Loader {
                 sourceComponent: rowHeader
-                property var text: "windowShadeDark"
+                property var text: "primaryButtonText"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.windowShadeDark
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.primaryButtonText
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.windowShadeDark
-                sourceComponent: colorSquare
-            }
-            Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.windowShadeDark
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.primaryButtonText
                 sourceComponent: colorSquare
             }
 
+            // textField
             Loader {
                 sourceComponent: rowHeader
-                property var text: "windowText"
+                property var text: "textField"
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
-                property var color: palette.windowText
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.textField
                 sourceComponent: colorSquare
             }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Active }
-                property var color: palette.windowText
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.textField
                 sourceComponent: colorSquare
             }
+
+            // textFieldText
+            Loader {
+                sourceComponent: rowHeader
+                property var text: "textFieldText"
+            }
             Loader {
-                property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
-                property var color: palette.windowText
+                property var palette: QGCPalette { colorGroupEnabled: false }
+                property var color: palette.textFieldText
+                sourceComponent: colorSquare
+            }
+            Loader {
+                property var palette: QGCPalette { colorGroupEnabled: true }
+                property var color: palette.textFieldText
                 sourceComponent: colorSquare
             }
 
         }
 
-        Item {
-            width: parent.width
-            height: 30
-        }
-
         Grid {
             columns: 3
-            spacing: 5
+            spacing: 10
 
             Component {
                 id: ctlRowHeader
@@ -289,7 +270,7 @@ Rectangle {
                     height: 20
                     horizontalAlignment: Text.AlignRight
                     verticalAlignment: Text.AlignVCenter
-                    color: palette.windowText
+                    color: palette.text
                     text: parent.text
                 }
             }
@@ -303,18 +284,19 @@ Rectangle {
             Text {
                 width: 100
                 height: 20
-                color: palette.windowText
+                color: palette.text
                 horizontalAlignment: Text.AlignHCenter
                 text: "Enabled"
             }
             Text {
                 width: 100
                 height: 20
-                color: palette.windowText
+                color: palette.text
                 horizontalAlignment: Text.AlignHCenter
                 text: "Disabled"
             }
 
+            // QGCLabel
             Loader {
                 sourceComponent: ctlRowHeader
                 property var text: "QGCLabel"
@@ -331,6 +313,7 @@ Rectangle {
                 enabled: false
             }
 
+            // QGCButton
             Loader {
                 sourceComponent: ctlRowHeader
                 property var text: "QGCButton"
@@ -347,6 +330,26 @@ Rectangle {
                 enabled: false
             }
 
+            // QGCButton - primary
+            Loader {
+                sourceComponent: ctlRowHeader
+                property var text: "QGCButton(primary)"
+            }
+            QGCButton {
+                width: 100
+                height: 20
+                primary: true
+                text: "Button"
+            }
+            QGCButton {
+                width: 100
+                height: 20
+                text: "Button"
+                primary: true
+                enabled: false
+            }
+
+            // QGCRadioButton
             Loader {
                 sourceComponent: ctlRowHeader
                 property var text: "QGCRadioButton"
@@ -363,6 +366,7 @@ Rectangle {
                 enabled: false
             }
 
+            // QGCCheckBox
             Loader {
                 sourceComponent: ctlRowHeader
                 property var text: "QGCCheckBox"
@@ -379,6 +383,88 @@ Rectangle {
                 enabled: false
             }
 
+            // QGCTextField
+            Loader {
+                sourceComponent: ctlRowHeader
+                property var text: "QGCTextField"
+            }
+            QGCTextField {
+                width: 100
+                height: 20
+                text: "QGCTextField"
+            }
+            QGCTextField {
+                width: 100
+                height: 20
+                text: "QGCTextField"
+                enabled: false
+            }
+
+            // FactLabel
+            Loader {
+                sourceComponent: ctlRowHeader
+                property var text: "FactLabel"
+            }
+            FactLabel {
+                width: 100
+                height: 20
+            }
+            FactLabel {
+                width: 100
+                height: 20
+                enabled: false
+            }
+
+            // FactCheckBox
+            Loader {
+                sourceComponent: ctlRowHeader
+                property var text: "FactCheckBox"
+            }
+            FactCheckBox {
+                width: 100
+                height: 20
+                text: "Fact CheckBox"
+            }
+            FactCheckBox {
+                width: 100
+                height: 20
+                text: "Fact CheckBox"
+                enabled: false
+            }
+
+            // FactTextField
+            Loader {
+                sourceComponent: ctlRowHeader
+                property var text: "FactTextField"
+            }
+            FactTextField {
+                width: 100
+                height: 20
+                text: "FactTextField"
+            }
+            FactTextField {
+                width: 100
+                height: 20
+                text: "FactTextField"
+                enabled: false
+            }
+
+            // SubMenuButton
+            Loader {
+                sourceComponent: ctlRowHeader
+                property var text: "SubMenuButton"
+            }
+            SubMenuButton {
+                width: 100
+                height: 100
+                text: "SUB MENU"
+            }
+            SubMenuButton {
+                width: 100
+                height: 100
+                text: "SUB MENU"
+                enabled: false
+            }
         }
     }
 }

src/QmlControls/QmlTestWidget.cc

@@ -29,7 +29,7 @@
 QmlTestWidget::QmlTestWidget(void)
 {
     setAttribute(Qt::WA_DeleteOnClose);
-    resize(500, 500);
+    resize(900, 500);
     setVisible(true);
     setSource(QUrl::fromUserInput("qrc:qml/QmlTest.qml"));
 }

src/QmlControls/SubMenuButton.qml

@@ -12,20 +12,22 @@ Button {
     text: "Button"
     property bool setupComplete: true
     property bool setupIndicator: true
-    property string imageResource: "setupButtonImage.png"
+    property string imageResource: "subMenuButtonImage.png"
 
     style: ButtonStyle {
         id: buttonStyle
 
         property var __qgcPal: QGCPalette {
-            colorGroup: control.enabled ? QGCPalette.Active : QGCPalette.Disabled
+            colorGroupEnabled: control.enabled
         }
 
+        property bool __showHighlight: control.pressed | control.checked
+
         background: Rectangle {
             id: innerRect
             readonly property real titleHeight: 20
 
-            color: control.pressed ? __qgcPal.buttonHighlight : (control.checked ? __qgcPal.buttonHighlight : __qgcPal.button)
+            color: __showHighlight ? __qgcPal.buttonHighlight : __qgcPal.button
 
             Text {
                 id: titleBar
@@ -38,7 +40,7 @@ Button {
 
                 text: control.text
                 font.pixelSize: 12
-                color: __qgcPal.buttonText
+                color: __showHighlight ? __qgcPal.buttonHighlightText : __qgcPal.buttonText
 
                 Rectangle {
                     id: setupIndicator
@@ -76,7 +78,7 @@ Button {
                 ColorOverlay {
                     anchors.fill: buttonImage
                     source: buttonImage
-                    color: control.pressed ? __qgcPal.buttonHighlight : (control.checked ? __qgcPal.buttonHighlight : __qgcPal.button)
+                    color: __showHighlight ? __qgcPal.buttonHighlight : __qgcPal.button
                 }
             }
         }

src/QmlControls/qmldir

@@ -1,6 +1,7 @@
 Module QGroundControl.Controls
-SetupButton 1.0 SetupButton.qml
+SubMenuButton 1.0 SubMenuButton.qml
 QGCLabel 1.0 QGCLabel.qml
 QGCButton 1.0 QGCButton.qml
 QGCRadioButton 1.0 QGCRadioButton.qml
 QGCCheckBox 1.0 QGCCheckBox.qml
+QGCTextField 1.0 QGCTextField.qml

src/VehicleSetup/FirmwareUpgrade.qml

@@ -11,7 +11,7 @@ Rectangle {
     width: 600
     height: 600
 
-    property var qgcPal: QGCPalette { colorGroup: QGCPalette.Active }
+    property var qgcPal: QGCPalette { colorGroupEnabled: true }
     property FirmwareUpgradeController controller: FirmwareUpgradeController {
         upgradeButton: upgradeButton
         statusLog: statusTextArea
@@ -25,7 +25,7 @@ Rectangle {
 
         Text {
             text: "FIRMWARE UPDATE"
-            color: qgcPal.windowText
+            color: qgcPal.text
             font.pointSize: 20
         }
 
@@ -97,7 +97,7 @@ Rectangle {
             readOnly: true
             frameVisible: false
             style: TextAreaStyle {
-                textColor: qgcPal.windowText
+                textColor: qgcPal.text
                 backgroundColor: qgcPal.windowShade
             }
         }

src/VehicleSetup/SetupViewButtons.qml

@@ -10,7 +10,7 @@ import QGroundControl.Controls 1.0
 Rectangle {
     id: topLevel
 
-    QGCPalette { id: palette; colorGroup: QGCPalette.Active }
+    QGCPalette { id: palette; colorGroupEnabled: true }
     color: palette.window
 
     ExclusiveGroup { id: setupButtonGroup }
@@ -21,7 +21,7 @@ Rectangle {
         Column {
             anchors.fill: parent
 
-            SetupButton {
+            SubMenuButton {
                 id: firmwareButton; objectName: "firmwareButton"
                 width: parent.width
                 text: "FIRMWARE"
@@ -39,7 +39,7 @@ Rectangle {
         Column {
             anchors.fill: parent
 
-            SetupButton {
+            SubMenuButton {
                 id: summaryButton; objectName: "summaryButton"
                 width: parent.width
                 text: "SUMMARY"
@@ -49,7 +49,7 @@ Rectangle {
                 onClicked: controller.summaryButtonClicked()
             }
 
-            SetupButton {
+            SubMenuButton {
                 id: firmwareButton; objectName: "firmwareButton"
                 width: parent.width
                 text: "FIRMWARE"
@@ -62,7 +62,7 @@ Rectangle {
             Repeater {
                 model: autopilot.components
 
-                SetupButton {
+                SubMenuButton {
                     width: parent.width
                     text: modelData.name.toUpperCase()
                     imageResource: modelData.iconResource
@@ -72,7 +72,7 @@ Rectangle {
                 }
             }
 
-            SetupButton {
+            SubMenuButton {
                 width: parent.width
                 text: "PARAMETERS"
                 setupIndicator: false

src/VehicleSetup/VehicleSummary.qml

@@ -9,7 +9,7 @@ Rectangle {
     width: 600
     height: 400
 
-    property var qgcPal: QGCPalette { id: palette; colorGroup: QGCPalette.Active }
+    property var qgcPal: QGCPalette { id: palette; colorGroupEnabled: true }
 
     id: topLevel
     objectName: "topLevel"

src/test.qml

@@ -7,10 +7,10 @@ import QGroundControl.Palette 1.0
 
 
 Rectangle {
-    QGCPalette { id: palette; colorGroup: enabled ? QGCPalette.Active : QGCPalette.Disabled }
+    QGCPalette { id: palette; colorGroupEnabled: enabled }
 
     width: 100
     height: 100
     color: "#e43f3f"
-    // palette.windowText
+    // palette.text
 }