From d35419d656ec1d313b337451c7973885ff340f2e Mon Sep 17 00:00:00 2001 From: John Gibbon Date: Fri, 4 Dec 2020 22:47:03 +0100 Subject: [PATCH] press effect for more items MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit there are still a few areas where there's no press effect (message items themselves: Text, profile thumbnail, sent icon,…) but for now I've just aligned the components to the image changes --- qml/components/AudioPreview.qml | 67 ++++++++++++++------------ qml/components/DocumentPreview.qml | 3 ++ qml/components/LocationPreview.qml | 4 ++ qml/components/MessageListViewItem.qml | 1 + qml/components/PollPreview.qml | 18 ++++--- qml/components/StickerPreview.qml | 5 +- qml/components/VideoPreview.qml | 49 +++++++++++-------- qml/components/WebPagePreview.qml | 5 ++ 8 files changed, 93 insertions(+), 59 deletions(-) diff --git a/qml/components/AudioPreview.qml b/qml/components/AudioPreview.qml index 425d35b..ef8881e 100644 --- a/qml/components/AudioPreview.qml +++ b/qml/components/AudioPreview.qml @@ -36,6 +36,8 @@ Item { property int audioFileId; property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true property string audioType : "voiceNote"; + property bool highlighted; + signal clicked(); width: parent.width height: width / 2 @@ -120,10 +122,14 @@ Item { asynchronous: true fillMode: Image.PreserveAspectCrop visible: status === Image.Ready ? true : false + layer.enabled: audioMessageComponent.highlighted + layer.effect: PressEffect { source: singleImage } } BackgroundImage { visible: placeholderImage.status !== Image.Ready + layer.enabled: audioMessageComponent.highlighted + layer.effect: PressEffect { source: singleImage } } Rectangle { @@ -146,19 +152,19 @@ Item { Item { height: Theme.iconSizeLarge width: parent.width - Image { + IconButton { id: playButton anchors.centerIn: parent width: Theme.iconSizeLarge height: Theme.iconSizeLarge - source: "image://theme/icon-l-play?white" - asynchronous: true + icon { + source: "image://theme/icon-l-play?white" + asynchronous: true + } + highlighted: audioMessageComponent.highlighted || down visible: placeholderImage.status === Image.Ready ? true : false - MouseArea { - anchors.fill: parent - onClicked: { - handlePlay(); - } + onClicked: { + handlePlay(); } } BusyIndicator { @@ -235,6 +241,19 @@ Item { } } + Connections { + target: audioMessageComponent + onClicked: { + if (messageAudio.playbackState === MediaPlayer.PlayingState) { + messageAudio.pause(); + timeLeftItem.visible = true; + } else { + messageAudio.play(); + timeLeftTimer.start(); + } + } + } + Audio { id: messageAudio @@ -296,19 +315,6 @@ Item { } } - MouseArea { - anchors.fill: parent - onClicked: { - if (messageAudio.playbackState === MediaPlayer.PlayingState) { - messageAudio.pause(); - timeLeftItem.visible = true; - } else { - messageAudio.play(); - timeLeftTimer.start(); - } - } - } - BusyIndicator { id: audioBusyIndicator anchors.horizontalCenter: parent.horizontalCenter @@ -355,19 +361,19 @@ Item { Item { height: parent.height width: parent.width - Image { + IconButton { id: pausedPlayButton anchors.centerIn: parent width: Theme.iconSizeLarge height: Theme.iconSizeLarge - asynchronous: true - source: "image://theme/icon-l-play?white" - MouseArea { - anchors.fill: parent - onClicked: { - messageAudio.play(); - timeLeftTimer.start(); - } + highlighted: videoMessageComponent.highlighted || down + icon { + asynchronous: true + source: "image://theme/icon-l-play?white" + } + onClicked: { + messageAudio.play(); + timeLeftTimer.start(); } } } @@ -384,6 +390,7 @@ Item { value: messageAudio.position enabled: messageAudio.seekable visible: (messageAudio.duration > 0) + highlighted: videoMessageComponent.highlighted || down onReleased: { messageAudio.seek(Math.floor(value)); messageAudio.play(); diff --git a/qml/components/DocumentPreview.qml b/qml/components/DocumentPreview.qml index a33b153..565e6a9 100644 --- a/qml/components/DocumentPreview.qml +++ b/qml/components/DocumentPreview.qml @@ -31,6 +31,7 @@ Item { property var documentData: rawMessage.content.document property bool openRequested: false; + property bool highlighted; Component.onCompleted: { updateDocument(); @@ -76,6 +77,7 @@ Item { anchors.centerIn: parent text: qsTr("Download Document") visible: false + highlighted: videoMessageComponent.highlighted || down onClicked: { downloadDocumentButton.visible = false; downloadingProgressBar.visible = true; @@ -99,6 +101,7 @@ Item { anchors.centerIn: parent text: qsTr("Open Document") visible: false + highlighted: videoMessageComponent.highlighted || down onClicked: { documentPreviewItem.openRequested = true; tdLibWrapper.openFileOnDevice(documentData.document.local.path); diff --git a/qml/components/LocationPreview.qml b/qml/components/LocationPreview.qml index 3d58f22..e50120e 100644 --- a/qml/components/LocationPreview.qml +++ b/qml/components/LocationPreview.qml @@ -27,6 +27,7 @@ Item { property ListItem messageListItem property MessageOverlayFlickable overlayFlickable property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage + property bool highlighted property var locationData : ( rawMessage.content['@type'] === "messageLocation" ) ? rawMessage.content.location : ( ( rawMessage.content['@type'] === "messageVenue" ) ? rawMessage.content.venue.location : "" ) @@ -80,6 +81,9 @@ Item { visible: status === Image.Ready opacity: status === Image.Ready ? 1 : 0 Behavior on opacity { NumberAnimation {} } + + layer.enabled: imagePreviewItem.highlighted + layer.effect: PressEffect { source: singleImage } Item { anchors.centerIn: parent width: markerImage.width diff --git a/qml/components/MessageListViewItem.qml b/qml/components/MessageListViewItem.qml index c57c9fd..96b358c 100644 --- a/qml/components/MessageListViewItem.qml +++ b/qml/components/MessageListViewItem.qml @@ -408,6 +408,7 @@ ListItem { webPageData: myMessage.content.web_page width: parent.width + highlighted: messageListItem.highlighted } } } diff --git a/qml/components/PollPreview.qml b/qml/components/PollPreview.qml index 4157936..049ab75 100644 --- a/qml/components/PollPreview.qml +++ b/qml/components/PollPreview.qml @@ -46,6 +46,7 @@ Item { } property bool canAnswer: !hasAnswered && !pollData.is_closed property bool isQuiz: pollData.type['@type'] === "pollTypeQuiz" + property bool highlighted; width: parent.width height: pollColumn.height opacity: 0 @@ -84,7 +85,7 @@ Item { text: Emoji.emojify(pollData.question, Theme.fontSizeSmall) wrapMode: Text.WrapAtWordBoundaryOrAnywhere textFormat: Text.StyledText - color: pollMessageComponent.isOwnMessage ? Theme.highlightColor : Theme.primaryColor + color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor } Label { @@ -93,7 +94,7 @@ Item { visible: text !== "" text: pollData.is_closed ? qsTr("Final Result:") : (pollData.type.allow_multiple_answers ? qsTr("Multiple Answers are allowed.") : "") wrapMode: Text.WrapAtWordBoundaryOrAnywhere - color: pollMessageComponent.isOwnMessage ? Theme.secondaryHighlightColor : Theme.secondaryColor + color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor } Item { @@ -110,6 +111,7 @@ Item { automaticCheck: false text: Emoji.emojify(modelData.text, Theme.fontSizeMedium) checked: pollMessageComponent.chosenIndexes.indexOf(index) > -1 + highlighted: pollMessageComponent.highlighted || down onClicked: { pollMessageComponent.handleChoose(index); } @@ -144,7 +146,7 @@ Item { } Icon { - highlighted: pollMessageComponent.isOwnMessage + highlighted: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted property bool isRight: pollMessageComponent.isQuiz && pollData.type.correct_option_id === index source: "image://theme/icon-s-accept" visible: isRight @@ -162,7 +164,7 @@ Item { top: parent.top right: parent.right } - color: pollMessageComponent.isOwnMessage ? Theme.highlightColor : Theme.primaryColor + color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor } Item { id: displayOptionStatistics @@ -183,14 +185,14 @@ Item { left: parent.horizontalCenter leftMargin: Theme.paddingSmall } - color: pollMessageComponent.isOwnMessage ? Theme.secondaryHighlightColor : Theme.secondaryColor + color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor } Rectangle { id: optionVoterPercentageBar height: Theme.paddingSmall width: parent.width - color: Theme.rgba(pollMessageComponent.isOwnMessage ? Theme.secondaryHighlightColor : Theme.secondaryColor, 0.3) + color: Theme.rgba(pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor, 0.3) radius: height/2 anchors { left: parent.left @@ -199,7 +201,7 @@ Item { Rectangle { height: parent.height - color: pollMessageComponent.isOwnMessage ? Theme.highlightColor : Theme.primaryColor + color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor radius: height/2 width: parent.width * modelData.vote_percentage * 0.01 } @@ -228,7 +230,7 @@ Item { width: contentWidth height: contentHeight horizontalAlignment: Text.AlignRight - color: pollMessageComponent.isOwnMessage ? Theme.secondaryHighlightColor : Theme.secondaryColor + color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor } Row { diff --git a/qml/components/StickerPreview.qml b/qml/components/StickerPreview.qml index 1535943..a2a2977 100644 --- a/qml/components/StickerPreview.qml +++ b/qml/components/StickerPreview.qml @@ -21,7 +21,6 @@ import Sailfish.Silica 1.0 import WerkWolf.Fernschreiber 1.0 Item { - property ListItem messageListItem property MessageOverlayFlickable overlayFlickable @@ -31,10 +30,14 @@ Item { animatedStickerLoader.item ? animatedStickerLoader.item.visible : false readonly property bool isOwnSticker : messageListItem ? messageListItem.isOwnMessage : overlayFlickable.isOwnMessage property real aspectRatio: stickerData.width / stickerData.height + property bool highlighted implicitWidth: stickerData.width implicitHeight: stickerData.height + layer.enabled: highlighted + layer.effect: PressEffect { source: singleImage } + TDLibFile { id: file tdlib: tdLibWrapper diff --git a/qml/components/VideoPreview.qml b/qml/components/VideoPreview.qml index 6fd0996..9aa87a3 100644 --- a/qml/components/VideoPreview.qml +++ b/qml/components/VideoPreview.qml @@ -38,6 +38,7 @@ Item { property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true; property string videoType : "video"; property bool playRequested: false; + property bool highlighted; signal clicked(); width: parent.width @@ -147,6 +148,8 @@ Item { fillMode: Image.PreserveAspectCrop asynchronous: true visible: status === Image.Ready ? true : false + layer.enabled: videoMessageComponent.highlighted + layer.effect: PressEffect { source: singleImage } } BackgroundImage { @@ -173,20 +176,20 @@ Item { Item { width: videoMessageComponent.fullscreen ? parent.width : ( parent.width / 2 ) height: Theme.iconSizeLarge - Image { + IconButton { id: playButton anchors.centerIn: parent width: Theme.iconSizeLarge height: Theme.iconSizeLarge - source: "image://theme/icon-l-play?white" - asynchronous: true + icon { + source: "image://theme/icon-l-play?white" + asynchronous: true + } + highlighted: videoMessageComponent.highlighted || down visible: placeholderImage.status === Image.Ready ? true : false - MouseArea { - anchors.fill: parent - onClicked: { - fullscreenItem.visible = false; - handlePlay(); - } + onClicked: { + fullscreenItem.visible = false; + handlePlay(); } } BusyIndicator { @@ -215,6 +218,7 @@ Item { height: Theme.iconSizeLarge } } + highlighted: videoMessageComponent.highlighted || down visible: ( placeholderImage.status === Image.Ready && !videoMessageComponent.fullscreen ) ? true : false onClicked: { pageStack.push(Qt.resolvedUrl("../pages/VideoPage.qml"), {"videoData": videoData}); @@ -360,6 +364,8 @@ Item { width: parent.width height: parent.height source: videoUrl + layer.enabled: videoMessageComponent.highlighted + layer.effect: PressEffect { source: singleImage } onStopped: { enableScreensaver(); messageVideo.visible = false; @@ -424,20 +430,20 @@ Item { Item { height: parent.height width: videoMessageComponent.fullscreen ? parent.width : ( parent.width / 2 ) - Image { + IconButton { id: pausedPlayButton anchors.centerIn: parent width: Theme.iconSizeLarge height: Theme.iconSizeLarge - asynchronous: true - source: "image://theme/icon-l-play?white" - MouseArea { - anchors.fill: parent - onClicked: { - disableScreensaver(); - messageVideo.play(); - timeLeftTimer.start(); - } + highlighted: videoMessageComponent.highlighted || down + icon { + asynchronous: true + source: "image://theme/icon-l-play?white" + } + onClicked: { + disableScreensaver(); + messageVideo.play(); + timeLeftTimer.start(); } } } @@ -451,6 +457,7 @@ Item { anchors.centerIn: parent width: Theme.iconSizeLarge height: Theme.iconSizeLarge + highlighted: videoMessageComponent.highlighted || down icon { asynchronous: true source: "../../images/icon-l-fullscreen.svg" @@ -474,6 +481,8 @@ Item { anchors.bottom: positionText.top minimumValue: 0 maximumValue: messageVideo.duration ? messageVideo.duration : 0 + + highlighted: videoMessageComponent.highlighted || down stepSize: 1 value: messageVideo.position enabled: messageVideo.seekable @@ -489,7 +498,7 @@ Item { Text { id: positionText visible: messageVideo.visible && messageVideo.duration === 0 - color: Theme.primaryColor + color: videoMessageComponent.highlighted ? Theme.secondaryColor : Theme.primaryColor font.pixelSize: videoMessageComponent.fullscreen ? Theme.fontSizeSmall : Theme.fontSizeTiny anchors { bottom: parent.bottom diff --git a/qml/components/WebPagePreview.qml b/qml/components/WebPagePreview.qml index e90178d..1e7a34f 100644 --- a/qml/components/WebPagePreview.qml +++ b/qml/components/WebPagePreview.qml @@ -31,6 +31,7 @@ Column { property var pictureFileInformation; property bool hasImage: false; property bool largerFontSize: false; + property bool highlighted spacing: Theme.paddingSmall @@ -130,6 +131,8 @@ Column { asynchronous: true visible: hasImage && status === Image.Ready opacity: hasImage && status === Image.Ready ? 1 : 0 + layer.enabled: webPagePreviewColumn.highlighted + layer.effect: PressEffect { source: singleImage } Behavior on opacity { NumberAnimation {} } MouseArea { anchors.fill: parent @@ -141,6 +144,8 @@ Column { BackgroundImage { visible: hasImage && singleImage.status !== Image.Ready + layer.enabled: webPagePreviewColumn.highlighted + layer.effect: PressEffect { source: singleImage } } }