Smaller topbar, no button in it anymore

This change makes the top bar a information/decorational item, not
interactive anymore.

- The menu at the top-right is redundant, it is provided by the
  left-hand-side drawer and visually present through the botom-centered
  control button.

- The back button is already provided on Android by default, swiping
  back in the UI also works, so this button provides a third method to
  go back -- that's overkill.

Less is more. Less top bar means more screen estate for the meat.

Signed-off-by: Sebastian Kügler <sebas@kde.org>
This commit is contained in:
Sebastian Kügler 2015-11-30 01:04:09 +01:00
parent f4906abf59
commit e12c784db4

View file

@ -14,29 +14,31 @@ Rectangle {
property bool goBack: (stackView.depth > 1)
color: subsurfaceTheme.accentColor
Layout.minimumHeight: MobileComponents.Units.gridUnit * 2 + MobileComponents.Units.largeSpacing
Layout.minimumHeight: MobileComponents.Units.gridUnit * 2
Layout.fillWidth: true
Layout.margins: 0
RowLayout {
anchors.bottom: topPart.bottom
anchors.bottomMargin: MobileComponents.Units.largeSpacing / 2
anchors.bottomMargin: MobileComponents.Units.smallSpacing
anchors.left: topPart.left
anchors.leftMargin: MobileComponents.Units.largeSpacing / 2
anchors.right: topPart.right
anchors.rightMargin: MobileComponents.Units.largeSpacing / 2
Item {
Layout.preferredHeight: subsurfaceLogo.height
Rectangle { color: "green"; anchors.fill: parent; }
Image {
id: subsurfaceLogo
source: "qrc:/qml/subsurface-mobile-icon.png"
anchors {
top: parent.top
topMargin: MobileComponents.Units.smallSpacing * -1
left: parent.left
}
width: MobileComponents.Units.gridUnit * 2
width: MobileComponents.Units.gridUnit
height: width
}
Text {
MobileComponents.Label {
text: qsTr("Subsurface")
height: subsurfaceLogo.height
anchors {
@ -44,7 +46,7 @@ Rectangle {
bottom: subsurfaceLogo.bottom
leftMargin: MobileComponents.Units.gridUnit / 2
}
font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 1.5
font.weight: Font.Light
verticalAlignment: Text.AlignBottom
Layout.fillWidth: false
color: subsurfaceTheme.accentTextColor
@ -53,37 +55,5 @@ Rectangle {
Item {
Layout.fillWidth: true
}
Button {
id: prefsButton
// Display back arrow or menu button
text: topPart.goBack ? "\u2190" : "\u22ee"
anchors.right: parent.right
Layout.preferredWidth: MobileComponents.Units.gridUnit * 2
Layout.preferredHeight: parent.height
style: ButtonStyle {
background: Rectangle {
implicitWidth: MobileComponents.Units.gridUnit * 2
color: subsurfaceTheme.accentColor
}
label: Text {
id: txt
color: subsurfaceTheme.accentTextColor
font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 2
font.bold: true
text: control.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
onClicked: {
if (topPart.goBack) {
stackView.pop()
} else {
prefsMenu.popup()
}
}
}
}
}