Added Image Item View

2026-06-25 03:10:00 -04:00
parent 01716fcccf
commit ad4119ec6c
2 changed files with 102 additions and 12 deletions
@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Effects
@@ -38,7 +38,7 @@ Item
    Rectangle
    {
        anchors.fill: parent
-        color: palette.base
+        color: palette.base.alpha(1)

        ColumnLayout
        {
@@ -49,6 +49,7 @@ Item
            RowLayout
            {
                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignHCenter

                /** Spacer **/
                Item { Layout.fillWidth: true }
@@ -58,7 +59,7 @@ Item
                    width: imageWidth
                    height: imageHeight
                    transform: Image.PreserveAspectFit
-                    source: "qrc:/images/icons/pexels-icon-filled-256.svg"
+                    source: rootItem.medium
                }

                /** Spacer **/
@@ -69,29 +70,117 @@ Item
            {
                id: titleText
                text: rootItem.author
-
+                color: palette.text
                font.bold: true
                font.pixelSize: Constants.h3Font.pixelSize
+                elide: Text.ElideRight

                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
            }

            Text
            {
                id: descriptionText
                text: rootItem.description
-
+                color: palette.text
                font.pointSize: Constants.h4Font.pixelSize
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+                Layout.fillWidth: true
            }

-            Image
-            {
-                width: 64
-                height: 64
-                transform: Image.PreserveAspectFit
-                source: "qrc:/images/icons/pexels-icon-filled-256.svg"

-                Layout.alignment: Qt.AlignBottom | Qt.AlignRight
+            /** Spacer **/
+            Item
+            {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 32
+            }
+
+            Text
+            {
+                text: qsTr("Available Downloads")
+                color: palette.text
+                font.bold: true
+                font.pixelSize: Constants.h3Font.pixelSize
+                elide: Text.ElideRight
+
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+            }
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+
+                ComboBox
+                {
+                    id: downloadSelector
+                    model:[
+                        "Small: " + smallSize,
+                        "Medium: " + mediumSize,
+                        "Large: " + largeSize,
+                        "Extra Large: " + extraLargeSize,
+                        "Portrait: " + portraitSize,
+                        "Landscape: " + landscapeSize
+                    ]
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 36
+                }
+                SquareButton
+                {
+                    Layout.preferredHeight: 36
+                    Layout.preferredWidth: 128
+                    text: qsTr("Download")
+                    icon.source: "qrc:/images/icons/icons8-download.svg"
+                }
+            }
+
+            Text {
+                property var texts: [
+                    small,
+                    medium,
+                    large,
+                    extraLarge,
+                    portrait,
+                    landscape
+                ]
+                text: texts[downloadSelector.currentIndex]
+                elide: Text.ElideLeft
+
+                Layout.fillWidth: true
+            }
+
+            /** Spacer **/
+            Item { Layout.fillWidth: true; Layout.fillHeight: true }
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignBottom
+
+                Text {
+                    text: qsTr("Images Provided Courtesy of Pexels")
+                    elide: Text.ElideLeft
+                    color: palette.text
+                    font.bold: true
+                    font.pixelSize: Constants.h6Font.pixelSize
+
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignLeft
+                }
+
+                Image
+                {
+                    transform: Image.PreserveAspectFit
+                    source: "qrc:/images/icons/pexels-icon-filled-256.svg"
+
+                    Layout.alignment: Qt.AlignRight
+                    Layout.preferredHeight: 32
+                    Layout.preferredWidth: 32
+                }
            }
        }
    }