QML UI: redesign the About page

Make things centered, lay them out correctly, make sure the image fits.

This includes the re-indentation of the previous commit - but the changes
are so massive that it seemed pointless to do this as its own commit.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2016-02-11 06:16:10 -08:00
parent 839cda7e4c
commit 672b11d804

View file

@ -5,48 +5,61 @@ import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
import org.subsurfacedivelog.mobile 1.0 import org.subsurfacedivelog.mobile 1.0
MobileComponents.Page { MobileComponents.Page {
id: aboutPage
property int pageWidth: subsurfaceTheme.columnWidth - MobileComponents.Units.gridUnit
GridLayout { ScrollView {
columns: 2 anchors.fill: parent
width: parent.width - MobileComponents.Units.gridUnit
anchors {
fill: parent
margins: MobileComponents.Units.gridUnit / 2
}
MobileComponents.Heading { ColumnLayout {
text: "About" spacing: MobileComponents.Units.largeSpacing
Layout.bottomMargin: MobileComponents.Units.largeSpacing / 2 width: aboutPage.width
Layout.columnSpan: 2 Layout.margins: MobileComponents.Units.gridUnit / 2
Layout.alignment: Qt.AlignLeft
}
Image { MobileComponents.Heading {
source:"qrc:/qml/subsurface-mobile-icon.png" text: "About Subsurface-mobile"
} Layout.margins: MobileComponents.Units.largeSpacing / 2
Layout.alignment: Qt.AlignHCenter
Layout.maximumWidth: pageWidth
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
}
MobileComponents.Heading { Rectangle {
text: "A mobile version of Subsurface divelog software.\nView your dive logs while on the go." color: "transparent"
level: 3 Layout.margins: MobileComponents.Units.largeSpacing
Layout.topMargin: MobileComponents.Units.largeSpacing Layout.fillWidth: true
Layout.bottomMargin: MobileComponents.Units.largeSpacing / 2 height: childrenRect.height
Layout.columnSpan: 2 Image {
} id: image
source: "qrc:/qml/subsurface-mobile-icon.png"
width: parent.width - MobileComponents.Units.largeSpacing
fillMode: Image.PreserveAspectFit
horizontalAlignment: Image.AlignHCenter
}
}
MobileComponents.Label { MobileComponents.Heading {
text: "Version: " + manager.getVersion() text: "A mobile version of the free Subsurface divelog software.\n" +
} "View your dive logs while on the go."
level: 3
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: MobileComponents.Units.largeSpacing * 3
Layout.maximumWidth: pageWidth
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
anchors.horizontalCenter: parent.Center
horizontalAlignment: Text.AlignHCenter
}
MobileComponents.Heading { MobileComponents.Heading {
text: "\n\n© Subsurface developer team, 2016" text: "Version: " + manager.getVersion() + "\n\n© Subsurface developer team, 2016"
level: 3 level: 4
Layout.topMargin: MobileComponents.Units.largeSpacing Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: MobileComponents.Units.largeSpacing / 2 Layout.topMargin: MobileComponents.Units.largeSpacing
Layout.columnSpan: 2 Layout.maximumWidth: pageWidth
} wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
anchors.horizontalCenter: parent.Center
Item { horizontalAlignment: Text.AlignHCenter
Layout.fillHeight: true }
}
} }
} }
}