Break out menu button into component. Add menu items.

This commit is contained in:
Dorian 2018-02-15 08:57:36 -05:00
parent e1ca79c291
commit b33b6cf71c
2 changed files with 76 additions and 46 deletions

View File

@ -1,5 +1,4 @@
import QtQuick 2.0 import QtQuick 2.0
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0 import QtGraphicalEffects 1.0
Rectangle { Rectangle {
@ -36,55 +35,36 @@ Rectangle {
width: parent.width width: parent.width
spacing: 10 spacing: 10
Rectangle { MenuButton {
id: button buttonText: "New Game"
anchors.horizontalCenter: parent.horizontalCenter function actionOnClick() {
width: parent.width - 50
height: 50
radius: 10
color: "#9e9e9e"
border.color: "#333333"
border.width: 2
layer.enabled: true
layer.effect: DropShadow {
transparentBorder: true
horizontalOffset: 5
verticalOffset: 5
radius: 5.0
samples: 5
}
Text {
text: "New Game"
font.pointSize: 18
font.bold: true
height: 30
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
anchors.fill: parent
onPressed: button.color = "#555555"
onReleased: button.color = "#9e9e9e"
onClicked: {
appPage.source = "Board.qml" appPage.source = "Board.qml"
} }
} }
MenuButton {
buttonText: "Open Game"
// disabled: true
} }
Button { MenuButton {
text: "Quit" buttonText: "Save Game"
width: parent.width - 50 // disabled: true
height: 50 }
onClicked: Qt.quit()
anchors.horizontalCenter: parent.horizontalCenter MenuButton {
buttonText: "About justCheckers"
}
MenuButton {
buttonText: "Settings"
}
MenuButton {
buttonText: "Quit"
function actionOnClick() {
Qt.quit()
}
} }
} }

50
MenuButton.qml Normal file
View File

@ -0,0 +1,50 @@
import QtQuick 2.0
import QtGraphicalEffects 1.0
Rectangle {
id: button
property color backgroundAtRest: "#9e9e9e"
property color backgroundActive: "#555555"
property string buttonText: "Button"
function actionOnClick() { }
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width - 50
height: 50
radius: 10
color: backgroundAtRest
border.color: "#333333"
border.width: 2
layer.enabled: true
layer.effect: DropShadow {
transparentBorder: true
horizontalOffset: 5
verticalOffset: 5
radius: 5.0
samples: 5
}
Text {
text: buttonText
font.pointSize: 18
font.bold: true
height: 30
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
anchors.fill: parent
onPressed: button.color = backgroundActive
onReleased: button.color = backgroundAtRest
onClicked: actionOnClick()
}
}