diff options
| -rw-r--r-- | Course/Detail/Classic.ui.qml | 50 | ||||
| -rw-r--r-- | Course/Detail/Classic/Content/Sidebar.ui.qml | 203 | ||||
| -rw-r--r-- | Course/Detail/Classic/Content/Sidebar/Video.ui.qml | 163 | ||||
| -rw-r--r-- | CourseDetailClassic.qrc | 2 |
4 files changed, 211 insertions, 207 deletions
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") + } + } + } +} diff --git a/CourseDetailClassic.qrc b/CourseDetailClassic.qrc index 8d3fd5c..93ce2e2 100644 --- a/CourseDetailClassic.qrc +++ b/CourseDetailClassic.qrc @@ -4,7 +4,7 @@ <file>Course/Detail/Classic/Content/Main/TabContents/Instructor.ui.qml</file> <file>Course/Detail/Classic/Content/Main/TabContents/Instructor/ListInlineItem.ui.qml</file> <file>Course/Detail/Classic/Content/Main.ui.qml</file> - <file>Course/Detail/Classic/Content/Sidebar.ui.qml</file> + <file>Course/Detail/Classic/Content/Sidebar/Video.ui.qml</file> <file>Course/Detail/Classic.ui.qml</file> </qresource> </RCC> |