mirror of
https://github.com/subsurface/subsurface.git
synced 2024-11-28 13:10:19 +00:00
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:
parent
f3f79309d3
commit
471270437b
8 changed files with 40 additions and 31 deletions
|
@ -79,7 +79,7 @@ Item {
|
|||
Item {
|
||||
height: saveButton.height
|
||||
width: saveButton.width
|
||||
Button {
|
||||
SubsurfaceButton {
|
||||
id: saveButton
|
||||
text: "Save"
|
||||
anchors.centerIn: parent
|
||||
|
|
|
@ -150,7 +150,7 @@ Item {
|
|||
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
|
||||
}
|
||||
}
|
||||
Button {
|
||||
SubsurfaceButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Save"
|
||||
onClicked: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -58,7 +58,7 @@ GridLayout {
|
|||
Item {
|
||||
height: saveButton.height
|
||||
Layout.preferredWidth: saveButton.width
|
||||
Button {
|
||||
SubsurfaceButton {
|
||||
id: saveButton
|
||||
text: "Save"
|
||||
anchors.centerIn: parent
|
||||
|
|
|
@ -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
|
||||
|
|
26
qt-mobile/qml/SubsurfaceButton.qml
Normal file
26
qt-mobile/qml/SubsurfaceButton.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue