diff options
Diffstat (limited to 'components/ProductCardForm.ui.qml')
| -rw-r--r-- | components/ProductCardForm.ui.qml | 232 |
1 files changed, 111 insertions, 121 deletions
diff --git a/components/ProductCardForm.ui.qml b/components/ProductCardForm.ui.qml index d7cc671..b355b9c 100644 --- a/components/ProductCardForm.ui.qml +++ b/components/ProductCardForm.ui.qml @@ -8,133 +8,123 @@ Item { property alias nameLabel: productTitle property alias priceLabel: productAmount - width: 360 - height: 80 + width: 360 + height: 80 - Rectangle { - id: productCardBg - color: "#1fffffff" - radius: 8 - border.width: 0 - anchors.fill: parent + Rectangle { + id: productCardBg + color: "#1fffffff" + radius: 8 + border.width: 0 + anchors.fill: parent - Row { - id: productCardRow - anchors.fill: parent - spacing: 8 + Item { + id: productCardRow + anchors.fill: parent - 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" - } + 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: imageCardPreview.width + height: imageCardPreview.height + radius: 8 + } + } + } - 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 + Item { + id: column + anchors.left: imageCardPreview.right + 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 - } + Label { + id: productTitle + text: qsTr("Product title") + anchors.top: parent.top + anchors.left: parent.left + 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 + RowLayout { + id: rowLayout + anchors.left: parent.left + anchors.bottom: priceLayout.top + anchors.bottomMargin: 0 + spacing: 8 + 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 - } - } - } + 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 { + id: priceLayout + anchors.left: parent.left + anchors.bottom: parent.bottom + spacing: 8 + anchors.leftMargin: 0 + anchors.bottomMargin: 0 + Label { + id: productCurrency + text: qsTr("Rp") + font.letterSpacing: 0.25 + } + Label { + id: productAmount + text: qsTr("1,234,567") + font.letterSpacing: 0.25 + Layout.fillWidth: true + } + } + } - 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: imageCardPreview.width - height: imageCardPreview.height - radius: 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" + } + } + } } |