From c683137864917a64cb0632007ea59dcb478622bc 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?= Date: Tue, 21 Mar 2023 21:40:05 +0800 Subject: Move card to default home folder --- CardGrid.ui.qml | 217 --------------------------------------- Eduport.qrc | 1 + Heebo/Heebo-Regular.ttf | Bin 0 -> 33040 bytes Home/Default.ui.qml | 55 +++++++--- Home/Default/Card.ui.qml | 222 ++++++++++++++++++++++++++++++++++++++++ HomeDefault.qrc | 1 + imports/Bootstrap/Bootstrap.qml | 7 +- imports/Eduport/Eduport.qml | 7 ++ 8 files changed, 274 insertions(+), 236 deletions(-) delete mode 100644 CardGrid.ui.qml create mode 100644 Heebo/Heebo-Regular.ttf create mode 100644 Home/Default/Card.ui.qml diff --git a/CardGrid.ui.qml b/CardGrid.ui.qml deleted file mode 100644 index a8bb78e..0000000 --- a/CardGrid.ui.qml +++ /dev/null @@ -1,217 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 - -Item { - property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg" - readonly property color allLevelsColor: "#ff6f42c1" - readonly property color beginnerColor: "#ff0cbc87" - readonly property color intermediateColor: "#ff17a2b8" - readonly property color allLevelsBackgroundColor: "#1a6f42c1" - readonly property color beginnerBackgroundColor: "#1a0cbc87" - readonly property color intermediateBackgroundColor: "#1a17a2b8" - property string badgeText: "All level" - property color badgeColor: "#ff6f42c1" - property color badgeBackgroundColor: "#1a6f42c1" - property string titleText: "Build Responsive Websites with HTML" - property alias titleArea: titleArea - property string truncatedText: "Far advanced settling say finished raillery. Offered chiefly farther" - property bool doesntEmbed: Qt.platform.os === "android" - || Qt.platform.os === "linux" - || Qt.platform.os === "osx" - || Qt.platform.os === "unix" - || Qt.platform.os === "windows" - - DropShadow { - source: rectangle - color: "#261d3a53" - radius: 5 - samples: 11 - anchors.fill: rectangle - } - - Rectangle { - id: rectangle - radius: 8 - anchors { - fill: parent - topMargin: 25.6 - leftMargin: 12.8 - rightMargin: 12.8 - } - - Image { - id: image - anchors { - top: parent.top - left: parent.left - right: parent.right - } - source: imageSource - fillMode: Image.PreserveAspectFit - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: image.width - height: image.height - radius: 8 - } - } - } - - Rectangle { - height: 16 - anchors { - left: parent.left - right: parent.right - bottom: image.bottom - } - } - - ColumnLayout { - id: body - anchors { - top: image.bottom - left: parent.left - leftMargin: 20 - right: parent.right - rightMargin: 20 - bottom: footer.top - } - - Item { - id: badgeAndFavorite - height: badge.height - Layout.fillWidth: true - Layout.bottomMargin: 8 - - FontLoader { - id: roboto - source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf" - } - - Label { - id: badge - anchors.left: parent.left - topPadding: 4.463 - leftPadding: 8.287 - rightPadding: 8.287 - bottomPadding: 4.463 - text: badgeText - color: badgeColor - font { - family: doesntEmbed ? "Roboto" : roboto.name - pixelSize: 13 - } - background: Rectangle { - color: badgeBackgroundColor - radius: 6 - } - } - - Image { - id: favorite - source: "Font-Awesome/svgs/solid/heart.svg" - sourceSize { - width: 15 - height: 15 - } - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - FontLoader { - id: heebo - source: "Heebo/Heebo-Bold.ttf" - } - - Label { - id: title - text: titleText - color: Qt.rgba(.141, .161, .176, 1.0) - wrapMode: Text.Wrap - Layout.fillWidth: true - Layout.bottomMargin: 8 - font { - family: heebo.name - pointSize: 20.1 + .00075 * parent.width - } - - MouseArea { - id: titleArea - anchors.fill: parent - } - } - - Label { - text: truncatedText - color: Qt.rgba(.455, .459, .475, 1.0) - wrapMode: Text.Wrap - elide: Text.ElideRight - maximumLineCount: 2 - Layout.fillWidth: true - Layout.bottomMargin: 8 - font { - family: doesntEmbed ? "Roboto" - : roboto.name - pointSize: 14 - } - } - - RowLayout { - id: listInline - } - } - - ColumnLayout { - id: footer - anchors { - left: parent.left - leftMargin: 16 - right: parent.right - rightMargin: 16 - bottom: parent.bottom - bottomMargin: 16 - } - - Rectangle { - border { - color: "#229a9ea4" - width: .5 - } - height: 1 - Layout.fillWidth: true - Layout.topMargin: 16 - Layout.bottomMargin: 16 - } - - Item { - Layout.fillWidth: true - - Label { - id: duration - text: "15h 30m" - anchors { - top: parent.top - left: parent.left - bottom: parent.bottom - } - } - - Label { - id: lectures - text: "68 lectures" - anchors { - top: parent.top - right: parent.right - bottom: parent.bottom - } - } - } - } - } -} diff --git a/Eduport.qrc b/Eduport.qrc index 8ec18ca..ed4bac4 100644 --- a/Eduport.qrc +++ b/Eduport.qrc @@ -2,6 +2,7 @@ Heebo/Heebo-Bold.ttf Heebo/Heebo-Medium.ttf + Heebo/Heebo-Regular.ttf imports/Bootstrap/Bootstrap.qml imports/Bootstrap/qmldir imports/Eduport/Eduport.qml diff --git a/Heebo/Heebo-Regular.ttf b/Heebo/Heebo-Regular.ttf new file mode 100644 index 0000000..d4ec6f9 Binary files /dev/null and b/Heebo/Heebo-Regular.ttf differ diff --git a/Home/Default.ui.qml b/Home/Default.ui.qml index aa2c283..5c57eae 100644 --- a/Home/Default.ui.qml +++ b/Home/Default.ui.qml @@ -251,12 +251,20 @@ Flickable { leftMargin: 16 right: parent.right rightMargin: 16 - verticalCenter: parent.verticalCenter + verticalCenter: parent + .verticalCenter } cellWidth: 142 cellHeight: 46 - implicitHeight: Math.ceil(count / Math.floor(count / (cellWidth * count / width))) * cellHeight - model: ["Web Design", "Development", "Graphic Design", "Marketing", "Finance"] + implicitHeight: Math.ceil(count + / Math.floor(count + / (cellWidth + * count + / width) + )) * cellHeight + model: ["Web Design", "Development", + "Graphic Design", "Marketing", + "Finance"] delegate: TabItem {} } } @@ -266,13 +274,20 @@ Flickable { property real preservedAspectHeight: width * 1.6 Layout.leftMargin: -12.8 Layout.rightMargin: -12.8 - Layout.preferredHeight: width < 576 - ? preservedAspectHeight * tabsContent.currentCount - : width < 768 - ? preservedAspectHeight / 2 * Math.ceil(tabsContent.currentCount / 2) - : width < 992 - ? preservedAspectHeight / 3 * Math.ceil(tabsContent.currentCount / 3) - : preservedAspectHeight / 4 * Math.ceil(tabsContent.currentCount / 4) + Layout.preferredHeight: body.width < 576 + ? preservedAspectHeight + * tabsContent.currentCount + : body.width < 768 + ? preservedAspectHeight / 2 + * Math.ceil(tabsContent.currentCount + / 2) + : body.width < 992 + ? preservedAspectHeight / 3 + * Math.ceil(tabsContent.currentCount + / 3) + : preservedAspectHeight / 4 + * Math.ceil(tabsContent.currentCount + / 4) Repeater { id: tabsContent @@ -351,20 +366,26 @@ Flickable { GridView { id: tabPane interactive: false - cellWidth: width < 576 ? width - : width < 768 ? width / 2 - : width < 992 ? width / 3 + cellWidth: body.width < 576 + ? width + : body.width < 768 + ? width / 2 + : body.width < 992 + ? width / 3 : width / 4 cellHeight: cellWidth * 400 / 533 + 273.35 model: content - delegate: CardGrid { - width: tabPane.cellWidth - height: tabPane.cellHeight + delegate: Default.Card { + width: tabPane + .cellWidth + height: tabPane + .cellHeight imageSource: image badgeText: level badgeColor: levelColor - badgeBackgroundColor: levelBackgroundColor + badgeBackgroundColor + : levelBackgroundColor titleText: title truncatedText: truncated } diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml new file mode 100644 index 0000000..d10ebf1 --- /dev/null +++ b/Home/Default/Card.ui.qml @@ -0,0 +1,222 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 +import Bootstrap 5.3 +import Eduport 1.4 + +Item { + property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg" + readonly property color allLevelsColor: "#ff6f42c1" + readonly property color beginnerColor: "#ff0cbc87" + readonly property color intermediateColor: "#ff17a2b8" + readonly property color allLevelsBackgroundColor: "#1a6f42c1" + readonly property color beginnerBackgroundColor: "#1a0cbc87" + readonly property color intermediateBackgroundColor: "#1a17a2b8" + property string badgeText: "All level" + property color badgeColor: "#ff6f42c1" + property color badgeBackgroundColor: "#1a6f42c1" + property string titleText: "Build Responsive Websites with HTML" + property alias titleArea: titleArea + property string truncatedText: "Far advanced settling say finished raillery. Offered chiefly farther" + + DropShadow { + source: rectangle + color: "#261d3a53" + radius: 5 + samples: 11 + anchors.fill: rectangle + } + + Rectangle { + id: rectangle + radius: 8 + anchors { + fill: parent + topMargin: 25.6 + leftMargin: 12.8 + rightMargin: 12.8 + } + + Image { + id: image + anchors { + top: parent.top + left: parent.left + right: parent.right + } + source: imageSource + fillMode: Image.PreserveAspectFit + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: image.width + height: image.height + radius: 8 + } + } + } + + Rectangle { + height: 16 + anchors { + left: parent.left + right: parent.right + bottom: image.bottom + } + } + + ColumnLayout { + id: body + anchors { + top: image.bottom + left: parent.left + leftMargin: 20 + right: parent.right + rightMargin: 20 + bottom: footer.top + } + + Item { + id: badgeAndFavorite + height: badge.height + Layout.fillWidth: true + Layout.bottomMargin: 8 + + Label { + id: badge + anchors.left: parent.left + topPadding: 4.463 + leftPadding: 8.287 + rightPadding: 8.287 + bottomPadding: 4.463 + text: badgeText + color: badgeColor + font { + family: Bootstrap.bodyFont + .family + pointSize: Bootstrap + .badgeFontSize + } + background: Rectangle { + color: badgeBackgroundColor + radius: 6 + } + } + + Image { + id: favorite + source: "../../Font-Awesome/svgs/solid/heart.svg" + sourceSize { + width: 15 + height: 15 + } + anchors { + right: parent.right + verticalCenter: parent + .verticalCenter + } + } + } + + Label { + id: title + text: titleText + color: Qt.rgba(.141, .161, .176, 1.0) + wrapMode: Text.Wrap + Layout.fillWidth: true + Layout.bottomMargin: 8 + font { + family: Eduport.hFont.family + weight: Eduport.hFont.weight + pointSize: 20.1 + .00075 * parent.width + } + + MouseArea { + id: titleArea + anchors.fill: parent + } + } + + Label { + text: truncatedText + color: Qt.rgba(.455, .459, .475, 1.0) + wrapMode: Text.Wrap + elide: Text.ElideRight + maximumLineCount: 2 + Layout.fillWidth: true + Layout.bottomMargin: 8 + font { + family: Bootstrap.bodyFont.family + weight: Bootstrap.bodyFont.weight + pointSize: Bootstrap.bodyFont.pointSize + } + } + + RowLayout { + id: listInline + } + } + + ColumnLayout { + id: footer + anchors { + left: parent.left + leftMargin: 16 + right: parent.right + rightMargin: 16 + bottom: parent.bottom + bottomMargin: 16 + } + + Rectangle { + border { + color: "#229a9ea4" + width: .5 + } + height: 1 + Layout.fillWidth: true + Layout.topMargin: 16 + Layout.bottomMargin: 16 + } + + Item { + Layout.fillWidth: true + + Label { + id: duration + text: "15h 30m" + anchors { + top: parent.top + left: parent.left + bottom: parent.bottom + } + font { + family: Eduport.fwLightFont + .family + weight: Eduport.fwLightFont + .weight + pointSize: Eduport.h6FontSize + } + } + + Label { + id: lectures + text: "68 lectures" + anchors { + top: parent.top + right: parent.right + bottom: parent.bottom + } + font { + family: Eduport.fwLightFont + .family + weight: Eduport.fwLightFont + .weight + pointSize: Eduport.h6FontSize + } + } + } + } + } +} diff --git a/HomeDefault.qrc b/HomeDefault.qrc index 68a2c0b..ab61f81 100644 --- a/HomeDefault.qrc +++ b/HomeDefault.qrc @@ -5,6 +5,7 @@ Font-Awesome/svgs/solid/user-graduate.svg Bootstrap/icons/patch-check-fill.svg Home/Default/Counter.ui.qml + Home/Default/Card.ui.qml Home/Default.ui.qml diff --git a/imports/Bootstrap/Bootstrap.qml b/imports/Bootstrap/Bootstrap.qml index 3afa941..a7a2951 100644 --- a/imports/Bootstrap/Bootstrap.qml +++ b/imports/Bootstrap/Bootstrap.qml @@ -2,6 +2,8 @@ pragma Singleton import QtQuick 2.15 QtObject { + readonly property real badgeFontSize: 13.6 + readonly property color btnColor: "#ffffff" readonly property color btnBg: "#066ac9" readonly property color btnActiveBg: "#0555a1" @@ -20,11 +22,12 @@ QtObject { } readonly property font bodyFont: Qt.font({ family: haveRoboto ? "Roboto" : regular.name, + weight: Font.Normal, pointSize: 15 }) readonly property font btnFont: Qt.font({ family: haveRoboto ? "Roboto" : medium.name, - pointSize: 15, - weight: Font.Medium + weight: Font.Medium, + pointSize: 15 }) } diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml index 106b1ab..e3b36dd 100644 --- a/imports/Eduport/Eduport.qml +++ b/imports/Eduport/Eduport.qml @@ -13,6 +13,9 @@ QtObject { readonly property FontLoader medium: FontLoader { source: "../../Heebo/Heebo-Medium.ttf" } + readonly property FontLoader regular: FontLoader { + source: "../../Heebo/Heebo-Regular.ttf" + } readonly property font hFont: Qt.font({ family: bold.name, weight: Font.Bold @@ -21,4 +24,8 @@ QtObject { family: medium.name, weight: Font.Medium }) + readonly property font fwLightFont: Qt.font({ + family: regular.name, + weight: Font.Normal + }) } -- cgit v1.2.3