1
0
Fork 0

Style singleton for the QML UI

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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);

View file

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

View file

@ -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 {

View file

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

View file

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

View file

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

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

View file

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

View file

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

1
src/GUI/qmldir Normal file
View file

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

View file

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