medvedych/harbour-fernschreiber
2
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

press effect for more items

Browse source 
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
This commit is contained in:
John Gibbon 2020-12-04 22:47:03 +01:00
parent 8f9c46a05d
commit d35419d656
8 changed files with 93 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
qml/components/AudioPreview.qml
View file

@ -36,6 +36,8 @@ Item {
property int audioFileId; property int audioFileId;
property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true
property string audioType : "voiceNote"; property string audioType : "voiceNote";
property bool highlighted;
signal clicked();
width: parent.width width: parent.width
height: width / 2 height: width / 2
@ -120,10 +122,14 @@ Item {
asynchronous: true asynchronous: true
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
visible: status === Image.Ready ? true : false visible: status === Image.Ready ? true : false
layer.enabled: audioMessageComponent.highlighted
layer.effect: PressEffect { source: singleImage }
} }
BackgroundImage { BackgroundImage {
visible: placeholderImage.status !== Image.Ready visible: placeholderImage.status !== Image.Ready
layer.enabled: audioMessageComponent.highlighted
layer.effect: PressEffect { source: singleImage }
} }
Rectangle { Rectangle {
@ -146,19 +152,19 @@ Item {
Item { Item {
height: Theme.iconSizeLarge height: Theme.iconSizeLarge
width: parent.width width: parent.width
Image { IconButton {
id: playButton id: playButton
anchors.centerIn: parent anchors.centerIn: parent
width: Theme.iconSizeLarge width: Theme.iconSizeLarge
height: Theme.iconSizeLarge height: Theme.iconSizeLarge
source: "image://theme/icon-l-play?white" icon {
asynchronous: true source: "image://theme/icon-l-play?white"
asynchronous: true
}
highlighted: audioMessageComponent.highlighted || down
visible: placeholderImage.status === Image.Ready ? true : false visible: placeholderImage.status === Image.Ready ? true : false
MouseArea { onClicked: {
anchors.fill: parent handlePlay();
onClicked: {
handlePlay();
}
} }
} }
BusyIndicator { 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 { Audio {
id: messageAudio 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 { BusyIndicator {
id: audioBusyIndicator id: audioBusyIndicator
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
@ -355,19 +361,19 @@ Item {
Item { Item {
height: parent.height height: parent.height
width: parent.width width: parent.width
Image { IconButton {
id: pausedPlayButton id: pausedPlayButton
anchors.centerIn: parent anchors.centerIn: parent
width: Theme.iconSizeLarge width: Theme.iconSizeLarge
height: Theme.iconSizeLarge height: Theme.iconSizeLarge
asynchronous: true highlighted: videoMessageComponent.highlighted || down
source: "image://theme/icon-l-play?white" icon {
MouseArea { asynchronous: true
anchors.fill: parent source: "image://theme/icon-l-play?white"
onClicked: { }
messageAudio.play(); onClicked: {
timeLeftTimer.start(); messageAudio.play();
} timeLeftTimer.start();
} }
} }
} }
@ -384,6 +390,7 @@ Item {
value: messageAudio.position value: messageAudio.position
enabled: messageAudio.seekable enabled: messageAudio.seekable
visible: (messageAudio.duration > 0) visible: (messageAudio.duration > 0)
highlighted: videoMessageComponent.highlighted || down
onReleased: { onReleased: {
messageAudio.seek(Math.floor(value)); messageAudio.seek(Math.floor(value));
messageAudio.play(); messageAudio.play();

3
qml/components/DocumentPreview.qml
View file

@ -31,6 +31,7 @@ Item {
property var documentData: rawMessage.content.document property var documentData: rawMessage.content.document
property bool openRequested: false; property bool openRequested: false;
property bool highlighted;
Component.onCompleted: { Component.onCompleted: {
updateDocument(); updateDocument();
@ -76,6 +77,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: qsTr("Download Document") text: qsTr("Download Document")
visible: false visible: false
highlighted: videoMessageComponent.highlighted || down
onClicked: { onClicked: {
downloadDocumentButton.visible = false; downloadDocumentButton.visible = false;
downloadingProgressBar.visible = true; downloadingProgressBar.visible = true;
@ -99,6 +101,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: qsTr("Open Document") text: qsTr("Open Document")
visible: false visible: false
highlighted: videoMessageComponent.highlighted || down
onClicked: { onClicked: {
documentPreviewItem.openRequested = true; documentPreviewItem.openRequested = true;
tdLibWrapper.openFileOnDevice(documentData.document.local.path); tdLibWrapper.openFileOnDevice(documentData.document.local.path);

4
qml/components/LocationPreview.qml
View file

@ -27,6 +27,7 @@ Item {
property ListItem messageListItem property ListItem messageListItem
property MessageOverlayFlickable overlayFlickable property MessageOverlayFlickable overlayFlickable
property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage 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 : "" ) 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 visible: status === Image.Ready
opacity: status === Image.Ready ? 1 : 0 opacity: status === Image.Ready ? 1 : 0
Behavior on opacity { NumberAnimation {} } Behavior on opacity { NumberAnimation {} }
layer.enabled: imagePreviewItem.highlighted
layer.effect: PressEffect { source: singleImage }
Item { Item {
anchors.centerIn: parent anchors.centerIn: parent
width: markerImage.width width: markerImage.width

1
qml/components/MessageListViewItem.qml
View file

@ -408,6 +408,7 @@ ListItem {
webPageData: myMessage.content.web_page webPageData: myMessage.content.web_page
width: parent.width width: parent.width
highlighted: messageListItem.highlighted
} }
} }
} }

18
qml/components/PollPreview.qml
View file

@ -46,6 +46,7 @@ Item {
} }
property bool canAnswer: !hasAnswered && !pollData.is_closed property bool canAnswer: !hasAnswered && !pollData.is_closed
property bool isQuiz: pollData.type['@type'] === "pollTypeQuiz" property bool isQuiz: pollData.type['@type'] === "pollTypeQuiz"
property bool highlighted;
width: parent.width width: parent.width
height: pollColumn.height height: pollColumn.height
opacity: 0 opacity: 0
@ -84,7 +85,7 @@ Item {
text: Emoji.emojify(pollData.question, Theme.fontSizeSmall) text: Emoji.emojify(pollData.question, Theme.fontSizeSmall)
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
textFormat: Text.StyledText textFormat: Text.StyledText
color: pollMessageComponent.isOwnMessage ? Theme.highlightColor : Theme.primaryColor color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor
} }
Label { Label {
@ -93,7 +94,7 @@ Item {
visible: text !== "" visible: text !== ""
text: pollData.is_closed ? qsTr("Final Result:") : (pollData.type.allow_multiple_answers ? qsTr("Multiple Answers are allowed.") : "") text: pollData.is_closed ? qsTr("Final Result:") : (pollData.type.allow_multiple_answers ? qsTr("Multiple Answers are allowed.") : "")
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
color: pollMessageComponent.isOwnMessage ? Theme.secondaryHighlightColor : Theme.secondaryColor color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
} }
Item { Item {
@ -110,6 +111,7 @@ Item {
automaticCheck: false automaticCheck: false
text: Emoji.emojify(modelData.text, Theme.fontSizeMedium) text: Emoji.emojify(modelData.text, Theme.fontSizeMedium)
checked: pollMessageComponent.chosenIndexes.indexOf(index) > -1 checked: pollMessageComponent.chosenIndexes.indexOf(index) > -1
highlighted: pollMessageComponent.highlighted || down
onClicked: { onClicked: {
pollMessageComponent.handleChoose(index); pollMessageComponent.handleChoose(index);
} }
@ -144,7 +146,7 @@ Item {
} }
Icon { Icon {
highlighted: pollMessageComponent.isOwnMessage highlighted: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted
property bool isRight: pollMessageComponent.isQuiz && pollData.type.correct_option_id === index property bool isRight: pollMessageComponent.isQuiz && pollData.type.correct_option_id === index
source: "image://theme/icon-s-accept" source: "image://theme/icon-s-accept"
visible: isRight visible: isRight
@ -162,7 +164,7 @@ Item {
top: parent.top top: parent.top
right: parent.right right: parent.right
} }
color: pollMessageComponent.isOwnMessage ? Theme.highlightColor : Theme.primaryColor color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor
} }
Item { Item {
id: displayOptionStatistics id: displayOptionStatistics
@ -183,14 +185,14 @@ Item {
left: parent.horizontalCenter left: parent.horizontalCenter
leftMargin: Theme.paddingSmall leftMargin: Theme.paddingSmall
} }
color: pollMessageComponent.isOwnMessage ? Theme.secondaryHighlightColor : Theme.secondaryColor color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
} }
Rectangle { Rectangle {
id: optionVoterPercentageBar id: optionVoterPercentageBar
height: Theme.paddingSmall height: Theme.paddingSmall
width: parent.width 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 radius: height/2
anchors { anchors {
left: parent.left left: parent.left
@ -199,7 +201,7 @@ Item {
Rectangle { Rectangle {
height: parent.height height: parent.height
color: pollMessageComponent.isOwnMessage ? Theme.highlightColor : Theme.primaryColor color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.highlightColor : Theme.primaryColor
radius: height/2 radius: height/2
width: parent.width * modelData.vote_percentage * 0.01 width: parent.width * modelData.vote_percentage * 0.01
} }
@ -228,7 +230,7 @@ Item {
width: contentWidth width: contentWidth
height: contentHeight height: contentHeight
horizontalAlignment: Text.AlignRight horizontalAlignment: Text.AlignRight
color: pollMessageComponent.isOwnMessage ? Theme.secondaryHighlightColor : Theme.secondaryColor color: pollMessageComponent.isOwnMessage || pollMessageComponent.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
} }
Row { Row {

5
qml/components/StickerPreview.qml
View file

@ -21,7 +21,6 @@ import Sailfish.Silica 1.0
import WerkWolf.Fernschreiber 1.0 import WerkWolf.Fernschreiber 1.0
Item { Item {
property ListItem messageListItem property ListItem messageListItem
property MessageOverlayFlickable overlayFlickable property MessageOverlayFlickable overlayFlickable
@ -31,10 +30,14 @@ Item {
animatedStickerLoader.item ? animatedStickerLoader.item.visible : false animatedStickerLoader.item ? animatedStickerLoader.item.visible : false
readonly property bool isOwnSticker : messageListItem ? messageListItem.isOwnMessage : overlayFlickable.isOwnMessage readonly property bool isOwnSticker : messageListItem ? messageListItem.isOwnMessage : overlayFlickable.isOwnMessage
property real aspectRatio: stickerData.width / stickerData.height property real aspectRatio: stickerData.width / stickerData.height
property bool highlighted
implicitWidth: stickerData.width implicitWidth: stickerData.width
implicitHeight: stickerData.height implicitHeight: stickerData.height
layer.enabled: highlighted
layer.effect: PressEffect { source: singleImage }
TDLibFile { TDLibFile {
id: file id: file
tdlib: tdLibWrapper tdlib: tdLibWrapper

49
qml/components/VideoPreview.qml
View file

@ -38,6 +38,7 @@ Item {
property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true; property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true;
property string videoType : "video"; property string videoType : "video";
property bool playRequested: false; property bool playRequested: false;
property bool highlighted;
signal clicked(); signal clicked();
width: parent.width width: parent.width
@ -147,6 +148,8 @@ Item {
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
asynchronous: true asynchronous: true
visible: status === Image.Ready ? true : false visible: status === Image.Ready ? true : false
layer.enabled: videoMessageComponent.highlighted
layer.effect: PressEffect { source: singleImage }
} }
BackgroundImage { BackgroundImage {
@ -173,20 +176,20 @@ Item {
Item { Item {
width: videoMessageComponent.fullscreen ? parent.width : ( parent.width / 2 ) width: videoMessageComponent.fullscreen ? parent.width : ( parent.width / 2 )
height: Theme.iconSizeLarge height: Theme.iconSizeLarge
Image { IconButton {
id: playButton id: playButton
anchors.centerIn: parent anchors.centerIn: parent
width: Theme.iconSizeLarge width: Theme.iconSizeLarge
height: Theme.iconSizeLarge height: Theme.iconSizeLarge
source: "image://theme/icon-l-play?white" icon {
asynchronous: true source: "image://theme/icon-l-play?white"
asynchronous: true
}
highlighted: videoMessageComponent.highlighted || down
visible: placeholderImage.status === Image.Ready ? true : false visible: placeholderImage.status === Image.Ready ? true : false
MouseArea { onClicked: {
anchors.fill: parent fullscreenItem.visible = false;
onClicked: { handlePlay();
fullscreenItem.visible = false;
handlePlay();
}
} }
} }
BusyIndicator { BusyIndicator {
@ -215,6 +218,7 @@ Item {
height: Theme.iconSizeLarge height: Theme.iconSizeLarge
} }
} }
highlighted: videoMessageComponent.highlighted || down
visible: ( placeholderImage.status === Image.Ready && !videoMessageComponent.fullscreen ) ? true : false visible: ( placeholderImage.status === Image.Ready && !videoMessageComponent.fullscreen ) ? true : false
onClicked: { onClicked: {
pageStack.push(Qt.resolvedUrl("../pages/VideoPage.qml"), {"videoData": videoData}); pageStack.push(Qt.resolvedUrl("../pages/VideoPage.qml"), {"videoData": videoData});
@ -360,6 +364,8 @@ Item {
width: parent.width width: parent.width
height: parent.height height: parent.height
source: videoUrl source: videoUrl
layer.enabled: videoMessageComponent.highlighted
layer.effect: PressEffect { source: singleImage }
onStopped: { onStopped: {
enableScreensaver(); enableScreensaver();
messageVideo.visible = false; messageVideo.visible = false;
@ -424,20 +430,20 @@ Item {
Item { Item {
height: parent.height height: parent.height
width: videoMessageComponent.fullscreen ? parent.width : ( parent.width / 2 ) width: videoMessageComponent.fullscreen ? parent.width : ( parent.width / 2 )
Image { IconButton {
id: pausedPlayButton id: pausedPlayButton
anchors.centerIn: parent anchors.centerIn: parent
width: Theme.iconSizeLarge width: Theme.iconSizeLarge
height: Theme.iconSizeLarge height: Theme.iconSizeLarge
asynchronous: true highlighted: videoMessageComponent.highlighted || down
source: "image://theme/icon-l-play?white" icon {
MouseArea { asynchronous: true
anchors.fill: parent source: "image://theme/icon-l-play?white"
onClicked: { }
disableScreensaver(); onClicked: {
messageVideo.play(); disableScreensaver();
timeLeftTimer.start(); messageVideo.play();
} timeLeftTimer.start();
} }
} }
} }
@ -451,6 +457,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
width: Theme.iconSizeLarge width: Theme.iconSizeLarge
height: Theme.iconSizeLarge height: Theme.iconSizeLarge
highlighted: videoMessageComponent.highlighted || down
icon { icon {
asynchronous: true asynchronous: true
source: "../../images/icon-l-fullscreen.svg" source: "../../images/icon-l-fullscreen.svg"
@ -474,6 +481,8 @@ Item {
anchors.bottom: positionText.top anchors.bottom: positionText.top
minimumValue: 0 minimumValue: 0
maximumValue: messageVideo.duration ? messageVideo.duration : 0 maximumValue: messageVideo.duration ? messageVideo.duration : 0
highlighted: videoMessageComponent.highlighted || down
stepSize: 1 stepSize: 1
value: messageVideo.position value: messageVideo.position
enabled: messageVideo.seekable enabled: messageVideo.seekable
@ -489,7 +498,7 @@ Item {
Text { Text {
id: positionText id: positionText
visible: messageVideo.visible && messageVideo.duration === 0 visible: messageVideo.visible && messageVideo.duration === 0
color: Theme.primaryColor color: videoMessageComponent.highlighted ? Theme.secondaryColor : Theme.primaryColor
font.pixelSize: videoMessageComponent.fullscreen ? Theme.fontSizeSmall : Theme.fontSizeTiny font.pixelSize: videoMessageComponent.fullscreen ? Theme.fontSizeSmall : Theme.fontSizeTiny
anchors { anchors {
bottom: parent.bottom bottom: parent.bottom

5
qml/components/WebPagePreview.qml
View file

@ -31,6 +31,7 @@ Column {
property var pictureFileInformation; property var pictureFileInformation;
property bool hasImage: false; property bool hasImage: false;
property bool largerFontSize: false; property bool largerFontSize: false;
property bool highlighted
spacing: Theme.paddingSmall spacing: Theme.paddingSmall
@ -130,6 +131,8 @@ Column {
asynchronous: true asynchronous: true
visible: hasImage && status === Image.Ready visible: hasImage && status === Image.Ready
opacity: hasImage && status === Image.Ready ? 1 : 0 opacity: hasImage && status === Image.Ready ? 1 : 0
layer.enabled: webPagePreviewColumn.highlighted
layer.effect: PressEffect { source: singleImage }
Behavior on opacity { NumberAnimation {} } Behavior on opacity { NumberAnimation {} }
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -141,6 +144,8 @@ Column {
BackgroundImage { BackgroundImage {
visible: hasImage && singleImage.status !== Image.Ready visible: hasImage && singleImage.status !== Image.Ready
layer.enabled: webPagePreviewColumn.highlighted
layer.effect: PressEffect { source: singleImage }
} }
} }