QML UI: make all buttons more attractive

Commit f3f7930 introduced a more attractive button style to the start page.
This patch turns it into its own type so it can easily be used everywhere.

Signed-off-by: Rick Walsh <rickmwalsh@gmail.com>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Rick Walsh 2016-01-20 22:47:58 +11:00 committed by Dirk Hohndel
parent f3f79309d3
commit 471270437b
8 changed files with 40 additions and 31 deletions

View file

@ -79,7 +79,7 @@ Item {
Item {
height: saveButton.height
width: saveButton.width
Button {
SubsurfaceButton {
id: saveButton
text: "Save"
anchors.centerIn: parent

View file

@ -150,7 +150,7 @@ Item {
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
}
}
Button {
SubsurfaceButton {
anchors.horizontalCenter: parent.horizontalCenter
text: "Save"
onClicked: {

View file

@ -36,7 +36,7 @@ Item {
RowLayout {
Layout.fillWidth: true
TextField { Layout.fillWidth: true }
Button { text: "..." }
SubsurfaceButton { text: "..." }
}
GridLayout {
columns: 2
@ -51,7 +51,7 @@ Item {
RowLayout {
Layout.fillWidth: true
ProgressBar { Layout.fillWidth: true }
Button { text: "Download" }
SubsurfaceButton { text: "Download" }
}
}
}
@ -62,10 +62,10 @@ Item {
Text {
text: "Downloaded dives"
}
Button {
SubsurfaceButton {
text: "Select All"
}
Button {
SubsurfaceButton {
text: "Unselect All"
}
}
@ -77,14 +77,14 @@ Item {
}
RowLayout {
width: parent.width
Button {
SubsurfaceButton {
text: "OK"
onClicked: {
stackView.pop();
}
}
Button {
SubsurfaceButton {
text: "Cancel"
onClicked: {

View file

@ -58,7 +58,7 @@ GridLayout {
Item {
height: saveButton.height
Layout.preferredWidth: saveButton.width
Button {
SubsurfaceButton {
id: saveButton
text: "Save"
anchors.centerIn: parent

View file

@ -6,22 +6,6 @@ import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
import org.subsurfacedivelog.mobile 1.0
Item {
property var subsurfaceButton: Component {
ButtonStyle {
background: Rectangle {
border.width: 1
radius: height / 3
color: subsurfaceTheme.accentColor
}
label: Text{
text: control.text
color: subsurfaceTheme.accentTextColor
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
}
ColumnLayout {
id: startpage
anchors.fill: parent
@ -42,8 +26,7 @@ Item {
wrapMode: Text.WordWrap
Layout.columnSpan: 2
}
Button {
style: subsurfaceButton
SubsurfaceButton {
id: cloudstorageButton
Layout.bottomMargin: MobileComponents.Units.largeSpacing
Layout.preferredWidth: startpage.buttonWidth
@ -53,8 +36,7 @@ Item {
stackView.push(cloudCredWindow)
}
}
Button {
style: subsurfaceButton
SubsurfaceButton {
id: computerButton
Layout.preferredWidth: startpage.buttonWidth
Layout.bottomMargin: MobileComponents.Units.largeSpacing
@ -64,8 +46,7 @@ Item {
stackView.push(downloadDivesWindow)
}
}
Button {
style: subsurfaceButton
SubsurfaceButton {
id: manualButton
Layout.preferredWidth: startpage.buttonWidth
Layout.bottomMargin: MobileComponents.Units.largeSpacing

View file

@ -0,0 +1,26 @@
import QtQuick 2.5
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
Button {
style: ButtonStyle {
padding {
top: MobileComponents.Units.smallSpacing
left: MobileComponents.Units.smallSpacing * 2
right: MobileComponents.Units.smallSpacing * 2
bottom: MobileComponents.Units.smallSpacing
}
background: Rectangle {
border.width: 1
radius: height / 3
color: control.pressed ? subsurfaceTheme.shadedColor : subsurfaceTheme.accentColor
}
label: Text{
text: control.text
color: subsurfaceTheme.accentTextColor
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
}

View file

@ -189,6 +189,7 @@ MobileComponents.ApplicationWindow {
property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5)
property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.8)
property color accentColor: "#2d5b9a"
property color shadedColor: "#224575"
property color accentTextColor: "#ececec"
}

View file

@ -15,6 +15,7 @@
<file>ThemeTest.qml</file>
<file>StartPage.qml</file>
<file>dive.jpg</file>
<file>SubsurfaceButton.qml</file>
<file alias="subsurface-mobile-icon.png">../../icons/subsurface-mobile-icon.png</file>
<file alias="main-menu.png">icons/main-menu.png</file>
<file alias="context-menu.png">icons/context-menu.png</file>