From dff9b1668e86cbf39d6297c77db8b9f530bb92cd Mon Sep 17 00:00:00 2001 From: Slava Monich Date: Sun, 29 Nov 2020 06:28:31 +0200 Subject: [PATCH] Animate opening and closing of attachment picker row And slightly tweaked the process of closing the sticker picker. --- qml/components/StickerPicker.qml | 16 ++++---------- qml/pages/ChatPage.qml | 36 ++++++++++++++++++++------------ 2 files changed, 27 insertions(+), 25 deletions(-) diff --git a/qml/components/StickerPicker.qml b/qml/components/StickerPicker.qml index bc4eb93..8d89ce1 100644 --- a/qml/components/StickerPicker.qml +++ b/qml/components/StickerPicker.qml @@ -29,6 +29,8 @@ Item { property var installedStickerSets: stickerManager.getInstalledStickerSets() property bool pickerLoaded: false + signal stickerPicked(var stickerId) + Timer { id: stickerPickerLoadedTimer interval: 100 @@ -101,12 +103,7 @@ Item { MouseArea { anchors.fill: parent - onClicked: { - tdLibWrapper.sendStickerMessage(chatInformation.id, modelData.sticker.remote.id); - stickerPickerOverlayItem.visible = false; - attachmentOptionsRow.visible = false; - stickerPickerLoader.active = false; - } + onClicked: stickerPickerOverlayItem.stickerPicked(modelData.sticker.remote.id) } } @@ -168,12 +165,7 @@ Item { MouseArea { anchors.fill: parent - onClicked: { - tdLibWrapper.sendStickerMessage(chatInformation.id, modelData.sticker.remote.id); - stickerPickerOverlayItem.visible = false; - attachmentOptionsRow.visible = false; - stickerPickerLoader.active = false; - } + onClicked: stickerPickerOverlayItem.stickerPicked(modelData.sticker.remote.id) } } diff --git a/qml/pages/ChatPage.qml b/qml/pages/ChatPage.qml index 15258eb..9ec3e06 100644 --- a/qml/pages/ChatPage.qml +++ b/qml/pages/ChatPage.qml @@ -925,6 +925,16 @@ Page { source: "../components/StickerPicker.qml" } + Connections { + target: stickerPickerLoader.item + onStickerPicked: { + console.log(stickerId) + tdLibWrapper.sendStickerMessage(chatInformation.id, stickerId) + stickerPickerLoader.active = false + attachmentOptionsRow.isNeeded = false + } + } + Loader { id: messageOverlayLoader @@ -984,18 +994,22 @@ Page { Row { id: attachmentOptionsRow - visible: false + property bool isNeeded: false + visible: height > 0 + height: isNeeded ? implicitHeight : 0 anchors.right: parent.right width: parent.width layoutDirection: Qt.RightToLeft spacing: Theme.paddingMedium + clip: true + Behavior on height { SmoothedAnimation { duration: 200 } } IconButton { visible: chatPage.hasSendPrivilege("can_send_media_messages") icon.source: "image://theme/icon-m-image" onClicked: { var picker = pageStack.push("Sailfish.Pickers.ImagePickerPage"); picker.selectedContentPropertiesChanged.connect(function(){ - attachmentOptionsRow.visible = false; + attachmentOptionsRow.isNeeded = false; Debug.log("Selected document: ", picker.selectedContentProperties.filePath ); attachmentPreviewRow.fileProperties = picker.selectedContentProperties; attachmentPreviewRow.isPicture = true; @@ -1010,7 +1024,7 @@ Page { onClicked: { var picker = pageStack.push("Sailfish.Pickers.VideoPickerPage"); picker.selectedContentPropertiesChanged.connect(function(){ - attachmentOptionsRow.visible = false; + attachmentOptionsRow.isNeeded = false; Debug.log("Selected video: ", picker.selectedContentProperties.filePath ); attachmentPreviewRow.fileProperties = picker.selectedContentProperties; attachmentPreviewRow.isVideo = true; @@ -1025,7 +1039,7 @@ Page { onClicked: { var picker = pageStack.push("Sailfish.Pickers.FilePickerPage"); picker.selectedContentPropertiesChanged.connect(function(){ - attachmentOptionsRow.visible = false; + attachmentOptionsRow.isNeeded = false; Debug.log("Selected document: ", picker.selectedContentProperties.filePath ); attachmentPreviewRow.fileProperties = picker.selectedContentProperties; attachmentPreviewRow.isDocument = true; @@ -1034,16 +1048,13 @@ Page { }) } } - IconButton { - visible: chatPage.hasSendPrivilege("can_send_other_messages") icon.source: "../../images/icon-m-sticker.svg" icon.sourceSize { width: Theme.iconSizeMedium height: Theme.iconSizeMedium } - highlighted: down || stickerPickerLoader.active onClicked: { stickerPickerLoader.active = !stickerPickerLoader.active; @@ -1054,7 +1065,7 @@ Page { icon.source: "image://theme/icon-m-question" onClicked: { pageStack.push(Qt.resolvedUrl("../pages/PollCreationPage.qml"), { "chatId" : chatInformation.id, groupName: chatInformation.title}); - attachmentOptionsRow.visible = false; + attachmentOptionsRow.isNeeded = false; } } } @@ -1247,17 +1258,16 @@ Page { IconButton { id: attachmentIconButton - icon.source: attachmentOptionsRow.visible ? "image://theme/icon-m-attach?" + Theme.highlightColor : "image://theme/icon-m-attach?" + Theme.primaryColor - + icon.source: "image://theme/icon-m-attach?" + (attachmentOptionsRow.isNeeded ? Theme.highlightColor : Theme.primaryColor) anchors.bottom: parent.bottom anchors.bottomMargin: Theme.paddingSmall enabled: !attachmentPreviewRow.visible onClicked: { - if (attachmentOptionsRow.visible) { - attachmentOptionsRow.visible = false; + if (attachmentOptionsRow.isNeeded) { + attachmentOptionsRow.isNeeded = false; stickerPickerLoader.active = false; } else { - attachmentOptionsRow.visible = true; + attachmentOptionsRow.isNeeded = true; } } }