From 3ffed7d86745681b7f274f1ca88acfde0a0166e4 Mon Sep 17 00:00:00 2001 From: James Turner Date: Tue, 5 Dec 2017 20:53:47 +0000 Subject: [PATCH] Style singleton for the QML UI --- src/GUI/AircraftCompactDelegate.qml | 15 +++++++-------- src/GUI/AircraftDetailsView.qml | 16 ++++++++-------- src/GUI/AircraftList.qml | 24 +++++++++++------------- src/GUI/AircraftRating.qml | 13 ++++++------- src/GUI/AircraftRatingsPanel.qml | 11 ++++++----- src/GUI/Button.qml | 7 ++++--- src/GUI/LauncherMainWindow.cxx | 1 + src/GUI/ListHeaderBox.qml | 13 +++++-------- src/GUI/NoDefaultCatalogPanel.qml | 11 +++++------ src/GUI/RatingSlider.qml | 3 ++- src/GUI/SearchButton.qml | 12 +++++++----- src/GUI/Slider.qml | 17 +++++++++-------- src/GUI/Style.qml | 22 ++++++++++++++++++++++ src/GUI/ToggleSwitch.qml | 23 ++++++++++++----------- src/GUI/UpdateAllPanel.qml | 8 ++++---- src/GUI/qmldir | 1 + src/GUI/resources.qrc | 2 ++ 17 files changed, 112 insertions(+), 87 deletions(-) create mode 100644 src/GUI/Style.qml create mode 100644 src/GUI/qmldir diff --git a/src/GUI/AircraftCompactDelegate.qml b/src/GUI/AircraftCompactDelegate.qml index 794c4a535..058f044c9 100644 --- a/src/GUI/AircraftCompactDelegate.qml +++ b/src/GUI/AircraftCompactDelegate.qml @@ -4,12 +4,11 @@ import FlightGear.Launcher 1.0 Item { id: root - readonly property int margin: 8 - signal select(var uri); signal showDetails(var uri) - implicitHeight: Math.max(contentBox.childrenRect.height, thumbnailBox.height) + footer.height + implicitHeight: Math.max(contentBox.childrenRect.height, thumbnailBox.height) + + footer.height implicitWidth: ListView.view.width readonly property bool __isSelected: ListView.isCurrentItem @@ -50,13 +49,13 @@ Item { id: contentBox anchors { - margins: root.margin + margins: Style.margin left: thumbnailBox.right right: parent.right top: parent.top } - spacing: root.margin + spacing: Style.margin AircraftVariantChoice { id: titleBox @@ -98,14 +97,14 @@ Item { Item { id: footer - height: 12 + height: Style.margin width: parent.width anchors.bottom: parent.bottom Rectangle { - color: "#68A6E1" + color: Style.frameColor height: 1 - width: parent.width - 60 + width: parent.width - Style.strutSize anchors.centerIn: parent } } diff --git a/src/GUI/AircraftDetailsView.qml b/src/GUI/AircraftDetailsView.qml index 5790dfeab..b24ac618c 100644 --- a/src/GUI/AircraftDetailsView.qml +++ b/src/GUI/AircraftDetailsView.qml @@ -1,12 +1,12 @@ import QtQuick 2.0 import FlightGear.Launcher 1.0 +import "." Rectangle { id: root property alias aircraftURI: aircraft.uri color: "white" - readonly property int margin: 16 MouseArea { // consume all mouse-clicks on the detail view @@ -19,8 +19,8 @@ Rectangle { } Column { - width: root.width - (margin * 2) - spacing: root.margin + width: root.width - (Style.margin * 2) + spacing: Style.margin anchors.horizontalCenter: parent.horizontalCenter AircraftVariantChoice { @@ -29,7 +29,7 @@ Rectangle { popupFontPixelSize: 18 anchors { - margins: 100 // space for back button + margins: Style.strutSize * 2 // space for back button left: parent.left right: parent.right } @@ -77,9 +77,9 @@ Rectangle { Column { anchors.left: thumbnailBox.right - anchors.leftMargin: root.margin + anchors.leftMargin: Style.margin anchors.right: parent.right - spacing: root.margin + spacing: Style.margin Text { id: aircraftDescription @@ -126,8 +126,8 @@ Rectangle { rows: 2 columns: 3 - rowSpacing: root.margin - columnSpacing: root.margin + rowSpacing: Style.margin + columnSpacing: Style.margin Text { id: ratingsLabel diff --git a/src/GUI/AircraftList.qml b/src/GUI/AircraftList.qml index ea500f050..3918ec9c7 100644 --- a/src/GUI/AircraftList.qml +++ b/src/GUI/AircraftList.qml @@ -1,21 +1,20 @@ import QtQuick 2.2 import FlightGear.Launcher 1.0 as FG +import "." // -> forces the qmldir to be loaded Item { id: root - readonly property int margin: 8 - Rectangle { id: tabBar - height: installedAircraftButton.height + margin + height: installedAircraftButton.height + Style.margin width: parent.width Row { anchors.centerIn: parent - spacing: root.margin + spacing: Style.margin TabButton { id: installedAircraftButton @@ -39,11 +38,10 @@ Item SearchButton { id: searchButton - width: 180 height: installedAircraftButton.height anchors.right: parent.right - anchors.rightMargin: margin + anchors.rightMargin: Style.margin anchors.verticalCenter: parent.verticalCenter onSearch: { @@ -55,9 +53,9 @@ Item } Rectangle { - color: "#68A6E1" + color: Style.frameColor height: 1 - width: parent.width - 20 + width: parent.width - Style.inset anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom } @@ -77,7 +75,7 @@ Item Component { id: ratingsHeader AircraftRatingsPanel { - width: aircraftList.width - 80 + width: aircraftList.width - Style.strutSize * 2 x: (aircraftList.width - width) / 2 } @@ -86,7 +84,7 @@ Item Component { id: noDefaultCatalogHeader NoDefaultCatalogPanel { - width: aircraftList.width - 80 + width: aircraftList.width - Style.strutSize * 2 x: (aircraftList.width - width) / 2 } } @@ -94,7 +92,7 @@ Item Component { id: updateAllHeader UpdateAllPanel { - width: aircraftList.width - 80 + width: aircraftList.width - Style.strutSize * 2 x: (aircraftList.width - width) / 2 } } @@ -213,8 +211,8 @@ Item visible: false Button { - anchors { left: parent.left; top: parent.top; margins: root.margin } - width: 60 + anchors { left: parent.left; top: parent.top; margins: Style.margin } + width: Style.strutSize id: backButton text: "< Back" diff --git a/src/GUI/AircraftRating.qml b/src/GUI/AircraftRating.qml index 6d75b4dea..e04487d68 100644 --- a/src/GUI/AircraftRating.qml +++ b/src/GUI/AircraftRating.qml @@ -1,4 +1,5 @@ import QtQuick 2.0 +import "." Item { id: root @@ -6,19 +7,17 @@ Item { property string title: "" property int value: 3 - implicitWidth: 160 + implicitWidth: Style.strutSize * 3 implicitHeight: label.height Text { id: label anchors.right: ratingRow.left - anchors.rightMargin: 6 + anchors.rightMargin: Style.margin anchors.left: parent.left horizontalAlignment: Text.AlignRight text: root.title + ":" - - } Row { @@ -33,9 +32,9 @@ Item { delegate: Rectangle { color: ((model.index + 1) <= root.value) ? "#3f3f3f" : "#cfcfcf" - width: 12 - height: 12 - radius: 6 + width: radius * 2 + height: radius * 2 + radius: Style.roundRadius } } } diff --git a/src/GUI/AircraftRatingsPanel.qml b/src/GUI/AircraftRatingsPanel.qml index f7ac1af6a..e87788007 100644 --- a/src/GUI/AircraftRatingsPanel.qml +++ b/src/GUI/AircraftRatingsPanel.qml @@ -1,5 +1,6 @@ import QtQuick 2.2 import FlightGear.Launcher 1.0 as FG +import "." ListHeaderBox { @@ -19,7 +20,7 @@ ListHeaderBox Text { anchors.right: parent.right - anchors.rightMargin: root.margin + anchors.rightMargin: Style.margin text: qsTr("Adjust minimum ratings") anchors.verticalCenter: parent.verticalCenter @@ -49,20 +50,20 @@ ListHeaderBox visible: false width: parent.width y: parent.height - 1 - height: childrenRect.height + 24 + height: childrenRect.height + (Style.margin * 2) border.width: 1 border.color: "#9f9f9f" Column { - y: 12 - spacing: 24 + y: Style.margin + spacing: (Style.margin * 2) Text { text: qsTr("Aircraft are rated by the community based on four critiera, on a scale from " + "one to five. The ratings are designed to help make an informed guess how "+ "complete and functional an aircraft is.") - width: editRatingsPanel.width - 100 + width: editRatingsPanel.width - Style.strutSize * 2 wrapMode: Text.WordWrap anchors.horizontalCenter: parent.horizontalCenter } diff --git a/src/GUI/Button.qml b/src/GUI/Button.qml index 43f6e0322..4733c7434 100644 --- a/src/GUI/Button.qml +++ b/src/GUI/Button.qml @@ -1,4 +1,5 @@ import QtQuick 2.0 +import "." Rectangle { id: root @@ -8,11 +9,11 @@ Rectangle { signal clicked - width: 120 + width: Style.strutSize * 2 height: buttonText.implicitHeight + (radius * 2) - radius: 6 + radius: Style.roundRadius - color: mouse.containsMouse ? "#064989" : "#1b7ad3" + color: mouse.containsMouse ? Style.activeColor : Style.themeColor Text { id: buttonText diff --git a/src/GUI/LauncherMainWindow.cxx b/src/GUI/LauncherMainWindow.cxx index 16aa724ee..c2b9a7a8c 100644 --- a/src/GUI/LauncherMainWindow.cxx +++ b/src/GUI/LauncherMainWindow.cxx @@ -151,6 +151,7 @@ LauncherMainWindow::LauncherMainWindow() : m_ui->aircraftList->setResizeMode(QQuickWidget::SizeRootObjectToView); + m_ui->aircraftList->engine()->addImportPath("qrc:///"); m_ui->aircraftList->engine()->rootContext()->setContextProperty("_launcher", this); m_ui->aircraftList->engine()->setObjectOwnership(this, QQmlEngine::CppOwnership); diff --git a/src/GUI/ListHeaderBox.qml b/src/GUI/ListHeaderBox.qml index bb8ae3d2e..32159a3b2 100644 --- a/src/GUI/ListHeaderBox.qml +++ b/src/GUI/ListHeaderBox.qml @@ -1,11 +1,10 @@ import QtQuick 2.2 import FlightGear.Launcher 1.0 as FG +import "." Item { id: root - readonly property int margin: 8 - - height: visible ? 48 : 0 + height: visible ? contentBox.height + (Style.margin * 2) : 0 z: 100 property alias contents: contentBox.children @@ -13,13 +12,11 @@ Item { Rectangle { id: contentBox width: parent.width - height: 40 - y: 4 + height: Style.strutSize + y: Style.margin color: "white" border.width: 1 - border.color: "#9f9f9f" - - + border.color: Style.minorFrameColor } diff --git a/src/GUI/NoDefaultCatalogPanel.qml b/src/GUI/NoDefaultCatalogPanel.qml index 6c9dc42a3..cffe7cf0a 100644 --- a/src/GUI/NoDefaultCatalogPanel.qml +++ b/src/GUI/NoDefaultCatalogPanel.qml @@ -3,18 +3,17 @@ import FlightGear.Launcher 1.0 as FG Rectangle { id: root - property int margin: 6 - height: noDefaultCatalogRow.childrenRect.height + margin * 2; + height: noDefaultCatalogRow.childrenRect.height + (Style.margin * 2); z: 100 color: "white" border.width: 1 - border.color: "#9f9f9f" + border.color: Style.minorFrameColor Row { - y: root.margin + y: Style.margin id: noDefaultCatalogRow - spacing: root.margin + spacing: Style.margin Text { text: "The official FlightGear aircraft hangar is not added, so many standard " @@ -22,7 +21,7 @@ Rectangle { + "this message. The offical hangar can always be restored from the 'Add-Ons' page." wrapMode: Text.WordWrap anchors.verticalCenter: parent.verticalCenter - width: root.width - (addDefaultButton.width + hideButton.width + root.margin * 3) + width: root.width - (addDefaultButton.width + hideButton.width + Style.margin * 3) } Button { diff --git a/src/GUI/RatingSlider.qml b/src/GUI/RatingSlider.qml index c964e1ab3..deadcd0e5 100644 --- a/src/GUI/RatingSlider.qml +++ b/src/GUI/RatingSlider.qml @@ -1,4 +1,5 @@ import QtQuick 2.0 +import "." Slider { property var ratings: [] @@ -8,7 +9,7 @@ Slider { max: 5 value: ratings[ratingIndex] - width: editRatingsPanel.width - 30 + width: editRatingsPanel.width - Style.strutSize anchors.horizontalCenter: parent.horizontalCenter sliderWidth: width / 2 diff --git a/src/GUI/SearchButton.qml b/src/GUI/SearchButton.qml index 96b5e1f8d..4f3e0ae6e 100644 --- a/src/GUI/SearchButton.qml +++ b/src/GUI/SearchButton.qml @@ -1,4 +1,5 @@ import QtQuick 2.2 +import "." Rectangle { id: root @@ -8,20 +9,21 @@ Rectangle { signal search(string term) - radius: 6 + radius: Style.roundRadius + width: Style.strutSize * 3 border.width: 1 - border.color: (mouse.containsMouse | active) ? "#1b7ad3" : "#cfcfcf" + border.color: (mouse.containsMouse | active) ? Style.themeColor: Style.minorFrameColor clip: true TextInput { id: buttonText anchors.left: parent.left anchors.right: searchIcon.left - anchors.margins: 4 + anchors.margins: Style.margin anchors.verticalCenter: parent.verticalCenter - color: "#3f3f3f" + color: Style.baseTextColor onTextChanged: { searchTimer.restart(); @@ -39,7 +41,7 @@ Rectangle { id: searchIcon source: "qrc:///search-icon-small" anchors.right: parent.right - anchors.rightMargin: 4 + anchors.rightMargin: Style.margin anchors.verticalCenter: parent.verticalCenter } diff --git a/src/GUI/Slider.qml b/src/GUI/Slider.qml index 6ef418aa3..f2a8abf4b 100644 --- a/src/GUI/Slider.qml +++ b/src/GUI/Slider.qml @@ -1,4 +1,5 @@ import QtQuick 2.0 +import "." Item { property alias label: labelText.text @@ -16,25 +17,25 @@ Item { Text { id: labelText - width: parent.width - (emptyTrack.width + 8) + width: parent.width - (emptyTrack.width + Style.margin) horizontalAlignment: Text.AlignRight } Rectangle { id: emptyTrack - width: sliderWidth > 0 ? sliderWidth : parent.width - (labelText.implicitWidth + 8) + width: sliderWidth > 0 ? sliderWidth : parent.width - (labelText.implicitWidth + Style.margin) anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter height: 2 - color: "#9f9f9f" + color: Style.inactiveThemeColor Rectangle { id: fullTrack height: parent.height - color:"#68A6E1" + color: Style.frameColor width: parent.width * __percentFull } @@ -58,10 +59,10 @@ Item { Rectangle { id: thumb - width: 12 - height: 12 - radius: 6 - color: "#68A6E1" + width: radius * 2 + height: radius * 2 + radius: Style.roundRadius + color: Style.themeColor anchors.verticalCenter: parent.verticalCenter x: parent.width * __percentFull diff --git a/src/GUI/Style.qml b/src/GUI/Style.qml new file mode 100644 index 000000000..26f117031 --- /dev/null +++ b/src/GUI/Style.qml @@ -0,0 +1,22 @@ +pragma Singleton +import QtQml 2.0 + +QtObject +{ + readonly property int margin: 8 + readonly property int roundRadius: 6 + + readonly property int inset: 20 + readonly property int strutSize: 50 + + readonly property string frameColor: "#68A6E1" + readonly property string minorFrameColor: "#9f9f9f" + + readonly property string themeColor: "#1b7ad3" + readonly property string activeColor: Qt.darker(themeColor) + + readonly property string inactiveThemeColor: "#9f9f9f" + + readonly property string baseTextColor: "#3f3f3f" +} + diff --git a/src/GUI/ToggleSwitch.qml b/src/GUI/ToggleSwitch.qml index 9df8345fd..e47ff317a 100644 --- a/src/GUI/ToggleSwitch.qml +++ b/src/GUI/ToggleSwitch.qml @@ -1,4 +1,5 @@ import QtQuick 2.0 +import "." Item { property bool checked: false @@ -10,26 +11,26 @@ Item { Rectangle { id: track width: height * 2 - height: 12 - radius: 6 + height: radius * 2 + radius: Style.roundRadius - color: checked ? "#68A6E1" :"#9f9f9f" + color: checked ? Style.frameColor : Style.minorFrameColor anchors.left: parent.left - anchors.leftMargin: 8 + anchors.leftMargin: Style.margin anchors.verticalCenter: parent.verticalCenter Rectangle { id: thumb - width: 18 - height: 18 - radius: 9 + width: radius * 2 + height: radius * 2 + radius: Style.roundRadius * 1.5 anchors.verticalCenter: parent.verticalCenter - color: checked ? "#68A6E1" : "white" + color: checked ? Style.themeColor : "white" border.width: 1 - border.color: "#9f9f9f" + border.color: Style.inactiveThemeColor - x: checked ? parent.width - (6 + radius) : -3 + x: checked ? parent.width - (track.radius + radius) : (track.radius - radius) Behavior on x { NumberAnimation { @@ -42,7 +43,7 @@ Item { Text { id: label anchors.left: track.right - anchors.leftMargin: 8 + anchors.leftMargin: Style.margin anchors.verticalCenter: parent.verticalCenter } diff --git a/src/GUI/UpdateAllPanel.qml b/src/GUI/UpdateAllPanel.qml index c85530170..191ab9430 100644 --- a/src/GUI/UpdateAllPanel.qml +++ b/src/GUI/UpdateAllPanel.qml @@ -1,9 +1,9 @@ import QtQuick 2.2 import FlightGear.Launcher 1.0 as FG +import "." ListHeaderBox { id: root - property int margin: 6 contents: [ Text { @@ -11,7 +11,7 @@ ListHeaderBox { anchors { left: parent.left right: updateAllButton.left - margins: root.margin + margins: Style.margin verticalCenter: parent.verticalCenter } @@ -25,7 +25,7 @@ ListHeaderBox { text: qsTr("Update all") anchors.verticalCenter: parent.verticalCenter anchors.right: notNowButton.left - anchors.rightMargin: root.margin + anchors.rightMargin: Style.margin onClicked: { _launcher.requestUpdateAllAircraft(); @@ -38,7 +38,7 @@ ListHeaderBox { text: qsTr("Not now") anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: root.margin + anchors.rightMargin: Style.margin onClicked: { _launcher.baseAircraftModel.showUpdateAll = false diff --git a/src/GUI/qmldir b/src/GUI/qmldir new file mode 100644 index 000000000..819842274 --- /dev/null +++ b/src/GUI/qmldir @@ -0,0 +1 @@ +singleton Style 1.0 Style.qml diff --git a/src/GUI/resources.qrc b/src/GUI/resources.qrc index a9a00566c..63c068d55 100644 --- a/src/GUI/resources.qrc +++ b/src/GUI/resources.qrc @@ -53,6 +53,8 @@ NoDefaultCatalogPanel.qml ListHeaderBox.qml UpdateAllPanel.qml + Style.qml + qmldir preview-close.png