Separate right sidebar

1 files changed, 3 insertions, 200 deletions

diff --git a/Course/Detail/Classic.ui.qml b/Course/Detail/Classic.ui.qml
index 7e0238a..f09692b 100644
--- a/Course/Detail/Classic.ui.qml
+++ b/Course/Detail/Classic.ui.qml
@@ -1,9 +1,6 @@
 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 Eduport 1.4
 import "../../Label" as Lbl
 import "Classic/Content" as Content
@@ -13,14 +10,7 @@ Flickable {
 	property alias introTitleHeader: introTitleHeader
 	property alias introTitleParagraph: introTitleParagraph
 	property alias mainContent: mainContent
-	property alias image: image
-	property alias mediaPlayer: mediaPlayer
-	property string priceText: "$150"
-	property alias originalPrice: originalPrice
-	property alias discount: discount
-	property alias time: time
-	property alias trial: trial
-	property alias buy: buy
+	property alias rightSidebar: rightSidebar
 	contentHeight: body.height
 
 	ColumnLayout {
@@ -99,195 +89,8 @@ Flickable {
 					? body.width : body.width / 2
 			}
 
-			ColumnLayout {
-
-				Item {
-					Layout.fillWidth: true
-					implicitHeight: width * 1.2
-
-					DropShadow {
-						source: rightSidebar
-						color: Qt.rgba(.113, .227, .325, .15)
-						anchors.fill: rightSidebar
-					}
-
-					Rectangle {
-						id: rightSidebar
-						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: originalPrice
-											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
-										}
-									}
-								}
-							}
-						}
-					}
-				}
+			Content.Sidebar {
+				id: rightSidebar
 			}
 		}
 	}