Coffee choice

- coffee-choosing sidebar
- animation speed control
- fixed level marks alignment
- feng-shui

CoffeeButton.qml

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

Cup.qml

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

LevelMark.qml

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

brewing.qml

@@ -41,6 +41,9 @@ Item {
                 questionVisible: false
                 showLabels: false
                 sugarAmount: 3
+                Component.onCompleted: {
+                    makeAnimationsSlower(true)
+                }
             }
         }
     }

choice.qml

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

qml.qrc

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