[app] Tweaking image view transitions

app/qml/BooksBookView.qml

@@ -77,6 +77,7 @@ SilicaFlickable {
     Component {
         id: imageViewComponent
         BooksImageView {
+            imageBackground: globalSettings.pageBackgroundColor
         }
     }
 
@@ -168,8 +169,7 @@ SilicaFlickable {
                     if (!imageView) {
                         imageView = imageViewComponent.createObject(root)
                     }
-                    imageView.source = url
+                    imageView.show(url,rect)
-                    imageView.show()
                 }
             }
             onBrowserLinkPressed: {

app/qml/BooksImageView.qml

@@ -37,37 +37,81 @@ Rectangle {
     id: root
     visible: opacity > 0.0
     opacity: 0.0
-    width: parent.width
+    anchors.fill: parent
-    height: parent.height
     color: Theme.rgba(Theme.highlightDimmerColor, 0.9)
 
-    property alias source: image.source
+    property alias imageBackground: background.color
     readonly property real maxImageWidth: width - 2*Theme.horizontalPageMargin
     readonly property real maxImageHeight: height - 2*Theme.paddingLarge
+    readonly property real finalImageWidth: Math.ceil(image.landscape ? maxImageWidth : (maxImageHeight * image.sourceSize.width / image.sourceSize.height))
+    readonly property real finalImageHeight: Math.ceil(image.landscape ? (maxImageWidth * image.sourceSize.height / image.sourceSize.width) : maxImageHeight)
+    readonly property real finalImageX: Math.floor((width - finalImageWidth)/2)
+    readonly property real finalImageY: Math.floor((height - finalImageHeight)/2)
 
-    Behavior on opacity { FadeAnimation {} }
+    property bool shown
+
+    Rectangle {
+        id: background
+        anchors.fill: image
+    }
 
     Image {
         id: image
-        anchors.centerIn: parent
         smooth: true
         readonly property bool landscape: sourceSize.width * parent.height > sourceSize.height * parent.width
-        width: landscape ? maxImageWidth : (maxImageHeight * sourceSize.width / sourceSize.height)
-        height: landscape ? (maxImageWidth * sourceSize.height / sourceSize.width) : maxImageHeight
     }
 
     MouseArea {
         anchors.fill: parent
-        onPressed: {
+        onPressed: root.hide()
-            root.hide()
-        }
     }
 
-    function show() {
+    function show(url,rect) {
-        opacity = 1.0
+        image.source = url
+        if (!shown) {
+            image.x = rect.x
+            image.y = rect.y
+            image.width = rect.width
+            image.height = rect.height
+            shown = true
+        }
     }
 
     function hide() {
-        opacity = 0.0
+        shown = false
     }
+
+    states: [
+        State {
+            name: "shown"
+            when: shown
+            PropertyChanges {
+                target: root
+                opacity: 1
+            }
+            PropertyChanges {
+                target: background
+                opacity: 1
+            }
+            PropertyChanges {
+                target: image
+                x: finalImageX
+                y: finalImageY
+                width: finalImageWidth
+                height: finalImageHeight
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "*"
+            to: "*"
+            NumberAnimation {
+                properties: "opacity,x,y,width,height"
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+        }
+    ]
 }

app/src/BooksPageWidget.cpp

@@ -182,13 +182,15 @@ public:
 void BooksPageWidget::LongPressTask::performTask()
 {
     if (!isCanceled()) {
-        const ZLTextArea& area = iData->iView->textArea();
+        const BooksTextView& view = *iData->iView;
+        const ZLTextArea& area = view.textArea();
         const ZLTextElementRectangle* rect = area.elementByCoordinates(iX, iY);
         if (rect && !isCanceled()) {
             iRect.setLeft(rect->XStart);
             iRect.setRight(rect->XEnd);
             iRect.setTop(rect->YStart);
             iRect.setBottom(rect->YEnd);
+            iRect.translate(view.leftMargin(), view.topMargin());
             if (rect->Kind == ZLTextElement::WORD_ELEMENT) {
                 ZLTextWordCursor cursor = area.startCursor();
                 cursor.moveToParagraph(rect->ParagraphIndex);

app/src/BooksSettings.cpp

@@ -33,6 +33,7 @@
 
 #include "BooksSettings.h"
 #include "BooksTextStyle.h"
+#include "BooksTextView.h"
 #include "BooksBook.h"
 #include "BooksDefs.h"
 #include "BooksUtil.h"
@@ -215,6 +216,7 @@ BooksSettings::BooksSettings(QObject* aParent) :
     connect(iFontSizeConf, SIGNAL(valueChanged()), SLOT(onFontSizeValueChanged()));
     connect(iPageDetailsConf, SIGNAL(valueChanged()), SIGNAL(pageDetailsChanged()));
     connect(iInvertColorsConf, SIGNAL(valueChanged()), SIGNAL(invertColorsChanged()));
+    connect(iInvertColorsConf, SIGNAL(valueChanged()), SIGNAL(pageBackgroundColorChanged()));
     connect(iCurrentFolderConf, SIGNAL(valueChanged()), SLOT(onCurrentFolderChanged()));
     connect(iCurrentBookPathConf, SIGNAL(valueChanged()), SLOT(onCurrentBookPathChanged()));
     connect(iOrientationConf, SIGNAL(valueChanged()), SIGNAL(orientationChanged()));
@@ -458,6 +460,14 @@ BooksSettings::highlightPageToolColor() const
         NORMAL_PAGETOOL_HIGHLIGHT_COLOR;
 }
 
+QColor
+BooksSettings::pageBackgroundColor() const
+{
+    return qtColor(invertColors() ?
+        BooksTextView::INVERTED_BACKGROUND :
+        BooksTextView::DEFAULT_BACKGROUND);
+}
+
 BooksSettings::Orientation
 BooksSettings::orientation() const
 {

app/src/BooksSettings.h

@@ -55,6 +55,7 @@ class BooksSettings : public QObject
     Q_PROPERTY(QString relativePath READ relativePath NOTIFY relativePathChanged)
     Q_PROPERTY(QColor primaryPageToolColor READ primaryPageToolColor CONSTANT)
     Q_PROPERTY(QColor highlightPageToolColor READ highlightPageToolColor NOTIFY invertColorsChanged)
+    Q_PROPERTY(QColor pageBackgroundColor READ pageBackgroundColor NOTIFY pageBackgroundColorChanged)
     Q_PROPERTY(int orientation READ orientation NOTIFY orientationChanged)
     class TextStyle;
 
@@ -98,6 +99,7 @@ public:
     QString currentStorage() const;
     QColor primaryPageToolColor() const;
     QColor highlightPageToolColor() const;
+    QColor pageBackgroundColor() const;
 
     Orientation orientation() const;
 
@@ -110,6 +112,7 @@ Q_SIGNALS:
     void currentFolderChanged();
     void currentStorageChanged();
     void relativePathChanged();
+    void pageBackgroundColorChanged();
     void orientationChanged();
 
 private Q_SLOTS: