Put attachment row in a Flickable

This commit is contained in:
Sebastian Wolf 2021-01-02 18:08:33 +01:00
parent 5213084fb1
commit be404d0e55
No known key found for this signature in database
GPG key ID: CEA9522B5F38A90A
2 changed files with 116 additions and 97 deletions

View file

@ -203,7 +203,7 @@ Item {
} }
text: qsTr("Use recording") text: qsTr("Use recording")
onClicked: { onClicked: {
attachmentOptionsRow.isNeeded = false; attachmentOptionsFlickable.isNeeded = false;
attachmentPreviewRow.isVoiceNote = true; attachmentPreviewRow.isVoiceNote = true;
attachmentPreviewRow.attachmentDescription = qsTr("Voice Note (%1)").arg(recordingDurationLabel.text); attachmentPreviewRow.attachmentDescription = qsTr("Voice Note (%1)").arg(recordingDurationLabel.text);
attachmentPreviewRow.visible = true; attachmentPreviewRow.visible = true;

View file

@ -1120,7 +1120,7 @@ Page {
Debug.log("Sticker picked: " + stickerId); Debug.log("Sticker picked: " + stickerId);
tdLibWrapper.sendStickerMessage(chatInformation.id, stickerId); tdLibWrapper.sendStickerMessage(chatInformation.id, stickerId);
stickerPickerLoader.active = false; stickerPickerLoader.active = false;
attachmentOptionsRow.isNeeded = false; attachmentOptionsFlickable.isNeeded = false;
} }
} }
@ -1197,104 +1197,123 @@ Page {
visible: false visible: false
} }
Row { Flickable {
id: attachmentOptionsRow id: attachmentOptionsFlickable
property bool isNeeded: false property bool isNeeded: false
visible: height > 0
height: isNeeded ? implicitHeight : 0 onIsNeededChanged: {
anchors.right: parent.right console.log("HÖHE: " + attachmentOptionsRow.height);
}
width: parent.width width: parent.width
layoutDirection: Qt.RightToLeft height: isNeeded ? attachmentOptionsRow.height : 0
spacing: Theme.paddingMedium
clip: true
Behavior on height { SmoothedAnimation { duration: 200 } } Behavior on height { SmoothedAnimation { duration: 200 } }
IconButton { visible: height > 0
visible: chatPage.hasSendPrivilege("can_send_media_messages") contentHeight: attachmentOptionsRow.height
icon.source: "image://theme/icon-m-image" contentWidth: Math.max(parent.width, attachmentOptionsRow.width)
onClicked: { clip: true
var picker = pageStack.push("Sailfish.Pickers.ImagePickerPage", {
allowedOrientations: chatPage.allowedOrientations Row {
}) id: attachmentOptionsRow
picker.selectedContentPropertiesChanged.connect(function(){
attachmentOptionsRow.isNeeded = false; height: attachImageIconButton.height
Debug.log("Selected document: ", picker.selectedContentProperties.filePath );
attachmentPreviewRow.fileProperties = picker.selectedContentProperties; anchors.right: parent.right
attachmentPreviewRow.isPicture = true; layoutDirection: Qt.RightToLeft
attachmentPreviewRow.visible = true; spacing: Theme.paddingMedium
controlSendButton();
}) IconButton {
} id: attachImageIconButton
} visible: chatPage.hasSendPrivilege("can_send_media_messages")
IconButton { icon.source: "image://theme/icon-m-image"
visible: chatPage.hasSendPrivilege("can_send_media_messages") onClicked: {
icon.source: "image://theme/icon-m-video" var picker = pageStack.push("Sailfish.Pickers.ImagePickerPage", {
onClicked: { allowedOrientations: chatPage.allowedOrientations
var picker = pageStack.push("Sailfish.Pickers.VideoPickerPage", { })
allowedOrientations: chatPage.allowedOrientations picker.selectedContentPropertiesChanged.connect(function(){
}) attachmentOptionsFlickable.isNeeded = false;
picker.selectedContentPropertiesChanged.connect(function(){ Debug.log("Selected document: ", picker.selectedContentProperties.filePath );
attachmentOptionsRow.isNeeded = false; attachmentPreviewRow.fileProperties = picker.selectedContentProperties;
Debug.log("Selected video: ", picker.selectedContentProperties.filePath ); attachmentPreviewRow.isPicture = true;
attachmentPreviewRow.fileProperties = picker.selectedContentProperties; attachmentPreviewRow.visible = true;
attachmentPreviewRow.isVideo = true; controlSendButton();
attachmentPreviewRow.visible = true; })
controlSendButton(); }
}) }
} IconButton {
} visible: chatPage.hasSendPrivilege("can_send_media_messages")
IconButton { icon.source: "image://theme/icon-m-video"
visible: chatPage.hasSendPrivilege("can_send_media_messages") onClicked: {
icon.source: "image://theme/icon-m-mic" var picker = pageStack.push("Sailfish.Pickers.VideoPickerPage", {
icon.sourceSize { allowedOrientations: chatPage.allowedOrientations
width: Theme.iconSizeMedium })
height: Theme.iconSizeMedium picker.selectedContentPropertiesChanged.connect(function(){
} attachmentOptionsFlickable.isNeeded = false;
highlighted: down || voiceNoteOverlayLoader.active Debug.log("Selected video: ", picker.selectedContentProperties.filePath );
onClicked: { attachmentPreviewRow.fileProperties = picker.selectedContentProperties;
voiceNoteOverlayLoader.active = !voiceNoteOverlayLoader.active; attachmentPreviewRow.isVideo = true;
stickerPickerLoader.active = false; attachmentPreviewRow.visible = true;
} controlSendButton();
} })
IconButton { }
visible: chatPage.hasSendPrivilege("can_send_media_messages") }
icon.source: "image://theme/icon-m-document" IconButton {
onClicked: { visible: chatPage.hasSendPrivilege("can_send_media_messages")
var picker = pageStack.push("Sailfish.Pickers.FilePickerPage", { icon.source: "image://theme/icon-m-mic"
allowedOrientations: chatPage.allowedOrientations icon.sourceSize {
}) width: Theme.iconSizeMedium
picker.selectedContentPropertiesChanged.connect(function(){ height: Theme.iconSizeMedium
attachmentOptionsRow.isNeeded = false; }
Debug.log("Selected document: ", picker.selectedContentProperties.filePath ); highlighted: down || voiceNoteOverlayLoader.active
attachmentPreviewRow.fileProperties = picker.selectedContentProperties; onClicked: {
attachmentPreviewRow.isDocument = true; voiceNoteOverlayLoader.active = !voiceNoteOverlayLoader.active;
attachmentPreviewRow.visible = true; stickerPickerLoader.active = false;
controlSendButton(); }
}) }
} IconButton {
} visible: chatPage.hasSendPrivilege("can_send_media_messages")
IconButton { icon.source: "image://theme/icon-m-document"
visible: chatPage.hasSendPrivilege("can_send_other_messages") onClicked: {
icon.source: "../../images/icon-m-sticker.svg" var picker = pageStack.push("Sailfish.Pickers.FilePickerPage", {
icon.sourceSize { allowedOrientations: chatPage.allowedOrientations
width: Theme.iconSizeMedium })
height: Theme.iconSizeMedium picker.selectedContentPropertiesChanged.connect(function(){
} attachmentOptionsFlickable.isNeeded = false;
highlighted: down || stickerPickerLoader.active Debug.log("Selected document: ", picker.selectedContentProperties.filePath );
onClicked: { attachmentPreviewRow.fileProperties = picker.selectedContentProperties;
stickerPickerLoader.active = !stickerPickerLoader.active; attachmentPreviewRow.isDocument = true;
voiceNoteOverlayLoader.active = false; attachmentPreviewRow.visible = true;
} controlSendButton();
} })
IconButton { }
visible: !(chatPage.isPrivateChat || chatPage.isSecretChat) && chatPage.hasSendPrivilege("can_send_polls") }
icon.source: "image://theme/icon-m-question" IconButton {
onClicked: { visible: chatPage.hasSendPrivilege("can_send_other_messages")
pageStack.push(Qt.resolvedUrl("../pages/PollCreationPage.qml"), { "chatId" : chatInformation.id, groupName: chatInformation.title}); icon.source: "../../images/icon-m-sticker.svg"
attachmentOptionsRow.isNeeded = false; icon.sourceSize {
width: Theme.iconSizeMedium
height: Theme.iconSizeMedium
}
highlighted: down || stickerPickerLoader.active
onClicked: {
stickerPickerLoader.active = !stickerPickerLoader.active;
voiceNoteOverlayLoader.active = false;
}
}
IconButton {
visible: !(chatPage.isPrivateChat || chatPage.isSecretChat) && chatPage.hasSendPrivilege("can_send_polls")
icon.source: "image://theme/icon-m-question"
onClicked: {
pageStack.push(Qt.resolvedUrl("../pages/PollCreationPage.qml"), { "chatId" : chatInformation.id, groupName: chatInformation.title});
attachmentOptionsFlickable.isNeeded = false;
}
} }
} }
} }
Row { Row {
id: attachmentPreviewRow id: attachmentPreviewRow
visible: false visible: false
@ -1564,17 +1583,17 @@ Page {
IconButton { IconButton {
id: attachmentIconButton id: attachmentIconButton
icon.source: "image://theme/icon-m-attach?" + (attachmentOptionsRow.isNeeded ? Theme.highlightColor : Theme.primaryColor) icon.source: "image://theme/icon-m-attach?" + (attachmentOptionsFlickable.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.isNeeded) { if (attachmentOptionsFlickable.isNeeded) {
attachmentOptionsRow.isNeeded = false; attachmentOptionsFlickable.isNeeded = false;
stickerPickerLoader.active = false; stickerPickerLoader.active = false;
voiceNoteOverlayLoader.active = false; voiceNoteOverlayLoader.active = false;
} else { } else {
attachmentOptionsRow.isNeeded = true; attachmentOptionsFlickable.isNeeded = true;
} }
} }
} }