BlockchainDemo/Users.qml at master · FollowMyVote/BlockchainDemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import QtQuick 2.6
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Item {
    id: users
    width: mm(4) + userBackRight.width
    height: mm(1) + userFront.height

    function createTransaction() {
        var user = priv.randomUser()
        var properties = {
            "y": user.y + mm(2),
            "scale": 0.05
        }

        var transaction = transactionMaker.createObject(users, properties)
        transaction.x = user.x + user.width/2 - transaction.width/2

        createTransactionAnimation.creatingUser = user
        createTransactionAnimation.createdTransaction = transaction
        createTransactionAnimation.restart()

        return transaction
    }

    QtObject {
        id: priv

        function randomUser() {
            var users = [userBackLeft, userFront, userBackRight]
            return users[Math.floor(Math.random() * 3)];
        }
    }
    Component {
        id: transactionMaker

        Transaction {}
    }

    SequentialAnimation {
        id: createTransactionAnimation
        property Item creatingUser
        property Item createdTransaction

        NumberAnimation {
            target: createTransactionAnimation.creatingUser
            property: "y"
            duration: 150
            easing.type: Easing.OutQuad
            from: 0; to: mm(-2)
        }
        ParallelAnimation {
            NumberAnimation {
                target: createTransactionAnimation.createdTransaction
                properties: "scale"
                from: 0; to: 1
                duration: 500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                target: createTransactionAnimation.creatingUser
                property: "y"
                duration: 300
                easing.type: Easing.OutBounce
                from: mm(-2); to: 0
            }
        }
    }

    Image {
        id: userBackLeft
        source: "user.svg"
        fillMode: Image.PreserveAspectFit
        height: mm(15)
        layer.enabled: true
        layer.effect: ColorOverlay {
            color: palette.lightForegroundColor
        }
    }
    Image {
        id: userBackRight
        x: mm(4)
        source: "user.svg"
        fillMode: Image.PreserveAspectFit
        height: mm(15)
        layer.enabled: true
        layer.effect: ColorOverlay {
            color: palette.lightForegroundColor
        }
    }
    Image {
        id: userFront
        y: mm(1)
        x: mm(2)
        z: 1
        source: "user.svg"
        fillMode: Image.PreserveAspectFit
        height: mm(15)
        layer.enabled: true
        layer.effect: ColorOverlay {
            color: palette.foregroundColor
        }
    }
}