Animate opening and closing of attachment picker row

And slightly tweaked the process of closing the sticker picker.
This commit is contained in:
Slava Monich 2020-11-29 06:28:31 +02:00
parent cc08ee3997
commit dff9b1668e
2 changed files with 27 additions and 25 deletions

View file

@ -29,6 +29,8 @@ Item {
property var installedStickerSets: stickerManager.getInstalledStickerSets() property var installedStickerSets: stickerManager.getInstalledStickerSets()
property bool pickerLoaded: false property bool pickerLoaded: false
signal stickerPicked(var stickerId)
Timer { Timer {
id: stickerPickerLoadedTimer id: stickerPickerLoadedTimer
interval: 100 interval: 100
@ -101,12 +103,7 @@ Item {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: stickerPickerOverlayItem.stickerPicked(modelData.sticker.remote.id)
tdLibWrapper.sendStickerMessage(chatInformation.id, modelData.sticker.remote.id);
stickerPickerOverlayItem.visible = false;
attachmentOptionsRow.visible = false;
stickerPickerLoader.active = false;
}
} }
} }
@ -168,12 +165,7 @@ Item {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: stickerPickerOverlayItem.stickerPicked(modelData.sticker.remote.id)
tdLibWrapper.sendStickerMessage(chatInformation.id, modelData.sticker.remote.id);
stickerPickerOverlayItem.visible = false;
attachmentOptionsRow.visible = false;
stickerPickerLoader.active = false;
}
} }
} }

View file

@ -925,6 +925,16 @@ Page {
source: "../components/StickerPicker.qml" source: "../components/StickerPicker.qml"
} }
Connections {
target: stickerPickerLoader.item
onStickerPicked: {
console.log(stickerId)
tdLibWrapper.sendStickerMessage(chatInformation.id, stickerId)
stickerPickerLoader.active = false
attachmentOptionsRow.isNeeded = false
}
}
Loader { Loader {
id: messageOverlayLoader id: messageOverlayLoader
@ -984,18 +994,22 @@ Page {
Row { Row {
id: attachmentOptionsRow id: attachmentOptionsRow
visible: false property bool isNeeded: false
visible: height > 0
height: isNeeded ? implicitHeight : 0
anchors.right: parent.right anchors.right: parent.right
width: parent.width width: parent.width
layoutDirection: Qt.RightToLeft layoutDirection: Qt.RightToLeft
spacing: Theme.paddingMedium spacing: Theme.paddingMedium
clip: true
Behavior on height { SmoothedAnimation { duration: 200 } }
IconButton { IconButton {
visible: chatPage.hasSendPrivilege("can_send_media_messages") visible: chatPage.hasSendPrivilege("can_send_media_messages")
icon.source: "image://theme/icon-m-image" icon.source: "image://theme/icon-m-image"
onClicked: { onClicked: {
var picker = pageStack.push("Sailfish.Pickers.ImagePickerPage"); var picker = pageStack.push("Sailfish.Pickers.ImagePickerPage");
picker.selectedContentPropertiesChanged.connect(function(){ picker.selectedContentPropertiesChanged.connect(function(){
attachmentOptionsRow.visible = false; attachmentOptionsRow.isNeeded = false;
Debug.log("Selected document: ", picker.selectedContentProperties.filePath ); Debug.log("Selected document: ", picker.selectedContentProperties.filePath );
attachmentPreviewRow.fileProperties = picker.selectedContentProperties; attachmentPreviewRow.fileProperties = picker.selectedContentProperties;
attachmentPreviewRow.isPicture = true; attachmentPreviewRow.isPicture = true;
@ -1010,7 +1024,7 @@ Page {
onClicked: { onClicked: {
var picker = pageStack.push("Sailfish.Pickers.VideoPickerPage"); var picker = pageStack.push("Sailfish.Pickers.VideoPickerPage");
picker.selectedContentPropertiesChanged.connect(function(){ picker.selectedContentPropertiesChanged.connect(function(){
attachmentOptionsRow.visible = false; attachmentOptionsRow.isNeeded = false;
Debug.log("Selected video: ", picker.selectedContentProperties.filePath ); Debug.log("Selected video: ", picker.selectedContentProperties.filePath );
attachmentPreviewRow.fileProperties = picker.selectedContentProperties; attachmentPreviewRow.fileProperties = picker.selectedContentProperties;
attachmentPreviewRow.isVideo = true; attachmentPreviewRow.isVideo = true;
@ -1025,7 +1039,7 @@ Page {
onClicked: { onClicked: {
var picker = pageStack.push("Sailfish.Pickers.FilePickerPage"); var picker = pageStack.push("Sailfish.Pickers.FilePickerPage");
picker.selectedContentPropertiesChanged.connect(function(){ picker.selectedContentPropertiesChanged.connect(function(){
attachmentOptionsRow.visible = false; attachmentOptionsRow.isNeeded = false;
Debug.log("Selected document: ", picker.selectedContentProperties.filePath ); Debug.log("Selected document: ", picker.selectedContentProperties.filePath );
attachmentPreviewRow.fileProperties = picker.selectedContentProperties; attachmentPreviewRow.fileProperties = picker.selectedContentProperties;
attachmentPreviewRow.isDocument = true; attachmentPreviewRow.isDocument = true;
@ -1034,16 +1048,13 @@ Page {
}) })
} }
} }
IconButton { IconButton {
visible: chatPage.hasSendPrivilege("can_send_other_messages") visible: chatPage.hasSendPrivilege("can_send_other_messages")
icon.source: "../../images/icon-m-sticker.svg" icon.source: "../../images/icon-m-sticker.svg"
icon.sourceSize { icon.sourceSize {
width: Theme.iconSizeMedium width: Theme.iconSizeMedium
height: Theme.iconSizeMedium height: Theme.iconSizeMedium
} }
highlighted: down || stickerPickerLoader.active highlighted: down || stickerPickerLoader.active
onClicked: { onClicked: {
stickerPickerLoader.active = !stickerPickerLoader.active; stickerPickerLoader.active = !stickerPickerLoader.active;
@ -1054,7 +1065,7 @@ Page {
icon.source: "image://theme/icon-m-question" icon.source: "image://theme/icon-m-question"
onClicked: { onClicked: {
pageStack.push(Qt.resolvedUrl("../pages/PollCreationPage.qml"), { "chatId" : chatInformation.id, groupName: chatInformation.title}); 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 { IconButton {
id: attachmentIconButton 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.bottom: parent.bottom
anchors.bottomMargin: Theme.paddingSmall anchors.bottomMargin: Theme.paddingSmall
enabled: !attachmentPreviewRow.visible enabled: !attachmentPreviewRow.visible
onClicked: { onClicked: {
if (attachmentOptionsRow.visible) { if (attachmentOptionsRow.isNeeded) {
attachmentOptionsRow.visible = false; attachmentOptionsRow.isNeeded = false;
stickerPickerLoader.active = false; stickerPickerLoader.active = false;
} else { } else {
attachmentOptionsRow.visible = true; attachmentOptionsRow.isNeeded = true;
} }
} }
} }