365 lines
12 KiB
QML
365 lines
12 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.3
|
|
import QtGraphicalEffects 1.0
|
|
import StatusQ.Components 0.1
|
|
|
|
import utils 1.0
|
|
import "../../shared"
|
|
|
|
Popup {
|
|
enum Category {
|
|
Trending,
|
|
Recent,
|
|
Favorite,
|
|
Search
|
|
}
|
|
|
|
id: popup
|
|
property var gifSelected: function () {}
|
|
property var searchGif: Backpressure.debounce(searchBox, 500, function (query) {
|
|
chatsModel.gif.search(query)
|
|
});
|
|
property var toggleCategory: function(newCategory) {
|
|
previousCategory = currentCategory
|
|
currentCategory = newCategory
|
|
searchBox.text = ""
|
|
if (currentCategory === StatusGifPopup.Category.Trending) {
|
|
chatsModel.gif.getTrendings()
|
|
} else if(currentCategory === StatusGifPopup.Category.Favorite) {
|
|
chatsModel.gif.getFavorites()
|
|
} else if(currentCategory === StatusGifPopup.Category.Recent) {
|
|
chatsModel.gif.getRecents()
|
|
}
|
|
}
|
|
property var toggleFavorite: function(item) {
|
|
chatsModel.gif.toggleFavorite(item.id, currentCategory === StatusGifPopup.Category.Favorite)
|
|
}
|
|
property alias searchString: searchBox.text
|
|
property int currentCategory: StatusGifPopup.Category.Trending
|
|
property int previousCategory: StatusGifPopup.Category.Trending
|
|
|
|
modal: false
|
|
width: 360
|
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
|
|
|
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
|
|
fast: true
|
|
cached: true
|
|
color: "#22000000"
|
|
}
|
|
}
|
|
|
|
onOpened: {
|
|
searchBox.text = ""
|
|
searchBox.forceActiveFocus(Qt.MouseFocusReason)
|
|
if (appSettings.isTenorWarningAccepted) {
|
|
chatsModel.gif.getTrendings()
|
|
} else {
|
|
confirmationPopup.open()
|
|
}
|
|
}
|
|
|
|
onClosed: {
|
|
popup.currentCategory = StatusGifPopup.Category.Trending
|
|
popup.previousCategory = StatusGifPopup.Category.Trending
|
|
|
|
if (confirmationPopup.opened) {
|
|
confirmationPopup.close()
|
|
}
|
|
}
|
|
|
|
contentItem: ColumnLayout {
|
|
anchors.fill: parent
|
|
spacing: 0
|
|
|
|
Item {
|
|
property int headerMargin: 8
|
|
|
|
id: gifHeader
|
|
Layout.fillWidth: true
|
|
height: searchBox.height + gifHeader.headerMargin
|
|
|
|
SearchBox {
|
|
id: searchBox
|
|
placeholderText: qsTr("Search Tenor")
|
|
enabled: appSettings.isTenorWarningAccepted
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: gifHeader.headerMargin
|
|
anchors.top: parent.top
|
|
anchors.topMargin: gifHeader.headerMargin
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: gifHeader.headerMargin
|
|
Keys.onReleased: {
|
|
if (searchBox.text === "") {
|
|
toggleCategory(previousCategory)
|
|
return
|
|
}
|
|
if (popup.currentCategory !== StatusGifPopup.Category.Search) {
|
|
popup.previousCategory = popup.currentCategory
|
|
popup.currentCategory = StatusGifPopup.Category.Search
|
|
}
|
|
Qt.callLater(searchGif, searchBox.text);
|
|
}
|
|
}
|
|
|
|
StatusIconButton {
|
|
id: clearBtn
|
|
icon.name: "close-icon"
|
|
type: "secondary"
|
|
visible: searchBox.text !== ""
|
|
icon.width: 14
|
|
icon.height: 14
|
|
width: 14
|
|
height: 14
|
|
anchors.right: searchBox.right
|
|
anchors.rightMargin: Style.current.padding
|
|
anchors.verticalCenter: searchBox.verticalCenter
|
|
onClicked: toggleCategory(previousCategory)
|
|
}
|
|
}
|
|
|
|
StyledText {
|
|
id: headerText
|
|
text: {
|
|
if (currentCategory === StatusGifPopup.Category.Trending) {
|
|
return qsTr("TRENDING")
|
|
} else if(currentCategory === StatusGifPopup.Category.Favorite) {
|
|
return qsTr("FAVORITES")
|
|
} else if(currentCategory === StatusGifPopup.Category.Recent) {
|
|
return qsTr("RECENT")
|
|
}
|
|
return ""
|
|
}
|
|
visible: searchBox.text === ""
|
|
color: Style.current.secondaryText
|
|
font.pixelSize: 13
|
|
topPadding: gifHeader.headerMargin
|
|
leftPadding: gifHeader.headerMargin
|
|
}
|
|
|
|
Loader {
|
|
Layout.fillWidth: true
|
|
Layout.rightMargin: Style.current.smallPadding / 2
|
|
Layout.leftMargin: Style.current.smallPadding / 2
|
|
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
|
|
Layout.preferredHeight: {
|
|
const headerTextHeight = searchBox.text === "" ? headerText.height : 0
|
|
return 400 - gifHeader.height - headerTextHeight
|
|
}
|
|
sourceComponent: chatsModel.gif.columnA.rowCount() == 0 ? empty : gifItems
|
|
}
|
|
|
|
Row {
|
|
id: categorySelector
|
|
Layout.fillWidth: true
|
|
leftPadding: Style.current.smallPadding / 2
|
|
rightPadding: Style.current.smallPadding / 2
|
|
spacing: 0
|
|
|
|
StatusCategoryButton {
|
|
source: Style.svg("gifCategories/trending")
|
|
active: StatusGifPopup.Category.Trending === popup.currentCategory
|
|
changeCategory: function () {
|
|
toggleCategory(StatusGifPopup.Category.Trending)
|
|
}
|
|
enabled: appSettings.isTenorWarningAccepted
|
|
}
|
|
StatusCategoryButton {
|
|
source: Style.svg("gifCategories/recent")
|
|
active: StatusGifPopup.Category.Recent === popup.currentCategory
|
|
changeCategory: function () {
|
|
toggleCategory(StatusGifPopup.Category.Recent)
|
|
}
|
|
enabled: appSettings.isTenorWarningAccepted
|
|
}
|
|
StatusCategoryButton {
|
|
source: Style.svg("gifCategories/favorite")
|
|
active: StatusGifPopup.Category.Favorite === popup.currentCategory
|
|
changeCategory: function () {
|
|
toggleCategory(StatusGifPopup.Category.Favorite)
|
|
}
|
|
enabled: appSettings.isTenorWarningAccepted
|
|
}
|
|
}
|
|
}
|
|
|
|
Popup {
|
|
id: confirmationPopup
|
|
modal: false
|
|
anchors.centerIn: parent
|
|
height: 290
|
|
width: 280
|
|
closePolicy: Popup.NoAutoClose
|
|
|
|
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
|
|
fast: true
|
|
cached: true
|
|
color: "#22000000"
|
|
}
|
|
}
|
|
|
|
Column {
|
|
anchors.fill: parent
|
|
spacing: 12
|
|
|
|
SVGImage {
|
|
id: gifImage
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
source: Style.svg(`gif-${Style.current.name}`)
|
|
}
|
|
|
|
StyledText {
|
|
id: title
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
text: qsTr("Enable Tenor GIFs?")
|
|
font.weight: Font.Medium
|
|
font.pixelSize: Style.current.primaryTextFontSize
|
|
}
|
|
|
|
StyledText {
|
|
id: headline
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
text: qsTr("Once enabled, GIFs posted in the chat may share your metadata with Tenor.")
|
|
width: parent.width
|
|
horizontalAlignment: Text.AlignHCenter
|
|
wrapMode: Text.WordWrap
|
|
font.pixelSize: 13
|
|
color: Style.current.secondaryText
|
|
}
|
|
|
|
StatusButton {
|
|
id: removeBtn
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
text: qsTr("Enable")
|
|
onClicked: {
|
|
appSettings.isTenorWarningAccepted = true
|
|
chatsModel.gif.getTrendings()
|
|
confirmationPopup.close()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: empty
|
|
Rectangle {
|
|
height: parent.height
|
|
width: parent.width
|
|
color: Style.current.background
|
|
|
|
StyledText {
|
|
id: emptyText
|
|
anchors.centerIn: parent
|
|
text: {
|
|
if(currentCategory === StatusGifPopup.Category.Favorite) {
|
|
return qsTr("Favorite GIFs will appear here")
|
|
} else if(currentCategory === StatusGifPopup.Category.Recent) {
|
|
return qsTr("Recent GIFs will appear here")
|
|
}
|
|
|
|
return qsTr("Error while contacting Tenor API, please retry.")
|
|
}
|
|
font.pixelSize: 15
|
|
color: Style.current.secondaryText
|
|
}
|
|
|
|
StatusButton {
|
|
id: retryBtn
|
|
anchors.top: emptyText.bottom
|
|
anchors.topMargin: Style.current.padding
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
text: qsTr("Retry")
|
|
visible: currentCategory === StatusGifPopup.Category.Trending || currentCategory === StatusGifPopup.Category.Search
|
|
onClicked: {
|
|
if (searchBox.text === "") {
|
|
chatsModel.gif.getTrendings()
|
|
return
|
|
}
|
|
|
|
searchGif(searchBox.text)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: gifItems
|
|
ScrollView {
|
|
id: scrollView
|
|
property ScrollBar vScrollBar: ScrollBar.vertical
|
|
clip: true
|
|
topPadding: Style.current.smallPadding
|
|
leftPadding: Style.current.smallPadding
|
|
rightPadding: Style.current.smallPadding
|
|
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
|
|
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
|
|
|
Row {
|
|
id: gifs
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: Style.current.halfPadding
|
|
|
|
property string lastHoveredId
|
|
|
|
StatusGifColumn {
|
|
gifList.model: chatsModel.gif.columnA
|
|
gifWidth: (popup.width / 3) - Style.current.padding
|
|
gifSelected: popup.gifSelected
|
|
toggleFavorite: popup.toggleFavorite
|
|
lastHoveredId: gifs.lastHoveredId
|
|
onGifHovered: {
|
|
gifs.lastHoveredId = id
|
|
}
|
|
}
|
|
|
|
StatusGifColumn {
|
|
gifList.model: chatsModel.gif.columnB
|
|
gifWidth: (popup.width / 3) - Style.current.padding
|
|
gifSelected: popup.gifSelected
|
|
toggleFavorite: popup.toggleFavorite
|
|
lastHoveredId: gifs.lastHoveredId
|
|
onGifHovered: {
|
|
gifs.lastHoveredId = id
|
|
}
|
|
}
|
|
|
|
StatusGifColumn {
|
|
gifList.model: chatsModel.gif.columnC
|
|
gifWidth: (popup.width / 3) - Style.current.padding
|
|
gifSelected: popup.gifSelected
|
|
toggleFavorite: popup.toggleFavorite
|
|
lastHoveredId: gifs.lastHoveredId
|
|
onGifHovered: {
|
|
gifs.lastHoveredId = id
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
/*##^##
|
|
Designer {
|
|
D{i:0;formeditorColor:"#ffffff";height:440;width:360}
|
|
}
|
|
##^##*/
|