summaryrefslogtreecommitdiff
path: root/components/ProductCardForm.ui.qml
blob: d1e0fb3a5f31f0c414f3703af5829d3e369e2e33 (plain)
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

Item {
	property alias previewImage: imageCardPreview
	property alias nameLabel: productTitle
	property alias priceLabel: productAmount

    width: 360
    height: 80

    Rectangle {
        id: productCardBg
        color: "#1fffffff"
        radius: 8
        border.width: 0
        anchors.fill: parent

        Row {
            id: productCardRow
            anchors.fill: parent
            spacing: 8

            ToolButton {
                id: productCardMoreButton
                width: 24
                height: 24
                text: qsTr("Tool Button")
                anchors.right: parent.right
                anchors.top: parent.top
                padding: 0
                anchors.topMargin: 8
                display: AbstractButton.IconOnly
                anchors.rightMargin: 8
                icon.source: "../icons/more-vert-24px.svg"
            }

            Column {
                id: column
                anchors.left: imageCardPreview.right
                anchors.right: productCardMoreButton.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 8
                anchors.rightMargin: 16
                anchors.leftMargin: 8
                anchors.topMargin: 8

                Label {
                    id: productTitle
                    text: qsTr("Product title")
                    anchors.left: parent.left
                    anchors.right: parent.right
                    font.letterSpacing: 0.25
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    font.kerning: false
                    font.pointSize: 14
                }

                RowLayout {
                    id: rowLayout
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: productTitle.bottom
                    anchors.topMargin: 8
                    spacing: 8
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0

                    Label {
                        id: stock
                        color: "#99ffffff"
                        text: qsTr("Stock")
                        font.letterSpacing: 0.4
                        font.pointSize: 12
                        font.family: "Roboto Mono"
                    }
                    Label {
                        id: remainingStock
                        color: "#99ffffff"
                        text: qsTr("1,234,567")
                        font.letterSpacing: 0.4
                        Layout.fillWidth: true
                        font.pointSize: 12
                        font.family: "Roboto Mono"
                    }
                }
                RowLayout {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    spacing: 8
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    anchors.bottomMargin: 0
                    Label {
                        id: productCurrency
                        text: qsTr("Rp")
                        anchors.left: parent.left
                        anchors.bottom: parent.bottom
                        font.letterSpacing: 0.25
                        anchors.leftMargin: 0
                        anchors.bottomMargin: 0
                    }
                    Label {
                        id: productAmount
                        text: qsTr("1,234,567")
                        font.letterSpacing: 0.25
                        Layout.fillWidth: true
                        anchors.leftMargin: 0
                    }
                }
            }

            Image {
                id: imageCardPreview
                width: 64
                source: "qrc:/qtquickplugin/images/template_image.png"
                anchors.bottomMargin: 8
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.leftMargin: 8
                anchors.topMargin: 8
                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: Rectangle {
                        anchors.centerIn: parent
                        width: image.width
                        height: image.height
                        radius: 8
                    }
                }
            }
        }
    }
}