diff options
| -rw-r--r-- | CardGrid.ui.qml | 245 |
1 files changed, 111 insertions, 134 deletions
diff --git a/CardGrid.ui.qml b/CardGrid.ui.qml index 1f87668..729fb71 100644 --- a/CardGrid.ui.qml +++ b/CardGrid.ui.qml @@ -1,27 +1,30 @@ 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/08.jpg" + 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: "Beginner" - property color badgeColor: "#ff0cbc87" - property color badgeBackgroundColor: "#1a0cbc87" - property string titleText: "Sketch from A to Z: for app designer" + property string badgeText: "All level" + property color badgeColor: "#ff6f42c1" + property color badgeBackgroundColor: "#1a6f42c1" + property string titleText: "Build Responsive Websites with HTML" property alias imageArea: imageArea property alias titleArea: titleArea -// property string textTruncateText: "Rooms oh fully taken by worse do. Points afraid but may end afraid but.." + property string textTruncateText: "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" + width: 301 + height: 451 DropShadow { source: rectangle @@ -42,156 +45,130 @@ Item { bottom: parent.bottom } - Image { - id: image - source: imageSource - sourceSize { - width: parent.width - height: parent.width * 3 / 4 - } - anchors.top: parent.top - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: image.width - height: image.height - radius: 10 + ColumnLayout { + anchors.fill: parent + + Image { + id: image + source: imageSource + Layout.fillWidth: true + sourceSize.height: width * 3 / 4 + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: image.width + height: image.height + radius: 10 + } } - } - MouseArea { - id: imageArea - anchors.fill: parent - } - } - - Item { - id: body - width: parent.width - anchors { - top: image.bottom - bottom: footer.top - } - - Item { - id: badgeAndFavorite - height: body.height / 6 - anchors { - top: parent.top - topMargin: 16 - left: parent.left - leftMargin: 20 - right: parent.right - rightMargin: 20 + MouseArea { + id: imageArea + anchors.fill: parent } + } - Rectangle { - id: badge - color: badgeBackgroundColor - implicitWidth: badgeLabel.width + 18 - implicitHeight: badgeLabel.height + 6 - radius: 6 - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - } + ColumnLayout { + id: body + Layout.topMargin: 16 + Layout.rightMargin: 20 + Layout.leftMargin: 20 + + Item { + id: badgeAndFavorite + height: body.height / 6 + Layout.fillWidth: true + Layout.bottomMargin: 8 + + Rectangle { + id: badge + color: badgeBackgroundColor + implicitWidth: badgeLabel + .width + 18 + implicitHeight: badgeLabel + .height + 6 + radius: 6 + anchors { + left: parent.left + verticalCenter: parent + .verticalCenter + } - FontLoader { - id: roboto - source: doesntEmbed ? "" - : "Roboto/Roboto-Regular.ttf" - } + FontLoader { + id: roboto + source: doesntEmbed ? "" + : "Roboto/Roboto-Regular.ttf" + } - Label { - id: badgeLabel - text: badgeText - color: badgeColor - font { - family: doesntEmbed + Label { + id: badgeLabel + text: badgeText + color: badgeColor + font { + family: doesntEmbed ? "Roboto" : roboto.name - pixelSize: 13 + pixelSize: 13 + } + anchors.centerIn: parent } - anchors.centerIn: parent } - } - Image { - id: favorite - source: "Font-Awesome/svgs/solid/heart.svg" - sourceSize { - height: parent.height / 1.5 - } - anchors { - right: parent.right - verticalCenter: parent.verticalCenter + 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" + } - FontLoader { - id: heebo - name: "Heebo" - source: "Heebo/Heebo-Bold.ttf" - } + Label { + id: title + text: titleText + wrapMode: Text.Wrap + Layout.fillWidth: true + font { + family: heebo.name + pixelSize: 21 + } - Label { - id: title - width: parent.width - text: titleText - wrapMode: Text.Wrap - font { - family: heebo.name - pixelSize: 21 - } - anchors { - top: badgeAndFavorite.bottom - topMargin: 8 - left: parent.left - leftMargin: 20 - right: parent.right - rightMargin: 20 + MouseArea { + id: titleArea + anchors.fill: parent + } } - MouseArea { - id: titleArea - anchors.fill: parent - } - } -/* - Label { - id: textTruncate - text: textTruncateText - wrapMode: Text.Wrap - font { - weight: Font.Light - pointSize: 14 + Label { + id: textTruncate + text: textTruncateText + wrapMode: Text.Wrap + Layout.fillWidth: true + font { + weight: Font.Light + pointSize: 14 + } } - } -*/ - Item { - id: listInline - height: badgeAndFavorite.height - anchors { - top: title.bottom - topMargin: 8 - left: parent.left - leftMargin: 20 - right: parent.right - rightMargin: 20 + + RowLayout { + id: listInline } } - } - Item { - id: footer - width: parent.width - height: (parent.height - image.sourceSize.height) / 3 - anchors.bottom: parent.bottom + RowLayout { + id: footer + } } } - - width: 323.9 - height: 446.583 } |