fly/flightgear
1
0
Fork 0
Code Activity

Launcher: styling improvements everywhere

Browse source 
Use a standard text component to ensure the base font size can be
controlled centrally.
This commit is contained in:
James Turner 2018-06-21 22:54:21 +01:00
parent 225a128540
commit 01f05b5383
17 changed files with 78 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/GUI/qml/AircraftCompactDelegate.qml
View file

@ -90,12 +90,11 @@ Item {
}
}
Text {
StyledText {
id: description
width: parent.width
text: root.__showAlternateText ? root.alternateText()
: model.description
font.pixelSize: Style.baseFontPixelSize
maximumLineCount: 3
wrapMode: Text.WordWrap
elide: Text.ElideRight

12
src/GUI/qml/AircraftDetailsView.qml
View file

@ -94,23 +94,21 @@ Rectangle {
anchors.right: parent.right
spacing: Style.margin
Text {
StyledText {
id: aircraftDescription
text: aircraft.description
width: parent.width
wrapMode: Text.WordWrap
visible: aircraft.description != ""
font.pixelSize: Style.baseFontPixelSize
}
Text {
StyledText {
id: aircraftAuthors
text: qsTr("by %1").arg(aircraft.authors)
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
wrapMode: Text.WordWrap
visible: (aircraft.authors != undefined)
font.pixelSize: Style.baseFontPixelSize
}
}
@ -143,10 +141,9 @@ Rectangle {
rowSpacing: Style.margin
columnSpacing: Style.margin
Text {
StyledText {
id: ratingsLabel
text: qsTr("Ratings:")
font.pixelSize: Style.baseFontPixelSize
}
@ -188,12 +185,11 @@ Rectangle {
}
}
Text {
StyledText {
text: qsTr("Local file location: %1").arg(aircraft.pathOnDisk);
width: parent.width
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
visible: aircraft.pathOnDisk != undefined
font.pixelSize: Style.baseFontPixelSize
}
} // main layout column

10
src/GUI/qml/AircraftDownloadPanel.qml
View file

@ -138,13 +138,12 @@ Item {
}
}
Text {
StyledText {
id: sizeText
anchors.left: button.right
anchors.leftMargin: 6
anchors.verticalCenter: button.verticalCenter
text: "Size: " + (root.packageSize / 0x100000).toFixed(1) + "MB"
font.pixelSize: Style.baseFontPixelSize
}
Column {
@ -161,7 +160,7 @@ Item {
width: parent.width
visible: false // hidden by default
border.color: "#cfcfcf"
border.color: Style.minorFrameColor
border.width: 2
Rectangle {
@ -171,7 +170,7 @@ Item {
height: 6
anchors.verticalCenter: parent.verticalCenter
color: "#1b7ad3"
color: Style.themeColor
readonly property real fraction: root.downloadedBytes / root.packageSize
readonly property real maxWidth: parent.width - 10
@ -182,12 +181,11 @@ Item {
}
// show download progress textually, or error message if a problem occurs
Text {
StyledText {
id: statusText
visible: false
text: (compact ? "" : "Downloaded ") + (root.downloadedBytes / 0x100000).toFixed(1) +
"MB of " + (root.packageSize / 0x100000).toFixed(1) + "MB";
font.pixelSize: Style.baseFontPixelSize
}
} // item container for progress bar and text
}

3
src/GUI/qml/AircraftRating.qml
View file

@ -10,7 +10,7 @@ Item {
implicitWidth: Style.strutSize * 3
implicitHeight: label.height
Text {
StyledText {
id: label
anchors.right: ratingRow.left
anchors.rightMargin: Style.margin
@ -18,7 +18,6 @@ Item {
horizontalAlignment: Text.AlignRight
text: root.title + ":"
font.pixelSize: Style.baseFontPixelSize
}
Row {

6
src/GUI/qml/AircraftVariantChoice.qml
View file

@ -11,7 +11,7 @@ Rectangle {
implicitHeight: title.implicitHeight
radius: 4
border.color: "#68A6E1"
border.color: Style.frameColor
border.width: headingMouseArea.containsMouse ? 1 : 0
color: headingMouseArea.containsMouse ? "#7fffffff" : "transparent"
@ -44,7 +44,7 @@ Rectangle {
elide: Text.ElideRight
maximumLineCount: 1
color: "black"
color: headingMouseArea.containsMouse ? Style.themeColor : Style.baseTextColor
}
@ -117,7 +117,7 @@ Rectangle {
// allow override the size in case the title size is enormous
font.pixelSize: (popupFontPixelSize > 0) ? popupFontPixelSize : title.font.pixelSize
color: choiceArea.containsMouse ? "#68A6E1" : "black"
color: choiceArea.containsMouse ? Style.themeColor : Style.baseTextColor
anchors {
left: parent.left
right: parent.right

19
src/GUI/qml/DoubleSpinbox.qml
View file

@ -54,12 +54,12 @@ FocusScope {
text: root.max // use maximum value
}
Text {
StyledText {
id: label
text: root.label
anchors.verticalCenter: editFrame.verticalCenter
color: editFrame.activeFocus ? Style.themeColor :
(root.enabled ? "black" : Style.inactiveThemeColor)
hover: editFrame.activeFocus
enabled: root.enabled
}
MouseArea {
@ -109,14 +109,13 @@ FocusScope {
height: edit.implicitHeight + Style.margin
width: edit.width + prefix.width + suffix.width + upDownArea.width + Style.margin * 2
radius: Style.roundRadius
border.color: edit.activeFocus ? Style.frameColor : Style.minorFrameColor
border.color: root.enable ? (edit.activeFocus ? Style.frameColor : Style.minorFrameColor) : Style.disabledMinorFrameColor
border.width: 1
Text {
StyledText {
id: prefix
visible: root.prefix !== ""
color: Style.baseTextColor
enabled: root.enabled
anchors.baseline: edit.baseline
anchors.left: parent.left
anchors.margins: Style.margin
@ -132,7 +131,7 @@ FocusScope {
horizontalAlignment: Text.AlignRight
focus: true
color: enabled && activeFocus ? Style.themeColor : Style.baseTextColor
color: enabled ? (activeFocus ? Style.themeColor : Style.baseTextColor) : Style.disabledTextColor
validator: DoubleValidator {
id: validator
@ -162,10 +161,10 @@ FocusScope {
}
}
Text {
StyledText {
id: suffix
visible: root.suffix !== ""
color: Style.baseTextColor
enabled: root.enabled
anchors.baseline: edit.baseline
anchors.right: upDownArea.left
}

19
src/GUI/qml/IntegerSpinbox.qml
View file

@ -52,12 +52,12 @@ FocusScope {
text: root.max // use maximum value
}
Text {
StyledText {
id: label
text: root.label
anchors.verticalCenter: editFrame.verticalCenter
color: editFrame.activeFocus ? Style.themeColor :
(root.enabled ? "black" : Style.inactiveThemeColor)
hover: editFrame.activeFocus
enabled: root.enabled
}
MouseArea {
@ -107,14 +107,13 @@ FocusScope {
height: edit.implicitHeight + Style.margin
width: edit.width + prefix.width + suffix.width + upDownArea.width + Style.margin * 2
radius: Style.roundRadius
border.color: edit.activeFocus ? Style.frameColor : Style.minorFrameColor
border.color: root.enable ? (edit.activeFocus ? Style.frameColor : Style.minorFrameColor) : Style.disabledMinorFrameColor
border.width: 1
Text {
StyledText {
id: prefix
visible: root.prefix !== ""
color: Style.baseTextColor
enabled: root.enabled
anchors.baseline: edit.baseline
anchors.left: parent.left
anchors.margins: Style.margin
@ -130,7 +129,7 @@ FocusScope {
horizontalAlignment: Text.AlignRight
focus: true
color: enabled && activeFocus ? Style.themeColor : Style.baseTextColor
color: enabled ? (activeFocus ? Style.themeColor : Style.baseTextColor) : Style.disabledTextColor
validator: IntValidator {
id: validator
@ -160,10 +159,10 @@ FocusScope {
}
}
Text {
StyledText {
id: suffix
visible: root.suffix !== ""
color: Style.baseTextColor
enabled: root.enabled
anchors.baseline: edit.baseline
anchors.right: upDownArea.left
}

14
src/GUI/qml/LineEdit.qml
View file

@ -23,12 +23,12 @@ FocusScope {
id: metrics
}
Text {
StyledText {
id: label
text: root.label
anchors.verticalCenter: editFrame.verticalCenter
color: editFrame.activeFocus ? Style.themeColor :
(root.enabled ? "black" : Style.inactiveThemeColor)
hover: editFrame.activeFocus
enabled: root.enabled
}
Rectangle {
@ -41,7 +41,7 @@ FocusScope {
width: Math.min(root.width - (label.width + Style.margin), Math.max(suggestedWidth, edit.implicitWidth) + Style.margin * 2);
radius: Style.roundRadius
border.color: edit.activeFocus ? Style.frameColor : Style.minorFrameColor
border.color: root.enabled ? (edit.activeFocus ? Style.frameColor : Style.minorFrameColor) : Style.disabledMinorFrameColor
border.width: 1
clip: true
@ -54,13 +54,13 @@ FocusScope {
anchors.margins: Style.margin
selectByMouse: true
focus: true
color: enabled && activeFocus ? Style.themeColor : Style.baseTextColor
color: enabled ? (activeFocus ? Style.themeColor : Style.baseTextColor) : Style.disabledTextColor
Text {
StyledText {
id: placeholder
visible: (edit.text.length == 0) && !edit.activeFocus
text: root.placeholder
color: Style.baseTextColor
enabled: root.enabled
}
}
}

3
src/GUI/qml/LocationNavaidView.qml
View file

@ -199,8 +199,9 @@ Item {
enabled: offsetToggle.checked
}
Text {
StyledText {
text: qsTr(" on bearing ")
enabled: _location.offsetEnabled
anchors.verticalCenter: parent.verticalCenter
}

17
src/GUI/qml/PopupChoice.qml
View file

@ -69,21 +69,21 @@ Item {
return item.text
}
Text {
StyledText {
id: label
anchors.left: root.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
color: mouseArea.containsMouse ? Style.themeColor :
(root.enabled ? "black" : Style.inactiveThemeColor)
enabled: root.enabled
hover: mouseArea.containsMouse
}
Rectangle {
id: currentChoiceFrame
radius: Style.roundRadius
border.color: root.enabled ? (mouseArea.containsMouse ? Style.themeColor : Style.minorFrameColor)
: Style.inactiveThemeColor
: Style.disabledMinorFrameColor
border.width: 1
height: currentChoiceText.implicitHeight + Style.margin
clip: true
@ -97,20 +97,20 @@ Item {
readonly property int __naturalWidth: currentChoiceText.implicitWidth + (Style.margin * 3) + upDownIcon.width
anchors.verticalCenter: parent.verticalCenter
Text {
StyledText {
id: currentChoiceText
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Style.margin
text: currentText()
color: mouseArea.containsMouse ? Style.themeColor : Style.baseTextColor
elide: Text.ElideRight
maximumLineCount: 1
}
Image {
id: upDownIcon
visible: root.enabled
source: "qrc:///up-down-arrow"
anchors.right: parent.right
anchors.rightMargin: Style.margin
@ -206,10 +206,15 @@ Item {
: modelData && modelData.hasOwnProperty(displayRole) ? modelData[displayRole] // QObjectList / QObject
: modelData != undefined ? modelData : "" // Models without role
height: implicitHeight + Style.margin
font.pixelSize: Style.baseFontPixelSize
color: choiceArea.containsMouse ? Style.themeColor : Style.baseTextColor
MouseArea {
id: choiceArea
width: popupFrame.width // full width of the popup
height: parent.height
hoverEnabled: true
onClicked: {
popupFrame.visible = false
root.select(model.index)

7
src/GUI/qml/SearchButton.qml
View file

@ -71,10 +71,15 @@ FocusScope
text: ""
// placeholder text, hides itself whenever parent has non-empty text
Text {
StyledText {
anchors.fill: parent
visible: parent.text == ""
text: root.placeholder
// werid rule here - we want to make the placeholder text very
// subtle when the textdit is focused, so the user knows it will
// be overwritten
color: buttonText.activeFocus ? Style.disabledTextColor : Style.baseTextColor
}
}

2
src/GUI/qml/SettingDescription.qml
View file

@ -6,7 +6,7 @@ Text {
color: enabled ? Style.baseTextColor : Style.disabledTextColor
// make the text slightly smaller?
font.pixelSize: Style.baseFontPixelSize
wrapMode: Text.WordWrap
}

1
src/GUI/qml/SettingLineEdit.qml
View file

@ -23,6 +23,7 @@ SettingControl {
id: edit
label: root.label
width: parent.width
enabled: root.enabled
}
SettingDescription {

5
src/GUI/qml/Style.qml
View file

@ -19,14 +19,15 @@ QtObject
readonly property string inactiveThemeColor: "#9f9f9f"
readonly property string disabledThemeColor: disabledTextColor
readonly property string disabledMinorFrameColor: "#afafaf"
readonly property string baseTextColor: "#3f3f3f"
readonly property string baseTextColor: "#2f2f2f"
readonly property int baseFontPixelSize: 12
readonly property int subHeadingFontPixelSize: 14
readonly property int headingFontPixelSize: 18
readonly property string disabledTextColor: "#5f5f5f"
readonly property string disabledTextColor: "#6f6f6f"
readonly property double panelOpacity: 0.7
}

12
src/GUI/qml/StyledText.qml Normal file
View file

@ -0,0 +1,12 @@
import QtQuick 2.4
import "."
Text {
font.pixelSize: Style.baseFontPixelSize
property bool enabled: true
property bool hover: false
color: hover ? Style.themeColor : (root.enabled ? Style.baseTextColor : Style.disabledTextColor)
}

5
src/GUI/qml/ToggleSwitch.qml
View file

@ -41,12 +41,13 @@ Item {
}
}
Text {
StyledText {
id: label
anchors.left: track.right
anchors.leftMargin: Style.margin
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: Style.baseFontPixelSize
enabled: root.enabled
hover: mouseArea.containsMouse
}
MouseArea {

1
src/GUI/resources.qrc
View file

@ -93,6 +93,7 @@
<file>qml/RadioButton.qml</file>
<file>qml/IntegerSpinbox.qml</file>
<file>qml/DoubleSpinbox.qml</file>
<file>qml/StyledText.qml</file>
</qresource>
<qresource prefix="/preview">
<file alias="close-icon">preview-close.png</file>