Verified Commit ada16d42 authored by Artem Sidyakin's avatar Artem Sidyakin
Browse files

Coffee choice

- coffee-choosing sidebar
- animation speed control
- fixed level marks alignment
- feng-shui
parent d65c3a37
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11
Item {
id: root
property alias source: img.source
property alias text: label.text
property int duration: 250
signal coffeeChosen
Layout.fillWidth: true
Layout.preferredHeight: img.height
Column {
anchors.fill: parent
Image {
id: img
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width * 0.8
sourceSize.width: width
fillMode: Image.PreserveAspectFit
Rectangle {
id: glow
visible: false
width: parent.width
height: width
color: "transparent"
radius: parent.height
scale: 1.05
border.color: Styles.labelColor
}
PropertyAnimation {
target: glow
id: animation1
duration: root.duration
loops: 1
from: 1.05
to: 1.2
property: "scale"
}
ParallelAnimation {
id: animation2
SequentialAnimation {
PropertyAnimation {
target: glow
duration: root.duration
loops: 1
from: 0.2
to: 1.0
property: "opacity"
}
PropertyAnimation {
target: glow
duration: root.duration
loops: 1
from: 1.0
to: 0.0
property: "opacity"
}
PropertyAction {
target: glow
property: "visible"
value: false
}
}
SequentialAnimation {
PropertyAction {
target: glow
property: "border.width"
value: 20
}
PauseAnimation {
duration: 200
}
PropertyAnimation {
target: glow
duration: root.duration
loops: 1
from: 20
to: 10
property: "border.width"
}
}
}
MouseArea {
anchors.fill: parent
onClicked: root.coffeeChosen()
onPressed: {
glow.visible = true
animation1.start()
animation2.start()
}
}
}
Label {
id: label
anchors.horizontalCenter: parent.horizontalCenter
color: Styles.backgroundColor
font.pixelSize: parent.height / 7
}
}
}
......@@ -11,6 +11,24 @@ Item {
property real foamAmount: 0
property real sugarAmount: 0
function makeAnimationsSlower(yes)
{
if (yes === true)
{
coffeeAnimation.duration = 1000;
milkAnimation.duration = 1000;
foamAnimation.duration = 1000;
sugarAnimation.duration = 2000;
}
else
{
coffeeAnimation.duration = 200;
milkAnimation.duration = 200;
foamAnimation.duration = 200;
sugarAnimation.duration = 200;
}
}
Image {
id: emptySpace
anchors.fill: background
......@@ -64,30 +82,33 @@ Item {
}
LevelMark {
anchors.top: foam.top
//anchors.topMargin: -10
anchors.verticalCenter: foam.top
anchors.left: foam.right
anchors.leftMargin: 50
anchors.leftMargin: background.width / 40
text: qsTr("MILK FOAM")
showIt: root.showLabels
pixelSize: emptySpace.height / 15
// showIt: root.showLabels
visible: root.showLabels ? (foamAmount > 0 ? true : false) : false
}
LevelMark {
anchors.top: milk.top
anchors.topMargin: -10
anchors.verticalCenter: milk.top
anchors.left: milk.right
anchors.leftMargin: 50
anchors.leftMargin: background.width / 40
text: qsTr("HOT MILK")
showIt: root.showLabels
pixelSize: emptySpace.height / 15
// showIt: root.showLabels
visible: root.showLabels ? (milkAmount > 0 ? true : false) : false
}
LevelMark {
anchors.top: coffee.top
anchors.topMargin: -10
anchors.verticalCenter: coffee.top
anchors.left: coffee.right
anchors.leftMargin: 50
anchors.leftMargin: background.width / 40
text: qsTr("ESPRESSO COFFEE")
showIt: root.showLabels
pixelSize: emptySpace.height / 15
// showIt: root.showLabels
visible: root.showLabels ? (coffeeAmount > 0 ? true : false) : false
}
Rectangle {
......@@ -168,8 +189,8 @@ Item {
source: "qrc:/images/coffee_cup_large.png"
}
Behavior on coffeeAmount { PropertyAnimation { duration: 1000 } }
Behavior on milkAmount { PropertyAnimation { duration: 1000 } }
Behavior on foamAmount { PropertyAnimation { duration: 1000 } }
Behavior on sugarAmount { PropertyAnimation { duration: 2000 } }
Behavior on coffeeAmount { PropertyAnimation { id: coffeeAnimation } }
Behavior on milkAmount { PropertyAnimation { id: milkAnimation } }
Behavior on foamAmount { PropertyAnimation { id: foamAnimation } }
Behavior on sugarAmount { PropertyAnimation { id: sugarAnimation } }
}
......@@ -2,22 +2,23 @@ import QtQuick 2.11
Item {
property alias text: mark.text
property bool showIt: false
property alias pixelSize: mark.font.pixelSize
// property bool showIt: false
Text {
id: mark
anchors.left: line.right
anchors.leftMargin: 10
anchors.verticalCenter: line.verticalCenter
text: qsTr("ESPRESSO COFFEE")
color: Styles.labelColor
font.pixelSize: 20
visible: showIt
// visible: showIt
}
Rectangle {
anchors.right: mark.left
anchors.rightMargin: 10
anchors.verticalCenter: mark.verticalCenter
id: line
width: 50
height: 1
color: Styles.labelColor
visible: mark.visible
// visible: mark.visible
}
}
......@@ -41,6 +41,9 @@ Item {
questionVisible: false
showLabels: false
sugarAmount: 3
Component.onCompleted: {
makeAnimationsSlower(true)
}
}
}
}
......
......@@ -14,20 +14,138 @@ Item {
Rectangle {
id: leftSideBar
Layout.preferredWidth: parent.width * 0.3
Layout.maximumWidth: 300
Layout.maximumWidth: 350
Layout.fillHeight: true
color: Styles.sideBarColor
Flickable {
id: flickable
anchors.fill: parent
anchors.topMargin: -25
anchors.bottomMargin: 15
property alias macchiatoButton: macchiatoButton
property alias latteButton: latteButton
property alias espressoButton: espressoButton
property alias cappuccinoButton: cappuccinoButton
//boundsBehavior: Flickable.StopAtBounds
contentWidth: parent.width
contentHeight: cappuccinoButton.height * 5.5
// clip: true
ColumnLayout {
id: column
anchors.fill: parent
//spacing: 60
CoffeeButton {
id: cappuccinoButton
text: "Cappuccino"
source: "qrc:/images/cappucino.png"
onCoffeeChosen: {
labelCoffeeType.text = cappuccinoButton.text
cup.questionVisible = false
cup.showLabels = true
cup.coffeeAmount = 2
cup.milkAmount = 3
cup.foamAmount = 3
}
}
CoffeeButton {
id: espressoButton
text: "Espresso"
source: "qrc:/images/espresso.png"
onCoffeeChosen: {
labelCoffeeType.text = espressoButton.text
cup.questionVisible = false
cup.showLabels = true
cup.coffeeAmount = 3
cup.milkAmount = 0
cup.foamAmount = 0
}
}
CoffeeButton {
id: latteButton
text: "Latte"
source: "qrc:/images/latte.png"
onCoffeeChosen: {
labelCoffeeType.text = latteButton.text
cup.questionVisible = false
cup.showLabels = true
cup.coffeeAmount = 2
cup.milkAmount = 4.5
cup.foamAmount = 1.5
}
}
CoffeeButton {
id: macchiatoButton
text: "Macchiato"
source: "qrc:/images/macchiato.png"
onCoffeeChosen: {
labelCoffeeType.text = macchiatoButton.text
cup.questionVisible = false
cup.showLabels = true
cup.coffeeAmount = 3
cup.milkAmount = 1
cup.foamAmount = 5
}
}
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: Styles.backgroundColor
// debug
MouseArea {
ColumnLayout {
anchors.fill: parent
onClicked: {
root.state = "customising"
spacing: 0
Item {
Layout.preferredHeight: parent.height * 0.2
Layout.leftMargin: 20
Text {
id: labelCoffeeType
anchors.fill: parent
text: qsTr("coffee type")
color: Styles.labelColor
font.pixelSize: cup.height / 8
font.capitalization: Font.AllUppercase
visible: !cup.questionVisible
}
}
Cup {
id: cup
Layout.fillWidth: true
Layout.fillHeight: true
questionVisible: true
showLabels: false
sugarAmount: 0
Component.onCompleted: {
makeAnimationsSlower(false)
}
}
Item {
Layout.preferredHeight: parent.height * 0.2
Layout.leftMargin: 20
Layout.bottomMargin: -10
NavigationButton {
anchors.fill: parent
text: qsTr("CONTINUE")
textSize: cup.height / 8
visible: !cup.questionVisible
onClicked: {
root.state = "customising"
}
}
}
}
}
......
......@@ -9,7 +9,7 @@
<file>Cup.qml</file>
<file>NavigationButton.qml</file>
<file>fonts/TitilliumWeb-Regular.ttf</file>
<file>images/Americano.png</file>
<file>images/americano.png</file>
<file>images/back.png</file>
<file>images/cappucino.png</file>
<file>images/coffee_cup_back.png</file>
......@@ -18,15 +18,16 @@
<file>images/coffee_cup_outline.png</file>
<file>images/coffee_cup_large.png</file>
<file>images/coffee.png</file>
<file>images/Espresso.png</file>
<file>images/espresso.png</file>
<file>images/forward.png</file>
<file>images/Latte.png</file>
<file>images/latte.png</file>
<file>images/liquid_coffee.png</file>
<file>images/liquid_foam.png</file>
<file>images/liquid_milk.png</file>
<file>images/Macchiato.png</file>
<file>images/macchiato.png</file>
<file>images/milk.png</file>
<file>images/sugar.png</file>
<file>LevelMark.qml</file>
<file>CoffeeButton.qml</file>
</qresource>
</RCC>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment