Fix chat messages clipping

qml/pages/ChatPage.qml

@@ -11,106 +11,112 @@ Page {
 
     property alias room: chatView.model
 
-    SilicaListView {
-        id: chatView
-
-        ScrollDecorator { flickable: chatView }
-        boundsBehavior: Flickable.DragOverBounds
-
+    Column {
         anchors.fill: parent
 
-        anchors.leftMargin: Theme.horizontalPageMargin
-        anchors.rightMargin: Theme.horizontalPageMargin
-
-        header: PageHeader {
+        PageHeader {
             id: header
             title: "Room: " + room.roomName
         }
-        headerPositioning: ListView.PullBackHeader
 
-        property bool atEnd: false
-        ListView.onAdd: {
-            console.log("atYEnd::" + atYEnd)
-            atEnd = atYEnd
-        }
-        onCountChanged: {
-            console.log("atEnd::" + atEnd)
-            if (atEnd)
-            scrollToBottom()
-        }
+        SilicaListView {
+            id: chatView
+
+            height: parent.height - bot.height - header.height
+            contentHeight: height
+            cacheBuffer: 1000
+            clip: true
 
-        onMovementEnded: {
-            atEnd = false
-            console.log("movement ended")
-            if (chatView.atYBeginning) {
-                console.log("load older messages")
-                room.fetchOlderMessages()
+            ScrollDecorator { flickable: chatView }
+            boundsBehavior: Flickable.DragOverBounds
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            anchors.leftMargin: Theme.horizontalPageMargin
+            anchors.rightMargin: Theme.horizontalPageMargin
+
+            property bool atEnd: false
+            ListView.onAdd: {
+                console.log("atYEnd::" + atYEnd)
+                atEnd = atYEnd
             }
-            if (chatView.atYEnd) {
-                console.log("at end")
-                atEnd = true
+            onCountChanged: {
+                console.log("atEnd::" + atEnd)
+                if (atEnd)
+                scrollToBottom()
             }
-        }
 
-        delegate: ListItem {
-            id: messageItem
-            contentHeight: loader.item.height
-
-            Loader {
-                id: loader
-                source: switch(model.Type) {
-                    case EventType.Aliases: return "delegates/Aliases.qml"
-                    case EventType.Avatar: return "delegates/Avatar.qml"
-                    case EventType.CanonicalAlias: return "delegates/CanonicalAlias.qml"
-                    case EventType.Create: return "delegates/Create.qml"
-                    case EventType.GuestAccess: return "delegates/GuestAccess.qml"
-                    case EventType.HistoryVisibility: return "delegates/HistoryVisibility.qml"
-                    case EventType.JoinRules: return "delegates/JoinRules.qml"
-                    case EventType.Member: return "delegates/Member.qml"
-                    case EventType.Name: return "delegates/Name.qml"
-                    case EventType.PowerLevels: return "delegates/PowerLevels.qml"
-                    case EventType.Topic: return "delegates/Topic.qml"
-                    case EventType.NoticeMessage: return "delegates/NoticeMessage.qml"
-                    case EventType.TextMessage: return "delegates/TextMessage.qml"
-                    case EventType.ImageMessage: return "delegates/ImageMessage.qml"
-                    default: return "delegates/placeholder.qml"
+            onMovementEnded: {
+                atEnd = false
+                console.log("movement ended")
+                if (chatView.atYBeginning) {
+                    console.log("load older messages")
+                    room.fetchOlderMessages()
+                }
+                if (chatView.atYEnd) {
+                    console.log("at end")
+                    atEnd = true
                 }
-                property variant modelData: model
             }
-        }
 
-        section.property: "UserId"
-        section.criteria: ViewSection.FullString
-        section.delegate: Text {
-            text: room.userIdToUserName(section)
-            color: room.userColor(section, "#00000000")
+            delegate: ListItem {
+                id: messageItem
+                contentHeight: loader.item.height
+
+                Loader {
+                    id: loader
+                    source: switch(model.Type) {
+                        case EventType.Aliases: return "delegates/Aliases.qml"
+                        case EventType.Avatar: return "delegates/Avatar.qml"
+                        case EventType.CanonicalAlias: return "delegates/CanonicalAlias.qml"
+                        case EventType.Create: return "delegates/Create.qml"
+                        case EventType.GuestAccess: return "delegates/GuestAccess.qml"
+                        case EventType.HistoryVisibility: return "delegates/HistoryVisibility.qml"
+                        case EventType.JoinRules: return "delegates/JoinRules.qml"
+                        case EventType.Member: return "delegates/Member.qml"
+                        case EventType.Name: return "delegates/Name.qml"
+                        case EventType.PowerLevels: return "delegates/PowerLevels.qml"
+                        case EventType.Topic: return "delegates/Topic.qml"
+                        case EventType.NoticeMessage: return "delegates/NoticeMessage.qml"
+                        case EventType.TextMessage: return "delegates/TextMessage.qml"
+                        case EventType.ImageMessage: return "delegates/ImageMessage.qml"
+                        default: return "delegates/placeholder.qml"
+                    }
+                    property variant modelData: model
+                }
+            }
+
+            section.property: "UserId"
+            section.criteria: ViewSection.FullString
+            section.delegate: Text {
+                text: room.userIdToUserName(section)
+                color: room.userColor(section, "#00000000")
+            }
+
         }
 
-        footer: Item {
+        Row {
+            id: bot
+
             anchors.left: parent.left
             anchors.right: parent.right
-
             height: messageText.height
 
-            id: messageArea
             TextArea {
-                anchors.left: parent.left
+                id: messageText
+
                 anchors.bottom: parent.bottom
 
-                id: messageText
                 placeholderText: qsTr("Enter your message")
                 wrapMode: Text.Wrap
                 width: parent.width - sendButton.width
             }
 
             IconButton {
-                anchors.right: parent.right
-                anchors.top: parent.top
-
                 id: sendButton
 
-                height: 100
-                width: 100
+                anchors.top: parent.top
 
                 icon.source: "image://theme/icon-m-enter"
                 onClicked: {
@@ -122,5 +128,4 @@ Page {
             }
         }
     }
-
 }