fly/flightgear
1
0
Fork 0
Code Activity

Style singleton for the QML UI

Browse source
This commit is contained in:
James Turner 2017-12-05 20:53:47 +00:00
parent 31c781257b
commit 3ffed7d867
17 changed files with 112 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/GUI/AircraftCompactDelegate.qml
View file

@ -4,12 +4,11 @@ import FlightGear.Launcher 1.0
Item { Item {
id: root id: root
readonly property int margin: 8
signal select(var uri); signal select(var uri);
signal showDetails(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 implicitWidth: ListView.view.width
readonly property bool __isSelected: ListView.isCurrentItem readonly property bool __isSelected: ListView.isCurrentItem
@ -50,13 +49,13 @@ Item {
id: contentBox id: contentBox
anchors { anchors {
margins: root.margin margins: Style.margin
left: thumbnailBox.right left: thumbnailBox.right
right: parent.right right: parent.right
top: parent.top top: parent.top
} }
spacing: root.margin spacing: Style.margin
AircraftVariantChoice { AircraftVariantChoice {
id: titleBox id: titleBox
@ -98,14 +97,14 @@ Item {
Item { Item {
id: footer id: footer
height: 12 height: Style.margin
width: parent.width width: parent.width
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
Rectangle { Rectangle {
color: "#68A6E1" color: Style.frameColor
height: 1 height: 1
width: parent.width - 60 width: parent.width - Style.strutSize
anchors.centerIn: parent anchors.centerIn: parent
} }
} }

16
src/GUI/AircraftDetailsView.qml
View file

@ -1,12 +1,12 @@
import QtQuick 2.0 import QtQuick 2.0
import FlightGear.Launcher 1.0 import FlightGear.Launcher 1.0
import "."
Rectangle { Rectangle {
id: root id: root
property alias aircraftURI: aircraft.uri property alias aircraftURI: aircraft.uri
color: "white" color: "white"
readonly property int margin: 16
MouseArea { MouseArea {
// consume all mouse-clicks on the detail view // consume all mouse-clicks on the detail view
@ -19,8 +19,8 @@ Rectangle {
} }
Column { Column {
width: root.width - (margin * 2) width: root.width - (Style.margin * 2)
spacing: root.margin spacing: Style.margin
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
AircraftVariantChoice { AircraftVariantChoice {
@ -29,7 +29,7 @@ Rectangle {
popupFontPixelSize: 18 popupFontPixelSize: 18
anchors { anchors {
margins: 100 // space for back button margins: Style.strutSize * 2 // space for back button
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
@ -77,9 +77,9 @@ Rectangle {
Column { Column {
anchors.left: thumbnailBox.right anchors.left: thumbnailBox.right
anchors.leftMargin: root.margin anchors.leftMargin: Style.margin
anchors.right: parent.right anchors.right: parent.right
spacing: root.margin spacing: Style.margin
Text { Text {
id: aircraftDescription id: aircraftDescription
@ -126,8 +126,8 @@ Rectangle {
rows: 2 rows: 2
columns: 3 columns: 3
rowSpacing: root.margin rowSpacing: Style.margin
columnSpacing: root.margin columnSpacing: Style.margin
Text { Text {
id: ratingsLabel id: ratingsLabel

24
src/GUI/AircraftList.qml
View file

@ -1,21 +1,20 @@
import QtQuick 2.2 import QtQuick 2.2
import FlightGear.Launcher 1.0 as FG import FlightGear.Launcher 1.0 as FG
import "." // -> forces the qmldir to be loaded
Item Item
{ {
id: root id: root
readonly property int margin: 8
Rectangle Rectangle
{ {
id: tabBar id: tabBar
height: installedAircraftButton.height + margin height: installedAircraftButton.height + Style.margin
width: parent.width width: parent.width
Row { Row {
anchors.centerIn: parent anchors.centerIn: parent
spacing: root.margin spacing: Style.margin
TabButton { TabButton {
id: installedAircraftButton id: installedAircraftButton
@ -39,11 +38,10 @@ Item
SearchButton { SearchButton {
id: searchButton id: searchButton
width: 180
height: installedAircraftButton.height height: installedAircraftButton.height
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: margin anchors.rightMargin: Style.margin
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
onSearch: { onSearch: {
@ -55,9 +53,9 @@ Item
} }
Rectangle { Rectangle {
color: "#68A6E1" color: Style.frameColor
height: 1 height: 1
width: parent.width - 20 width: parent.width - Style.inset
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
} }
@ -77,7 +75,7 @@ Item
Component { Component {
id: ratingsHeader id: ratingsHeader
AircraftRatingsPanel { AircraftRatingsPanel {
width: aircraftList.width - 80 width: aircraftList.width - Style.strutSize * 2
x: (aircraftList.width - width) / 2 x: (aircraftList.width - width) / 2
} }
@ -86,7 +84,7 @@ Item
Component { Component {
id: noDefaultCatalogHeader id: noDefaultCatalogHeader
NoDefaultCatalogPanel { NoDefaultCatalogPanel {
width: aircraftList.width - 80 width: aircraftList.width - Style.strutSize * 2
x: (aircraftList.width - width) / 2 x: (aircraftList.width - width) / 2
} }
} }
@ -94,7 +92,7 @@ Item
Component { Component {
id: updateAllHeader id: updateAllHeader
UpdateAllPanel { UpdateAllPanel {
width: aircraftList.width - 80 width: aircraftList.width - Style.strutSize * 2
x: (aircraftList.width - width) / 2 x: (aircraftList.width - width) / 2
} }
} }
@ -213,8 +211,8 @@ Item
visible: false visible: false
Button { Button {
anchors { left: parent.left; top: parent.top; margins: root.margin } anchors { left: parent.left; top: parent.top; margins: Style.margin }
width: 60 width: Style.strutSize
id: backButton id: backButton
text: "< Back" text: "< Back"

13
src/GUI/AircraftRating.qml
View file

@ -1,4 +1,5 @@
import QtQuick 2.0 import QtQuick 2.0
import "."
Item { Item {
id: root id: root
@ -6,19 +7,17 @@ Item {
property string title: "" property string title: ""
property int value: 3 property int value: 3
implicitWidth: 160 implicitWidth: Style.strutSize * 3
implicitHeight: label.height implicitHeight: label.height
Text { Text {
id: label id: label
anchors.right: ratingRow.left anchors.right: ratingRow.left
anchors.rightMargin: 6 anchors.rightMargin: Style.margin
anchors.left: parent.left anchors.left: parent.left
horizontalAlignment: Text.AlignRight horizontalAlignment: Text.AlignRight
text: root.title + ":" text: root.title + ":"
} }
Row { Row {
@ -33,9 +32,9 @@ Item {
delegate: Rectangle { delegate: Rectangle {
color: ((model.index + 1) <= root.value) ? "#3f3f3f" : "#cfcfcf" color: ((model.index + 1) <= root.value) ? "#3f3f3f" : "#cfcfcf"
width: 12 width: radius * 2
height: 12 height: radius * 2
radius: 6 radius: Style.roundRadius
} }
} }
} }

11
src/GUI/AircraftRatingsPanel.qml
View file

@ -1,5 +1,6 @@
import QtQuick 2.2 import QtQuick 2.2
import FlightGear.Launcher 1.0 as FG import FlightGear.Launcher 1.0 as FG
import "."
ListHeaderBox ListHeaderBox
{ {
@ -19,7 +20,7 @@ ListHeaderBox
Text { Text {
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: root.margin anchors.rightMargin: Style.margin
text: qsTr("Adjust minimum ratings") text: qsTr("Adjust minimum ratings")
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -49,20 +50,20 @@ ListHeaderBox
visible: false visible: false
width: parent.width width: parent.width
y: parent.height - 1 y: parent.height - 1
height: childrenRect.height + 24 height: childrenRect.height + (Style.margin * 2)
border.width: 1 border.width: 1
border.color: "#9f9f9f" border.color: "#9f9f9f"
Column { Column {
y: 12 y: Style.margin
spacing: 24 spacing: (Style.margin * 2)
Text { Text {
text: qsTr("Aircraft are rated by the community based on four critiera, on a scale from " + 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 "+ "one to five. The ratings are designed to help make an informed guess how "+
"complete and functional an aircraft is.") "complete and functional an aircraft is.")
width: editRatingsPanel.width - 100 width: editRatingsPanel.width - Style.strutSize * 2
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
} }

7
src/GUI/Button.qml
View file

@ -1,4 +1,5 @@
import QtQuick 2.0 import QtQuick 2.0
import "."
Rectangle { Rectangle {
id: root id: root
@ -8,11 +9,11 @@ Rectangle {
signal clicked signal clicked
width: 120 width: Style.strutSize * 2
height: buttonText.implicitHeight + (radius * 2) height: buttonText.implicitHeight + (radius * 2)
radius: 6 radius: Style.roundRadius
color: mouse.containsMouse ? "#064989" : "#1b7ad3" color: mouse.containsMouse ? Style.activeColor : Style.themeColor
Text { Text {
id: buttonText id: buttonText

1
src/GUI/LauncherMainWindow.cxx
View file

@ -151,6 +151,7 @@ LauncherMainWindow::LauncherMainWindow() :
m_ui->aircraftList->setResizeMode(QQuickWidget::SizeRootObjectToView); m_ui->aircraftList->setResizeMode(QQuickWidget::SizeRootObjectToView);
m_ui->aircraftList->engine()->addImportPath("qrc:///");
m_ui->aircraftList->engine()->rootContext()->setContextProperty("_launcher", this); m_ui->aircraftList->engine()->rootContext()->setContextProperty("_launcher", this);
m_ui->aircraftList->engine()->setObjectOwnership(this, QQmlEngine::CppOwnership); m_ui->aircraftList->engine()->setObjectOwnership(this, QQmlEngine::CppOwnership);

13
src/GUI/ListHeaderBox.qml
View file

@ -1,11 +1,10 @@
import QtQuick 2.2 import QtQuick 2.2
import FlightGear.Launcher 1.0 as FG import FlightGear.Launcher 1.0 as FG
import "."
Item { Item {
id: root id: root
readonly property int margin: 8 height: visible ? contentBox.height + (Style.margin * 2) : 0
height: visible ? 48 : 0
z: 100 z: 100
property alias contents: contentBox.children property alias contents: contentBox.children
@ -13,13 +12,11 @@ Item {
Rectangle { Rectangle {
id: contentBox id: contentBox
width: parent.width width: parent.width
height: 40 height: Style.strutSize
y: 4 y: Style.margin
color: "white" color: "white"
border.width: 1 border.width: 1
border.color: "#9f9f9f" border.color: Style.minorFrameColor
} }

11
src/GUI/NoDefaultCatalogPanel.qml
View file

@ -3,18 +3,17 @@ import FlightGear.Launcher 1.0 as FG
Rectangle { Rectangle {
id: root id: root
property int margin: 6
height: noDefaultCatalogRow.childrenRect.height + margin * 2; height: noDefaultCatalogRow.childrenRect.height + (Style.margin * 2);
z: 100 z: 100
color: "white" color: "white"
border.width: 1 border.width: 1
border.color: "#9f9f9f" border.color: Style.minorFrameColor
Row { Row {
y: root.margin y: Style.margin
id: noDefaultCatalogRow id: noDefaultCatalogRow
spacing: root.margin spacing: Style.margin
Text { Text {
text: "The official FlightGear aircraft hangar is not added, so many standard " 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." + "this message. The offical hangar can always be restored from the 'Add-Ons' page."
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.verticalCenter: parent.verticalCenter 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 { Button {

3
src/GUI/RatingSlider.qml
View file

@ -1,4 +1,5 @@
import QtQuick 2.0 import QtQuick 2.0
import "."
Slider { Slider {
property var ratings: [] property var ratings: []
@ -8,7 +9,7 @@ Slider {
max: 5 max: 5
value: ratings[ratingIndex] value: ratings[ratingIndex]
width: editRatingsPanel.width - 30 width: editRatingsPanel.width - Style.strutSize
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
sliderWidth: width / 2 sliderWidth: width / 2

12
src/GUI/SearchButton.qml
View file

@ -1,4 +1,5 @@
import QtQuick 2.2 import QtQuick 2.2
import "."
Rectangle { Rectangle {
id: root id: root
@ -8,20 +9,21 @@ Rectangle {
signal search(string term) signal search(string term)
radius: 6 radius: Style.roundRadius
width: Style.strutSize * 3
border.width: 1 border.width: 1
border.color: (mouse.containsMouse | active) ? "#1b7ad3" : "#cfcfcf" border.color: (mouse.containsMouse | active) ? Style.themeColor: Style.minorFrameColor
clip: true clip: true
TextInput { TextInput {
id: buttonText id: buttonText
anchors.left: parent.left anchors.left: parent.left
anchors.right: searchIcon.left anchors.right: searchIcon.left
anchors.margins: 4 anchors.margins: Style.margin
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: "#3f3f3f" color: Style.baseTextColor
onTextChanged: { onTextChanged: {
searchTimer.restart(); searchTimer.restart();
@ -39,7 +41,7 @@ Rectangle {
id: searchIcon id: searchIcon
source: "qrc:///search-icon-small" source: "qrc:///search-icon-small"
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 4 anchors.rightMargin: Style.margin
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }

17
src/GUI/Slider.qml
View file

@ -1,4 +1,5 @@
import QtQuick 2.0 import QtQuick 2.0
import "."
Item { Item {
property alias label: labelText.text property alias label: labelText.text
@ -16,25 +17,25 @@ Item {
Text { Text {
id: labelText id: labelText
width: parent.width - (emptyTrack.width + 8) width: parent.width - (emptyTrack.width + Style.margin)
horizontalAlignment: Text.AlignRight horizontalAlignment: Text.AlignRight
} }
Rectangle { Rectangle {
id: emptyTrack 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.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
height: 2 height: 2
color: "#9f9f9f" color: Style.inactiveThemeColor
Rectangle { Rectangle {
id: fullTrack id: fullTrack
height: parent.height height: parent.height
color:"#68A6E1" color: Style.frameColor
width: parent.width * __percentFull width: parent.width * __percentFull
} }
@ -58,10 +59,10 @@ Item {
Rectangle { Rectangle {
id: thumb id: thumb
width: 12 width: radius * 2
height: 12 height: radius * 2
radius: 6 radius: Style.roundRadius
color: "#68A6E1" color: Style.themeColor
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
x: parent.width * __percentFull x: parent.width * __percentFull

22
src/GUI/Style.qml Normal file
View file

@ -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"
}

23
src/GUI/ToggleSwitch.qml
View file

@ -1,4 +1,5 @@
import QtQuick 2.0 import QtQuick 2.0
import "."
Item { Item {
property bool checked: false property bool checked: false
@ -10,26 +11,26 @@ Item {
Rectangle { Rectangle {
id: track id: track
width: height * 2 width: height * 2
height: 12 height: radius * 2
radius: 6 radius: Style.roundRadius
color: checked ? "#68A6E1" :"#9f9f9f" color: checked ? Style.frameColor : Style.minorFrameColor
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 8 anchors.leftMargin: Style.margin
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
Rectangle { Rectangle {
id: thumb id: thumb
width: 18 width: radius * 2
height: 18 height: radius * 2
radius: 9 radius: Style.roundRadius * 1.5
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: checked ? "#68A6E1" : "white" color: checked ? Style.themeColor : "white"
border.width: 1 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 { Behavior on x {
NumberAnimation { NumberAnimation {
@ -42,7 +43,7 @@ Item {
Text { Text {
id: label id: label
anchors.left: track.right anchors.left: track.right
anchors.leftMargin: 8 anchors.leftMargin: Style.margin
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }

8
src/GUI/UpdateAllPanel.qml
View file

@ -1,9 +1,9 @@
import QtQuick 2.2 import QtQuick 2.2
import FlightGear.Launcher 1.0 as FG import FlightGear.Launcher 1.0 as FG
import "."
ListHeaderBox { ListHeaderBox {
id: root id: root
property int margin: 6
contents: [ contents: [
Text { Text {
@ -11,7 +11,7 @@ ListHeaderBox {
anchors { anchors {
left: parent.left left: parent.left
right: updateAllButton.left right: updateAllButton.left
margins: root.margin margins: Style.margin
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
@ -25,7 +25,7 @@ ListHeaderBox {
text: qsTr("Update all") text: qsTr("Update all")
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: notNowButton.left anchors.right: notNowButton.left
anchors.rightMargin: root.margin anchors.rightMargin: Style.margin
onClicked: { onClicked: {
_launcher.requestUpdateAllAircraft(); _launcher.requestUpdateAllAircraft();
@ -38,7 +38,7 @@ ListHeaderBox {
text: qsTr("Not now") text: qsTr("Not now")
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: root.margin anchors.rightMargin: Style.margin
onClicked: { onClicked: {
_launcher.baseAircraftModel.showUpdateAll = false _launcher.baseAircraftModel.showUpdateAll = false

1
src/GUI/qmldir Normal file
View file

@ -0,0 +1 @@
singleton Style 1.0 Style.qml

2
src/GUI/resources.qrc
View file

@ -53,6 +53,8 @@
<file>NoDefaultCatalogPanel.qml</file> <file>NoDefaultCatalogPanel.qml</file>
<file>ListHeaderBox.qml</file> <file>ListHeaderBox.qml</file>
<file>UpdateAllPanel.qml</file> <file>UpdateAllPanel.qml</file>
<file>Style.qml</file>
<file>qmldir</file>
</qresource> </qresource>
<qresource prefix="/preview"> <qresource prefix="/preview">
<file alias="close-icon">preview-close.png</file> <file alias="close-icon">preview-close.png</file>