diff options
| -rw-r--r-- | CheckoutFlickable.ui.qml | 634 | ||||
| -rw-r--r-- | ClassicDetailFlickable.ui.qml | 148 |
2 files changed, 465 insertions, 317 deletions
diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml index 6f329f4..ac41528 100644 --- a/CheckoutFlickable.ui.qml +++ b/CheckoutFlickable.ui.qml @@ -13,260 +13,268 @@ Flickable { property alias checkoutPostal: postal property alias checkoutAddress: address property alias checkoutPremium: premium - contentHeight: container.height - - GridLayout { - id: container - columns: width < 1200 ? 1 : 2 - rows: width < 1200 ? 2 : 1 - columnSpacing: 0 - rowSpacing: 0 + contentHeight: body.height + + ColumnLayout { + id: body anchors { top: parent.top left: parent.left right: parent.right } - ColumnLayout { + HeaderToolBar { + Layout.fillWidth: true + } - RowLayout { - id: alert - Layout.alignment: Qt.AlignHCenter + GridLayout { + columns: width < 1200 ? 1 : 2 + rows: width < 1200 ? 2 : 1 + columnSpacing: 0 + rowSpacing: 0 + Layout.fillWidth: true - Label { - text: qsTr("Already have an account?") - font.pixelSize: 15 - } + ColumnLayout { - Text { - id: login - text: "<a href=\"sign-in.html\">" - + qsTr("Log in") + "</a>" - font.pixelSize: 15 - font.underline: false - } - } + RowLayout { + id: alert + Layout.alignment: Qt.AlignHCenter - ColumnLayout { + Label { + text: qsTr("Already have an account?") + font.pixelSize: 15 + } - Label { - text: qsTr("Personal Details") - font.pixelSize: 21 - Layout.fillWidth: true + Text { + id: login + text: "<a href=\"sign-in.html\">" + + qsTr("Log in") + "</a>" + font.pixelSize: 15 + font.underline: false + } } - GridLayout { - columns: width < 768 ? 1 : 2 - rows: width < 768 ? 4 : 7 - columnSpacing: 0 - rowSpacing: 0 + ColumnLayout { - ColumnLayout { - Layout.topMargin: 16 - Layout.leftMargin: 8 - Layout.rightMargin: 8 + Label { + text: qsTr("Personal Details") + font.pixelSize: 21 + Layout.fillWidth: true + } - Label { - text: qsTr("Your name *") - font.pixelSize: 15 - Layout.fillWidth: true - } + GridLayout { + columns: width < 768 ? 1 : 2 + rows: width < 768 ? 4 : 7 + columnSpacing: 0 + rowSpacing: 0 - TextField { - id: name - placeholderText: qsTr("Name") - font.pixelSize: 15 - Layout.fillWidth: true - } - } + ColumnLayout { + Layout.topMargin: 16 + Layout.leftMargin: 8 + Layout.rightMargin: 8 - ColumnLayout { - Layout.topMargin: 16 - Layout.leftMargin: 8 - Layout.rightMargin: 8 + Label { + text: qsTr("Your name *") + font.pixelSize: 15 + Layout.fillWidth: true + } - Label { - text: qsTr("Email address *") - font.pixelSize: 15 - Layout.fillWidth: true + TextField { + id: name + placeholderText: qsTr("Name") + font.pixelSize: 15 + Layout.fillWidth: true + } } - TextField { - id: email - placeholderText: qsTr("Email") - font.pixelSize: 15 - Layout.fillWidth: true - } - } + ColumnLayout { + Layout.topMargin: 16 + Layout.leftMargin: 8 + Layout.rightMargin: 8 - ColumnLayout { - Layout.topMargin: 16 - Layout.leftMargin: 8 - Layout.rightMargin: 8 + Label { + text: qsTr("Email address *") + font.pixelSize: 15 + Layout.fillWidth: true + } - Label { - text: qsTr("Mobile number *") - font.pixelSize: 15 - Layout.fillWidth: true + TextField { + id: email + placeholderText: qsTr("Email") + font.pixelSize: 15 + Layout.fillWidth: true + } } - TextField { - id: mobile - placeholderText: qsTr("Mobile number") - font.pixelSize: 15 - Layout.fillWidth: true - } - } + ColumnLayout { + Layout.topMargin: 16 + Layout.leftMargin: 8 + Layout.rightMargin: 8 - ColumnLayout { - Layout.topMargin: 16 - Layout.leftMargin: 8 - Layout.rightMargin: 8 + Label { + text: qsTr("Mobile number *") + font.pixelSize: 15 + Layout.fillWidth: true + } - Label { - text: qsTr("Select country *") - font.pixelSize: 15 - Layout.fillWidth: true + TextField { + id: mobile + placeholderText: qsTr("Mobile number") + font.pixelSize: 15 + Layout.fillWidth: true + } } - TextField { - id: country - placeholderText: qsTr("Select country") - font.pixelSize: 15 - Layout.fillWidth: true - } - } + ColumnLayout { + Layout.topMargin: 16 + Layout.leftMargin: 8 + Layout.rightMargin: 8 - ColumnLayout { - Layout.topMargin: 16 - Layout.leftMargin: 8 - Layout.rightMargin: 8 + Label { + text: qsTr("Select country *") + font.pixelSize: 15 + Layout.fillWidth: true + } - Label { - text: qsTr("Select state *") - font.pixelSize: 15 - Layout.fillWidth: true + TextField { + id: country + placeholderText: qsTr("Select country") + font.pixelSize: 15 + Layout.fillWidth: true + } } - TextField { - id: province - placeholderText: qsTr("Select state") - font.pixelSize: 15 - Layout.fillWidth: true - } - } + ColumnLayout { + Layout.topMargin: 16 + Layout.leftMargin: 8 + Layout.rightMargin: 8 - ColumnLayout { - Layout.topMargin: 16 - Layout.leftMargin: 8 - Layout.rightMargin: 8 + Label { + text: qsTr("Select state *") + font.pixelSize: 15 + Layout.fillWidth: true + } - Label { - text: qsTr("Postal code *") - font.pixelSize: 15 - Layout.fillWidth: true + TextField { + id: province + placeholderText: qsTr("Select state") + font.pixelSize: 15 + Layout.fillWidth: true + } } - TextField { - id: postal - placeholderText: qsTr("PIN code") - font.pixelSize: 15 - Layout.fillWidth: true - } - } + ColumnLayout { + Layout.topMargin: 16 + Layout.leftMargin: 8 + Layout.rightMargin: 8 - ColumnLayout { - Layout.topMargin: 16 - Layout.leftMargin: 8 - Layout.rightMargin: 8 + Label { + text: qsTr("Postal code *") + font.pixelSize: 15 + Layout.fillWidth: true + } - Label { - text: qsTr("Address *") - font.pixelSize: 15 - Layout.fillWidth: true + TextField { + id: postal + placeholderText: qsTr("PIN code") + font.pixelSize: 15 + Layout.fillWidth: true + } } - TextField { - id: address - placeholderText: qsTr("Address") - font.pixelSize: 15 - Layout.fillWidth: true - } - } - } + ColumnLayout { + Layout.topMargin: 16 + Layout.leftMargin: 8 + Layout.rightMargin: 8 - ColumnLayout { + Label { + text: qsTr("Address *") + font.pixelSize: 15 + Layout.fillWidth: true + } - Label { - text: qsTr("Payment method") - font.pixelSize: 21 - Layout.fillWidth: true + TextField { + id: address + placeholderText: qsTr("Address") + font.pixelSize: 15 + Layout.fillWidth: true + } + } } ColumnLayout { - Frame { + Label { + text: qsTr("Payment method") + font.pixelSize: 21 Layout.fillWidth: true - - ColumnLayout { - anchors.fill: parent - - Label { - text: qsTr("Credit or Debit Card") - font.pixelSize: 15 - Layout.fillWidth: true - } - } } - Frame { - Layout.fillWidth: true - - ColumnLayout { - anchors.fill: parent + ColumnLayout { - Label { - text: qsTr("Pay with Net Banking") - font.pixelSize: 15 - Layout.fillWidth: true - } + Frame { + Layout.fillWidth: true ColumnLayout { + anchors.fill: parent Label { - text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") + text: qsTr("Credit or Debit Card") font.pixelSize: 15 - wrapMode: Text.Wrap Layout.fillWidth: true } + } + } + + Frame { + Layout.fillWidth: true + + ColumnLayout { + anchors.fill: parent Label { - text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") + text: qsTr("Pay with Net Banking") font.pixelSize: 15 - wrapMode: Text.Wrap Layout.fillWidth: true } - ComboBox { - font.pixelSize: 15 - model: ListModel { - ListElement { - text: "Please choose one" - } - ListElement { - text: "Bank of America" - } - ListElement { - text: "Bank of India" - } - ListElement { - text: "Bank of London" - } + ColumnLayout { + + Label { + text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") + font.pixelSize: 15 + 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.pixelSize: 15 + wrapMode: Text.Wrap + Layout.fillWidth: true } - delegate: ItemDelegate { - contentItem: Text { - text: modelData - font.pixelSize: 14 + + ComboBox { + font.pixelSize: 15 + model: ListModel { + ListElement { + text: "Please choose one" + } + ListElement { + text: "Bank of America" + } + ListElement { + text: "Bank of India" + } + ListElement { + text: "Bank of London" + } + } + delegate: ItemDelegate { + contentItem: Text { + text: modelData + font.pixelSize: 14 + } } } } @@ -276,173 +284,173 @@ Flickable { } } } - } - - GridLayout { - columns: width < 786 ? 1 : 2 - rows: width < 786 ? 2 : 1 - columnSpacing: 0 - rowSpacing: 0 - Layout.alignment: Qt.AlignTop - - Frame { - Layout.fillWidth: true - ColumnLayout { - anchors.fill: parent + GridLayout { + columns: width < 786 ? 1 : 2 + rows: width < 786 ? 2 : 1 + columnSpacing: 0 + rowSpacing: 0 + Layout.alignment: Qt.AlignTop - Label { - text: qsTr("Order Summary") - font.pixelSize: 21 - Layout.fillWidth: true - } + Frame { + Layout.fillWidth: true ColumnLayout { + anchors.fill: parent - Item { + Label { + text: qsTr("Order Summary") + font.pixelSize: 21 Layout.fillWidth: true - implicitHeight: codeLabel.implicitHeight + } + + ColumnLayout { + + Item { + Layout.fillWidth: true + implicitHeight: codeLabel.implicitHeight + codeValue.implicitHeight - Label { - id: codeLabel - text: qsTr("Transaction code") - font.pixelSize: 15 - anchors.verticalCenter: parent.verticalCenter - } + Label { + id: codeLabel + text: qsTr("Transaction code") + font.pixelSize: 15 + anchors.verticalCenter: parent.verticalCenter + } - Label { - id: codeValue - text: "AB12365E" - font.pixelSize: 15 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter + Label { + id: codeValue + text: "AB12365E" + font.pixelSize: 15 + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } } } - } - RowLayout { + RowLayout { - TextField { - placeholderText: qsTr("COUPON CODE") - font.pixelSize: 15 - Layout.fillWidth: true - } + TextField { + placeholderText: qsTr("COUPON CODE") + font.pixelSize: 15 + Layout.fillWidth: true + } - Button { - text: qsTr("Apply") - font.pixelSize: 15 + Button { + text: qsTr("Apply") + font.pixelSize: 15 + } } } - } - ColumnLayout { + ColumnLayout { - Item { - Layout.fillWidth: true - implicitHeight: priceLabel.implicitHeight + Item { + Layout.fillWidth: true + implicitHeight: priceLabel.implicitHeight + priceValue.implicitHeight - Label { - id: priceLabel - text: qsTr("Original Price") - font.pixelSize: 15 - anchors.verticalCenter: parent.verticalCenter - } + Label { + id: priceLabel + text: qsTr("Original Price") + font.pixelSize: 15 + anchors.verticalCenter: parent.verticalCenter + } - Label { - id: priceValue - text: "$500" - font.pixelSize: 15 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter + Label { + id: priceValue + text: "$500" + font.pixelSize: 15 + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } } } - } - Item { - Layout.fillWidth: true - implicitHeight: discountLabel.implicitHeight + Item { + Layout.fillWidth: true + implicitHeight: discountLabel.implicitHeight + discountValue.implicitHeight - Label { - id: discountLabel - text: qsTr("Coupon Discount") - font.pixelSize: 15 - anchors.verticalCenter: parent.verticalCenter - } + Label { + id: discountLabel + text: qsTr("Coupon Discount") + font.pixelSize: 15 + anchors.verticalCenter: parent.verticalCenter + } - Label { - id: discountValue - text: "-" + "$20" - font.pixelSize: 15 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter + Label { + id: discountValue + text: "-" + "$20" + font.pixelSize: 15 + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } } } - } - Item { - Layout.fillWidth: true - implicitHeight: totalLabel.implicitHeight + Item { + Layout.fillWidth: true + implicitHeight: totalLabel.implicitHeight + totalValue.implicitHeight - Label { - id: totalLabel - text: qsTr("Total") - font.pixelSize: 21 - anchors.verticalCenter: parent.verticalCenter - } + Label { + id: totalLabel + text: qsTr("Total") + font.pixelSize: 21 + anchors.verticalCenter: parent.verticalCenter + } - Label { - id: totalValue - text: "$480" - font.pixelSize: 21 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter + Label { + id: totalValue + text: "$480" + font.pixelSize: 21 + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } } } } - } - Button { - text: qsTr("Place Order") - font.pixelSize: 15 - Layout.fillWidth: true + Button { + text: qsTr("Place Order") + font.pixelSize: 15 + Layout.fillWidth: true + } } } - } - Frame { - id: premium - Layout.fillWidth: true - Layout.alignment: Qt.AlignTop + Frame { + id: premium + Layout.fillWidth: true + Layout.alignment: Qt.AlignTop - ColumnLayout { - anchors.fill: parent + ColumnLayout { + anchors.fill: parent - Label { - text: qsTr("Access 25K Online courses from 120 institutions, Start today!") - font.pixelSize: 21 - wrapMode: Text.Wrap - Layout.fillWidth: true - } + Label { + text: qsTr("Access 25K Online courses from 120 institutions, Start today!") + font.pixelSize: 21 + wrapMode: Text.Wrap + Layout.fillWidth: true + } - Label { - text: qsTr("Here is the description of premium features which will allow users to get benefits and save a lot of money") - font.pixelSize: 15 - wrapMode: Text.Wrap - Layout.fillWidth: true - } + Label { + text: qsTr("Here is the description of premium features which will allow users to get benefits and save a lot of money") + font.pixelSize: 15 + wrapMode: Text.Wrap + Layout.fillWidth: true + } - Button { - text: qsTr("Purchase Premium") - font.pixelSize: 13 - Layout.fillWidth: true + Button { + text: qsTr("Purchase Premium") + font.pixelSize: 13 + Layout.fillWidth: true + } } } } diff --git a/ClassicDetailFlickable.ui.qml b/ClassicDetailFlickable.ui.qml index 307dc7f..d76211f 100644 --- a/ClassicDetailFlickable.ui.qml +++ b/ClassicDetailFlickable.ui.qml @@ -1,16 +1,156 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 Flickable { - property alias card: card - contentHeight: card.height + id: flickable + property alias detailImage: image + property alias detailBuy: buy + contentHeight: body.height - DetailCardItem { - id: card + ColumnLayout { + id: body anchors { top: parent.top left: parent.left right: parent.right } + + HeaderToolBar { + Layout.fillWidth: true + } + + Item { + Layout.fillWidth: true + + DropShadow { + source: rectangle + color: Qt.rgba(.113, .227, .325, .15) + anchors.fill: rectangle + } + + Rectangle { + id: rectangle + radius: 10 + anchors { + top: parent.top + topMargin: 25.6 + left: parent.left + leftMargin: 12.8 + right: parent.right + rightMargin: 12.8 + bottom: parent.bottom + } + + Image { + id: image + source: "Darapsa.svg" + sourceSize { + width: parent.width - 16 + height: parent.width * 3 / 4 + } + width: sourceSize.width + height: sourceSize.height + anchors { + top: parent.top + topMargin: 8 + horizontalCenter: parent.horizontalCenter + } + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: image.width + height: image.height + radius: 10 + } + } + } + + ColumnLayout { + width: parent.width - 16 + anchors { + top: image.bottom + horizontalCenter: parent.horizontalCenter + bottom: parent.bottom + bottomMargin: 8 + } + + RowLayout { + Layout.topMargin: 16 + Layout.bottomMargin: 16 + + ColumnLayout { + + RowLayout { + + Label { + text: "$150" + font.pixelSize: 21 + } + + Label { + text: "$350" + font.pixelSize: 15 + font.strikeout: true + } + + Label { + text: qsTr("60% off") + font.pixelSize: 14 + } + } + + RowLayout { + + Label { + text: qsTr("5 days left at this price") + } + } + } + } + + GridLayout { + columns: flickable.width < 378 ? 1 : 2 + rows: flickable.width < 378 ? 2 : 1 + Layout.bottomMargin: 16 + + Button { + id: trial + text: qsTr("Free trial") + contentItem: Text { + text: trial.text + font.pixelSize: 15 + color: trial.down ? "#ffffff" + : "#066ac9" + } + background: Rectangle { + color: trial.down ? "#066ac9" + : "#ffffff" + border.color: "#066ac9" + radius: 8 + } + } + + Button { + id: buy + text: qsTr("Buy course") + contentItem: Text { + text: buy.text + font.pixelSize: 15 + color: "#ffffff" + } + background: Rectangle { + color: buy.down ? "#0aa073" + : "#0cbc87" + border.color: buy.down + ? "#0a966c" : "#0cbc87" + radius: 8 + } + } + } + } + } + } } } |