press effect for more items
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:
parent
8f9c46a05d
commit
d35419d656
8 changed files with 93 additions and 59 deletions
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -408,6 +408,7 @@ ListItem {
|
|||
|
||||
webPageData: myMessage.content.web_page
|
||||
width: parent.width
|
||||
highlighted: messageListItem.highlighted
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue