Reuse header toolbar

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
+							}
+						}
+					}
+				}
+			}
+		}
 	}
 }