[PATCH 1/2] QML UI: make all buttons more attractive
Rick Walsh
rickmwalsh at gmail.com
Wed Jan 20 03:47:58 PST 2016
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 at gmail.com>
---
qt-mobile/qml/CloudCredentials.qml | 2 +-
qt-mobile/qml/DiveDetailsEdit.qml | 2 +-
qt-mobile/qml/DownloadFromDiveComputer.qml | 12 ++++++------
qt-mobile/qml/Preferences.qml | 2 +-
qt-mobile/qml/StartPage.qml | 25 +++----------------------
qt-mobile/qml/SubsurfaceButton.qml | 26 ++++++++++++++++++++++++++
qt-mobile/qml/main.qml | 1 +
qt-mobile/qml/mobile-resources.qrc | 1 +
8 files changed, 40 insertions(+), 31 deletions(-)
create mode 100644 qt-mobile/qml/SubsurfaceButton.qml
diff --git a/qt-mobile/qml/CloudCredentials.qml b/qt-mobile/qml/CloudCredentials.qml
index bb61cb2..54b1e8e 100644
--- a/qt-mobile/qml/CloudCredentials.qml
+++ b/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
diff --git a/qt-mobile/qml/DiveDetailsEdit.qml b/qt-mobile/qml/DiveDetailsEdit.qml
index 51325b7..476bc77 100644
--- a/qt-mobile/qml/DiveDetailsEdit.qml
+++ b/qt-mobile/qml/DiveDetailsEdit.qml
@@ -150,7 +150,7 @@ Item {
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
}
}
- Button {
+ SubsurfaceButton {
anchors.horizontalCenter: parent.horizontalCenter
text: "Save"
onClicked: {
diff --git a/qt-mobile/qml/DownloadFromDiveComputer.qml b/qt-mobile/qml/DownloadFromDiveComputer.qml
index d237544..a401d57 100644
--- a/qt-mobile/qml/DownloadFromDiveComputer.qml
+++ b/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: {
diff --git a/qt-mobile/qml/Preferences.qml b/qt-mobile/qml/Preferences.qml
index 1644b59..67f53c0 100644
--- a/qt-mobile/qml/Preferences.qml
+++ b/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
diff --git a/qt-mobile/qml/StartPage.qml b/qt-mobile/qml/StartPage.qml
index 741a879..4684157 100644
--- a/qt-mobile/qml/StartPage.qml
+++ b/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 {
- 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
diff --git a/qt-mobile/qml/SubsurfaceButton.qml b/qt-mobile/qml/SubsurfaceButton.qml
new file mode 100644
index 0000000..5f8bb6f
--- /dev/null
+++ b/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
+ }
+ }
+}
diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml
index b2c94f4..43e7cf2 100644
--- a/qt-mobile/qml/main.qml
+++ b/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"
}
diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc
index 3a84bbf..50565e0 100644
--- a/qt-mobile/qml/mobile-resources.qrc
+++ b/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>
--
2.5.0
More information about the subsurface
mailing list