Separate right sidebar

1 files changed, 229 insertions, 0 deletions

diff --git a/Course/Detail/Classic/Content/Sidebar.ui.qml b/Course/Detail/Classic/Content/Sidebar.ui.qml
new file mode 100644
index 0000000..2f62d8a
--- /dev/null
+++ b/Course/Detail/Classic/Content/Sidebar.ui.qml
@@ -0,0 +1,229 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import QtMultimedia 5.15
+import Bootstrap 5.3
+import "../../../../Label" as Lbl
+
+ColumnLayout {
+	property alias image: image
+	property alias mediaPlayer: mediaPlayer
+	property alias initialPrice: initialPrice
+	property string priceText: "$150"
+	property alias discount: discount
+	property alias time: time
+	property alias trial: trial
+	property alias buy: buy
+
+	Item {
+		Layout.fillWidth: true
+		implicitHeight: width * 1.2
+
+		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: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
+				width: parent.width - 16
+				height: parent.width * 3 / 4
+				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
+					}
+				}
+			}
+
+			MediaPlayer {
+				id: mediaPlayer
+			}
+
+			VideoOutput {
+				anchors.fill: image
+				source: mediaPlayer
+			}
+
+			Button {
+				anchors.centerIn: image
+				display: AbstractButton.IconOnly
+				flat: true
+				width: 44
+				height: 44
+				icon {
+					width: 44
+					height: 44
+					color: "#ffffff"
+					source: "../../Font-Awesome/svgs/solid/circle-play.svg"
+				}
+				onClicked: mediaPlayer.play()
+			}
+
+			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 {
+						spacing: 8
+
+						RowLayout {
+
+							Lbl.Hx {
+								text: priceText
+								font.pointSize
+									: 21
+									+ .0075
+									* parent
+									.width
+							}
+
+							Lbl.Body {
+								id: initialPrice
+								text: "$350"
+								color
+								: "#4d000000"
+								font.strikeout
+									: true
+							}
+
+							Rectangle {
+								id
+								: discountLabel
+								implicitWidth
+								: discount.width
+								implicitHeight
+								: discount
+									.height
+								radius: 6
+								color: "#fd7e14"
+
+								Label {
+									id: discount
+									text: qsTr("60% off")
+									color: "white"
+									font {
+										family: Bootstrap.bodyFont.family
+										weight: Bootstrap.bodyFont.weight
+										pointSize: Bootstrap.badgeFontSize
+									}
+									horizontalAlignment: Text.AlignHCenter
+									verticalAlignment: Text.AlignVCenter
+									topPadding: 4.46
+									leftPadding: 8.29
+									rightPadding: 8.29
+									bottomPadding: 4.46
+								}
+							}
+						}
+
+						RowLayout {
+							id: time
+
+							Lbl.Body {
+								text: qsTr("5 days left at this price")
+								color: "#d6293e"
+							}
+						}
+					}
+				}
+
+				RowLayout {
+					Layout.topMargin: 16
+					Layout.fillWidth: true
+					spacing: 16
+
+					Button {
+						id: trial
+						horizontalPadding: 16
+						verticalPadding: 8
+						text: qsTr("Free trial")
+						font: Bootstrap.btnFont
+						contentItem: Text {
+							horizontalAlignment
+								: Text
+								.AlignHCenter
+							text: trial.text
+							font: trial.font
+							color: trial.down
+								? "#ffffff"
+								: "#066ac9"
+						}
+						background: Rectangle {
+							radius: 5.2
+							color: trial.down
+								? "#066ac9"
+								: "#ffffff"
+							border {
+								color: "#066ac9"
+								width: 1
+							}
+						}
+					}
+
+					Button {
+						id: buy
+						horizontalPadding: 16
+						verticalPadding: 8
+						text: qsTr("Buy course")
+						font: Bootstrap.btnFont
+						contentItem: Text {
+							horizontalAlignment
+								: Text
+								.AlignHCenter
+							text: buy.text
+							font: buy.font
+							color: "#ffffff"
+						}
+						background: Rectangle {
+							radius: 5.2
+							color: buy.down
+								? "#0aa073"
+								: "#0cbc87"
+							border {
+								color: buy.down
+								? "#0a966c"
+								: "#0cbc87"
+								width: 1
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}