Added view more to image search

2026-06-25 03:46:38 -04:00
4 changed files with 108 additions and 42 deletions
@@ -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 {
@@ -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.authorUrl = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.AuthorUrlRole)
-        viewMoreImagePopup.description = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.DescriptionRole)
-        viewMoreImagePopup.uuid = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.UuidRole)
-        viewMoreImagePopup.thumbnail = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.ThumbnailRole)
-        viewMoreImagePopup.small = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.SmallUrlRole)
-        viewMoreImagePopup.medium = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.MediumUrlRole)
-        viewMoreImagePopup.large = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.LargeUrlRole)
-        viewMoreImagePopup.extraLarge = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.ExtraLargeUrlRole)
-        viewMoreImagePopup.original = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.OriginalUrlRole)
-        viewMoreImagePopup.portrait = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.PortraitUrlRole)
-        viewMoreImagePopup.landscape = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.LandscapeUrlRole)
-        viewMoreImagePopup.smallSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.SmallSizeRole)
-        viewMoreImagePopup.mediumSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.MediumSizeRole)
-        viewMoreImagePopup.largeSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.LargeSizeRole)
-        viewMoreImagePopup.extraLargeSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.ExtraLargeSizeRole)
-        viewMoreImagePopup.originalSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.OriginalSizeRole)
-        viewMoreImagePopup.portraitSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.PortraitSizeRole)
-        viewMoreImagePopup.landscapeSize = imagesModel.data(imagesModel.index(0,index), FeaturedImagesModel.LandscapeSizeRole)
+        viewMoreImagePopup.author = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.AuthorRole)
+        viewMoreImagePopup.authorUrl = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.AuthorUrlRole)
+        viewMoreImagePopup.description = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.DescriptionRole)
+        viewMoreImagePopup.uuid = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.UuidRole)
+        viewMoreImagePopup.thumbnail = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.ThumbnailRole)
+        viewMoreImagePopup.small = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.SmallUrlRole)
+        viewMoreImagePopup.medium = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.MediumUrlRole)
+        viewMoreImagePopup.large = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LargeUrlRole)
+        viewMoreImagePopup.extraLarge = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.ExtraLargeUrlRole)
+        viewMoreImagePopup.original = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.OriginalUrlRole)
+        viewMoreImagePopup.portrait = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.PortraitUrlRole)
+        viewMoreImagePopup.landscape = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LandscapeUrlRole)
+        viewMoreImagePopup.smallSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.SmallSizeRole)
+        viewMoreImagePopup.mediumSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.MediumSizeRole)
+        viewMoreImagePopup.largeSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LargeSizeRole)
+        viewMoreImagePopup.extraLargeSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.ExtraLargeSizeRole)
+        viewMoreImagePopup.originalSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.OriginalSizeRole)
+        viewMoreImagePopup.portraitSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.PortraitSizeRole)
+        viewMoreImagePopup.landscapeSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LandscapeSizeRole)
        viewMoreImagePopup.opacity = 1
        popupContainer.opacity = 1
        homePageRoot.popup = true
@@ -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: () =>
                {
+                    showImagePopup(parent.index)
+                }
+            }
+        }
+    }
+
+    Rectangle
+    {
+        id: popupContainer
        anchors.fill: parent
-                onClicked: paginator.currentIndex = index
+        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
+    }
 }
@@ -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 {
-                property var texts: [
-                    small,
-                    medium,
-                    large,
-                    extraLarge,
-                    portrait,
-                    landscape
-                ]
-                text: texts[downloadSelector.currentIndex]
-                elide: Text.ElideLeft
+            // Text {
+            //     property var texts: [
+            //         small,
+            //         medium,
+            //         large,
+            //         extraLarge,
+            //         portrait,
+            //         landscape
+            //     ]
+            //     text: texts[downloadSelector.currentIndex]
+            //     elide: Text.ElideLeft

-                Layout.fillWidth: true
-            }
+            //     Layout.fillWidth: true
+            // }

            /** Spacer **/
            Item { Layout.fillWidth: true; Layout.fillHeight: true }