summaryrefslogtreecommitdiff
path: root/Course/Detail
diff options
context:
space:
mode:
Diffstat (limited to 'Course/Detail')
-rw-r--r--Course/Detail/Classic.ui.qml203
-rw-r--r--Course/Detail/Classic/Content/Sidebar.ui.qml229
2 files changed, 232 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
}
}
}
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
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-24 18:12:49 +0000