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

49
qml/components/AudioPreview.qml
View file

@ -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,21 +152,21 @@ Item {
Item {
height: Theme.iconSizeLarge
width: parent.width
Image {
IconButton {
id: playButton
anchors.centerIn: parent
width: Theme.iconSizeLarge
height: Theme.iconSizeLarge
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();
}
}
}
BusyIndicator {
id: audioDownloadBusyIndicator
running: false
@ -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,15 +361,16 @@ Item {
Item {
height: parent.height
width: parent.width
Image {
IconButton {
id: pausedPlayButton
anchors.centerIn: parent
width: Theme.iconSizeLarge
height: Theme.iconSizeLarge
highlighted: videoMessageComponent.highlighted || down
icon {
asynchronous: true
source: "image://theme/icon-l-play?white"
MouseArea {
anchors.fill: parent
}
onClicked: {
messageAudio.play();
timeLeftTimer.start();
@ -371,7 +378,6 @@ Item {
}
}
}
}
Slider {
id: messageAudioSlider
@ -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();

3
qml/components/DocumentPreview.qml
View file

@ -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);

4
qml/components/LocationPreview.qml
View file

@ -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

1
qml/components/MessageListViewItem.qml
View file

@ -408,6 +408,7 @@ ListItem {
webPageData: myMessage.content.web_page
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 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 {

5
qml/components/StickerPreview.qml
View file

@ -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

27
qml/components/VideoPreview.qml
View file

@ -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,22 +176,22 @@ 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
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();
}
}
}
BusyIndicator {
id: videoDownloadBusyIndicator
running: false
@ -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,15 +430,16 @@ 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
highlighted: videoMessageComponent.highlighted || down
icon {
asynchronous: true
source: "image://theme/icon-l-play?white"
MouseArea {
anchors.fill: parent
}
onClicked: {
disableScreensaver();
messageVideo.play();
@ -440,7 +447,6 @@ Item {
}
}
}
}
Item {
id: pausedFullscreenItem
height: parent.height
@ -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

5
qml/components/WebPagePreview.qml
View file

@ -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 }
}
}