medvedych/harbour-fernschreiber
2
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

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

Browse source 
Co-authored-by: Mikhail Barashkov <git@mbarashkov.ru>
This commit is contained in:
mbarashkov 2023-12-03 01:44:14 +03:00 committed by GitHub
parent 8eda82da18
commit 64479f0dd3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
qml/components/MessageListViewItem.qml
View file

@ -128,6 +128,10 @@ ListItem {
selectReactionBubble.visible = false; selectReactionBubble.visible = false;
} }
function getContentWidthMultiplier() {
return Functions.isTablet(appWindow) ? 0.4 : 1.0
}
onClicked: { onClicked: {
if (messageListItem.precalculatedValues.pageIsSelecting) { if (messageListItem.precalculatedValues.pageIsSelecting) {
page.toggleMessageSelection(myMessage); page.toggleMessageSelection(myMessage);
@ -365,8 +369,10 @@ ListItem {
id: messageTextRow id: messageTextRow
spacing: Theme.paddingSmall spacing: Theme.paddingSmall
width: precalculatedValues.entryWidth 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 y: Theme.paddingSmall
anchors.leftMargin: Functions.isTablet(appWindow) ? Theme.paddingMedium : undefined
Loader { Loader {
id: profileThumbnailLoader id: profileThumbnailLoader
@ -596,7 +602,7 @@ ListItem {
id: webPagePreviewLoader id: webPagePreviewLoader
active: false active: false
asynchronous: true asynchronous: true
width: parent.width width: parent.width * getContentWidthMultiplier()
height: (status === Loader.Ready) ? item.implicitHeight : myMessage.content.web_page ? precalculatedValues.webPagePreviewHeight : 0 height: (status === Loader.Ready) ? item.implicitHeight : myMessage.content.web_page ? precalculatedValues.webPagePreviewHeight : 0
sourceComponent: Component { sourceComponent: Component {
@ -610,7 +616,7 @@ ListItem {
Loader { Loader {
id: extraContentLoader id: extraContentLoader
width: parent.width width: parent.width * getContentWidthMultiplier()
asynchronous: true asynchronous: true
height: item ? item.height : (messageListItem.hasContentComponent ? chatView.getContentComponentHeight(model.content_type, myMessage.content, width) : 0) height: item ? item.height : (messageListItem.hasContentComponent ? chatView.getContentComponentHeight(model.content_type, myMessage.content, width) : 0)
} }

3
qml/components/settingsPage/ResponsiveGrid.qml
View file

@ -19,9 +19,10 @@
import QtQuick 2.6 import QtQuick 2.6
import Sailfish.Silica 1.0 import Sailfish.Silica 1.0
import "../../js/functions.js" as Functions
Grid { Grid {
width: parent.width - ( 2 * x ) 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 readonly property real columnWidth: width/columns
} }

4
qml/js/functions.js
View file

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

2
qml/pages/ChatPage.qml
View file

@ -1193,7 +1193,7 @@ Page {
readonly property int profileThumbnailDimensions: showUserInfo ? Theme.itemSizeSmall : 0 readonly property int profileThumbnailDimensions: showUserInfo ? Theme.itemSizeSmall : 0
readonly property int pageMarginDouble: 2 * Theme.horizontalPageMargin readonly property int pageMarginDouble: 2 * Theme.horizontalPageMargin
readonly property int paddingMediumDouble: 2 * Theme.paddingMedium 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 textItemWidth: entryWidth - profileThumbnailDimensions - Theme.paddingSmall
readonly property int backgroundWidth: page.isChannel ? textItemWidth : textItemWidth - pageMarginDouble readonly property int backgroundWidth: page.isChannel ? textItemWidth : textItemWidth - pageMarginDouble
readonly property int backgroundRadius: textItemWidth/50 readonly property int backgroundRadius: textItemWidth/50