add `productCardForm.ui.qml`

1 files changed, 136 insertions, 0 deletions

diff --git a/components/ProductCardForm.ui.qml b/components/ProductCardForm.ui.qml
new file mode 100644
index 0000000..4b8875a
--- /dev/null
+++ b/components/ProductCardForm.ui.qml
@@ -0,0 +1,136 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+Item {
+    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
+                    }
+                }
+            }
+        }
+    }
+}