Added view more to image search

CMakeLists.txt

@@ -59,6 +59,17 @@ qt_add_resources(${CMAKE_PROJECT_NAME} "app_images"
         "images/icons/icons8-view-more.svg"
         "images/icons/icons8-video.svg"
         "images/icons/pexels-icon-filled-256.svg"
+        "images/icons/icons8-trash.svg"
+        "images/icons/icons8-download.svg"
+        "images/icons/icons8-play.svg"
+        "images/icons/icons8-stop.svg"
+        "images/icons/icons8-codepen.svg"
+        "images/icons/icons8-cube.svg"
+        "images/icons/icons8-camera.svg"
+        "images/icons/icons8-audio.svg"
+        "images/icons/icons8-3d-model.svg"
+        "images/icons/icons8-3d-glasses.svg"
+        "images/icons/kofi.gif"
         "images/kero/kero_build_1.png"
         "images/kero/kero_build_2.png"
         "images/kero/kero_build_3.png"
@@ -75,7 +86,6 @@ qt_add_resources(${CMAKE_PROJECT_NAME} "app_images"
         "images/kero/kero_run_4.png"
         "images/kero/kero_success.png"
         "images/kero/kero_warning.png"
-        "images/icons/icons8-trash.svg"
     )
 
 include(qds)

KomplexHubContent/CMakeLists.txt

@@ -17,8 +17,7 @@ qt6_add_qml_module(KomplexHubContent
         "pages/SettingsPage.qml"
         "pages/UserProfilePage.qml"
         "pages/WallpaperSettingsPage.qml"
-        QML_FILES pages/VideoSearchPage.qml
-        QML_FILES views/ImageView.qml
+        "pages/VideoSearchPage.qml"
 )
 
 

KomplexHubContent/MainScreen.qml

@@ -14,6 +14,7 @@ import KomplexHubContent
 
 Rectangle {
     property MenuButton currentMenuButton
+    property bool popup: false
 
     id: windowRoot
 
@@ -35,8 +36,43 @@ Rectangle {
 
             color: palette.base.lighter()
 
-            ColumnLayout {
+            ColumnLayout
+            {
+                height: popup ? 64 : 0
+                opacity: popup ? 1 : 0
+
+                MenuButton
+                {
+                    Layout.alignment: Qt.AlignTop
+
+                    height: 64
+                    width: 100
+                    text: qsTr("Back")
+
+                    icon.height: 32
+                    icon.width: 32
+                    icon.url: "qrc:/images/icons/icons8-reply-arrow.svg"
+
+                    onTriggered: () => {
+                        pageLoader.item.closePopup()
+                        selected = false
+                    }
+
+                    Behavior on opacity {
+                        NumberAnimation
+                        {
+                            duration: 250
+                        }
+                    }
+                }
+            }
+
+            ColumnLayout
+            {
+                opacity: popup ? 0 : 1
+                visible: opacity > 0.01
                 id: windowMenuLayout
+                Layout.fillHeight: true
                 anchors.fill: parent
 
                 MenuButton {
@@ -125,7 +161,6 @@ Rectangle {
                         currentMenuButton = this
 
                         searchContainer.preferredHeight = 50
-                        // searchContainer.searchTerm = pageLoader.page.query
                     }
                 }
 
@@ -152,6 +187,7 @@ Rectangle {
 
                 Item {
                     Layout.fillHeight: true
+                    Layout.minimumHeight: 100
                 }
 
                 MenuButton {
@@ -174,6 +210,13 @@ Rectangle {
                         searchContainer.preferredHeight = 0
                     }
                 }
+
+                Behavior on opacity {
+                    NumberAnimation
+                    {
+                        duration: 250
+                    }
+                }
             }
         }
 
@@ -250,6 +293,7 @@ Rectangle {
                                 {
                                     pageLoader.loading = false
                                     pageLoader.updateSearchTerm();
+                                    popupConnection.target = pageLoader.item
                                 }
                             }
                         }
@@ -334,6 +378,17 @@ Rectangle {
         opacity: 0
     }
 
+    Connections
+    {
+        id: popupConnection
+        target: pageLoader.item
+
+        function onPopupChanged()
+        {
+            windowRoot.popup = pageLoader.item.popup
+        }
+    }
+
     Component.onCompleted: () => {
         homeMenubutton.selected = true
         currentMenuButton = homeMenubutton

KomplexHubContent/pages/HomePage.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Effects
@@ -8,66 +8,34 @@ import KomplexHub.Controls
 import KomplexHub.Kero
 import KomplexHubPlugin
 
-Item {
+Item
+{
     readonly property bool searchable: false
     property int resultsPerRow: (homePageRoot.width - (64 + Constants.largeMargin)) / (resultWidth + Constants.largeMargin) + 1
     property int resultWidth: 256
-    property int resultHeight: 256
+    property int resultHeight: 245
+    property bool popup: false
+
+    clip: true
 
     id: homePageRoot
 
     NewestPacksModel
     {
-        id: newestPacksModel
+        id: packsModel
         resultsPerPage: homePageRoot.resultsPerRow
-
-        onStateChanged: () =>
-                        {
-                            if(state == NewestPacksModel.Loading)
-                            {
-                                console.log("Newest packs loading")
-                            }
-                            else if(state == NewestPacksModel.Idle)
-                            {
-                                console.log("Newest packs finished")
-                            }
-                        }
     }
 
     FeaturedImagesModel
     {
-        id: featuredImagesModel
+        id: imagesModel
         resultsPerPage: homePageRoot.resultsPerRow
-
-        onStateChanged: () =>
-                        {
-                            if(state == FeaturedImagesModel.Loading)
-                            {
-                                console.log("Featured Images loading")
-                            }
-                            else if(state == FeaturedImagesModel.Idle)
-                            {
-                                console.log("Featured Images finished")
-                            }
-                        }
     }
 
     FeaturedVideosModel
     {
-        id: featuredVideosModel
+        id: videosModel
         resultsPerPage: homePageRoot.resultsPerRow
-
-        onStateChanged: () =>
-                        {
-                            if(state == FeaturedVideosModel.Loading)
-                            {
-                                console.log("Featured Videos loading")
-                            }
-                            else if(state == FeaturedVideosModel.Idle)
-                            {
-                                console.log("Featured Videos finished")
-                            }
-                        }
     }
 
     Rectangle
@@ -75,329 +43,179 @@ Item {
         anchors.fill: parent
         color: palette.base
 
-        ScrollView
+        ColumnLayout
         {
-            id: newPacksView
+            id: resultsLayout
             anchors.fill: parent
-            anchors.margins: Constants.largeMargin
+            anchors.margins: Constants.mediumMargin
 
-            ColumnLayout
+            Text
             {
-                width: newPacksView.width
+                Layout.alignment: Qt.AlignTop
+                Layout.preferredHeight: 50
 
-                ColumnLayout
+                color: palette.text
+                font.pixelSize: Constants.h2Font.pixelSize
+                font.bold: true
+                text: qsTr("Newest Wallpaper Packs")
+                verticalAlignment: Qt.AlignVCenter
+            }
+
+            HorizontalPaginator
+            {
+                id: packsPaginator
+                Layout.fillWidth: true
+                Layout.preferredHeight: 245
+                Layout.alignment: Qt.AlignTop
+
+                model: packsModel
+                delegate: ItemDelegate
                 {
-                    width: parent.width
-                    height: 420
+                    width: resultWidth
+                    height: resultHeight
 
-                    Text
+                    required property string name
+                    required property string author
+                    required property string description
+                    required property string uuid
+                    required property string thumbnail
+                    required property string authorId
+                    required property int index
+
+                    SearchResultItem
                     {
-                        color: palette.text
-                        font.pixelSize: Constants.h2Font.pixelSize
-                        font.bold: true
-                        text: qsTr("Newest Wallpaper Packs")
-                    }
+                        anchors.fill: parent
+                        title: parent.name
+                        author: parent.author
+                        description: parent.description
+                        thumbnail: parent.thumbnail
+                        uuid: parent.uuid
 
-                    RowLayout
-                    {
-                        Layout.fillWidth: true
-                        Layout.preferredHeight: 256
+                        selected: packsPaginator.currentIndex === parent.index
 
-                        Rectangle
+                        onTriggered: () => packsPaginator.currentIndex = parent.index
+
+                        function onViewMoreTriggered()
                         {
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
 
-                            color: "transparent"
-
-                            clip: true
-                            Row
-                            {
-                                clip: true
-                                spacing: Constants.mediumMargin
-
-                                anchors.top: parent.top
-                                anchors.left: parent.left
-                                anchors.bottom: parent.bottom
-                                anchors.right: newPacksMoreButton.left
-                                anchors.leftMargin: Constants.largeMargin
-                                anchors.rightMargin: Constants.largeMargin
-
-                                Repeater
-                                {
-                                    model: newestPacksModel
-
-                                    delegate: Item {
-                                        width: resultWidth
-                                        height: resultHeight
-
-                                        required property string name
-                                        required property string author
-                                        required property string description
-                                        required property string uuid
-                                        required property string thumbnail
-                                        required property string authorId
-
-                                        SearchResultItem
-                                        {
-                                            anchors.fill: parent
-                                            title: parent.name
-                                            author: parent.author
-                                            description: parent.description
-                                            thumbnail: parent.thumbnail
-                                            uuid: parent.uuid
-                                        }
-                                    }
-                                }
-                            }
-
-                            Rectangle
-                            {
-                                id: newestGradientMap
-                                anchors.top: parent.top
-                                anchors.right: newPacksMoreButton.left
-                                height: resultHeight
-                                width: resultWidth / 4
-
-                                gradient: Gradient
-                                {
-                                    orientation: Gradient.Horizontal
-                                    GradientStop { position: 0.0; color: "transparent" }
-                                    GradientStop { position: 1.0; color: palette.light }
-                                }
-                                opacity: 0.5
-                            }
-
-                            SquareButton
-                            {
-                                id: newPacksMoreButton
-                                anchors.top: parent.top
-                                anchors.right: parent.right
-                                height: resultHeight
-
-                                width: 64
-
-                                icon.source: "qrc:/images/icons/icons8-forward.svg"
-                                icon.height: 24
-                                icon.width: 24
-                            }
-                        }
-                    }
-                }
-
-                Item {
-                    height: Constants.largeMargin
-                }
-
-                ColumnLayout
-                {
-                    width: parent.width
-                    height: 420
-
-                    Text
-                    {
-                        color: palette.text
-                        font.pixelSize: Constants.h2Font.pixelSize
-                        font.bold: true
-                        text: qsTr("Featured Images")
-                    }
-
-                    RowLayout
-                    {
-                        Layout.fillWidth: true
-                        Layout.preferredHeight: 256
-
-                        Rectangle
-                        {
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
-
-                            color: "transparent"
-
-                            clip: true
-                            Row
-                            {
-                                clip: true
-                                spacing: Constants.mediumMargin
-
-                                anchors.top: parent.top
-                                anchors.left: parent.left
-                                anchors.bottom: parent.bottom
-                                anchors.right: featuredImagesMoreButton.left
-                                anchors.leftMargin: Constants.largeMargin
-                                anchors.rightMargin: Constants.largeMargin
-
-                                Repeater
-                                {
-                                    model: featuredImagesModel
-
-                                    delegate: Item
-                                    {
-                                        width: resultWidth
-                                        height: resultHeight
-
-                                        required property string author
-                                        required property string description
-                                        required property string uuid
-                                        required property string thumbnail
-                                        required property string authorId
-
-                                        SearchResultItem
-                                        {
-                                            anchors.fill: parent
-                                            title: parent.author
-                                            description: parent.description
-                                            thumbnail: parent.thumbnail
-                                            uuid: parent.uuid
-
-                                            pexels: true
-                                        }
-                                    }
-                                }
-                            }
-
-                            Rectangle
-                            {
-                                anchors.top: parent.top
-                                anchors.right: featuredImagesMoreButton.left
-                                height: resultHeight
-                                width: resultWidth / 4
-
-                                gradient: Gradient
-                                {
-                                    orientation: Gradient.Horizontal
-                                    GradientStop { position: 0.0; color: "transparent" }
-                                    GradientStop { position: 1.0; color: palette.light }
-                                }
-                                opacity: 0.5
-                            }
-
-                            SquareButton
-                            {
-                                id: featuredImagesMoreButton
-                                anchors.top: parent.top
-                                anchors.right: parent.right
-                                height: resultHeight
-
-                                width: 64
-
-                                icon.source: "qrc:/images/icons/icons8-forward.svg"
-                                icon.height: 24
-                                icon.width: 24
-                            }
-                        }
-                    }
-                }
-
-                Item {
-                    height: Constants.largeMargin
-                }
-
-                ColumnLayout
-                {
-                    width: parent.width
-                    height: 420
-
-                    Text
-                    {
-                        color: palette.text
-                        font.pixelSize: Constants.h2Font.pixelSize
-                        font.bold: true
-                        text: qsTr("Featured Videos")
-                    }
-
-                    RowLayout
-                    {
-                        Layout.fillWidth: true
-                        Layout.preferredHeight: 256
-
-                        Rectangle
-                        {
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
-
-                            color: "transparent"
-
-                            clip: true
-                            Row
-                            {
-                                clip: true
-                                spacing: Constants.mediumMargin
-
-                                anchors.top: parent.top
-                                anchors.left: parent.left
-                                anchors.bottom: parent.bottom
-                                anchors.right: featuredVideosMoreButton.left
-                                anchors.leftMargin: Constants.largeMargin
-                                anchors.rightMargin: Constants.largeMargin
-
-                                Repeater
-                                {
-                                    model: featuredVideosModel
-
-                                    delegate: Item {
-                                        width: resultWidth
-                                        height: resultHeight
-
-                                        required property string uuid
-                                        required property string author
-                                        required property string authorId
-                                        required property string authorUrl
-                                        required property string thumbnail
-
-                                        SearchResultItem
-                                        {
-                                            anchors.fill: parent
-                                            title: parent.author
-                                            thumbnail: parent.thumbnail
-                                            uuid: parent.uuid
-                                            pexels: true
-                                        }
-                                    }
-                                }
-                            }
-
-                            Rectangle
-                            {
-                                anchors.top: parent.top
-                                anchors.right: featuredVideosMoreButton.left
-                                height: resultHeight
-                                width: resultWidth / 4
-
-                                gradient: Gradient
-                                {
-                                    orientation: Gradient.Horizontal
-                                    GradientStop { position: 0.0; color: "transparent" }
-                                    GradientStop { position: 1.0; color: palette.light }
-                                }
-                                opacity: 0.5
-                            }
-
-                            SquareButton
-                            {
-                                id: featuredVideosMoreButton
-                                anchors.top: parent.top
-                                anchors.right: parent.right
-                                height: resultHeight
-
-                                width: 64
-
-                                icon.source: "qrc:/images/icons/icons8-forward.svg"
-                                icon.height: 24
-                                icon.width: 24
-                            }
                         }
                     }
                 }
             }
+
+            Text
+            {
+                Layout.alignment: Qt.AlignTop
+                Layout.preferredHeight: 50
+
+                color: palette.text
+                font.pixelSize: Constants.h2Font.pixelSize
+                font.bold: true
+                text: qsTr("Featured Images")
+                verticalAlignment: Qt.AlignVCenter
+            }
+
+            HorizontalPaginator
+            {
+                id: imagesPaginator
+                Layout.fillWidth: true
+                Layout.preferredHeight: 245
+                Layout.alignment: Qt.AlignTop
+
+                model: imagesModel
+                delegate: ItemDelegate
+                {
+                    width: resultWidth
+                    height: resultHeight
+
+                    required property string author
+                    required property string description
+                    required property string uuid
+                    required property string thumbnail
+                    required property string authorId
+                    required property int index
+
+                    SearchResultItem
+                    {
+                        anchors.fill: parent
+                        title: parent.author
+                        description: parent.description
+                        thumbnail: parent.thumbnail
+                        uuid: parent.uuid
+                        pexels: true
+                        selected: imagesPaginator.currentIndex === parent.index
+
+                        onTriggered: () => imagesPaginator.currentIndex = parent.index
+
+                        onViewMoreTriggered: () =>
+                        {
+                            showImagePopup(parent.index)
+                        }
+                    }
+                }
+            }
+
+            Text
+            {
+                Layout.alignment: Qt.AlignTop
+                Layout.preferredHeight: 50
+
+                color: palette.text
+                font.pixelSize: Constants.h2Font.pixelSize
+                font.bold: true
+                text: qsTr("Popular Videos")
+                verticalAlignment: Qt.AlignVCenter
+            }
+
+            HorizontalPaginator
+            {
+                id: videosPaginator
+                Layout.fillWidth: true
+                Layout.preferredHeight: 245
+                Layout.alignment: Qt.AlignTop
+
+                model: videosModel
+                delegate: ItemDelegate
+                {
+                    width: resultWidth
+                    height: resultHeight
+
+                    required property string uuid
+                    required property string author
+                    required property string authorId
+                    required property string authorUrl
+                    required property string thumbnail
+                    required property int index
+
+                    SearchResultItem
+                    {
+                        anchors.fill: parent
+                        title: parent.author
+                        thumbnail: parent.thumbnail
+                        uuid: parent.uuid
+                        pexels: true
+                        selected: videosPaginator.currentIndex === parent.index
+
+                        onTriggered: () => packsPaginator.currentIndex = parent.index
+
+                        onViewMoreTriggered:() =>
+                        {
+                            viewMoreImagePopup.opacity = 1
+                        }
+                    }
+                }
+            }
+
+            /* spacer */
+            Item { Layout.fillHeight: true }
         }
     }
 
     Component.onCompleted: () =>
     {
-        featuredImagesModel.nextPage()
-        featuredVideosModel.nextPage()
-        newestPacksModel.nextPage()
+        imagesModel.nextPage()
+        videosModel.nextPage()
+        packsModel.nextPage()
     }
 
     KeroLoadingAnimation
@@ -405,26 +223,135 @@ Item {
         id: loadingAnimation
         anchors.fill: parent
 
-        OpacityAnimator on opacity {
-            duration: 150
+        visible: opacity > 0
+        opacity: 1
+    }
+
+    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
+                }
+            }
         }
 
-        visible: opacity > 0
-        opacity: 0
+        Behavior on opacity {
+            NumberAnimation
+            {
+                duration: 250
+            }
+        }
     }
 
     states: [
         State {
             name: "loading"
-            when: newestPacksModel.state == NewestPacksModel.Loading ||
-                  featuredImagesModel.state == FeaturedImagesModel.Loading ||
-                  featuredVideosModel.state == FeaturedVideosModel.Loading;
+            when: packsModel.state === NewestPacksModel.Loading ||
+                  imagesModel.state === FeaturedImagesModel.Loading ||
+                  videosModel.state === FeaturedVideosModel.Loading;
 
-            PropertyChanges {
+            PropertyChanges
+            {
                 target: loadingAnimation
                 opacity: 1
             }
+
+            PropertyChanges
+            {
+                target: resultsLayout
+                opacity: 0
+            }
+
+            PropertyChanges
+            {
+                target: popupContainer
+                opacity: 0
+            }
+        },
+        State {
+            name: "idle"
+            when: packsModel.state !== NewestPacksModel.Loading &&
+                  imagesModel.state !== FeaturedImagesModel.Loading &&
+                  videosModel.state !== FeaturedVideosModel.Loading;
+
+            PropertyChanges
+            {
+                target: loadingAnimation
+                opacity: 0
+            }
+
+            PropertyChanges
+            {
+                target: resultsLayout
+                opacity: 1
+            }
+        }
+    ]
+
+    transitions: [
+        Transition
+        {
+            from: "loading"
+            to: "idle"
+            NumberAnimation
+            {
+                target: loadingAnimation
+                duration: 250
+                property: "opacity";
+            }
+            NumberAnimation
+            {
+                target: resultsLayout
+                duration: 250
+                property: "opacity";
+            }
         }
 
     ]
+
+    function showImagePopup(index)
+    {
+        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
+    }
+
+    function closePopup()
+    {
+        viewMoreImagePopup.opacity = 0
+        popupContainer.opacity = 0
+        homePageRoot.popup = false
+    }
 }

KomplexHubContent/pages/ImageSearchPage.qml

@@ -13,6 +13,7 @@ Item
 
     property string query
     readonly property bool searchable: paginator.searchable
+    property bool popup: false
 
     ImageSearchModel
     {
@@ -28,15 +29,19 @@ Item
         model: searchModel
         loading: model.state === ImageSearchModel.Loading
 
-        delegate: Item
+        delegate: ItemDelegate
         {
+            id: resultDelegate
+
             width: 256
             height: 245
+
             required property string author
             required property string description
             required property string uuid
             required property string thumbnail
             required property string authorId
+            required property int index
 
             SearchResultItem
             {
@@ -45,7 +50,77 @@ Item
                 description: parent.description
                 thumbnail: parent.thumbnail
                 uuid: parent.uuid
+                selected: paginator.currentIndex === parent.index
+
+                onTriggered: () => paginator.currentIndex = parent.index
+
+                onViewMoreTriggered: () =>
+                {
+                    showImagePopup(parent.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
+    }
 }

KomplexHubContent/pages/LiveSearchPage.qml

@@ -12,7 +12,7 @@ Item
     property string query
     readonly property bool searchable: paginator.searchable
 
-    VideoSearchModel
+    PackSearchModel
     {
         id: searchModel
         query: rootItem.query
@@ -24,12 +24,16 @@ Item
         id: paginator
         anchors.fill: parent
         model: searchModel
-        loading: model.state === VideoSearchModel.Loading
+        loading: model.state === PackSearchModel.Loading
 
-        delegate: Item
+        delegate: ItemDelegate
         {
+            id: resultDelegate
+
             width: 256
             height: 245
+
+            required property string name
             required property string author
             required property string description
             required property string uuid
@@ -43,6 +47,14 @@ Item
                 description: parent.description
                 thumbnail: parent.thumbnail
                 uuid: parent.uuid
+
+                selected: resultDelegate.highlighted
+            }
+
+            MouseArea
+            {
+                anchors.fill: parent
+                onClicked: paginator.currentIndex = index
             }
         }
     }

KomplexHubContent/pages/VideoSearchPage.qml

@@ -28,15 +28,19 @@ Item
         model: searchModel
         loading: model.state === VideoSearchModel.Loading
 
-        delegate: Item
+        delegate: ItemDelegate
         {
+            id: resultDelegate
+
             width: 256
             height: 245
+
             required property string author
             required property string description
             required property string uuid
             required property string thumbnail
             required property string authorId
+            required property int index
 
             SearchResultItem
             {
@@ -45,6 +49,14 @@ Item
                 description: parent.description
                 thumbnail: parent.thumbnail
                 uuid: parent.uuid
+
+                selected: resultDelegate.highlighted
+            }
+
+            MouseArea
+            {
+                anchors.fill: parent
+                onClicked: paginator.currentIndex = index
             }
         }
     }

KomplexHubContent/views/ImageView.qml

@@ -1,98 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Effects
-
-import KomplexHub
-import KomplexHub.Controls
-import KomplexHub.Kero
-import KomplexHubPlugin
-
-Item
-{
-    property string uuid
-    property string author
-    property string authorUrl
-    property string description
-    property string thumbnail
-    property string portrait
-    property string landscape
-    property string small
-    property string original
-    property string medium
-    property string large
-    property string extraLarge
-    property string portraitSize
-    property string landscapeSize
-    property string smallSize
-    property string originalSize
-    property string mediumSize
-    property string largeSize
-    property string extraLargeSize
-
-    property int imageHeight
-    property int imageWidth
-
-    id: rootItem
-
-    Rectangle
-    {
-        anchors.fill: parent
-        color: palette.base
-
-        ColumnLayout
-        {
-            anchors.fill: parent
-            anchors.margins: Constants.largeMargin
-            spacing: Constants.largeMargin
-
-            RowLayout
-            {
-                Layout.fillWidth: true
-
-                /** Spacer **/
-                Item { Layout.fillWidth: true }
-
-                Image
-                {
-                    width: imageWidth
-                    height: imageHeight
-                    transform: Image.PreserveAspectFit
-                    source: "qrc:/images/icons/pexels-icon-filled-256.svg"
-                }
-
-                /** Spacer **/
-                Item { Layout.fillWidth: true }
-            }
-
-            Text
-            {
-                id: titleText
-                text: rootItem.author
-
-                font.bold: true
-                font.pixelSize: Constants.h3Font.pixelSize
-
-                Layout.fillWidth: true
-            }
-
-            Text
-            {
-                id: descriptionText
-                text: rootItem.description
-
-                font.pointSize: Constants.h4Font.pixelSize
-            }
-
-            Image
-            {
-                width: 64
-                height: 64
-                transform: Image.PreserveAspectFit
-                source: "qrc:/images/icons/pexels-icon-filled-256.svg"
-
-                Layout.alignment: Qt.AlignBottom | Qt.AlignRight
-            }
-        }
-    }
-}

KomplexHubModule/Controls/CMakeLists.txt

@@ -16,5 +16,7 @@ qt6_add_qml_module(KomplexHubModule_Controls
         "SearchResultList.qml"
         QML_FILES PaginationBox.qml
         QML_FILES PaginatorGrid.qml
+        QML_FILES HorizontalPaginator.qml
+        QML_FILES ImageView.qml
 )
 

KomplexHubModule/Controls/HorizontalPaginator.qml

@@ -0,0 +1,169 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import KomplexHub
+import KomplexHub.Controls
+import KomplexHub.Kero
+import KomplexHubPlugin
+
+Item
+{
+    readonly property bool searchable: false
+    property int resultsPerRow: (resultsContainer.width - (Constants.largeMargin * 2)) / (resultWidth + Constants.mediumMargin)
+    property int rows: ((resultsContainer.height - (Constants.largeMargin * 2)) / (resultHeight + Constants.mediumMargin))
+    property int resultsPerPage: resultsPerRow * rows
+    property int emptyWidth: (resultsContainer.width - (Constants.largeMargin * 2)) - (resultsPerRow * (resultWidth + Constants.mediumMargin))
+    property int resultWidth: 256
+    property int resultHeight: 245
+    property bool loading: false
+
+    property alias currentItem: resultsView.currentItem
+    property alias currentIndex: resultsView.currentIndex
+
+    property var model
+
+    property Component delegate
+
+    id: rootItem
+
+    Item
+    {
+        id: resultsContainer
+        anchors.fill: parent
+
+        RowLayout
+        {
+            anchors.fill: parent
+
+            Component
+            {
+                id: highlight
+                Rectangle
+                {
+                    width: 256
+                    height: 245
+                    color: palette.accent
+                    radius: 5
+                    // x: resultsView.currentItem.x
+                    // y: resultsView.currentItem.y
+                    Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
+                    Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }
+                }
+            }
+
+            ListView
+            {
+                id: resultsView
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+
+                spacing: Constants.mediumMargin
+
+                orientation: ListView.Horizontal
+                model: rootItem.model
+
+                delegate: rootItem.delegate
+                highlight: Rectangle { color: palette.accent; radius: 5 }
+                highlightFollowsCurrentItem: true
+                focus: true
+
+                add: Transition
+                {
+                    NumberAnimation
+                    {
+                        properties: "x"
+                        from: resultsContainer.width
+                        duration: 250
+                    }
+                    NumberAnimation
+                    {
+                        properties: "opacity,scale"
+                        to: 1.0
+                        duration: 500
+                    }
+                }
+
+                move: Transition
+                {
+                    NumberAnimation
+                    {
+                        properties: "x,y"
+                        duration: 250
+                    }
+                }
+
+                displaced: Transition
+                {
+                    NumberAnimation
+                    {
+                        properties: "x,y"
+                        duration: 250
+                    }
+                }
+
+                populate: Transition
+                {
+                    NumberAnimation
+                    {
+                        properties: "opacity,scale"
+                        to: 1.0
+                        duration: 500
+                    }
+                }
+
+                remove: Transition
+                {
+                    NumberAnimation
+                    {
+                        properties: "x"
+                        to: 0
+                        duration: 250
+                    }
+                    NumberAnimation
+                    {
+                        properties: "opacity"
+                        to: 0
+                        duration: 250
+                    }
+                }
+            }
+
+            Item
+            {
+                Layout.fillHeight: true
+                Layout.preferredWidth: 128
+                Rectangle
+                {
+                    id: gradientMap
+                    anchors.top: parent.top
+                    anchors.right: moreButton.left
+                    height: resultHeight
+                    width: resultWidth / 4
+
+                    gradient: Gradient
+                    {
+                        orientation: Gradient.Horizontal
+                        GradientStop { position: 0.0; color: "transparent" }
+                        GradientStop { position: 1.0; color: palette.light }
+                    }
+                    opacity: 0.5
+                }
+
+                SquareButton
+                {
+                    id: moreButton
+                    anchors.top: parent.top
+                    anchors.right: parent.right
+                    height: resultHeight
+
+                    width: 64
+
+                    icon.source: "qrc:/images/icons/icons8-forward.svg"
+                    icon.height: 24
+                    icon.width: 24
+                }
+            }
+        }
+    }
+}

KomplexHubModule/Controls/ImageView.qml

@@ -0,0 +1,187 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Effects
+
+import KomplexHub
+import KomplexHub.Controls
+import KomplexHub.Kero
+import KomplexHubPlugin
+
+Item
+{
+    property string uuid
+    property string author
+    property string authorUrl
+    property string description
+    property string thumbnail
+    property string portrait
+    property string landscape
+    property string small
+    property string original
+    property string medium
+    property string large
+    property string extraLarge
+    property string portraitSize
+    property string landscapeSize
+    property string smallSize
+    property string originalSize
+    property string mediumSize
+    property string largeSize
+    property string extraLargeSize
+
+    property int imageHeight
+    property int imageWidth
+
+    id: rootItem
+
+    Rectangle
+    {
+        anchors.fill: parent
+        color: palette.base.alpha(1)
+
+        ColumnLayout
+        {
+            anchors.fill: parent
+            anchors.margins: Constants.largeMargin
+            spacing: Constants.largeMargin
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignHCenter
+
+                /** Spacer **/
+                Item { Layout.fillWidth: true }
+
+                Image
+                {
+                    width: imageWidth
+                    height: imageHeight
+                    transform: Image.PreserveAspectFit
+                    source: rootItem.large
+                }
+
+                /** Spacer **/
+                Item { Layout.fillWidth: true }
+            }
+
+            Text
+            {
+                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
+            }
+
+
+            /** 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
+                }
+            }
+        }
+    }
+}

KomplexHubModule/Controls/PaginatorGrid.qml

@@ -19,6 +19,9 @@ Item
     property int resultHeight: 245
     property bool loading: false
 
+    property alias currentItem: resultsView.currentItem
+    property alias currentIndex: resultsView.currentIndex
+
     property var model
 
     property Component delegate
@@ -78,6 +81,22 @@ Item
                 Layout.maximumWidth: emptyWidth / 2
             }
 
+            Component
+            {
+                id: highlight
+                Rectangle
+                {
+                    width: view.cellWidth
+                    height: view.cellHeight
+                    color: palette.accent
+                    radius: 5
+                    x: view.currentItem.x
+                    y: view.currentItem.y
+                    Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
+                    Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }
+                }
+            }
+
             GridView
             {
                 id: resultsView
@@ -86,10 +105,12 @@ Item
 
                 cellWidth: 256 + Constants.mediumMargin
                 cellHeight: 245 + Constants.mediumMargin
-                focus: true
                 model: rootItem.model
 
                 delegate: rootItem.delegate
+                highlight: Rectangle { color: palette.accent; radius: 5 }
+                highlightFollowsCurrentItem: true
+                focus: true
 
                 add: Transition
                 {
@@ -116,6 +137,15 @@ Item
                     }
                 }
 
+                displaced: Transition
+                {
+                    NumberAnimation
+                    {
+                        properties: "x,y"
+                        duration: 250
+                    }
+                }
+
                 populate: Transition
                 {
                     NumberAnimation
@@ -146,6 +176,7 @@ Item
 
         PaginationBox
         {
+            id: buttonBoxLayout
             height: 35
 
             anchors.left: parent.left
@@ -304,12 +335,14 @@ Item
                 target: noResultsOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         },
         Transition
@@ -321,12 +354,14 @@ Item
                 target: noSearchOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         },
         Transition
@@ -338,12 +373,14 @@ Item
                 target: noSearchOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         },
         Transition
@@ -355,12 +392,14 @@ Item
                 target: noResultsOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         },
         Transition
@@ -372,12 +411,14 @@ Item
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: resultsView
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         }
     ]

KomplexHubModule/Controls/SearchResultItem.qml

@@ -14,6 +14,7 @@ Item {
     property bool pexels: false
 
     signal triggered
+    signal viewMoreTriggered
 
     id: searchResultItemRoot
     width: 256
@@ -24,11 +25,34 @@ Item {
     {
         id: searchResultItemContainer
         anchors.fill: parent
-
         border.color: palette.alternateBase.lighter(1.75)
-
         color: palette.alternateBase.lighter(1.25)
 
+        MouseArea
+        {
+            property string lastState
+            id: mouseArea
+
+            anchors.fill: parent
+            hoverEnabled: true
+
+            onEntered: () => {
+                states.hovered = true
+            }
+
+            onExited: () => {
+                if(!viewMoreButton.hovered)
+                    states.hovered = false
+            }
+
+            onReleased: () => {
+                if(!states.selected)
+                {
+                    searchResultItemRoot.triggered()
+                }
+            }
+        }
+
         ColumnLayout
         {
             anchors.fill: parent
@@ -69,7 +93,8 @@ Item {
                 }
             }
 
-            Text {
+            Text
+            {
                 color: palette.text
                 text: searchResultItemRoot.title
 
@@ -83,7 +108,8 @@ Item {
 
             Item { Layout.fillHeight: true }
 
-            Text {
+            Text
+            {
                 color: palette.text
                 font.pixelSize: 12
                 text: "By: " + searchResultItemRoot.author
@@ -94,80 +120,70 @@ Item {
                 visible: !searchResultItemRoot.pexels
             }
 
-            Text {
+            Text
+            {
+                id: descriptionText
                 clip: true
                 color: palette.text
                 font.pixelSize: 12
                 text: searchResultItemRoot.description
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                 textFormat: Text.PlainText
-                Layout.maximumHeight: 32
-                Layout.preferredHeight: 32
                 elide: Text.ElideRight
 
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                Layout.maximumHeight: 32
+                Layout.preferredHeight: 32
                 Layout.preferredWidth: 236
                 Layout.maximumWidth: 236
                 Layout.bottomMargin: 3
             }
 
+            SquareButton
+            {
+                id: viewMoreButton
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                Layout.maximumHeight: 50
+                Layout.preferredHeight: 32
+                Layout.preferredWidth: 236
+                Layout.maximumWidth: 236
+                Layout.bottomMargin: 3
+
+                text: qsTr("View More")
+                opacity: 0
+
+                onTriggered: () => {
+                    searchResultItemRoot.viewMoreTriggered()
+                }
+            }
+
             Item { Layout.fillHeight: true }
         }
-
-        Behavior on color {
-            ColorAnimation { duration: 200 }
-        }
     }
 
-    MouseArea {
-        property string lastState
-        id: mouseArea
+    QtObject
+    {
+        id: states
+        property bool clicked: false
+        property bool hovered: false
+        property alias selected: searchResultItemRoot.selected
+        property bool idle: true
 
-        anchors.fill: parent
-        hoverEnabled: true
-
-        onEntered: () => {
-            if(!selected)
-                searchResultItemRoot.state = "hovered"
-        }
-
-        onExited: () => {
-            lastState = ""
-
-            if(selected)
-                searchResultItemRoot.state = "selected"
-            else
-                searchResultItemRoot.state = ""
-        }
-
-        onPressed: () => {
-            if(!selected) {
-                lastState = searchResultItemRoot.state
-                searchResultItemRoot.state = "clicked"
+        onIdleChanged: () =>
+        {
+            if(idle)
+            {
+                clicked = false
+                hovered = false
+                selected = false
             }
         }
-
-        onReleased: () => {
-            if(!mouseArea.containsMouse)
-                return;
-
-            selected = !selected
-        }
-    }
-
-    onSelectedChanged: () => {
-        if(selected) {
-            searchResultItemRoot.triggered()
-            searchResultItemRoot.state = "selected"
-        }
-        else {
-            searchResultItemRoot.state = ""
-        }
     }
 
     states: [
         State {
             name: "hovered"
+            when: states.hovered && !states.selected
 
             PropertyChanges {
                 target: searchResultItemContainer
@@ -177,14 +193,140 @@ Item {
                                       0.5, // Set custom lightness
                                       1.0)
             }
+
+            PropertyChanges
+            {
+                target: viewMoreButton
+                opacity: 0
+
+                Layout.preferredHeight: 0
+            }
+
+            PropertyChanges
+            {
+                target: descriptionText
+                opacity: 1
+
+                Layout.preferredHeight: 32
+            }
         },
         State {
             name: "selected"
+            when: states.selected && !states.hovered
 
-            PropertyChanges {
+            PropertyChanges
+            {
                 target: searchResultItemContainer
                 color: palette.accent
             }
+        },
+        State
+        {
+            name: "view_more"
+            when: states.selected && states.hovered
+
+            PropertyChanges
+            {
+                target: viewMoreButton
+                opacity: 1
+
+                Layout.preferredHeight: 32
+            }
+
+            PropertyChanges
+            {
+                target: descriptionText
+                opacity: 0
+
+                Layout.preferredHeight: 0
+            }
+        },
+
+        State
+        {
+            name: "default"
+            when: states.idle
+
+            PropertyChanges
+            {
+                target: viewMoreButton
+                opacity: 0
+
+                Layout.preferredHeight: 0
+            }
+
+            PropertyChanges
+            {
+                target: descriptionText
+                opacity: 1
+
+                Layout.preferredHeight: 32
+            }
+        }
+
+    ]
+
+    transitions:
+    [
+        Transition
+        {
+            to: "selected"
+
+            ColorAnimation
+            {
+                target: searchResultItemContainer
+                duration: 250
+            }
+        },
+
+        Transition
+        {
+            from: "selected"
+            to: "view_more"
+
+            NumberAnimation
+            {
+                target: viewMoreButton
+                property: "opacity"
+                duration: 250
+                easing.type: Easing.InOutQuad
+            }
+        },
+
+        Transition
+        {
+            from: "view_more"
+            to: "selected"
+
+            NumberAnimation
+            {
+                target: descriptionText
+                property: "opacity"
+                duration: 250
+                easing.type: Easing.InOutQuad
+            }
+        },
+
+        Transition
+        {
+            to: "default"
+
+            ColorAnimation
+            {
+                target: searchResultItemContainer
+                duration: 250
+            }
+        },
+
+        Transition
+        {
+            to: "hovered"
+
+            ColorAnimation
+            {
+                target: searchResultItemContainer
+                duration: 250
+            }
         }
     ]
 }

KomplexHubModule/Controls/SquareButton.qml

@@ -12,6 +12,7 @@ Item {
     property color color: palette.button
     property Gradient gradient: defaultGradient
     property BorderSettings border: BorderSettings {}
+    readonly property bool hovered: state === "hovered"
 
     signal triggered
 
@@ -106,10 +107,6 @@ Item {
         Behavior on color {
             ColorAnimation { duration: 250 }
         }
-
-        // Behavior on gradient {
-        //     PropertyAnimation { duration: 250 }
-        // }
     }
 
     MouseArea {
@@ -216,7 +213,5 @@ Item {
                 color: palette.text.darker()
             }
         }
-
     ]
-
 }

KomplexHubPlugin/featuredimagesmodel.cpp

@@ -117,6 +117,27 @@ auto FeaturedImagesModel::data(const QModelIndex &index, int role) const -> QVar
     case ExtraLargeUrlRole:
         data = dataPoint.sources.value(QString::fromUtf8("large2x"));
         break;
+    case PortraitSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("portrait"));
+        break;
+    case LandscapeSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("landscape"));
+        break;
+    case SmallSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("small"));
+        break;
+    case OriginalSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("original"));
+        break;
+    case MediumSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("medium"));
+        break;
+    case LargeSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("large"));
+        break;
+    case ExtraLargeSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("large2x"));
+        break;
     }
 
     return data;

KomplexHubPlugin/featuredimagesmodel.h

@@ -75,7 +75,14 @@ public:
         OriginalUrlRole,
         MediumUrlRole,
         LargeUrlRole,
-        ExtraLargeUrlRole
+        ExtraLargeUrlRole,
+        PortraitSizeRole,
+        LandscapeSizeRole,
+        SmallSizeRole,
+        OriginalSizeRole,
+        MediumSizeRole,
+        LargeSizeRole,
+        ExtraLargeSizeRole
     };
     Q_ENUM(DataRole)
 
@@ -315,6 +322,34 @@ private:
         {
             static_cast<int>(ExtraLargeUrlRole),
             QByteArray("extraLarge")
+        },
+        {
+            static_cast<int>(PortraitSizeRole),
+            QByteArray("portraitSize")
+        },
+        {
+            static_cast<int>(LandscapeSizeRole),
+            QByteArray("landscapeSize")
+        },
+        {
+            static_cast<int>(SmallSizeRole),
+            QByteArray("smallSize")
+        },
+        {
+            static_cast<int>(OriginalSizeRole),
+            QByteArray("originalSize")
+        },
+        {
+            static_cast<int>(MediumSizeRole),
+            QByteArray("mediumSize")
+        },
+        {
+            static_cast<int>(LargeSizeRole),
+            QByteArray("largeSize")
+        },
+        {
+            static_cast<int>(ExtraLargeSizeRole),
+            QByteArray("extraLargeSize")
         }
     };
     State m_state = Idle;

images/icons/icons8-3d-glasses.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 14 10 C 12.128906 10 8.585938 12.070313 2.3125 21.925781 C 1.996094 22.421875 1.929688 23.023438 2.097656 23.574219 C 2.035156 23.707031 2 23.851563 2 24 L 2 39 C 2 40.070313 2.863281 41 3.957031 41 L 19.992188 41 C 21.109375 41 22.125 40.332031 22.605469 39.324219 C 22.617188 39.300781 22.628906 39.277344 22.636719 39.25 L 24.523438 34.324219 C 24.648438 34.066406 24.8125 34 25 34 C 25.1875 34 25.351563 34.066406 25.476563 34.324219 L 27.363281 39.25 C 27.371094 39.277344 27.382813 39.300781 27.394531 39.324219 C 27.875 40.332031 28.890625 41 30.007813 41 L 46.042969 41 C 47.136719 41 48 40.070313 48 39 L 48 24 C 48 23.855469 47.96875 23.714844 47.90625 23.582031 C 48.0625 23.074219 48.015625 22.519531 47.753906 22.042969 C 44.757813 16.550781 40.460938 10 37 10 C 32 10 32 15.269531 32 17 C 32 17.027344 32 17.054688 32 17.082031 C 32.066406 18.65625 33.1875 21 36 21 C 36.496094 21 36.972656 20.851563 37.386719 20.578125 C 37.585938 21.382813 37.773438 22.203125 37.949219 23 L 28.828125 23 C 28.007813 23 27.441406 23.355469 26.941406 23.605469 C 26.445313 23.855469 26.007813 24 25.953125 24 L 24.042969 24 C 23.992188 24 23.554688 23.855469 23.058594 23.605469 C 22.558594 23.355469 21.992188 23 21.171875 23 L 12.121094 23 C 12.441406 22.0625 12.777344 21.097656 13.125 20.171875 C 13.5625 20.6875 14.164063 21 15 21 C 17.8125 21 18.933594 18.65625 19 17.082031 C 19 17.054688 19 17.027344 19 17 C 19 15.269531 19 10 14 10 Z M 14 12 C 17 12 17 15.082031 17 17 C 17 17 16.917969 19 15 19 C 14 19 14 15.582031 14 14 C 13.003906 14 10 23 10 23 L 4 23 C 4 23 11 12 14 12 Z M 37 12 C 40 12 46 23 46 23 L 40 23 C 40 23 38.082031 14 37 14 C 37 15.582031 37.082031 19 36 19 C 34.082031 19 34 17 34 17 C 34 15.082031 34 12 37 12 Z M 4 25 L 21.171875 25 C 21.226563 25 21.660156 25.144531 22.160156 25.394531 C 22.660156 25.644531 23.226563 26 24.042969 26 L 25.953125 26 C 26.773438 26 27.339844 25.644531 27.839844 25.394531 C 28.335938 25.144531 28.773438 25 28.828125 25 L 46 25 L 46 39 L 30.007813 39 C 29.679688 39 29.371094 38.808594 29.203125 38.464844 L 27.316406 33.535156 C 27.308594 33.511719 27.296875 33.484375 27.285156 33.460938 C 26.839844 32.53125 25.910156 32 25 32 C 24.089844 32 23.160156 32.53125 22.714844 33.460938 C 22.703125 33.484375 22.691406 33.511719 22.683594 33.535156 L 20.796875 38.464844 C 20.628906 38.808594 20.320313 39 19.992188 39 L 4 39 Z M 6.976563 27.03125 C 6.421875 27.03125 5.96875 27.464844 5.96875 28 L 5.96875 36.011719 C 5.96875 36.515625 6.480469 37.011719 7 37.011719 L 18 37.011719 C 18.507813 37.011719 18.839844 36.386719 19.035156 36.011719 C 19.964844 33.976563 20.230469 31.71875 21.21875 28.296875 C 21.410156 27.707031 21.261719 27.03125 19.988281 27.03125 Z M 29.972656 27.03125 C 28.699219 27.03125 28.550781 27.707031 28.746094 28.296875 C 29.734375 31.71875 29.996094 33.976563 30.925781 36.011719 C 31.121094 36.386719 31.457031 37.011719 31.964844 37.011719 L 42.964844 37.011719 C 43.484375 37.011719 43.996094 36.515625 43.996094 36.011719 L 43.996094 28 C 43.996094 27.464844 43.539063 27.03125 42.984375 27.03125 Z"/></svg>

images/icons/icons8-3d-model.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M15,29h13V16H15V29z M23.167,9c0.238,0,0.47,0.085,0.65,0.241L29.37,14H46L34.418,3.256C34.234,3.091,33.997,3,33.75,3 H4.357l5.5,6H23.167z M8,24.167V10c0-0.016,0.006-0.03,0.007-0.046c0-0.004-0.001-0.009-0.001-0.013L3,4.48v30.27 c0,0.23,0.08,0.454,0.226,0.632L13,47V30.369l-4.759-5.552C8.085,24.636,8,24.405,8,24.167z M30,16v5h9.586l-1.293-1.293 c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0l3,3c0.391,0.391,0.391,1.023,0,1.414l-3,3C39.512,25.902,39.256,26,39,26 s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414L39.586,23H30v7c0,0.552-0.447,1-1,1h-7v9.586l1.293-1.293 c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-3,3C21.512,43.902,21.256,44,21,44s-0.512-0.098-0.707-0.293l-3-3 c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0L20,40.586V31h-5v17h31c0.553,0,1-0.448,1-1V16H30z M10,23.796l3,3.5V15.414 l-3-3V23.796z M22.797,11H11.69l2.75,3h11.857L22.797,11z"/></svg>

images/icons/icons8-audio.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 12.78125 5.96875 C 11.75 6.082031 10.976563 6.964844 11 8 L 11 42 C 10.988281 42.722656 11.367188 43.390625 11.992188 43.753906 C 12.613281 44.121094 13.386719 44.121094 14.007813 43.753906 C 14.632813 43.390625 15.011719 42.722656 15 42 L 15 8 C 15.007813 7.457031 14.796875 6.9375 14.414063 6.554688 C 14.03125 6.171875 13.511719 5.960938 12.96875 5.96875 C 12.90625 5.964844 12.84375 5.964844 12.78125 5.96875 Z M 36.78125 5.96875 C 35.75 6.082031 34.976563 6.964844 35 8 L 35 42 C 34.988281 42.722656 35.367188 43.390625 35.992188 43.753906 C 36.613281 44.121094 37.386719 44.121094 38.007813 43.753906 C 38.632813 43.390625 39.011719 42.722656 39 42 L 39 8 C 39.007813 7.457031 38.796875 6.9375 38.414063 6.554688 C 38.03125 6.171875 37.511719 5.960938 36.96875 5.96875 C 36.90625 5.964844 36.84375 5.964844 36.78125 5.96875 Z M 6.78125 14.96875 C 5.75 15.082031 4.976563 15.964844 5 17 L 5 33 C 4.988281 33.722656 5.367188 34.390625 5.992188 34.753906 C 6.613281 35.121094 7.386719 35.121094 8.007813 34.753906 C 8.632813 34.390625 9.011719 33.722656 9 33 L 9 17 C 9.007813 16.457031 8.796875 15.9375 8.414063 15.554688 C 8.03125 15.171875 7.511719 14.960938 6.96875 14.96875 C 6.90625 14.964844 6.84375 14.964844 6.78125 14.96875 Z M 42.78125 14.96875 C 41.75 15.082031 40.976563 15.964844 41 17 L 41 33 C 40.988281 33.722656 41.367188 34.390625 41.992188 34.753906 C 42.613281 35.121094 43.386719 35.121094 44.007813 34.753906 C 44.632813 34.390625 45.011719 33.722656 45 33 L 45 17 C 45.007813 16.457031 44.796875 15.9375 44.414063 15.554688 C 44.03125 15.171875 43.511719 14.960938 42.96875 14.96875 C 42.90625 14.964844 42.84375 14.964844 42.78125 14.96875 Z M 18.78125 15.96875 C 17.75 16.082031 16.976563 16.964844 17 18 L 17 32 C 16.988281 32.722656 17.367188 33.390625 17.992188 33.753906 C 18.613281 34.121094 19.386719 34.121094 20.007813 33.753906 C 20.632813 33.390625 21.011719 32.722656 21 32 L 21 18 C 21.007813 17.457031 20.796875 16.9375 20.414063 16.554688 C 20.03125 16.171875 19.511719 15.960938 18.96875 15.96875 C 18.90625 15.964844 18.84375 15.964844 18.78125 15.96875 Z M 30.78125 15.96875 C 29.75 16.082031 28.976563 16.964844 29 18 L 29 32 C 28.988281 32.722656 29.367188 33.390625 29.992188 33.753906 C 30.613281 34.121094 31.386719 34.121094 32.007813 33.753906 C 32.632813 33.390625 33.011719 32.722656 33 32 L 33 18 C 33.007813 17.457031 32.796875 16.9375 32.414063 16.554688 C 32.03125 16.171875 31.511719 15.960938 30.96875 15.96875 C 30.90625 15.964844 30.84375 15.964844 30.78125 15.96875 Z M 0.90625 20.96875 C 0.863281 20.976563 0.820313 20.988281 0.78125 21 C 0.316406 21.105469 -0.0117188 21.523438 0 22 L 0 28 C -0.00390625 28.359375 0.183594 28.695313 0.496094 28.878906 C 0.808594 29.058594 1.191406 29.058594 1.503906 28.878906 C 1.816406 28.695313 2.003906 28.359375 2 28 L 2 22 C 2.011719 21.710938 1.894531 21.433594 1.6875 21.238281 C 1.476563 21.039063 1.191406 20.941406 0.90625 20.96875 Z M 24.78125 20.96875 C 23.75 21.082031 22.976563 21.964844 23 23 L 23 27 C 22.988281 27.722656 23.367188 28.390625 23.992188 28.753906 C 24.613281 29.121094 25.386719 29.121094 26.007813 28.753906 C 26.632813 28.390625 27.011719 27.722656 27 27 L 27 23 C 27.007813 22.457031 26.796875 21.9375 26.414063 21.554688 C 26.03125 21.171875 25.511719 20.960938 24.96875 20.96875 C 24.90625 20.964844 24.84375 20.964844 24.78125 20.96875 Z M 48.90625 20.96875 C 48.863281 20.976563 48.820313 20.988281 48.78125 21 C 48.316406 21.105469 47.988281 21.523438 48 22 L 48 28 C 47.996094 28.359375 48.183594 28.695313 48.496094 28.878906 C 48.808594 29.058594 49.191406 29.058594 49.503906 28.878906 C 49.816406 28.695313 50.003906 28.359375 50 28 L 50 22 C 50.011719 21.710938 49.894531 21.433594 49.6875 21.238281 C 49.476563 21.039063 49.191406 20.941406 48.90625 20.96875 Z"/></svg>

images/icons/icons8-camera.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="100px" height="100px"><path d="M 19.09375 5 C 18.097656 5 17.1875 5.53125 16.5625 6.46875 L 14.9375 9 L 6 9 C 3.242188 9 1 11.242188 1 14 L 1 38 C 1 40.757813 3.242188 43 6 43 L 44 43 C 46.757813 43 49 40.757813 49 38 L 49 14 C 49 11.242188 46.757813 9 44 9 L 34.9375 9 L 33.34375 6.4375 C 32.730469 5.519531 31.808594 5 30.8125 5 Z M 10 14 C 11.101563 14 12 14.898438 12 16 C 12 17.101563 11.101563 18 10 18 C 8.898438 18 8 17.101563 8 16 C 8 14.898438 8.898438 14 10 14 Z M 25 15 C 31.066406 15 36 19.933594 36 26 C 36 32.066406 31.066406 37 25 37 C 18.933594 37 14 32.066406 14 26 C 14 19.933594 18.933594 15 25 15 Z M 25 17 C 20.039063 17 16 21.039063 16 26 C 16 30.964844 20.039063 35 25 35 C 29.964844 35 34 30.964844 34 26 C 34 21.039063 29.964844 17 25 17 Z"/></svg>

images/icons/icons8-codepen.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 4 L 4 17.34375 L 4 32.652344 L 25 46 L 46 32.65625 L 46 17.34375 Z M 25 29.183594 L 19.066406 25.070313 L 25 21.023438 L 30.933594 25.070313 Z M 27 17.605469 L 27 9.949219 L 40.429688 18.484375 L 34.410156 22.65625 Z M 23 17.605469 L 15.589844 22.65625 L 9.570313 18.484375 L 23 9.949219 Z M 12.09375 25.042969 L 8 27.832031 L 8 22.203125 Z M 15.570313 27.453125 L 23 32.605469 L 23 40.050781 L 9.589844 31.527344 Z M 27 32.605469 L 34.429688 27.453125 L 40.410156 31.527344 L 27 40.050781 Z M 37.90625 25.042969 L 42 22.203125 L 42 27.832031 Z"/></svg>

images/icons/icons8-cube.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M25 23.844l18.096-10.447L25.504 3.136c-.311-.182-.697-.182-1.008 0L6.905 13.397 25 23.844zM24 25.577L6 15.185V35.5c0 .355.188.685.496.864L24 46.575V25.577zM26 25.577v20.998l17.504-10.211C43.812 36.185 44 35.855 44 35.5V15.186L26 25.577z"/></svg>

images/icons/icons8-download.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="100px" height="100px">    <path d="M 15 1 C 14.448 1 14 1.448 14 2 L 14 6 L 16 6 L 16 2 C 16 1.448 15.552 1 15 1 z M 16 6 L 16 18.585938 L 18.292969 16.292969 C 18.683969 15.901969 19.316031 15.901969 19.707031 16.292969 C 20.098031 16.683969 20.098031 17.316031 19.707031 17.707031 L 15.707031 21.707031 C 15.512031 21.902031 15.256 22 15 22 C 14.744 22 14.487969 21.902031 14.292969 21.707031 L 10.292969 17.707031 C 9.9019687 17.316031 9.9019688 16.683969 10.292969 16.292969 C 10.683969 15.901969 11.316031 15.901969 11.707031 16.292969 L 14 18.585938 L 14 6 L 6 6 C 4.895 6 4 6.895 4 8 L 4 25 C 4 26.105 4.895 27 6 27 L 24 27 C 25.105 27 26 26.105 26 25 L 26 8 C 26 6.895 25.105 6 24 6 L 16 6 z"/></svg>

images/icons/icons8-play.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="100px" height="100px">    <path d="M 6 3 A 1 1 0 0 0 5 4 A 1 1 0 0 0 5 4.0039062 L 5 15 L 5 25.996094 A 1 1 0 0 0 5 26 A 1 1 0 0 0 6 27 A 1 1 0 0 0 6.5800781 26.8125 L 6.5820312 26.814453 L 26.416016 15.908203 A 1 1 0 0 0 27 15 A 1 1 0 0 0 26.388672 14.078125 L 6.5820312 3.1855469 L 6.5800781 3.1855469 A 1 1 0 0 0 6 3 z"/></svg>

images/icons/icons8-stop.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="100px" height="100px">    <path d="M22,6H8C6.895,6,6,6.895,6,8v14c0,1.105,0.895,2,2,2h14c1.105,0,2-0.895,2-2V8C24,6.895,23.105,6,22,6z"/></svg>