Skip to content
GitLab
Commit fc01014c authored by Don Gagne's avatar Don Gagne
Browse files

Modify UI to fit latest designer sketches

parent d84e7c94
Hide whitespace changes
Inline Side-by-side
src/QGCPalette.cc
View file @ fc01014c
......@@ -63,14 +63,24 @@ QColor QGCPalette::_window[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
{ QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22), QColor(0x22, 0x22, 0x22) }
};
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::_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::_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::_buttonHighlight[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
{ QColor(0x58, 0x58, 0x58), QColor(0xee, 0xe3, 0x33), QColor(0xee, 0xe3, 0x33) },
{ QColor(0x58, 0x58, 0x58), QColor(0xee, 0xe3, 0x33), QColor(0xee, 0xe3, 0x33) },
{ QColor(0x58, 0x58, 0x58), QColor(238, 227, 51), QColor(238, 227, 51) },
{ QColor(0x58, 0x58, 0x58), QColor(238, 227, 51), QColor(238, 227, 51) },
};
QGCPalette::QGCPalette(QObject* parent) :
......
src/QGCPalette.h
View file @ fc01014c
......@@ -54,6 +54,14 @@ class QGCPalette : public QObject
/// The buttonHighlight color identifies the button background color when hovered or selected.
Q_PROPERTY(QColor buttonHighlight READ buttonHighlight 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)
/// 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)
public:
enum ColorGroup {
Disabled = 0,
......@@ -78,6 +86,8 @@ public:
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]; }
......@@ -100,6 +110,8 @@ private:
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 _buttonHighlight[_cThemes][_cColorGroups];
......
src/QmlControls/QGCButton.qml
View file @ fc01014c
......@@ -11,7 +11,7 @@ Button {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
color: control.hovered ? control.__qgcPal.buttonHighlight : control.__qgcPal.button
color: control.pressed ? control.__qgcPal.buttonHighlight : control.__qgcPal.button
}
label: Text {
......
src/QmlControls/QmlTest.qml
View file @ fc01014c
......@@ -210,6 +210,46 @@ Rectangle {
sourceComponent: colorSquare
}
Loader {
sourceComponent: rowHeader
property var text: "windowShade"
}
Loader {
property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
property var color: palette.windowShade
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroup: QGCPalette.Active }
property var color: palette.windowShade
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroup: QGCPalette.Inactive }
property var color: palette.windowShade
sourceComponent: colorSquare
}
Loader {
sourceComponent: rowHeader
property var text: "windowShadeDark"
}
Loader {
property var palette: QGCPalette { colorGroup: QGCPalette.Disabled }
property var color: palette.windowShadeDark
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
sourceComponent: colorSquare
}
Loader {
sourceComponent: rowHeader
property var text: "windowText"
......
src/QmlControls/SetupButton.qml
View file @ fc01014c
......@@ -12,11 +12,12 @@ Button {
text: "Button"
property bool setupComplete: true
property bool setupIndicator: true
property string imageResource: "setupButtonImage.png"
style: ButtonStyle {
id: buttonStyle
property var __qgcpal: QGCPalette {
property var __qgcPal: QGCPalette {
colorGroup: control.enabled ? QGCPalette.Active : QGCPalette.Disabled
}
......@@ -24,10 +25,7 @@ Button {
id: innerRect
readonly property real titleHeight: 20
border.color: control.checked ? "#eee333" : "#676767"
radius: 10
color: control.checked ? "#eee333" : "#343434"
color: control.pressed ? __qgcPal.buttonHighlight : (control.checked ? __qgcPal.buttonHighlight : __qgcPal.button)
Text {
id: titleBar
......@@ -40,7 +38,7 @@ Button {
text: control.text
font.pixelSize: 12
color: control.checked ? "black" : "white"
color: __qgcPal.buttonText
Rectangle {
id: setupIndicator
......@@ -53,7 +51,7 @@ Button {
height: indicatorRadius * 2
radius: indicatorRadius
color: control.setupIndicator ? (control.setupComplete ? "green" : "red") : innerRect.color
color: control.setupIndicator ? (control.setupComplete ? "#00d932" : "red") : innerRect.color
}
}
......@@ -63,12 +61,11 @@ Button {
y: parent.titleHeight
color: __qgcpal.window
border.color: control.checked ? "#eee333" : "#676767"
color: __qgcPal.windowShade
Image {
id: buttonImage
source: "setupButtonImage.png"
source: control.imageResource
sourceSize: Qt.size(parent.width - 20, parent.height - 20)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
......@@ -79,7 +76,7 @@ Button {
ColorOverlay {
anchors.fill: buttonImage
source: buttonImage
color: control.checked ? "#eee333" : "#58585a"
color: control.pressed ? __qgcPal.buttonHighlight : (control.checked ? __qgcPal.buttonHighlight : __qgcPal.button)
}
}
}
......
src/VehicleSetup/FirmwareUpgrade.qml
View file @ fc01014c
......@@ -95,9 +95,10 @@ Rectangle {
width: parent.width
height: 300
readOnly: true
frameVisible: false
style: TextAreaStyle {
textColor: qgcPal.windowText
backgroundColor: qgcPal.window
backgroundColor: qgcPal.windowShade
}
}
}
......
src/VehicleSetup/SetupView.ui
View file @ fc01014c
......@@ -14,6 +14,18 @@
<string>Form</string>
</property>
<layout class="QHBoxLayout" name="horizontalLayout">
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QGCQuickWidget" name="buttonHolder">
<property name="sizePolicy">
......
src/VehicleSetup/SetupViewButtons.qml
View file @ fc01014c
......@@ -21,12 +21,11 @@ Rectangle {
Column {
anchors.fill: parent
spacing: 10
SetupButton {
id: firmwareButton; objectName: "firmwareButton"
width: parent.width
text: "FIRMWARE"
imageResource: "FirmwareUpgradeIcon.png"
setupIndicator: false
exclusiveGroup: setupButtonGroup
onClicked: controller.firmwareButtonClicked()
......@@ -40,12 +39,11 @@ Rectangle {
Column {
anchors.fill: parent
spacing: 10
SetupButton {
id: summaryButton; objectName: "summaryButton"
width: parent.width
text: "SUMMARY"
imageResource: "VehicleSummaryIcon.png"
setupIndicator: false
exclusiveGroup: setupButtonGroup
onClicked: controller.summaryButtonClicked()
......@@ -55,6 +53,7 @@ Rectangle {
id: firmwareButton; objectName: "firmwareButton"
width: parent.width
text: "FIRMWARE"
imageResource: "FirmwareUpgradeIcon.png"
setupIndicator: false
exclusiveGroup: setupButtonGroup
onClicked: controller.firmwareButtonClicked()
......@@ -66,6 +65,7 @@ Rectangle {
SetupButton {
width: parent.width
text: modelData.name.toUpperCase()
imageResource: modelData.iconResource
setupComplete: modelData.setupComplete
exclusiveGroup: setupButtonGroup
onClicked: controller.setupButtonClicked(modelData)
......
src/VehicleSetup/VehicleComponent.h
View file @ fc01014c
......@@ -47,7 +47,7 @@ class VehicleComponent : public QObject
Q_PROPERTY(bool requiresSetup READ requiresSetup CONSTANT)
Q_PROPERTY(bool setupComplete READ setupComplete STORED false NOTIFY setupCompleteChanged)
Q_PROPERTY(QString setupStateDescription READ setupStateDescription STORED false)
Q_PROPERTY(QString icon READ icon CONSTANT)
Q_PROPERTY(QString iconResource READ iconResource CONSTANT)
Q_PROPERTY(QWidget* setupWidget READ setupWidget STORED false)
Q_PROPERTY(QUrl summaryQmlSource READ summaryQmlSource CONSTANT);
Q_PROPERTY(QString prerequisiteSetup READ prerequisiteSetup)
......@@ -58,7 +58,7 @@ public:
virtual QString name(void) const = 0;
virtual QString description(void) const = 0;
virtual QString icon(void) const = 0;
virtual QString iconResource(void) const = 0;
virtual bool requiresSetup(void) const = 0;
virtual bool setupComplete(void) const = 0;
virtual QString setupStateDescription(void) const = 0;
......
src/VehicleSetup/VehicleSummary.qml
View file @ fc01014c
......@@ -9,101 +9,81 @@ Rectangle {
width: 600
height: 400
QGCPalette { id: palette; colorGroup: QGCPalette.Active }
property var qgcPal: QGCPalette { id: palette; colorGroup: QGCPalette.Active }
id: topLevel
objectName: "topLevel"
color: palette.window
Image {
anchors.fill: parent
fillMode: Image.PreserveAspectFit
smooth: true
source: autopilot.setupBackgroundImage;
}
Column {
anchors.margins: 20
anchors.fill: parent
spacing: 5
color: qgcPal.window
Flow {
width: parent.width;
height: parent.height
spacing: 5
Repeater {
model: autopilot.components
Flow {
anchors.fill: parent
spacing: 10
Button {
width: 250
height: 200
Repeater {
model: autopilot.components
property var summaryQmlSource: modelData.summaryQmlSource
text: modelData.name
property bool setupComplete: modelData.setupComplete
Button {
width: 250
height: 200
style: ButtonStyle {
id: buttonStyle
background: Rectangle {
id: innerRect
readonly property real titleHeight: 30
property var summaryQmlSource: modelData.summaryQmlSource
text: modelData.name
property bool setupComplete: modelData.setupComplete
border.color: "#888"
radius: 10
style: ButtonStyle {
id: buttonStyle
background: Rectangle {
id: innerRect
readonly property real titleHeight: 30
color: "white"
opacity: 0.8
color: qgcPal.windowShadeDark
Text {
id: titleBar
Text {
id: titleBar
width: parent.width
height: parent.titleHeight
width: parent.width
height: parent.titleHeight
verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter
verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter
text: control.text
font.pixelSize: 12
text: control.text.toUpperCase()
color: qgcPal.buttonText
font.pixelSize: 12
Rectangle {
id: setupIndicator
Rectangle {
id: setupIndicator
property bool setupComplete: true
readonly property real indicatorRadius: 6
property bool setupComplete: true
readonly property real indicatorRadius: 6
x: parent.width - (indicatorRadius * 2) - 5
y: (parent.height - (indicatorRadius * 2)) / 2
width: indicatorRadius * 2
height: indicatorRadius * 2
x: parent.width - (indicatorRadius * 2) - 5
y: (parent.height - (indicatorRadius * 2)) / 2
width: indicatorRadius * 2
height: indicatorRadius * 2
radius: indicatorRadius
color: control.setupComplete ? "green" : "red"
}
radius: indicatorRadius
color: control.setupComplete ? "#00d932" : "red"
}
}
Rectangle {
width: parent.width
height: parent.height - parent.titleHeight
y: parent.titleHeight
Rectangle {
width: parent.width
height: parent.height - parent.titleHeight
border.color: "#888"
y: parent.titleHeight
gradient: Gradient {
GradientStop { position: 0; color: "#ffffff" }
GradientStop { position: 1; color: "#000000" }
}
color: qgcPal.windowShade
Loader {
anchors.fill: parent
source: summaryQmlSource
}
Loader {
anchors.fill: parent
source: summaryQmlSource
}
}
label: Item {}
}
label: Item {}
}
}
}
......
Supports Markdown
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