Improve chat UI on tablets by making messages narrower and limiting content items width as well. (#540)

Co-authored-by: Mikhail Barashkov <git@mbarashkov.ru>

qml/components/MessageListViewItem.qml

@@ -115,6 +115,23 @@ ListItem {
         return interactionText;
     }
 
+    function openReactions() {
+        if (messageListItem.chatReactions) {
+            Debug.log("Using chat reactions")
+            messageListItem.messageReactions = chatReactions
+            showItemCompletelyTimer.requestedIndex = index;
+            showItemCompletelyTimer.start();
+        } else {
+            Debug.log("Obtaining message reactions")
+            tdLibWrapper.getMessageAvailableReactions(messageListItem.chatId, messageListItem.messageId);
+        }
+        selectReactionBubble.visible = false;
+    }
+
+    function getContentWidthMultiplier() {
+        return Functions.isTablet(appWindow) ? 0.4 : 1.0
+    }
+
     onClicked: {
         if (messageListItem.precalculatedValues.pageIsSelecting) {
             page.toggleMessageSelection(myMessage);
@@ -360,8 +377,10 @@ ListItem {
         id: messageTextRow
         spacing: Theme.paddingSmall
         width: precalculatedValues.entryWidth
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.horizontalCenter: Functions.isTablet(appWindow) ? undefined : parent.horizontalCenter
+        anchors.left: Functions.isTablet(appWindow) ? parent.left : undefined
         y: Theme.paddingSmall
+        anchors.leftMargin: Functions.isTablet(appWindow) ? Theme.paddingMedium : undefined
 
         Loader {
             id: profileThumbnailLoader
@@ -591,7 +610,7 @@ ListItem {
                     id: webPagePreviewLoader
                     active: false
                     asynchronous: true
-                    width: parent.width
+                    width: parent.width * getContentWidthMultiplier()
                     height: (status === Loader.Ready) ? item.implicitHeight : myMessage.content.web_page ? precalculatedValues.webPagePreviewHeight : 0
 
                     sourceComponent: Component {
@@ -605,7 +624,7 @@ ListItem {
 
                 Loader {
                     id: extraContentLoader
-                    width: parent.width
+                    width: parent.width * getContentWidthMultiplier()
                     asynchronous: true
                     height: item ? item.height : (messageListItem.hasContentComponent ? chatView.getContentComponentHeight(model.content_type, myMessage.content, width) : 0)
                 }

qml/components/settingsPage/ResponsiveGrid.qml

@@ -19,9 +19,10 @@
 
 import QtQuick 2.6
 import Sailfish.Silica 1.0
+import "../../js/functions.js" as Functions
 
 Grid {
     width: parent.width - ( 2 * x )
-    columns: (appWindow.deviceOrientation & Orientation.LandscapeMask) || Screen.sizeCategory === Screen.Large || Screen.sizeCategory === Screen.ExtraLarge ? 2 : 1
+    columns: Functions.isTablet(appWindow) ? 2 : 1
     readonly property real columnWidth: width/columns
 }

qml/js/functions.js

@@ -535,3 +535,7 @@ function getMessagesNeededForwardPermissions(messages) {
     }
     return neededPermissions
 }
+
+function isTablet(appWindow) {
+    return (appWindow.deviceOrientation & Silica.Orientation.LandscapeMask) || Silica.Screen.sizeCategory === Silica.Screen.Large || Silica.Screen.sizeCategory === Silica.Screen.ExtraLarge
+}

qml/pages/ChatPage.qml

@@ -1187,6 +1187,7 @@ Page {
                             readonly property int pageMarginDouble: 2 * Theme.horizontalPageMargin
                             readonly property int paddingMediumDouble: 2 * Theme.paddingMedium
                             readonly property int entryWidth: chatView.width - pageMarginDouble //ширина полной строки сообщения вместе с аватаркой
+                            readonly property int entryWidth: Functions.isTablet(appWindow) ? chatView.width * 0.75 : chatView.width - pageMarginDouble
                             readonly property int textItemWidth: entryWidth - profileThumbnailDimensions - Theme.paddingSmall
                             readonly property int backgroundWidth: page.isPrivateChat ? textItemWidth - pageMarginDouble : textItemWidth  //уменьшенная ширина сообщений для приватных чатов
                             readonly property int backgroundRadius: textItemWidth/50