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>

qt-mobile/qml/CloudCredentials.qml

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

qt-mobile/qml/DiveDetailsEdit.qml

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

qt-mobile/qml/DownloadFromDiveComputer.qml

@@ -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: {

qt-mobile/qml/Preferences.qml

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

qt-mobile/qml/StartPage.qml

@@ -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 {
+		SubsurfaceButton {
-			style: subsurfaceButton
 			id: cloudstorageButton
 			Layout.bottomMargin: MobileComponents.Units.largeSpacing
 			Layout.preferredWidth: startpage.buttonWidth
@@ -53,8 +36,7 @@ Item {
 				stackView.push(cloudCredWindow)
 			}
 		}
-		Button {
+		SubsurfaceButton {
-			style: subsurfaceButton
 			id: computerButton
 			Layout.preferredWidth: startpage.buttonWidth
 			Layout.bottomMargin: MobileComponents.Units.largeSpacing
@@ -64,8 +46,7 @@ Item {
 				stackView.push(downloadDivesWindow)
 			}
 		}
-		Button {
+		SubsurfaceButton {
-			style: subsurfaceButton
 			id: manualButton
 			Layout.preferredWidth: startpage.buttonWidth
 			Layout.bottomMargin: MobileComponents.Units.largeSpacing

qt-mobile/qml/SubsurfaceButton.qml

@@ -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
+		}
+	}
+}

qt-mobile/qml/main.qml

@@ -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"
 	}
 

qt-mobile/qml/mobile-resources.qrc

@@ -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>