messageListView: add ScrollToBottomButton

Gitlab: #551

Change-Id: Iea2d90248a8c16cf96d9e97f72bdf98e0f6f13a0

qml.qrc

@@ -168,5 +168,6 @@
         <file>src/commoncomponents/SBSMessageBase.qml</file>
         <file>src/commoncomponents/GeneratedMessageDelegate.qml</file>
         <file>src/commoncomponents/DataTransferMessageDelegate.qml</file>
+        <file>src/mainview/components/ScrollToBottomButton.qml</file>
     </qresource>
 </RCC>

resources/icons/down_triangle_arrow_black_24dp.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <polygon stroke="#000000" points="0,0 12,24 24,0 "/> </svg>
\ No newline at end of file

src/constant/JamiStrings.qml

@@ -255,6 +255,9 @@ Item {
     property string showPlugins: qsTr("Show available plugins")
     property string addToConversations: qsTr("Add to conversations")
 
+    // Chatview footer
+    property string jumpToLatest: qsTr("Jump to latest")
+
     // ConnectToAccountManager
     property string enterJAMSURL: qsTr("Enter Jami Account Management Server (JAMS) URL")
     property string required: qsTr("Required")

src/constant/JamiTheme.qml

@@ -282,6 +282,7 @@ Item {
     property real chatViewFooterButtonRadius: 5
     property real chatViewFooterFileContainerPreferredHeight: 150
     property real chatViewFooterTextAreaMaximumHeight: 130
+    property real chatViewScrollToBottomButtonBottomMargin: 8
 
     // MessageWebView File Transfer Container
     property real filesToSendContainerSpacing: 5

src/mainview/components/MessageListView.qml

@@ -261,4 +261,16 @@ ListView {
             }
         }
     }
+
+    ScrollToBottomButton {
+        id: scrollToBottomButton
+
+        anchors.bottom: root.bottom
+        anchors.bottomMargin: JamiTheme.chatViewScrollToBottomButtonBottomMargin
+        anchors.horizontalCenter: root.horizontalCenter
+
+        activeStateTrigger: Math.abs(root.contentY) > root.height * 2
+        onClicked: root.ScrollBar.vertical.position =
+                   1.0 - root.ScrollBar.vertical.size
+    }
 }

src/mainview/components/ScrollToBottomButton.qml

+/*
+ * Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+
+import net.jami.Constants 1.1
+
+import "../../commoncomponents"
+
+Control {
+    id: root
+
+    property alias activeStateTrigger: activeState.when
+
+    signal clicked
+
+    height: jumpToLatestText.contentHeight + 15
+    width: jumpToLatestText.contentWidth + arrowDropDown.width + 50
+
+    opacity: 0
+
+    states: State {
+        id: activeState
+
+        name: "active"
+        PropertyChanges {
+            target: root
+            opacity: 1
+        }
+    }
+
+    transitions: [
+        Transition {
+            to: "active"
+            NumberAnimation {
+                target: root
+                duration: JamiTheme.shortFadeDuration
+                property: "opacity"
+            }
+        },
+        Transition {
+            from: "active"
+            NumberAnimation {
+                target: root
+                duration: JamiTheme.shortFadeDuration
+                property: "opacity"
+                to: 0.0
+            }
+        }
+    ]
+
+    contentItem: Item {
+        Item {
+            anchors.centerIn: parent
+
+            height: jumpToLatestText.contentHeight
+            width: jumpToLatestText.contentWidth + arrowDropDown.width + 3
+
+            Text {
+                id: jumpToLatestText
+
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+
+                font.weight: Font.DemiBold
+                font.pointSize: JamiTheme.textFontSize + 2
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                text: JamiStrings.jumpToLatest
+                color: JamiTheme.whiteColor
+            }
+
+            ResponsiveImage {
+                id: arrowDropDown
+
+                anchors.left: jumpToLatestText.right
+                anchors.leftMargin: 3
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.verticalCenterOffset: 2
+
+                containerWidth: 12
+                containerHeight: 12
+
+                color: JamiTheme.whiteColor
+                source: JamiResources.down_triangle_arrow_black_24dp_svg
+            }
+        }
+    }
+
+    background: Rectangle {
+        radius: 20
+        color: JamiTheme.jamiDarkBlue
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+
+            onClicked: root.clicked()
+        }
+
+        layer {
+            enabled: true
+            effect: DropShadow {
+                horizontalOffset: 3.0
+                verticalOffset: 3.0
+                radius: 8.0
+                samples: 16
+                color: JamiTheme.shadowColor
+            }
+        }
+    }
+}