From 5f62ac063652264f4bea5d119a0094d13c0c81c0 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Tue, 7 Feb 2023 13:55:21 +0700 Subject: fixed payment layout --- CheckoutFlickable.ui.qml | 41 ++++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml index 9b59394..d7b2cf6 100644 --- a/CheckoutFlickable.ui.qml +++ b/CheckoutFlickable.ui.qml @@ -74,9 +74,9 @@ Flickable { font.pointSize: 22 font.family: "roboto" Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 } GridLayout { @@ -341,41 +341,59 @@ Flickable { font.pointSize: 16 font.family: "roboto" Layout.fillWidth: true + padding: 16 } } } - Frame { + Rectangle { + implicitHeight: paymentNetBanking.height + Layout.margins: 16 Layout.fillWidth: true + border.width: 1 + radius: 8 + border.color: "#4d000000" ColumnLayout { - anchors.fill: parent + id: paymentNetBanking + anchors { + left: parent.left + right: parent.right + } Label { text: qsTr("Pay with Net Banking") - font.pointSize: 15 + font.pointSize: 16 + font.family: "roboto" Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 } ColumnLayout { - + Layout.margins: 16 Label { text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") - font.pointSize: 15 + font.pointSize: 14 + font.family: "roboto" wrapMode: Text.Wrap Layout.fillWidth: true } Label { text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") - font.pointSize: 15 + font.pointSize: 16 + font.family: "roboto" wrapMode: Text.Wrap Layout.fillWidth: true } ComboBox { id: banks - font.pointSize: 15 + font.pointSize: 14 + font.family: "roboto" + Layout.topMargin: 24 model: ListModel { ListElement { label: "Please choose one" @@ -393,7 +411,8 @@ Flickable { delegate: ItemDelegate { contentItem: Text { text: label - font.pointSize: 14 + font.pointSize: 16 + font.family: "roboto" } } } -- cgit v1.2.3 From 9e2dce7c4253f71ec49844e5f00dfc1c14b6fdb1 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Tue, 7 Feb 2023 14:18:35 +0700 Subject: order summary UI layout --- CheckoutFlickable.ui.qml | 70 +++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 58 insertions(+), 12 deletions(-) diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml index d7b2cf6..aa93565 100644 --- a/CheckoutFlickable.ui.qml +++ b/CheckoutFlickable.ui.qml @@ -383,7 +383,7 @@ Flickable { Label { text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") - font.pointSize: 16 + font.pointSize: 14 font.family: "roboto" wrapMode: Text.Wrap Layout.fillWidth: true @@ -432,19 +432,31 @@ Flickable { rowSpacing: 0 Layout.alignment: Qt.AlignTop - Frame { + Rectangle { Layout.fillWidth: true + implicitHeight: personal.height + Layout.margins: 16 + radius: 8 ColumnLayout { - anchors.fill: parent - + id: orderSummary + anchors { + left: parent.left + right: parent.right + } Label { text: qsTr("Order Summary") - font.pointSize: 21 + font.pointSize: 22 + font.family: "roboto" Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 } ColumnLayout { + Layout.margins: 16 + spacing:16 Item { Layout.fillWidth: true @@ -454,14 +466,16 @@ Flickable { Label { id: codeLabel text: qsTr("Transaction code") - font.pointSize: 15 + font.pointSize: 14 + font.family: "roboto" anchors.verticalCenter: parent.verticalCenter } Label { id: codeValue text: "AB12365E" - font.pointSize: 15 + font.pointSize: 14 + font.family: "roboto" anchors { right: parent.right verticalCenter: parent.verticalCenter @@ -471,21 +485,53 @@ Flickable { RowLayout { - TextField { - placeholderText: qsTr("COUPON CODE") - font.pointSize: 15 + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + placeholderText: qsTr("COUPON CODE") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } } Button { text: qsTr("Apply") - font.pointSize: 15 + font.pointSize: 14 + font.family: "roboto" + implicitHeight: 56 + contentItem: Text { + color: "#ffffff" + text: "Apply" + padding: 12 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + + background: Rectangle { + color: "#066ac9" + radius: 8 + } } } } ColumnLayout { - + Layout.margins: 16 Item { Layout.fillWidth: true implicitHeight: priceLabel.implicitHeight -- cgit v1.2.3 From b334c945ad47fe1eae7e284b118a00657cacf6db Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Tue, 7 Feb 2023 14:24:44 +0700 Subject: place order button --- CheckoutFlickable.ui.qml | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml index aa93565..80e55ba 100644 --- a/CheckoutFlickable.ui.qml +++ b/CheckoutFlickable.ui.qml @@ -604,9 +604,25 @@ Flickable { Button { id: placeOrder - text: qsTr("Place Order") - font.pointSize: 15 + Layout.margins: 16 Layout.fillWidth: true + text: qsTr("Place Order") + font.pointSize: 14 + font.family: "roboto" + implicitHeight: 36 + contentItem: Text { + color: "#ffffff" + text: "Place order" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + background: Rectangle { + color: "#0cbc87" + radius: 8 + } } } } -- cgit v1.2.3 From 5b865edb77accd23545f616b32ff72455ce7cc29 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Tue, 7 Feb 2023 14:46:11 +0700 Subject: fixed premiumAdCard --- CheckoutFlickable.ui.qml | 68 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 49 insertions(+), 19 deletions(-) diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml index 80e55ba..ee80105 100644 --- a/CheckoutFlickable.ui.qml +++ b/CheckoutFlickable.ui.qml @@ -49,8 +49,8 @@ Flickable { Text { id: login - text: "" - + qsTr("Log in") + "" + text: "" + qsTr( + "Log in") + "" font.pointSize: 15 font.underline: false } @@ -68,7 +68,6 @@ Flickable { right: parent.right } - Label { text: qsTr("Personal Details") font.pointSize: 22 @@ -232,7 +231,8 @@ Flickable { anchors.fill: parent TextField { id: province - placeholderText: qsTr("Select state") + placeholderText: qsTr( + "Select state") font.pointSize: 16 font.family: "roboto" Layout.fillWidth: true @@ -324,7 +324,7 @@ Flickable { Rectangle { implicitHeight: paymentCard.height - Layout.margins:16 + Layout.margins: 16 Layout.fillWidth: true border.width: 1 radius: 8 @@ -434,7 +434,7 @@ Flickable { Rectangle { Layout.fillWidth: true - implicitHeight: personal.height + implicitHeight: orderSummary.height Layout.margins: 16 radius: 8 @@ -456,12 +456,11 @@ Flickable { ColumnLayout { Layout.margins: 16 - spacing:16 + spacing: 16 Item { Layout.fillWidth: true - implicitHeight: codeLabel.implicitHeight - + codeValue.implicitHeight + implicitHeight: codeLabel.implicitHeight + codeValue.implicitHeight Label { id: codeLabel @@ -535,7 +534,7 @@ Flickable { Item { Layout.fillWidth: true implicitHeight: priceLabel.implicitHeight - + priceValue.implicitHeight + + priceValue.implicitHeight Label { id: priceLabel @@ -558,7 +557,7 @@ Flickable { Item { Layout.fillWidth: true implicitHeight: discountLabel.implicitHeight - + discountValue.implicitHeight + + discountValue.implicitHeight Label { id: discountLabel @@ -581,7 +580,7 @@ Flickable { Item { Layout.fillWidth: true implicitHeight: totalLabel.implicitHeight - + totalValue.implicitHeight + + totalValue.implicitHeight Label { id: totalLabel @@ -627,32 +626,63 @@ Flickable { } } - Frame { + Rectangle { id: premium Layout.fillWidth: true - Layout.alignment: Qt.AlignTop + implicitHeight: premiumAdCard.height + radius: 8 + color: "#1d3b53" + Layout.margins: 16 ColumnLayout { - anchors.fill: parent + id: premiumAdCard + anchors { + left: parent.left + right: parent.right + } + Layout.margins: 16 Label { text: qsTr("Access 25K Online courses from 120 institutions, Start today!") - font.pointSize: 21 wrapMode: Text.Wrap + font.pointSize: 22 + font.family: "roboto" + color: "#ffffff" Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 } Label { text: qsTr("Here is the description of premium features which will allow users to get benefits and save a lot of money") - font.pointSize: 15 + font.pointSize: 16 + font.family: "roboto" + color: "#ffffff" wrapMode: Text.Wrap Layout.fillWidth: true + Layout.margins: 16 } Button { text: qsTr("Purchase Premium") - font.pointSize: 13 - Layout.fillWidth: true + font.pointSize: 14 + Layout.margins: 16 + font.family: "roboto" + implicitHeight: 36 + contentItem: Text { + color: "#000000" + text: "Purchase premium" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + background: Rectangle { + color: "#f7c32e" + radius: 8 + } } } } -- cgit v1.2.3