diff options
| -rw-r--r-- | CardGrid.ui.qml | 256 |
1 files changed, 152 insertions, 104 deletions
diff --git a/CardGrid.ui.qml b/CardGrid.ui.qml index 4ec20f6..b9af4fa 100644 --- a/CardGrid.ui.qml +++ b/CardGrid.ui.qml @@ -23,8 +23,6 @@ Item { || Qt.platform.os === "osx" || Qt.platform.os === "unix" || Qt.platform.os === "windows" - width: 301 - height: 451 DropShadow { source: rectangle @@ -38,136 +36,186 @@ Item { id: rectangle radius: 10 anchors { - top: parent.top + fill: parent topMargin: 25.6 - left: parent.left leftMargin: 12.8 - right: parent.right rightMargin: 12.8 - bottom: parent.bottom } - 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 - } + 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: 10 } + } - MouseArea { - id: imageArea - anchors.fill: parent - } + MouseArea { + id: imageArea + anchors.fill: parent } + } - 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 - - FontLoader { - id: roboto - source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf" - } + Rectangle { + height: 16 + anchors { + left: parent.left + right: parent.right + bottom: image.bottom + } + } - Label { - id: badge - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - } - 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 - } - } + ColumnLayout { + id: body + anchors { + top: image.bottom + left: parent.left + leftMargin: 20 + right: parent.right + rightMargin: 20 + bottom: footer.top + } - Image { - id: favorite - source: "Font-Awesome/svgs/solid/heart.svg" - sourceSize { - width: 15 - height: 15 - } - anchors { - right: parent.right - verticalCenter: parent - .verticalCenter - } - } - } + Item { + id: badgeAndFavorite + height: badge.height + Layout.fillWidth: true + Layout.bottomMargin: 8 FontLoader { - id: heebo - source: "Heebo/Heebo-Bold.ttf" + id: roboto + source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf" } Label { - id: title - text: titleText - color: Qt.rgba(.141, .161, .176, 1.0) - wrapMode: Text.Wrap - Layout.fillWidth: true - Layout.bottomMargin: 8 + id: badge + anchors.left: parent.left + topPadding: 4.463 + leftPadding: 8.287 + rightPadding: 8.287 + bottomPadding: 4.463 + text: badgeText + color: badgeColor font { - family: heebo.name - pixelSize: 21 + family: doesntEmbed ? "Roboto" : roboto.name + pixelSize: 13 } - - MouseArea { - id: titleArea - anchors.fill: parent + background: Rectangle { + color: badgeBackgroundColor + radius: 6 } } - Label { - id: textTruncate - text: textTruncateText - color: Qt.rgba(.455, .459, .475, 1.0) - wrapMode: Text.Wrap - Layout.fillWidth: true - Layout.bottomMargin: 8 - font { - family: doesntEmbed ? "Roboto" - : roboto.name - pointSize: 14 + 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 + pixelSize: 21 } - RowLayout { - id: listInline + MouseArea { + id: titleArea + anchors.fill: parent + } + } + + Label { + id: textTruncate + text: textTruncateText + color: Qt.rgba(.455, .459, .475, 1.0) + wrapMode: Text.Wrap + Layout.fillWidth: true + Layout.bottomMargin: 8 + font { + family: doesntEmbed ? "Roboto" + : roboto.name + pointSize: 14 } } RowLayout { - id: footer + id: listInline + } + } + + ColumnLayout { + id: footer + anchors { + left: parent.left + leftMargin: 16 + right: parent.right + rightMargin: 16 + bottom: parent.bottom + bottomMargin: 16 + } + + Rectangle { + border { + color: "#449a9ea4" + 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 + } + } } } } |