Press effect for image preview items

harbour-fernschreiber.pro

@@ -52,6 +52,7 @@ DISTFILES += qml/harbour-fernschreiber.qml \
     qml/components/MessageOverlayFlickable.qml \
     qml/components/PinnedMessageItem.qml \
     qml/components/PollPreview.qml \
+    qml/components/PressEffect.qml \
     qml/components/StickerPicker.qml \
     qml/components/PhotoTextsListItem.qml \
     qml/components/WebPagePreview.qml \

qml/components/ImagePreview.qml

@@ -28,6 +28,7 @@ Item {
     property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
     property var photoData: rawMessage.content.photo
     readonly property int defaultHeight: Math.round(width * 2 / 3)
+    property bool highlighted
 
     width: parent.width
     height: singleImage.visible ? Math.min(defaultHeight, singleImage.bestHeight + Theme.paddingSmall) : defaultHeight
@@ -75,6 +76,8 @@ Item {
         visible: status === Image.Ready
         opacity: visible ? 1 : 0
         Behavior on opacity { FadeAnimation {} }
+        layer.enabled: imagePreviewItem.highlighted
+        layer.effect: PressEffect { source: singleImage }
     }
 
     BackgroundImage {

qml/components/MessageListViewItem.qml

@@ -41,7 +41,7 @@ ListItem {
                                                    chatView.contentComponentNames[myMessage.content['@type']] : ""
 
     readonly property ObjectModel additionalContextItems: ObjectModel {}
-    highlighted: down || isSelected
+    highlighted: (down || isSelected) && !menuOpen
     openMenuOnPressAndHold: !messageListItem.precalculatedValues.pageIsSelecting
 
     onClicked: {
@@ -411,6 +411,7 @@ ListItem {
                         }
                     }
                 }
+
                 Loader {
                     id: extraContentLoader
                     width: parent.width
@@ -418,6 +419,13 @@ ListItem {
                     height: item ? item.height : (messageListItem.extraContentComponentName !== "" ? chatView.getContentComponentHeight(messageListItem.extraContentComponentName, myMessage.content, width) : 0)
                 }
 
+                Binding {
+                    target: extraContentLoader.item
+                    when: extraContentLoader.item && ("highlighted" in extraContentLoader.item) && (typeof extraContentLoader.item.highlighted === "boolean")
+                    property: "highlighted"
+                    value: messageListItem.highlighted
+                }
+
                 Timer {
                     id: messageDateUpdater
                     interval: 60000

qml/components/PressEffect.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+ShaderEffect {
+    property variant source
+    property color color: Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity)
+    fragmentShader: "
+        uniform sampler2D source;
+        uniform highp vec4 color;
+        uniform lowp float qt_Opacity;
+        varying highp vec2 qt_TexCoord0;
+        void main(void) {
+            highp vec4 pixelColor = texture2D(source, qt_TexCoord0);
+            gl_FragColor = vec4(mix(pixelColor.rgb/max(pixelColor.a, 0.00390625), color.rgb/max(color.a, 0.00390625), color.a) * pixelColor.a, pixelColor.a) * qt_Opacity;
+        }"
+}