From eb8b4ebc62aa55daad637903df52318dc53ab727 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?=
=?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?=
<erik@darapsa.co.id>
Date: Wed, 29 Mar 2023 20:05:03 +0800
Subject: Each in right sidebar has its own file
---
Course/Detail/Classic.ui.qml | 50 ++++-
Course/Detail/Classic/Content/Sidebar.ui.qml | 203 ---------------------
Course/Detail/Classic/Content/Sidebar/Video.ui.qml | 163 +++++++++++++++++
3 files changed, 210 insertions(+), 206 deletions(-)
delete mode 100644 Course/Detail/Classic/Content/Sidebar.ui.qml
create mode 100644 Course/Detail/Classic/Content/Sidebar/Video.ui.qml
(limited to 'Course/Detail')
diff --git a/Course/Detail/Classic.ui.qml b/Course/Detail/Classic.ui.qml
index 03d0536..5f5e3fd 100644
--- a/Course/Detail/Classic.ui.qml
+++ b/Course/Detail/Classic.ui.qml
@@ -1,16 +1,19 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
import Eduport 1.4
+import "../../DropShadow" as DrpShdw
import "../../Label" as Lbl
import "Classic/Content" as Content
+import "Classic/Content/Sidebar" as ContentSidebar
Flickable {
property alias introBadge: introBadge
property alias introTitleHeader: introTitleHeader
property alias introTitleParagraph: introTitleParagraph
property alias mainContent: mainContent
- property alias rightSidebar: rightSidebar
+ property alias video: video
contentHeight: body.height
ColumnLayout {
@@ -85,8 +88,49 @@ Flickable {
? body.width : body.width / 2
}
- Content.Sidebar {
- id: rightSidebar
+ GridLayout {
+ Layout.topMargin: 48
+ Layout.bottomMargin: 48
+
+ ColumnLayout {
+ Layout.leftMargin: 15
+ Layout.rightMargin: 15
+
+ Item {
+ Layout.fillWidth: true
+ Layout.bottomMargin: 25.6
+ implicitHeight: video.height
+ + 16
+
+ DrpShdw.Box {
+ source: videoRectangle
+ anchors.fill:
+ videoRectangle
+ }
+
+ Rectangle {
+ id: videoRectangle
+ color: Eduport.bsCardBg
+ radius: 8
+ anchors.fill: parent
+ }
+
+ ContentSidebar.Video {
+ id: video
+ anchors {
+ left: parent
+ .left
+ leftMargin: 8
+ right: parent
+ .right
+ rightMargin: 8
+ verticalCenter:
+ parent
+ .verticalCenter
+ }
+ }
+ }
+ }
}
}
}
diff --git a/Course/Detail/Classic/Content/Sidebar.ui.qml b/Course/Detail/Classic/Content/Sidebar.ui.qml
deleted file mode 100644
index 19e7c6d..0000000
--- a/Course/Detail/Classic/Content/Sidebar.ui.qml
+++ /dev/null
@@ -1,203 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.15
-import QtMultimedia 5.15
-import Eduport 1.4
-import "../../../../DropShadow" as DrpShdw
-import "../../../../Label" as Lbl
-import "../../../../Button" as Btn
-
-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
-
- DrpShdw.Box {
- source: rectangle
- anchors.fill: rectangle
- }
-
- Rectangle {
- id: rectangle
- radius: 8
- color: Eduport.bsCardBg
- 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.H3 {
- text: priceText
- }
-
- 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: Eduport.bodyFont.family
- weight: Eduport.bodyFont.weight
- pointSize: Eduport.bsBadgeFontSize
- }
- 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: Eduport.bsBtnFont
- 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
- }
- }
- }
-
- Btn.Success {
- id: buy
- text: qsTr("Buy course")
- }
- }
- }
- }
- }
-}
diff --git a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
new file mode 100644
index 0000000..b0b4974
--- /dev/null
+++ b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
@@ -0,0 +1,163 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import QtMultimedia 5.15
+import Eduport 1.4
+import "../../../../../Label" as Lbl
+import "../../../../../Button" as Btn
+
+ColumnLayout {
+ property alias image: image
+ property alias play: play
+ 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
+
+ Image {
+ id: image
+ Layout.fillWidth: true
+ Layout.maximumHeight: width * 400 / 533
+ source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
+ fillMode: Image.PreserveAspectFit
+ layer.enabled: true
+ layer.effect: OpacityMask {
+ maskSource: Rectangle {
+ width: image.width
+ height: image.height
+ radius: 8
+ }
+ }
+
+ MediaPlayer {
+ id: mediaPlayer
+ }
+
+ VideoOutput {
+ anchors.fill: parent
+ source: mediaPlayer
+ }
+
+ Button {
+ id: play
+ anchors.centerIn: parent
+ display: AbstractButton.IconOnly
+ flat: true
+ icon {
+ width: 44
+ height: 44
+ color: "#ffffff"
+ source: "../../../../../Font-Awesome/svgs/solid/circle-play.svg"
+ }
+ }
+ }
+
+ ColumnLayout {
+
+ RowLayout {
+ Layout.topMargin: 16
+ Layout.bottomMargin: 16
+
+ ColumnLayout {
+ spacing: 8
+
+ RowLayout {
+
+ Lbl.H3 {
+ text: priceText
+ }
+
+ 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: Eduport.bodyFont.family
+ weight: Eduport.bodyFont.weight
+ pointSize: Eduport.bsBadgeFontSize
+ }
+ 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: Eduport.bsBtnFont
+ 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
+ }
+ }
+ }
+
+ Btn.Success {
+ id: buy
+ text: qsTr("Buy course")
+ }
+ }
+ }
+}
--
cgit v1.2.3