Commit 96f845d3 authored by Don Gagne's avatar Don Gagne

Better light palette for mobile

Plus lots of other tweaks to ui for visuals
parent 904518b6
......@@ -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>
......
......@@ -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
......
......@@ -354,6 +354,7 @@ QGCView {
QGCButton {
id: cancelButton
showBorder: true
text: "Cancel"
enabled: false
onClicked: controller.cancelCalibration()
......
......@@ -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
......
......@@ -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();
}
......@@ -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];
......
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
}
}
}
......@@ -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: {
......
......@@ -9,6 +9,8 @@ import QGroundControl.ScreenTools 1.0
// indicator on the right edge.
QGCButton {
showBorder: true
property bool indicatorGreen: false
Rectangle {
......
......@@ -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 }
......
......@@ -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 {
......
......@@ -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
......@@ -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"
}
......
......@@ -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);
}
......@@ -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
......@@ -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: {
......
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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 {
......
......@@ -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
......
......@@ -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 }
......
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment