fix(@desktop/chat): gif selector UI adjustments
This commit is contained in:
Michał Cieślak
Michał
parent
90a715b69f
commit
91bae9c3da
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="132" height="94" viewBox="0 0 132 94" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M15 21C11.6863 21 9 23.6863 9 27V79C9 82.3137 11.6863 85 15 85H105C108.314 85 111 82.3137 111 79V27C111 23.6863 108.314 21 105 21H15ZM55.4939 52.4786C55.3915 52.4033 55.2819 52.3365 55.1664 52.2793C55.0895 52.2413 55.01 52.2075 54.9282 52.1784C54.6939 52.0949 54.4409 52.0492 54.1772 52.0492H49.2087C48.2855 52.0492 47.5525 52.7525 47.5525 53.6382C47.5525 54.576 48.2855 55.2793 49.2087 55.2793H52.4939V57.3632C52.1237 57.6922 51.5526 58.0277 50.8715 58.2793C50.2042 58.5258 49.4313 58.6918 48.6385 58.6918C45.3533 58.6918 42.964 56.2692 42.964 52.987C42.964 49.7048 45.3533 47.2822 48.6385 47.2822C50.0232 47.2822 51.3807 47.8553 52.4125 48.8191C52.5034 48.9063 52.6033 48.9832 52.7094 49.0492C53.0153 49.2396 53.373 49.3401 53.7157 49.3401C53.873 49.3401 54.028 49.3194 54.1772 49.2807C54.3533 49.2351 54.5214 49.1644 54.6754 49.0732C55.1798 48.7746 55.5348 48.2557 55.5348 47.6729C55.5348 47.2822 55.3719 46.8654 55.0732 46.5528C53.6614 45.0941 51.5708 44 48.6385 44C43.3441 44 39 47.4906 39 52.987C39 58.4573 43.3441 62 48.6385 62C52.3038 62 56.3493 60.2287 56.3493 57.0767V54.1331C56.3493 53.4609 56.013 52.8603 55.4939 52.4786ZM55.3529 63.3273C56.1155 62.893 56.8796 62.3237 57.5323 61.615C58.2208 63.5394 60.1137 64.8437 62.1585 64.8437C63.6764 64.8437 65.1308 64.1425 66.0666 62.9876C66.9872 64.1333 68.4135 64.8437 69.9225 64.8437C72.4909 64.8437 74.8774 62.8363 74.8774 60.0203V57.4978H77.841C80.3076 57.4978 82.4972 55.5102 82.4972 52.8828C82.4972 51.7941 82.1253 50.8096 81.5116 50.0302C82.9627 49.2675 84 47.7622 84 45.9537C84 43.3311 81.8421 41.3126 79.3438 41.3126H70.194C68.6303 41.3126 67.1628 42.0213 66.1934 43.1744C65.2802 41.934 63.7918 41.1563 62.2128 41.1563C60.0563 41.1563 58.0279 42.5716 57.4329 44.6925C57.3717 44.62 57.3081 44.5492 57.2423 44.4804L57.2357 44.4734L57.2289 44.4664C55.2621 42.4342 52.3979 41 48.6385 41C42.0176 41 36 45.5216 36 52.987C36 60.4097 41.9991 65 48.6385 65C50.894 65 53.353 64.4661 55.3529 63.3273ZM64.1134 45.9797V60.0203C64.1134 61.0101 63.2445 61.8437 62.1585 61.8437C61.1268 61.8437 60.258 61.0101 60.258 60.0203V45.9797C60.258 44.9899 61.1268 44.1563 62.2128 44.1563C63.2445 44.1563 64.1134 44.9899 64.1134 45.9797ZM81 45.9537C81 45.042 80.2398 44.3126 79.3438 44.3126H70.194C68.9994 44.3126 68.022 45.2504 68.022 46.3965V60.0203C68.022 61.0101 68.8908 61.8437 69.9225 61.8437C71.0085 61.8437 71.8774 61.0101 71.8774 60.0203V55.8689C71.8774 55.1117 72.5171 54.4978 73.3063 54.4978H77.841C78.737 54.4978 79.4972 53.7685 79.4972 52.8828C79.4972 51.9711 78.737 51.2417 77.841 51.2417H73.3063C72.5171 51.2417 71.8774 50.6279 71.8774 49.8707V48.9398C71.8774 48.1826 72.5171 47.5687 73.3063 47.5687H79.3438C80.2398 47.5687 81 46.8394 81 45.9537Z" fill="#88B0FF"/>
|
||||
<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M21 15C17.6863 15 15 17.6863 15 21H105C108.314 21 111 23.6863 111 27V79C114.314 79 117 76.3137 117 73V21C117 17.6863 114.314 15 111 15H21Z" fill="#88B0FF"/>
|
||||
<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M27 9C23.6863 9 21 11.6863 21 15H111C114.314 15 117 17.6863 117 21V73C120.314 73 123 70.3137 123 67V15C123 11.6863 120.314 9 117 9H27Z" fill="#88B0FF"/>
|
||||
<path d="M56.3493 57.0767V54.1331C56.3493 52.987 55.3719 52.0492 54.1772 52.0492H49.2087C48.2855 52.0492 47.5525 52.7525 47.5525 53.6382C47.5525 54.576 48.2855 55.2793 49.2087 55.2793H52.4939V57.3632C51.7608 58.0145 50.2404 58.6918 48.6385 58.6918C45.3533 58.6918 42.964 56.2692 42.964 52.987C42.964 49.7048 45.3533 47.2822 48.6385 47.2822C50.0232 47.2822 51.3807 47.8553 52.4125 48.8191C52.7654 49.1577 53.2541 49.3401 53.7157 49.3401C54.666 49.3401 55.5348 48.5847 55.5348 47.6729C55.5348 47.2822 55.3719 46.8654 55.0732 46.5528C53.6614 45.0941 51.5708 44 48.6385 44C43.3441 44 39 47.4906 39 52.987C39 58.4573 43.3441 62 48.6385 62C52.3038 62 56.3493 60.2287 56.3493 57.0767Z" fill="#88B0FF"/>
|
||||
<path d="M64.1134 60.0203V45.9797C64.1134 44.9899 63.2445 44.1563 62.2128 44.1563C61.1268 44.1563 60.258 44.9899 60.258 45.9797V60.0203C60.258 61.0101 61.1268 61.8437 62.1585 61.8437C63.2445 61.8437 64.1134 61.0101 64.1134 60.0203Z" fill="#88B0FF"/>
|
||||
<path d="M81 45.9537C81 45.042 80.2398 44.3126 79.3438 44.3126H70.194C68.9994 44.3126 68.022 45.2504 68.022 46.3965V60.0203C68.022 61.0101 68.8908 61.8437 69.9225 61.8437C71.0085 61.8437 71.8774 61.0101 71.8774 60.0203V55.8688C71.8774 55.1117 72.5171 54.4978 73.3063 54.4978H77.841C78.7369 54.4978 79.4972 53.7685 79.4972 52.8828C79.4972 51.9711 78.7369 51.2417 77.841 51.2417H73.3063C72.5171 51.2417 71.8774 50.6279 71.8774 49.8707V48.9398C71.8774 48.1826 72.5171 47.5687 73.3063 47.5687H79.3438C80.2398 47.5687 81 46.8394 81 45.9537Z" fill="#88B0FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="132" height="94" viewBox="0 0 132 94" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M15 21C11.6863 21 9 23.6863 9 27V79C9 82.3137 11.6863 85 15 85H105C108.314 85 111 82.3137 111 79V27C111 23.6863 108.314 21 105 21H15ZM55.4939 52.4786C55.3915 52.4033 55.2819 52.3365 55.1664 52.2793C55.0895 52.2413 55.01 52.2075 54.9282 52.1784C54.6939 52.0949 54.4409 52.0492 54.1772 52.0492H49.2087C48.2855 52.0492 47.5525 52.7525 47.5525 53.6382C47.5525 54.576 48.2855 55.2793 49.2087 55.2793H52.4939V57.3632C52.1237 57.6922 51.5526 58.0277 50.8715 58.2793C50.2042 58.5258 49.4313 58.6918 48.6385 58.6918C45.3533 58.6918 42.964 56.2692 42.964 52.987C42.964 49.7048 45.3533 47.2822 48.6385 47.2822C50.0232 47.2822 51.3807 47.8553 52.4125 48.8191C52.5034 48.9063 52.6033 48.9832 52.7094 49.0492C53.0153 49.2396 53.373 49.3401 53.7157 49.3401C53.873 49.3401 54.028 49.3194 54.1772 49.2807C54.3533 49.2351 54.5214 49.1644 54.6754 49.0732C55.1798 48.7746 55.5348 48.2557 55.5348 47.6729C55.5348 47.2822 55.3719 46.8654 55.0732 46.5528C53.6614 45.0941 51.5708 44 48.6385 44C43.3441 44 39 47.4906 39 52.987C39 58.4573 43.3441 62 48.6385 62C52.3038 62 56.3493 60.2287 56.3493 57.0767V54.1331C56.3493 53.4609 56.013 52.8603 55.4939 52.4786ZM55.3529 63.3273C56.1155 62.893 56.8796 62.3237 57.5323 61.615C58.2208 63.5394 60.1137 64.8437 62.1585 64.8437C63.6764 64.8437 65.1308 64.1425 66.0666 62.9876C66.9872 64.1333 68.4135 64.8437 69.9225 64.8437C72.4909 64.8437 74.8774 62.8363 74.8774 60.0203V57.4978H77.841C80.3076 57.4978 82.4972 55.5102 82.4972 52.8828C82.4972 51.7941 82.1253 50.8096 81.5116 50.0302C82.9627 49.2675 84 47.7622 84 45.9537C84 43.3311 81.8421 41.3126 79.3438 41.3126H70.194C68.6303 41.3126 67.1628 42.0213 66.1934 43.1744C65.2802 41.934 63.7918 41.1563 62.2128 41.1563C60.0563 41.1563 58.0279 42.5716 57.4329 44.6925C57.3717 44.62 57.3081 44.5492 57.2423 44.4804L57.2357 44.4734L57.2289 44.4664C55.2621 42.4342 52.3979 41 48.6385 41C42.0176 41 36 45.5216 36 52.987C36 60.4097 41.9991 65 48.6385 65C50.894 65 53.353 64.4661 55.3529 63.3273ZM64.1134 45.9797V60.0203C64.1134 61.0101 63.2445 61.8437 62.1585 61.8437C61.1268 61.8437 60.258 61.0101 60.258 60.0203V45.9797C60.258 44.9899 61.1268 44.1563 62.2128 44.1563C63.2445 44.1563 64.1134 44.9899 64.1134 45.9797ZM81 45.9537C81 45.042 80.2398 44.3126 79.3438 44.3126H70.194C68.9994 44.3126 68.022 45.2504 68.022 46.3965V60.0203C68.022 61.0101 68.8908 61.8437 69.9225 61.8437C71.0085 61.8437 71.8774 61.0101 71.8774 60.0203V55.8689C71.8774 55.1117 72.5171 54.4978 73.3063 54.4978H77.841C78.737 54.4978 79.4972 53.7685 79.4972 52.8828C79.4972 51.9711 78.737 51.2417 77.841 51.2417H73.3063C72.5171 51.2417 71.8774 50.6279 71.8774 49.8707V48.9398C71.8774 48.1826 72.5171 47.5687 73.3063 47.5687H79.3438C80.2398 47.5687 81 46.8394 81 45.9537Z" fill="#4360DF"/>
|
||||
<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M21 15C17.6863 15 15 17.6863 15 21H105C108.314 21 111 23.6863 111 27V79C114.314 79 117 76.3137 117 73V21C117 17.6863 114.314 15 111 15H21Z" fill="#4360DF"/>
|
||||
<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M27 9C23.6863 9 21 11.6863 21 15H111C114.314 15 117 17.6863 117 21V73C120.314 73 123 70.3137 123 67V15C123 11.6863 120.314 9 117 9H27Z" fill="#4360DF"/>
|
||||
<path d="M56.3493 57.0767V54.1331C56.3493 52.987 55.3719 52.0492 54.1772 52.0492H49.2087C48.2855 52.0492 47.5525 52.7525 47.5525 53.6382C47.5525 54.576 48.2855 55.2793 49.2087 55.2793H52.4939V57.3632C51.7608 58.0145 50.2404 58.6918 48.6385 58.6918C45.3533 58.6918 42.964 56.2692 42.964 52.987C42.964 49.7048 45.3533 47.2822 48.6385 47.2822C50.0232 47.2822 51.3807 47.8553 52.4125 48.8191C52.7654 49.1577 53.2541 49.3401 53.7157 49.3401C54.666 49.3401 55.5348 48.5847 55.5348 47.6729C55.5348 47.2822 55.3719 46.8654 55.0732 46.5528C53.6614 45.0941 51.5708 44 48.6385 44C43.3441 44 39 47.4906 39 52.987C39 58.4573 43.3441 62 48.6385 62C52.3038 62 56.3493 60.2287 56.3493 57.0767Z" fill="#4360DF"/>
|
||||
<path d="M64.1134 60.0203V45.9797C64.1134 44.9899 63.2445 44.1563 62.2128 44.1563C61.1268 44.1563 60.258 44.9899 60.258 45.9797V60.0203C60.258 61.0101 61.1268 61.8437 62.1585 61.8437C63.2445 61.8437 64.1134 61.0101 64.1134 60.0203Z" fill="#4360DF"/>
|
||||
<path d="M81 45.9537C81 45.042 80.2398 44.3126 79.3438 44.3126H70.194C68.9994 44.3126 68.022 45.2504 68.022 46.3965V60.0203C68.022 61.0101 68.8908 61.8437 69.9225 61.8437C71.0085 61.8437 71.8774 61.0101 71.8774 60.0203V55.8688C71.8774 55.1117 72.5171 54.4978 73.3063 54.4978H77.841C78.7369 54.4978 79.4972 53.7685 79.4972 52.8828C79.4972 51.9711 78.7369 51.2417 77.841 51.2417H73.3063C72.5171 51.2417 71.8774 50.6279 71.8774 49.8707V48.9398C71.8774 48.1826 72.5171 47.5687 73.3063 47.5687H79.3438C80.2398 47.5687 81 46.8394 81 45.9537Z" fill="#4360DF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -1214,12 +1214,17 @@ Rectangle {
|
|||
enabled: !control.emojiPopupOpened
|
||||
implicitHeight: 32
|
||||
implicitWidth: 32
|
||||
anchors.left: parent.left
|
||||
anchors.right: stickersBtn.left
|
||||
anchors.rightMargin: 2
|
||||
anchors.bottom: parent.bottom
|
||||
visible: !imageBtn2.visible
|
||||
icon.name: "emojis"
|
||||
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
|
||||
color: "transparent"
|
||||
|
||||
icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
|
||||
: Theme.palette.baseColor1
|
||||
|
||||
onClicked: {
|
||||
control.emojiPopupOpened = true
|
||||
togglePopup(emojiPopup, emojiBtn)
|
||||
|
|
@ -1232,13 +1237,17 @@ Rectangle {
|
|||
id: gifBtn
|
||||
implicitHeight: 32
|
||||
implicitWidth: 32
|
||||
anchors.right: emojiBtn.left
|
||||
anchors.rightMargin: 2
|
||||
anchors.left: stickersBtn.right
|
||||
anchors.leftMargin: 2
|
||||
anchors.bottom: parent.bottom
|
||||
visible: !isEdit && RootStore.isGifWidgetEnabled
|
||||
icon.name: "gif"
|
||||
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
|
||||
color: "transparent"
|
||||
|
||||
icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
|
||||
: Theme.palette.baseColor1
|
||||
|
||||
onClicked: togglePopup(gifPopup, gifBtn)
|
||||
}
|
||||
|
||||
|
|
@ -1247,13 +1256,15 @@ Rectangle {
|
|||
implicitHeight: 32
|
||||
implicitWidth: 32
|
||||
width: visible ? 32 : 0
|
||||
anchors.left: emojiBtn.right
|
||||
anchors.leftMargin: 2
|
||||
anchors.left: parent.left
|
||||
anchors.bottom: parent.bottom
|
||||
icon.name: "stickers"
|
||||
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
|
||||
visible: !isEdit && emojiBtn.visible
|
||||
color: "transparent"
|
||||
icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
|
||||
: Theme.palette.baseColor1
|
||||
|
||||
onClicked: togglePopup(stickersPopup, stickersBtn)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ import shared.stores 1.0
|
|||
import shared.controls 1.0
|
||||
|
||||
Popup {
|
||||
id: root
|
||||
|
||||
enum Category {
|
||||
Trending,
|
||||
Recent,
|
||||
|
|
@ -20,11 +22,10 @@ Popup {
|
|||
Search
|
||||
}
|
||||
|
||||
id: popup
|
||||
property var gifSelected: function () {}
|
||||
property var searchGif: Backpressure.debounce(searchBox, 500, function (query) {
|
||||
RootStore.searchGifs(query)
|
||||
});
|
||||
})
|
||||
property var toggleCategory: function(newCategory) {
|
||||
previousCategory = currentCategory
|
||||
currentCategory = newCategory
|
||||
|
|
@ -73,125 +74,142 @@ Popup {
|
|||
}
|
||||
|
||||
onClosed: {
|
||||
popup.currentCategory = StatusGifPopup.Category.Trending
|
||||
popup.previousCategory = StatusGifPopup.Category.Trending
|
||||
root.currentCategory = StatusGifPopup.Category.Trending
|
||||
root.previousCategory = StatusGifPopup.Category.Trending
|
||||
|
||||
if (confirmationPopup.opened) {
|
||||
confirmationPopup.close()
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
contentItem: Item {
|
||||
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: RootStore.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
id: gifsLoader
|
||||
active: popup.opened
|
||||
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: RootStore.gifColumnA.rowCount() == 0 ? empty : gifItems
|
||||
}
|
||||
|
||||
Row {
|
||||
id: categorySelector
|
||||
Layout.fillWidth: true
|
||||
leftPadding: Style.current.smallPadding / 2
|
||||
rightPadding: Style.current.smallPadding / 2
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
Item {
|
||||
property int headerMargin: 8
|
||||
|
||||
StatusTabBarIconButton {
|
||||
icon.name: "flash"
|
||||
highlighted: StatusGifPopup.Category.Trending === popup.currentCategory
|
||||
onClicked: {
|
||||
toggleCategory(StatusGifPopup.Category.Trending)
|
||||
id: gifHeader
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: searchBox.height + gifHeader.headerMargin
|
||||
|
||||
SearchBox {
|
||||
id: searchBox
|
||||
placeholderText: qsTr("Search")
|
||||
enabled: RootStore.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 (root.currentCategory !== StatusGifPopup.Category.Search) {
|
||||
root.previousCategory = root.currentCategory
|
||||
root.currentCategory = StatusGifPopup.Category.Search
|
||||
}
|
||||
Qt.callLater(searchGif, searchBox.text)
|
||||
}
|
||||
}
|
||||
enabled: RootStore.isTenorWarningAccepted
|
||||
}
|
||||
|
||||
StatusTabBarIconButton {
|
||||
icon.name: "time"
|
||||
highlighted: StatusGifPopup.Category.Recent === popup.currentCategory
|
||||
onClicked: {
|
||||
toggleCategory(StatusGifPopup.Category.Recent)
|
||||
StatusBaseText {
|
||||
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 ""
|
||||
}
|
||||
enabled: RootStore.isTenorWarningAccepted
|
||||
visible: searchBox.text === ""
|
||||
color: Style.current.secondaryText
|
||||
font.pixelSize: 13
|
||||
topPadding: gifHeader.headerMargin
|
||||
leftPadding: gifHeader.headerMargin
|
||||
}
|
||||
|
||||
StatusTabBarIconButton {
|
||||
icon.name: "favourite"
|
||||
highlighted: StatusGifPopup.Category.Favorite === popup.currentCategory
|
||||
onClicked: {
|
||||
toggleCategory(StatusGifPopup.Category.Favorite)
|
||||
Loader {
|
||||
id: gifsLoader
|
||||
active: root.opened && RootStore.isTenorWarningAccepted
|
||||
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
|
||||
}
|
||||
enabled: RootStore.isTenorWarningAccepted
|
||||
sourceComponent: RootStore.gifColumnA.rowCount() === 0 ? empty : gifItems
|
||||
}
|
||||
|
||||
Row {
|
||||
id: categorySelector
|
||||
Layout.fillWidth: true
|
||||
leftPadding: Style.current.smallPadding / 2
|
||||
rightPadding: Style.current.smallPadding / 2
|
||||
spacing: 0
|
||||
|
||||
|
||||
StatusTabBarIconButton {
|
||||
icon.name: "flash"
|
||||
highlighted: StatusGifPopup.Category.Trending === root.currentCategory
|
||||
onClicked: {
|
||||
toggleCategory(StatusGifPopup.Category.Trending)
|
||||
}
|
||||
enabled: RootStore.isTenorWarningAccepted
|
||||
}
|
||||
|
||||
StatusTabBarIconButton {
|
||||
icon.name: "time"
|
||||
highlighted: StatusGifPopup.Category.Recent === root.currentCategory
|
||||
onClicked: {
|
||||
toggleCategory(StatusGifPopup.Category.Recent)
|
||||
}
|
||||
enabled: RootStore.isTenorWarningAccepted
|
||||
}
|
||||
|
||||
StatusTabBarIconButton {
|
||||
icon.name: "favourite"
|
||||
highlighted: StatusGifPopup.Category.Favorite === root.currentCategory
|
||||
onClicked: {
|
||||
toggleCategory(StatusGifPopup.Category.Favorite)
|
||||
}
|
||||
enabled: RootStore.isTenorWarningAccepted
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: 'black'
|
||||
opacity: 0.4
|
||||
radius: Style.current.radius
|
||||
anchors.fill: parent
|
||||
visible: confirmationPopup.opened
|
||||
}
|
||||
}
|
||||
|
||||
Popup {
|
||||
id: confirmationPopup
|
||||
modal: false
|
||||
|
||||
anchors.centerIn: parent
|
||||
height: 290
|
||||
width: 280
|
||||
height: 278
|
||||
width: 291
|
||||
|
||||
horizontalPadding: 6
|
||||
verticalPadding: 32
|
||||
|
||||
modal: false
|
||||
closePolicy: Popup.NoAutoClose
|
||||
|
||||
background: Rectangle {
|
||||
|
|
@ -209,44 +227,49 @@ Popup {
|
|||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
spacing: 12
|
||||
SVGImage {
|
||||
id: gifImage
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
source: Style.svg(`gifs-${Style.current.name}`)
|
||||
}
|
||||
|
||||
SVGImage {
|
||||
id: gifImage
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
source: Style.svg(`gif-${Style.current.name}`)
|
||||
}
|
||||
StatusBaseText {
|
||||
id: title
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: gifImage.bottom
|
||||
anchors.topMargin: 8
|
||||
text: qsTr("Enable Tenor GIFs?")
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: Style.current.primaryTextFontSize
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: title
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: qsTr("Enable Tenor GIFs?")
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: Style.current.primaryTextFontSize
|
||||
}
|
||||
StatusBaseText {
|
||||
id: headline
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: title.bottom
|
||||
anchors.topMargin: 4
|
||||
|
||||
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
|
||||
}
|
||||
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: {
|
||||
RootStore.setIsTenorWarningAccepted(true);
|
||||
RootStore.getTrendingsGifs()
|
||||
confirmationPopup.close()
|
||||
}
|
||||
StatusButton {
|
||||
id: removeBtn
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: parent.bottom
|
||||
text: qsTr("Enable")
|
||||
|
||||
size: StatusBaseButton.Size.Small
|
||||
|
||||
onClicked: {
|
||||
RootStore.setIsTenorWarningAccepted(true)
|
||||
RootStore.getTrendingsGifs()
|
||||
confirmationPopup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -258,7 +281,7 @@ Popup {
|
|||
width: parent.width
|
||||
color: Style.current.background
|
||||
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
id: emptyText
|
||||
anchors.centerIn: parent
|
||||
text: {
|
||||
|
|
@ -315,9 +338,9 @@ Popup {
|
|||
|
||||
StatusGifColumn {
|
||||
gifList.model: RootStore.gifColumnA
|
||||
gifWidth: (popup.width / 3) - Style.current.padding
|
||||
gifSelected: popup.gifSelected
|
||||
toggleFavorite: popup.toggleFavorite
|
||||
gifWidth: (root.width / 3) - Style.current.padding
|
||||
gifSelected: root.gifSelected
|
||||
toggleFavorite: root.toggleFavorite
|
||||
lastHoveredId: gifs.lastHoveredId
|
||||
store: RootStore
|
||||
onGifHovered: {
|
||||
|
|
@ -327,9 +350,9 @@ Popup {
|
|||
|
||||
StatusGifColumn {
|
||||
gifList.model: RootStore.gifColumnB
|
||||
gifWidth: (popup.width / 3) - Style.current.padding
|
||||
gifSelected: popup.gifSelected
|
||||
toggleFavorite: popup.toggleFavorite
|
||||
gifWidth: (root.width / 3) - Style.current.padding
|
||||
gifSelected: root.gifSelected
|
||||
toggleFavorite: root.toggleFavorite
|
||||
lastHoveredId: gifs.lastHoveredId
|
||||
store: RootStore
|
||||
onGifHovered: {
|
||||
|
|
@ -339,9 +362,9 @@ Popup {
|
|||
|
||||
StatusGifColumn {
|
||||
gifList.model: RootStore.gifColumnC
|
||||
gifWidth: (popup.width / 3) - Style.current.padding
|
||||
gifSelected: popup.gifSelected
|
||||
toggleFavorite: popup.toggleFavorite
|
||||
gifWidth: (root.width / 3) - Style.current.padding
|
||||
gifSelected: root.gifSelected
|
||||
toggleFavorite: root.toggleFavorite
|
||||
lastHoveredId: gifs.lastHoveredId
|
||||
store: RootStore
|
||||
onGifHovered: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue