Added view more to image search

KomplexHubContent/MainScreen.qml

@@ -67,10 +67,13 @@ Rectangle {
                 }
             }
 
-            ColumnLayout {
+            ColumnLayout
+            {
                 opacity: popup ? 0 : 1
                 visible: opacity > 0.01
                 id: windowMenuLayout
+                Layout.fillHeight: true
+                anchors.fill: parent
 
                 MenuButton {
                     id: homeMenubutton
@@ -158,7 +161,6 @@ Rectangle {
                         currentMenuButton = this
 
                         searchContainer.preferredHeight = 50
-                        // searchContainer.searchTerm = pageLoader.page.query
                     }
                 }
 
@@ -185,6 +187,7 @@ Rectangle {
 
                 Item {
                     Layout.fillHeight: true
+                    Layout.minimumHeight: 100
                 }
 
                 MenuButton {

KomplexHubContent/pages/HomePage.qml

@@ -145,7 +145,7 @@ Item
                         pexels: true
                         selected: imagesPaginator.currentIndex === parent.index
 
-                        onTriggered: () => packsPaginator.currentIndex = parent.index
+                        onTriggered: () => imagesPaginator.currentIndex = parent.index
 
                         onViewMoreTriggered: () =>
                         {
@@ -324,25 +324,25 @@ Item
 
     function showImagePopup(index)
     {
-        viewMoreImagePopup.author = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.AuthorRole)
+        viewMoreImagePopup.author = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.AuthorRole)
-        viewMoreImagePopup.authorUrl = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.AuthorUrlRole)
+        viewMoreImagePopup.authorUrl = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.AuthorUrlRole)
-        viewMoreImagePopup.description = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.DescriptionRole)
+        viewMoreImagePopup.description = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.DescriptionRole)
-        viewMoreImagePopup.uuid = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.UuidRole)
+        viewMoreImagePopup.uuid = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.UuidRole)
-        viewMoreImagePopup.thumbnail = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.ThumbnailRole)
+        viewMoreImagePopup.thumbnail = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.ThumbnailRole)
-        viewMoreImagePopup.small = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.SmallUrlRole)
+        viewMoreImagePopup.small = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.SmallUrlRole)
-        viewMoreImagePopup.medium = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.MediumUrlRole)
+        viewMoreImagePopup.medium = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.MediumUrlRole)
-        viewMoreImagePopup.large = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.LargeUrlRole)
+        viewMoreImagePopup.large = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LargeUrlRole)
-        viewMoreImagePopup.extraLarge = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.ExtraLargeUrlRole)
+        viewMoreImagePopup.extraLarge = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.ExtraLargeUrlRole)
-        viewMoreImagePopup.original = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.OriginalUrlRole)
+        viewMoreImagePopup.original = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.OriginalUrlRole)
-        viewMoreImagePopup.portrait = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.PortraitUrlRole)
+        viewMoreImagePopup.portrait = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.PortraitUrlRole)
-        viewMoreImagePopup.landscape = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.LandscapeUrlRole)
+        viewMoreImagePopup.landscape = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LandscapeUrlRole)
-        viewMoreImagePopup.smallSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.SmallSizeRole)
+        viewMoreImagePopup.smallSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.SmallSizeRole)
-        viewMoreImagePopup.mediumSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.MediumSizeRole)
+        viewMoreImagePopup.mediumSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.MediumSizeRole)
-        viewMoreImagePopup.largeSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.LargeSizeRole)
+        viewMoreImagePopup.largeSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LargeSizeRole)
-        viewMoreImagePopup.extraLargeSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.ExtraLargeSizeRole)
+        viewMoreImagePopup.extraLargeSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.ExtraLargeSizeRole)
-        viewMoreImagePopup.originalSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.OriginalSizeRole)
+        viewMoreImagePopup.originalSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.OriginalSizeRole)
-        viewMoreImagePopup.portraitSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.PortraitSizeRole)
+        viewMoreImagePopup.portraitSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.PortraitSizeRole)
-        viewMoreImagePopup.landscapeSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.LandscapeSizeRole)
+        viewMoreImagePopup.landscapeSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LandscapeSizeRole)
         viewMoreImagePopup.opacity = 1
         popupContainer.opacity = 1
         homePageRoot.popup = true

KomplexHubContent/pages/ImageSearchPage.qml

@@ -13,6 +13,7 @@ Item
 
     property string query
     readonly property bool searchable: paginator.searchable
+    property bool popup: false
 
     ImageSearchModel
     {
@@ -49,15 +50,77 @@ Item
                 description: parent.description
                 thumbnail: parent.thumbnail
                 uuid: parent.uuid
+                selected: paginator.currentIndex === parent.index
 
-                selected: resultDelegate.highlighted
+                onTriggered: () => paginator.currentIndex = parent.index
-            }
 
-            MouseArea
+                onViewMoreTriggered: () =>
-            {
+                {
-                anchors.fill: parent
+                    showImagePopup(parent.index)
-                onClicked: paginator.currentIndex = index
+                }
             }
         }
     }
+
+    Rectangle
+    {
+        id: popupContainer
+        anchors.fill: parent
+        opacity: 0
+        color: palette.base
+
+        ImageView
+        {
+            id: viewMoreImagePopup
+            anchors.fill: parent
+            opacity: 0
+
+            Behavior on opacity {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        Behavior on opacity {
+            NumberAnimation
+            {
+                duration: 250
+            }
+        }
+    }
+
+    function showImagePopup(index)
+    {
+        viewMoreImagePopup.author = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.AuthorRole)
+        viewMoreImagePopup.authorUrl = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.AuthorUrlRole)
+        viewMoreImagePopup.description = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.DescriptionRole)
+        viewMoreImagePopup.uuid = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.UuidRole)
+        viewMoreImagePopup.thumbnail = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.ThumbnailRole)
+        viewMoreImagePopup.small = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.SmallUrlRole)
+        viewMoreImagePopup.medium = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.MediumUrlRole)
+        viewMoreImagePopup.large = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.LargeUrlRole)
+        viewMoreImagePopup.extraLarge = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.ExtraLargeUrlRole)
+        viewMoreImagePopup.original = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.OriginalUrlRole)
+        viewMoreImagePopup.portrait = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.PortraitUrlRole)
+        viewMoreImagePopup.landscape = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.LandscapeUrlRole)
+        viewMoreImagePopup.smallSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.SmallSizeRole)
+        viewMoreImagePopup.mediumSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.MediumSizeRole)
+        viewMoreImagePopup.largeSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.LargeSizeRole)
+        viewMoreImagePopup.extraLargeSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.ExtraLargeSizeRole)
+        viewMoreImagePopup.originalSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.OriginalSizeRole)
+        viewMoreImagePopup.portraitSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.PortraitSizeRole)
+        viewMoreImagePopup.landscapeSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.LandscapeSizeRole)
+        viewMoreImagePopup.opacity = 1
+        popupContainer.opacity = 1
+        rootItem.popup = true
+    }
+
+    function closePopup()
+    {
+        viewMoreImagePopup.opacity = 0
+        popupContainer.opacity = 0
+        rootItem.popup = false
+    }
 }

KomplexHubModule/Controls/ImageView.qml

@@ -59,7 +59,7 @@ Item
                     width: imageWidth
                     height: imageHeight
                     transform: Image.PreserveAspectFit
-                    source: rootItem.medium
+                    source: rootItem.large
                 }
 
                 /** Spacer **/
@@ -138,20 +138,20 @@ Item
                 }
             }
 
-            Text {
+            // Text {
-                property var texts: [
+            //     property var texts: [
-                    small,
+            //         small,
-                    medium,
+            //         medium,
-                    large,
+            //         large,
-                    extraLarge,
+            //         extraLarge,
-                    portrait,
+            //         portrait,
-                    landscape
+            //         landscape
-                ]
+            //     ]
-                text: texts[downloadSelector.currentIndex]
+            //     text: texts[downloadSelector.currentIndex]
-                elide: Text.ElideLeft
+            //     elide: Text.ElideLeft
 
-                Layout.fillWidth: true
+            //     Layout.fillWidth: true
-            }
+            // }
 
             /** Spacer **/
             Item { Layout.fillWidth: true; Layout.fillHeight: true }