Skip to content

Q
qgroundcontrol
Unverified Commit f51c9f4b authored by Gus Grubba's avatar Gus Grubba Committed by GitHub
Browse files
Options

Merge pull request #7651 from yasendimov/pr_custom-theme-fixes 

QGC Custom theme - visual fixes
parents 86dddd4f d3dc239b
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 81 deletions
custom-example/custom.qrc
View file @ f51c9f4b
......@@ -25,8 +25,9 @@
<file alias="compass_pointer.svg">res/Images/compass_pointer.svg</file>
<file alias="distance.svg">res/Images/distance.svg</file>
<file alias="gimbal_icon.svg">res/Images/gimbal_icon.svg</file>
<file alias="gimbal_pitch.svg">res/Images/gimbal_pitch.svg</file>
<file alias="gimbal_position.svg">res/Images/gimbal_position.svg</file>
<file alias="gimbal_pitch_indoors.svg">res/Images/gimbal_pitch_indoors.svg</file>
<file alias="gimbal_pitch_outdoors.svg">res/Images/gimbal_pitch_outdoors.svg</file>
<file alias="horizontal_speed.svg">res/Images/horizontal_speed.svg</file>
<file alias="microSD.svg">res/Images/microSD.svg</file>
<file alias="odometer.svg">res/Images/odometer.svg</file>
......
custom-example/res/Custom/Widgets/CustomOnOffSwitch.qml
View file @ f51c9f4b
......@@ -20,8 +20,8 @@ Rectangle {
height: Math.round(ScreenTools.defaultFontPixelHeight * 2)
width: ScreenTools.defaultFontPixelWidth * 10
color: qgcPal.button
border.color: qgcPal.text
border.width: 1
border.color: qgcPal.windowShade
border.width: 0
property bool checked: true
......@@ -32,24 +32,23 @@ Rectangle {
Rectangle {
width: parent.width * 0.5
height: parent.height
color: qgcPal.windowShade
visible: !checked
color: checked ? qgcPal.button : qgcPal.buttonHighlight
border.color: qgcPal.text
border.width: 1
border.width: 0
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
QGCLabel {
text: qsTr("Off")
anchors.centerIn: parent
color: qgcPal.text
}
}
Rectangle {
width: parent.width * 0.5
height: parent.height * 0.95
color: qgcPal.buttonHighlight
visible: checked
height: parent.height
color: checked ? qgcPal.buttonHighlight : qgcPal.button
border.color: qgcPal.text
border.width: 1
border.width: 0
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
QGCLabel {
......
custom-example/res/Custom/Widgets/CustomToolBarButton.qml
View file @ f51c9f4b
......@@ -22,7 +22,8 @@ Button {
background: Rectangle {
anchors.fill: parent
color: mouseArea.pressed ? qgcPal.buttonHighlight : Qt.rgba(0,0,0,0)
color: qgcPal.buttonHighlight
visible: (mouseArea.pressed || button.checked)
}
contentItem: Row {
......@@ -40,7 +41,7 @@ Button {
width: height
sourceSize.height: parent.height
fillMode: Image.PreserveAspectFit
color: (mouseArea.pressed || button.checked) ? qgcPal.primaryButton : qgcPal.buttonText
color: qgcPal.buttonText
source: button.icon.source
anchors.verticalCenter: parent.verticalCenter
}
......@@ -48,7 +49,7 @@ Button {
id: _label
visible: text !== ""
text: button.text
color: (mouseArea.pressed || button.checked) ? qgcPal.primaryButton : qgcPal.buttonText
color: qgcPal.buttonText
anchors.verticalCenter: parent.verticalCenter
}
}
......
custom-example/res/Custom/Widgets/CustomVehicleButton.qml
View file @ f51c9f4b
......@@ -47,7 +47,7 @@ Button {
background: Rectangle {
anchors.fill: parent
color: button.checked ? qgcPal.window : qgcPal.button
color: button.checked ? qgcPal.buttonHighlight : qgcPal.button
radius: ScreenTools.defaultFontPixelWidth * 0.5
}
......
custom-example/res/CustomCameraControl.qml
View file @ f51c9f4b
......@@ -405,16 +405,17 @@ Item {
width: _hasGimbal ? ScreenTools.defaultFontPixelWidth * 6 : 0
height: _hasGimbal ? (gimbalCol.height + (ScreenTools.defaultFontPixelHeight * 2)) : 0
visible: _hasGimbal
color: Qt.rgba(qgcPal.window.r, qgcPal.window.g, qgcPal.window.b, 0.5)
color: Qt.rgba(qgcPal.window.r, qgcPal.window.g, qgcPal.window.b, 0.75)
radius: ScreenTools.defaultFontPixelWidth * 0.5
anchors.verticalCenter: cameraRect.verticalCenter
Column {
id: gimbalCol
spacing: ScreenTools.defaultFontPixelHeight * 0.75
anchors.centerIn: parent
Image {
QGCColoredImage {
id: gimbalIcon
source: "/custom/img/gimbal_icon.svg"
color: qgcPal.text
width: ScreenTools.defaultFontPixelWidth * 2
height: width
smooth: true
......@@ -422,12 +423,12 @@ Item {
antialiasing: true
fillMode: Image.PreserveAspectFit
sourceSize.width: width
z: stickItem.z + 1
anchors.horizontalCenter: parent.horizontalCenter
}
Image {
id: pitchScale
height: cameraRect.height * 0.65
source: "/custom/img/gimbal_pitch.svg"
source: qgcPal.globalTheme === QGCPalette.Light ? "/custom/img/gimbal_pitch_indoors.svg" : "/custom/img/gimbal_pitch_outdoors.svg"
fillMode: Image.PreserveAspectFit
sourceSize.height: height
smooth: true
......@@ -463,8 +464,7 @@ Item {
}
QGCLabel {
id: gimbalLabel
text: _gimbalPitch ? pitchScale._pitch.toFixed(0) : 0
color: "#FFF"
color: qgcPal.text
font.pointSize: ScreenTools.smallFontPointSize
}
}
......
custom-example/res/Images/gimbal_pitch.svg
View file @ f51c9f4b
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 72 756" style="enable-background:new 0 0 72 756;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#9F0B10;stroke-width:3;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}
.st3{fill:none;stroke:#9F0B10;stroke-width:6;stroke-miterlimit:10;}
</style>
<line class="st0" x1="36" y1="0" x2="36" y2="108"/>
<line class="st1" x1="36" y1="108" x2="36" y2="756"/>
<line class="st2" x1="18" y1="108" x2="54" y2="108"/>
<line class="st2" x1="18" y1="324" x2="54" y2="324"/>
<line class="st2" x1="18" y1="540" x2="54" y2="540"/>
<line class="st2" x1="18" y1="753" x2="54" y2="753"/>
<line class="st3" x1="18" y1="3" x2="54" y2="3"/>
<line class="st1" x1="23.4" y1="216" x2="48.6" y2="216"/>
<line class="st1" x1="23.4" y1="432" x2="48.6" y2="432"/>
<line class="st1" x1="23.4" y1="648" x2="48.6" y2="648"/>
<svg width="72" height="756" viewBox="0 0 72 756" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36 0V108" stroke="#9F0B10" stroke-width="3" stroke-miterlimit="10"/>
<path d="M18 108H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 324H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 540H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 753H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 3H54" stroke="#9F0B10" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 216H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 432H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 648H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
</svg>
custom-example/res/Images/gimbal_pitch_indoors.svg 0 → 100644
View file @ f51c9f4b
<svg width="72" height="756" viewBox="0 0 72 756" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36 0V108" stroke="#C92A30" stroke-width="3" stroke-miterlimit="10"/>
<path d="M18 108H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 324H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 540H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 753H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 3H54" stroke="#9F0B10" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 216H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 432H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 648H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
</svg>
custom-example/res/Images/gimbal_pitch_outdoors.svg 0 → 100644
View file @ f51c9f4b
<svg width="72" height="756" viewBox="0 0 72 756" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36 0V108" stroke="#E03131" stroke-width="3" stroke-miterlimit="10"/>
<path d="M18 108H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 324H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 540H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 753H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 3H54" stroke="#E03131" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 216H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 432H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
<path d="M18 648H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
</svg>
custom-example/res/Images/gimbal_position.svg
View file @ f51c9f4b
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#48D6FF;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#Rectangle_1_);}
</style>
<title>gimbal position</title>
<desc>Created with Sketch.</desc>
<g id="Camera-focused">
<g transform="translate(-972.000000, -253.000000)">
<g id="middle" transform="translate(29.000000, 162.000000)">
<g id="right" transform="translate(841.000000, 0.000000)">
<g id="gimbal" transform="translate(102.000000, 53.000000)">
<g id="gimbal-position" transform="translate(0.000000, 38.000000)">
<ellipse id="Oval" class="st0" cx="36" cy="35.24" rx="9.683" ry="9.36"/>
<linearGradient id="Rectangle_1_" gradientUnits="userSpaceOnUse" x1="-295.5833" y1="277.1371" x2="-295.5833" y2="278.9163" gradientTransform="matrix(24 0 0 20.082 7130 -5563.6465)">
<stop offset="0" style="stop-color:#48D6FF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#48D6FF"/>
</linearGradient>
<polygon id="Rectangle" class="st1" points="14.4,1.4 57.6,1.4 45.387,37.548 26.585,37.434 "/>
</g>
</g>
</g>
</g>
</g>
</g>
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36 44.6C41.3478 44.6 45.683 40.4094 45.683 35.24C45.683 30.0706 41.3478 25.88 36 25.88C30.6522 25.88 26.317 30.0706 26.317 35.24C26.317 40.4094 30.6522 44.6 36 44.6Z" fill="#07916D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4 1.40002H57.6L45.387 37.548L26.585 37.434L14.4 1.40002Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="36.0008" y1="1.82077" x2="36.0008" y2="37.5507" gradientUnits="userSpaceOnUse">
<stop stop-color="#0CA678" stop-opacity="0"/>
<stop offset="1" stop-color="#07916D"/>
</linearGradient>
</defs>
</svg>
custom-example/res/MainToolbar/CustomMainToolBar.qml
View file @ f51c9f4b
......@@ -169,10 +169,10 @@ Item {
}
ColumnLayout {
id: buttons
spacing: 0
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
spacing: ScreenTools.defaultFontPixelHeight * 0.125
Rectangle {
Layout.alignment: Qt.AlignVCenter
width: parent.width
......@@ -181,6 +181,7 @@ Item {
}
CustomToolBarButton {
id: flyButton
spacing: 1
text: qsTr("Fly")
icon.source: "/qmlimages/PaperPlane.svg"
Layout.fillWidth: true
......@@ -254,10 +255,9 @@ Item {
ColumnLayout {
id: lowerButtons
anchors.bottom: parent.bottom
anchors.bottomMargin: ScreenTools.defaultFontPixelHeight * 0.125
anchors.left: parent.left
anchors.right: parent.right
spacing: ScreenTools.defaultFontPixelHeight * 0.125
spacing: 0
Rectangle {
Layout.alignment: Qt.AlignVCenter
width: parent.width
......
custom-example/res/MainToolbar/CustomMultiVehicleSelector.qml
View file @ f51c9f4b
......@@ -9,8 +9,8 @@
* @author Gus Grubba <gus@auterion.com>
*/
import QtQuick 2.11
import QtQuick.Controls 1.4
import QtQuick 2.11
import QtQuick.Controls 1.4
import QGroundControl 1.0
import QGroundControl.Controls 1.0
......
custom-example/src/CustomPlugin.cc
View file @ f51c9f4b
......@@ -283,25 +283,25 @@ CustomPlugin::paletteOverride(QString colorName, QGCPalette::PaletteColorInfo_t&
else if (colorName == QStringLiteral("buttonHighlight")) {
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor("#07916d");
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor("#495057");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#12b886");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#aeebd0");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor("#e4e4e4");
}
else if (colorName == QStringLiteral("buttonHighlightText")) {
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor("#ffffff");
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor("#777c89");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#ffffff");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#212529");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor("#2c2c2c");
}
else if (colorName == QStringLiteral("primaryButton")) {
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor("#12b886");
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor("#495057");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#33c494");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#aeebd0");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor("#585858");
}
else if (colorName == QStringLiteral("primaryButtonText")) {
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor("#ffffff");
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor("#ffffff");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#ffffff");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#212529");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor("#cad0d0");
}
else if (colorName == QStringLiteral("textField")) {
......@@ -373,7 +373,7 @@ CustomPlugin::paletteOverride(QString colorName, QGCPalette::PaletteColorInfo_t&
else if (colorName == QStringLiteral("alertBackground")) {
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor("#d4b106");
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor("#d4b106");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#b45d48");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#fffb8f");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor("#b45d48");
}
else if (colorName == QStringLiteral("alertBorder")) {
......@@ -385,7 +385,7 @@ CustomPlugin::paletteOverride(QString colorName, QGCPalette::PaletteColorInfo_t&
else if (colorName == QStringLiteral("alertText")) {
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor("#000000");
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor("#fff9ed");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#fff9ed");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#212529");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor("#fff9ed");
}
else if (colorName == QStringLiteral("missionItemEditor")) {
......@@ -397,7 +397,7 @@ CustomPlugin::paletteOverride(QString colorName, QGCPalette::PaletteColorInfo_t&
else if (colorName == QStringLiteral("hoverColor")) {
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor("#07916d");
colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor("#33c494");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#12b886");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor("#aeebd0");
colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor("#464f5a");
}
else if (colorName == QStringLiteral("mapWidgetBorderLight")) {
......
src/QmlControls/QGCComboBox.qml
View file @ f51c9f4b
......@@ -31,10 +31,29 @@ ComboBox {
border.color: "#999"
}
/*! Adding the Combobox list item to the theme. */
delegate: ItemDelegate {
width: control.width
contentItem: Text {
text: modelData
color: qgcPal.text
verticalAlignment: Text.AlignVCenter
}
background: Rectangle {
color: control.currentIndex === index ? qgcPal.buttonHighlight : qgcPal.button
}
highlighted: control.highlightedIndex === index
}
/*! This defines the label of the button. */
contentItem: Item {
implicitWidth: text.implicitWidth
implicitHeight: text.implicitHeight
QGCLabel {
id: text
anchors.verticalCenter: parent.verticalCenter
......
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