import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.3 import QtGraphicalEffects 1.0 import StatusQ.Components 0.1 import StatusQ.Controls 0.1 import StatusQ.Core 0.1 import StatusQ.Core.Backpressure 0.1 import utils 1.0 import shared.panels 1.0 import shared.stores 1.0 import shared.controls 1.0 import "./StatusGifPopup" Popup { id: root property GifStore gifStore property bool gifUnfurlingEnabled property var gifSelected: function () {} property var searchGif: Backpressure.debounce(searchBox, 500, function (query) { root.gifStore.searchGifs(query) }) property var toggleCategory: function(newCategory) { previousCategory = currentCategory currentCategory = newCategory searchBox.text = "" if (currentCategory === GifPopupDefinitions.Category.Trending) { root.gifStore.getTrendingsGifs() } else if(currentCategory === GifPopupDefinitions.Category.Favorite) { root.gifStore.getFavoritesGifs() } else if(currentCategory === GifPopupDefinitions.Category.Recent) { root.gifStore.getRecentsGifs() } } property var toggleFavorite: function(item) { root.gifStore.toggleFavoriteGif(item.id, currentCategory === GifPopupDefinitions.Category.Favorite) } property alias searchString: searchBox.text property int currentCategory: GifPopupDefinitions.Category.Trending property int previousCategory: GifPopupDefinitions.Category.Trending property bool loading: root.gifStore.gifLoading modal: false width: 360 background: Rectangle { radius: Style.current.radius color: Style.current.background border.color: Style.current.border layer.enabled: true layer.effect: DropShadow { verticalOffset: 3 radius: 8 samples: 15 cached: true color: "#22000000" } } onAboutToShow: { searchBox.text = "" searchBox.input.edit.forceActiveFocus() if (root.gifUnfurlingEnabled) { root.gifStore.getTrendingsGifs() } } onClosed: { root.currentCategory = GifPopupDefinitions.Category.Trending root.previousCategory = GifPopupDefinitions.Category.Trending if (confirmationPopupLoader.active) { confirmationPopupLoader.active = false } } padding: 0 Item { anchors.fill: parent ColumnLayout { anchors.fill: parent spacing: 0 Item { readonly property int headerMargin: 8 id: gifHeader Layout.fillWidth: true Layout.preferredHeight: searchBox.height + gifHeader.headerMargin SearchBox { id: searchBox placeholderText: qsTr("Search") enabled: root.gifUnfurlingEnabled anchors.right: parent.right anchors.rightMargin: gifHeader.headerMargin anchors.top: parent.top anchors.topMargin: gifHeader.headerMargin anchors.left: parent.left anchors.leftMargin: gifHeader.headerMargin input.edit.onTextChanged: { if (searchBox.text === "") { toggleCategory(GifPopupDefinitions.Category.Trending) return } if (root.currentCategory !== GifPopupDefinitions.Category.Search) { root.previousCategory = root.currentCategory root.currentCategory = GifPopupDefinitions.Category.Search } Qt.callLater(searchGif, searchBox.text) } } } StatusBaseText { id: headerText text: { if (currentCategory === GifPopupDefinitions.Category.Trending) { return qsTr("TRENDING") } else if(currentCategory === GifPopupDefinitions.Category.Favorite) { return qsTr("FAVORITES") } else if(currentCategory === GifPopupDefinitions.Category.Recent) { return qsTr("RECENT") } return "" } visible: searchBox.text === "" color: Style.current.secondaryText font.pixelSize: 13 topPadding: gifHeader.headerMargin leftPadding: gifHeader.headerMargin } Loader { id: gifsLoader active: root.opened && root.gifUnfurlingEnabled Layout.fillWidth: true Layout.alignment: Qt.AlignTop | Qt.AlignLeft Layout.preferredHeight: { const headerTextHeight = searchBox.text === "" ? headerText.height : 0 return 400 - gifHeader.height - headerTextHeight } sourceComponent: root.gifStore.gifColumnA.rowCount() === 0 ? emptyPlaceholderComponent : gifItemsComponent } Row { id: categorySelector Layout.fillWidth: true leftPadding: Style.current.smallPadding / 2 rightPadding: Style.current.smallPadding / 2 spacing: 0 StatusTabBarIconButton { icon.name: "flash" highlighted: GifPopupDefinitions.Category.Trending === root.currentCategory onClicked: { toggleCategory(GifPopupDefinitions.Category.Trending) } enabled: root.gifUnfurlingEnabled } StatusTabBarIconButton { icon.name: "time" highlighted: GifPopupDefinitions.Category.Recent === root.currentCategory onClicked: { toggleCategory(GifPopupDefinitions.Category.Recent) } enabled: root.gifUnfurlingEnabled } StatusTabBarIconButton { icon.name: "favourite" highlighted: GifPopupDefinitions.Category.Favorite === root.currentCategory onClicked: { toggleCategory(GifPopupDefinitions.Category.Favorite) } enabled: root.gifUnfurlingEnabled } } } Rectangle { color: 'black' opacity: 0.4 radius: Style.current.radius anchors.fill: parent visible: confirmationPopupLoader.active } } Loader { id: confirmationPopupLoader anchors.centerIn: parent sourceComponent: ConfirmationPopup { visible: true onEnableGifsRequested: { RootStore.setGifUnfurlingEnabled(true) root.gifStore.getTrendingsGifs() } } active: !root.gifUnfurlingEnabled } Component { id: gifItemsComponent StatusScrollView { id: scrollView contentWidth: availableWidth Row { id: gifs width: scrollView.availableWidth spacing: Style.current.halfPadding property string lastHoveredId StatusGifColumn { gifStore: root.gifStore gifList.model: root.gifStore.gifColumnA gifWidth: (root.width / 3) - Style.current.padding gifSelected: root.gifSelected toggleFavorite: root.toggleFavorite lastHoveredId: gifs.lastHoveredId onGifHovered: { gifs.lastHoveredId = id } } StatusGifColumn { gifStore: root.gifStore gifList.model: root.gifStore.gifColumnB gifWidth: (root.width / 3) - Style.current.padding gifSelected: root.gifSelected toggleFavorite: root.toggleFavorite lastHoveredId: gifs.lastHoveredId onGifHovered: { gifs.lastHoveredId = id } } StatusGifColumn { gifStore: root.gifStore gifList.model: root.gifStore.gifColumnC gifWidth: (root.width / 3) - Style.current.padding gifSelected: root.gifSelected toggleFavorite: root.toggleFavorite lastHoveredId: gifs.lastHoveredId onGifHovered: { gifs.lastHoveredId = id } } } } } Component { id: emptyPlaceholderComponent EmptyPlaceholder { Layout.margins: Style.current.smallPadding currentCategory: root.currentCategory loading: root.loading onDoRetry: searchBox.text === "" ? root.gifStore.getTrendingsGifs() : searchGif(searchBox.text) } } }