Added Image Item View

KomplexHubModule/Controls/CMakeLists.txt

@@ -17,5 +17,6 @@ qt6_add_qml_module(KomplexHubModule_Controls
         QML_FILES PaginationBox.qml
         QML_FILES PaginatorGrid.qml
         QML_FILES HorizontalPaginator.qml
+        QML_FILES ImageView.qml
 )
 

KomplexHubModule/Controls/ImageView.qml

@@ -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
+                }
             }
         }
     }