From ff82d1cc150fc6ac70886ab2225eef6beb51cc38 Mon Sep 17 00:00:00 2001
From: Sebastian Kügler <sebas@kde.org>
Date: Sat, 7 Nov 2015 03:32:37 +0100
Subject: Improve TopBar and login window layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
This provides a bit more spacing around the logo and aligns the text to
the bottom of the logo, rather than to its horizontal center. Looks
cleaner.
Text in the login page is now aligned towards the inputs, giving a
closer connection between label and widget.
Signed-off-by: Sebastian Kügler <sebas@kde.org>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
---
qt-mobile/qml/Preferences.qml | 7 +++++--
qt-mobile/qml/TopBar.qml | 44 ++++++++++++++++++++++++++++---------------
2 files changed, 34 insertions(+), 17 deletions(-)
(limited to 'qt-mobile')
diff --git a/qt-mobile/qml/Preferences.qml b/qt-mobile/qml/Preferences.qml
index 36da051e6..8b3ae2bd3 100644
--- a/qt-mobile/qml/Preferences.qml
+++ b/qt-mobile/qml/Preferences.qml
@@ -20,14 +20,15 @@ Item {
anchors.margins: units.gridUnit
Label {
- text: "Enter your Subsurface cloud credentials"
+ text: "Cloud credentials"
Layout.bottomMargin: units.largeSpacing
font.pointSize: units.titlePointSize
Layout.columnSpan: 2
}
Label {
- text: "Email Address:"
+ text: "Email Address"
+ Layout.alignment: Qt.AlignRight
}
TextField {
@@ -38,6 +39,7 @@ Item {
Label {
text: "Password"
+ Layout.alignment: Qt.AlignRight
}
TextField {
@@ -49,6 +51,7 @@ Item {
Label {
text: "Show password"
+ Layout.alignment: Qt.AlignRight
}
CheckBox {
diff --git a/qt-mobile/qml/TopBar.qml b/qt-mobile/qml/TopBar.qml
index eb7403f9b..624002242 100644
--- a/qt-mobile/qml/TopBar.qml
+++ b/qt-mobile/qml/TopBar.qml
@@ -13,27 +13,41 @@ Rectangle {
property bool goBack: (stackView.depth > 1)
color: theme.accentColor
- Layout.minimumHeight: units.gridUnit * 2 + units.smallSpacing * 2
+ Layout.minimumHeight: units.gridUnit * 2 + units.largeSpacing
Layout.fillWidth: true
Layout.margins: 0
RowLayout {
anchors.bottom: topPart.bottom
- anchors.bottomMargin: units.smallSpacing
+ anchors.bottomMargin: units.largeSpacing / 2
anchors.left: topPart.left
- anchors.leftMargin: units.smallSpacing
+ anchors.leftMargin: units.largeSpacing / 2
anchors.right: topPart.right
- anchors.rightMargin: units.smallSpacing
- Image {
- source: "qrc:/qml/subsurface-mobile-icon.png"
- Layout.maximumWidth: units.gridUnit * 2
- Layout.preferredWidth: units.gridUnit * 2
- Layout.preferredHeight: units.gridUnit * 2
- }
- Text {
- text: qsTr("Subsurface")
- font.pointSize: units.fontMetrics.font.pointSize * 2
- Layout.fillWidth: false
- color: theme.accentTextColor
+ anchors.rightMargin: units.largeSpacing / 2
+ Item {
+ Layout.preferredHeight: subsurfaceLogo.height
+ Image {
+ id: subsurfaceLogo
+ source: "qrc:/qml/subsurface-mobile-icon.png"
+ anchors {
+ top: parent.top
+ left: parent.left
+ }
+ width: units.gridUnit * 2
+ height: width
+ }
+ Text {
+ text: qsTr("Subsurface")
+ height: subsurfaceLogo.height
+ anchors {
+ left: subsurfaceLogo.right
+ bottom: subsurfaceLogo.bottom
+ leftMargin: units.gridUnit / 2
+ }
+ font.pointSize: units.fontMetrics.font.pointSize * 1.5
+ verticalAlignment: Text.AlignBottom
+ Layout.fillWidth: false
+ color: theme.accentTextColor
+ }
}
Item {
Layout.fillWidth: true
--
cgit v1.2.3-70-g09d2