Fixed Featured views

KomplexHubContent/pages/FeaturedImagesPage.qml

@@ -11,7 +11,8 @@ Rectangle
 {
     id: rootItem
 
-    readonly property bool searchable: false
+    property string query
+    readonly property bool searchable: paginator.searchable
     property bool popup: false
     property int resultWidth: 256
     property int resultHeight: 245
@@ -20,48 +21,85 @@ Rectangle
 
     FeaturedImagesModel
     {
-        id: imagesModel
+        id: searchModel
+        //query: rootItem.query
         resultsPerPage: paginator.resultsPerPage
-        // windowSize: 80
+
+        Component.onCompleted: () => nextPage()
     }
 
-    PaginatorGrid
+    ColumnLayout
     {
-        id: paginator
+        id: resultsLayout
-        anchors.fill: parent
-        model: imagesModel
-        loading: imagesModel.state === FeaturedImagesModel.Loading
         visible: opacity > 0.01
+        anchors.fill: parent
+        anchors.margins: Constants.mediumMargin
 
-        delegate: ItemDelegate
+        Text
         {
-            id: resultDelegate
+            Layout.alignment: Qt.AlignTop
+            Layout.preferredHeight: 50
 
-            width: resultWidth
+            color: palette.text
-            height: resultHeight
+            font.pixelSize: Constants.h2Font.pixelSize
+            font.bold: true
+            text: qsTr("Featured Images")
+            verticalAlignment: Qt.AlignVCenter
+        }
 
-            required property string uuid
+        Text
-            required property string author
+        {
-            required property string authorId
+            Layout.alignment: Qt.AlignTop
-            required property string authorUrl
+            Layout.preferredHeight: 50
-            required property string thumbnail
-            required property int index
 
-            SearchResultItem
+            color: palette.text
+            font.pixelSize: Constants.h4Font.pixelSize
+            font.bold: true
+            text: qsTr("A specially curated collection of images, courtesy of Pexels")
+            verticalAlignment: Qt.AlignVCenter
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+
+        PaginatorGrid
+        {
+            Layout.alignment: Qt.AlignTop
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            id: paginator
+            model: searchModel
+            loading: model.state === FeaturedImagesModel.Loading
+
+            delegate: ItemDelegate
             {
-                anchors.fill: parent
+                id: resultDelegate
-                author: parent.author
-                description: qsTr("No description available")
-                thumbnail: parent.thumbnail
-                uuid: parent.uuid
-                pexels: true
-                selected: paginator.currentIndex === parent.index
 
-                onTriggered: () => paginator.currentIndex = parent.index
+                width: resultWidth
+                height: resultHeight
 
-                onViewMoreTriggered: () =>
+                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
                 {
-                    showVideoPopup(parent.index)
+                    anchors.fill: parent
+                    title: parent.author
+                    description: parent.description
+                    thumbnail: parent.thumbnail
+                    uuid: parent.uuid
+                    pexels: true
+                    selected: paginator.currentIndex === parent.index
+
+                    onTriggered: () => paginator.currentIndex = parent.index
+
+                    onViewMoreTriggered: () =>
+                    {
+                        showImagePopup(parent.index)
+                    }
                 }
             }
         }
@@ -77,12 +115,12 @@ Rectangle
 
         ImageView
         {
-            id: imageDetailsPopup
+            id: viewMoreImagePopup
             anchors.fill: parent
             opacity: 0
+            visible: opacity > 0.01
 
-            Behavior on opacity
+            Behavior on opacity {
-            {
                 NumberAnimation
                 {
                     duration: 250
@@ -90,8 +128,7 @@ Rectangle
             }
         }
 
-        Behavior on opacity
+        Behavior on opacity {
-        {
             NumberAnimation
             {
                 duration: 250
@@ -99,31 +136,33 @@ Rectangle
         }
     }
 
-    Component.onCompleted: () =>
+    function showImagePopup(index)
     {
-        imagesModel.nextPage()
+        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)
-    function showVideoPopup(index)
+        viewMoreImagePopup.uuid = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.UuidRole)
-    {
+        viewMoreImagePopup.thumbnail = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.LargeThumbnailRole)
-        imagesModel.setItem(index)
+        viewMoreImagePopup.original = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.OriginalUrlRole)
-        imageDetailsPopup.author = searchModel.data(searchModel.index(index,0), ImageSearchModel.AuthorRole)
+        viewMoreImagePopup.portrait = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.PortraitUrlRole)
-        imageDetailsPopup.authorUrl = searchModel.data(searchModel.index(index,0), ImageSearchModel.AuthorUrlRole)
+        viewMoreImagePopup.landscape = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.LandscapeUrlRole)
-        imageDetailsPopup.uuid = searchModel.data(searchModel.index(index,0), ImageSearchModel.UuidRole)
+        viewMoreImagePopup.backgroundPortrait = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.BackgroundPortraitRole)
-        imageDetailsPopup.thumbnail = searchModel.data(searchModel.index(index,0), ImageSearchModel.ThumbnailRole)
+        viewMoreImagePopup.backgroundLandscape = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.BackgroundLandscapeRole)
-        imageDetailsPopup.modelIndex = index
+        viewMoreImagePopup.fullScreen = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.ScreenUrlRole)
-        imageDetailsPopup.model = searchModel.itemModel
+        viewMoreImagePopup.portraitSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.PortraitSizeRole)
-        imageDetailsPopup.opacity = 1
+        viewMoreImagePopup.landscapeSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.LandscapeSizeRole)
-        paginator.opacity = 0
+        viewMoreImagePopup.fullScreenSize = searchModel.data(searchModel.index(index,0), FeaturedImagesModel.ScreenSizeRole)
+        viewMoreImagePopup.opacity = 1
         popupContainer.opacity = 1
+        resultsLayout.opacity = 0
         rootItem.popup = true
     }
 
     function closePopup()
     {
-        imageDetailsPopup.opacity = 0
+        viewMoreImagePopup.opacity = 0
         popupContainer.opacity = 0
-        paginator.opacity = 1
+        resultsLayout.opacity = 1
         rootItem.popup = false
     }
 }

KomplexHubContent/pages/FeaturedPacksPage.qml

@@ -11,6 +11,7 @@ Rectangle
 {
     id: rootItem
 
+    property string query
     readonly property bool searchable: false
     property bool popup: false
     property int resultWidth: 256
@@ -18,50 +19,87 @@ Rectangle
 
     color: palette.base
 
-    FeaturedPacksModel
+    NewestPacksModel
     {
         id: packsModel
         resultsPerPage: paginator.resultsPerPage
-        // windowSize: 80
+
+        Component.onCompleted: () => nextPage()
     }
 
-    PaginatorGrid
+    ColumnLayout
     {
-        id: paginator
+        id: resultsLayout
-        anchors.fill: parent
-        model: packsModel
-        loading: packsModel.state === FeaturedPacksModel.Loading
         visible: opacity > 0.01
+        anchors.fill: parent
+        anchors.margins: Constants.mediumMargin
 
-        delegate: ItemDelegate
+        Text
         {
-            id: resultDelegate
+            Layout.alignment: Qt.AlignTop
+            Layout.preferredHeight: 50
 
-            width: resultWidth
+            color: palette.text
-            height: resultHeight
+            font.pixelSize: Constants.h2Font.pixelSize
+            font.bold: true
+            text: qsTr("Featured Images")
+            verticalAlignment: Qt.AlignVCenter
+        }
 
-            required property string uuid
+        Text
-            required property string author
+        {
-            required property string authorId
+            Layout.alignment: Qt.AlignTop
-            required property string authorUrl
+            Layout.preferredHeight: 50
-            required property string thumbnail
-            required property int index
 
-            SearchResultItem
+            color: palette.text
+            font.pixelSize: Constants.h4Font.pixelSize
+            font.bold: true
+            text: qsTr("Newest packs submitted to Komplex.dev")
+            verticalAlignment: Qt.AlignVCenter
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+
+        PaginatorGrid
+        {
+            Layout.alignment: Qt.AlignTop
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            id: paginator
+            model: packsModel
+            loading: model.state === NewestPacksModel.Loading
+
+            delegate: ItemDelegate
             {
-                anchors.fill: parent
+                id: resultDelegate
-                author: parent.author
-                description: qsTr("No description available")
-                thumbnail: parent.thumbnail
-                uuid: parent.uuid
-                pexels: true
-                selected: paginator.currentIndex === parent.index
 
-                onTriggered: () => paginator.currentIndex = parent.index
+                width: resultWidth
+                height: resultHeight
 
-                onViewMoreTriggered: () =>
+                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
                 {
-                    showVideoPopup(parent.index)
+                    anchors.fill: parent
+                    title: parent.name
+                    author: parent.author
+                    description: parent.description
+                    thumbnail: parent.thumbnail
+                    uuid: parent.uuid
+                    selected: paginator.currentIndex === parent.index
+
+                    onTriggered: () => paginator.currentIndex = parent.index
+
+                    onViewMoreTriggered: () =>
+                    {
+                        showWallpaperPopup(parent.index)
+                    }
                 }
             }
         }
@@ -77,12 +115,12 @@ Rectangle
 
         PackView
         {
-            id: packDetailsPopup
+            id: viewMoreWallpaperPopup
             anchors.fill: parent
             opacity: 0
+            visible: opacity > 0.01
 
-            Behavior on opacity
+            Behavior on opacity {
-            {
                 NumberAnimation
                 {
                     duration: 250
@@ -90,8 +128,7 @@ Rectangle
             }
         }
 
-        Behavior on opacity
+        Behavior on opacity {
-        {
             NumberAnimation
             {
                 duration: 250
@@ -99,31 +136,23 @@ Rectangle
         }
     }
 
-    Component.onCompleted: () =>
-    {
-        packsModel.nextPage()
-    }
-
-    function showVideoPopup(index)
-    {
-        packsModel.setItem(index)
-        packDetailsPopup.author = searchModel.data(searchModel.index(index,0), VideoSearchModel.AuthorRole)
-        packDetailsPopup.authorUrl = searchModel.data(searchModel.index(index,0), VideoSearchModel.AuthorUrlRole)
-        packDetailsPopup.uuid = searchModel.data(searchModel.index(index,0), VideoSearchModel.UuidRole)
-        packDetailsPopup.thumbnail = searchModel.data(searchModel.index(index,0), VideoSearchModel.ThumbnailRole)
-        packDetailsPopup.modelIndex = index
-        packDetailsPopup.model = searchModel.itemModel
-        packDetailsPopup.opacity = 1
-        paginator.opacity = 0
-        popupContainer.opacity = 1
-        rootItem.popup = true
-    }
-
     function closePopup()
     {
-        packDetailsPopup.opacity = 0
+        viewMoreWallpaperPopup.opacity = 0
         popupContainer.opacity = 0
-        paginator.opacity = 1
+        resultsLayout.opacity = 1
         rootItem.popup = false
     }
+
+    function showWallpaperPopup(index)
+    {
+        viewMoreWallpaperPopup.author = packsModel.data(packsModel.index(index,0), NewestPacksModel.AuthorRole)
+        viewMoreWallpaperPopup.authorId = packsModel.data(packsModel.index(index,0), NewestPacksModel.AuthorIdRole)
+        viewMoreWallpaperPopup.description = packsModel.data(packsModel.index(index,0), NewestPacksModel.DescriptionRole)
+        viewMoreWallpaperPopup.thumbnail = packsModel.data(packsModel.index(index,0), NewestPacksModel.ThumbnailRole)
+        viewMoreWallpaperPopup.opacity = 1
+        popupContainer.opacity = 1
+        resultsLayout.opacity = 0
+        rootItem.popup = true
+    }
 }

KomplexHubContent/pages/FeaturedVideosPage.qml

@@ -25,43 +25,79 @@ Rectangle
         windowSize: 80
     }
 
-    PaginatorGrid
+    ColumnLayout
     {
-        id: paginator
+        id: resultsLayout
-        anchors.fill: parent
-        model: videosModel
-        loading: videosModel.state === FeaturedVideosModel.Loading
         visible: opacity > 0.01
+        anchors.fill: parent
+        anchors.margins: Constants.mediumMargin
 
-        delegate: ItemDelegate
+        Text
         {
-            id: resultDelegate
+            Layout.alignment: Qt.AlignTop
+            Layout.preferredHeight: 50
 
-            width: resultWidth
+            color: palette.text
-            height: resultHeight
+            font.pixelSize: Constants.h2Font.pixelSize
+            font.bold: true
+            text: qsTr("Most Popular Videos")
+            verticalAlignment: Qt.AlignVCenter
+        }
 
-            required property string uuid
+        Text
-            required property string author
+        {
-            required property string authorId
+            Layout.alignment: Qt.AlignTop
-            required property string authorUrl
+            Layout.preferredHeight: 50
-            required property string thumbnail
-            required property int index
 
-            SearchResultItem
+            color: palette.text
+            font.pixelSize: Constants.h4Font.pixelSize
+            font.bold: true
+            text: qsTr("Most popular videos, provided courtesy of Pexels")
+            verticalAlignment: Qt.AlignVCenter
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+
+        PaginatorGrid
+        {
+            Layout.alignment: Qt.AlignTop
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            id: paginator
+            model: videosModel
+            loading: videosModel.state === FeaturedVideosModel.Loading
+            visible: opacity > 0.01
+
+            delegate: ItemDelegate
             {
-                anchors.fill: parent
+                id: resultDelegate
-                author: parent.author
-                description: qsTr("No description available")
-                thumbnail: parent.thumbnail
-                uuid: parent.uuid
-                pexels: true
-                selected: paginator.currentIndex === parent.index
 
-                onTriggered: () => paginator.currentIndex = parent.index
+                width: resultWidth
+                height: resultHeight
 
-                onViewMoreTriggered: () =>
+                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
                 {
-                    showVideoPopup(parent.index)
+                    anchors.fill: parent
+                    author: parent.author
+                    description: qsTr("")
+                    thumbnail: parent.thumbnail
+                    uuid: parent.uuid
+                    pexels: true
+                    selected: paginator.currentIndex === parent.index
+
+                    onTriggered: () => paginator.currentIndex = parent.index
+
+                    onViewMoreTriggered: () =>
+                    {
+                        showVideoPopup(parent.index)
+                    }
                 }
             }
         }
@@ -80,6 +116,7 @@ Rectangle
             id: videoDetailsPopup
             anchors.fill: parent
             opacity: 0
+            visible: opacity > 0.01
 
             Behavior on opacity
             {
@@ -114,7 +151,7 @@ Rectangle
         videoDetailsPopup.modelIndex = index
         videoDetailsPopup.model = searchModel.itemModel
         videoDetailsPopup.opacity = 1
-        paginator.opacity = 0
+        resultsLayout.opacity = 0
         popupContainer.opacity = 1
         rootItem.popup = true
     }
@@ -123,7 +160,7 @@ Rectangle
     {
         videoDetailsPopup.opacity = 0
         popupContainer.opacity = 0
-        paginator.opacity = 1
+        resultsLayout.opacity = 1
         rootItem.popup = false
     }
 }