mirrors/linphone-desktop
1
0
Fork 0
mirror of https://gitlab.linphone.org/BC/public/linphone-desktop.git synced 2026-01-20 13:18:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Better chat images : view final image when hovering mouse, keep filename only for non-images, fix some clipping issues.

Browse source
This commit is contained in:
Julien Wadel 2022-05-13 11:12:10 +02:00
parent 2d7d007b21
commit cbe91db68d
9 changed files with 56 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
linphone-app/ui/modules/Common/Form/Fields/TextAreaField.qml
View file

@ -7,7 +7,7 @@ import Common.Styles 1.0
// =============================================================================
Rectangle {
id: mainItem
property alias text: textArea.text
property alias placeholderText: textArea.placeholderText
readonly property alias length: textArea.length
@ -15,6 +15,7 @@ Rectangle {
property alias font: textArea.font
property alias textColor: textArea.color
property alias readOnly: textArea.readOnly
property int padding: TextAreaFieldStyle.text.padding
height: TextAreaFieldStyle.background.height
width: TextAreaFieldStyle.background.width
@ -50,10 +51,10 @@ Rectangle {
wrapMode: TextArea.Wrap
height: flickable.height
bottomPadding: TextAreaFieldStyle.text.padding
leftPadding: TextAreaFieldStyle.text.padding
rightPadding: TextAreaFieldStyle.text.padding + Number(scrollBar.visible) * scrollBar.width
topPadding: TextAreaFieldStyle.text.padding
bottomPadding: mainItem.padding
leftPadding: mainItem.padding
rightPadding: mainItem.padding + Number(scrollBar.visible) * scrollBar.width
topPadding: mainItem.padding
}
}
}

10
linphone-app/ui/modules/Linphone/Chat/Chat.qml
View file

@ -31,6 +31,7 @@ Rectangle {
// ---------------------------------------------------------------------------
color: ChatStyle.color
clip: true
function positionViewAtIndex(index){
chat.bindToEnd = false
@ -76,7 +77,7 @@ Rectangle {
Layout.fillHeight: true
Layout.fillWidth: true
clip: false
highlightFollowsCurrentItem: false
// Use moving event => this is a user action.
onIsMovingChanged:{
@ -122,7 +123,7 @@ Rectangle {
Item {
implicitHeight: container.height + ChatStyle.sectionHeading.bottomMargin
width: parent.width
clip: false
Borders {
id: container
@ -188,6 +189,7 @@ Rectangle {
color: ChatStyle.color
implicitHeight: layout.height + ChatStyle.entry.bottomMargin
clip: false
// ---------------------------------------------------------------------
@ -198,6 +200,7 @@ Rectangle {
hoverEnabled: true
implicitHeight: layout.height
width: parent.width + parent.anchors.rightMargin
clip: false
acceptedButtons: Qt.NoButton
ColumnLayout{
id: layout
@ -264,6 +267,7 @@ Rectangle {
property int remainingIndex : loaderIndex % ((chat.remainingLoadersCount) / chat.syncLoaderBatch) != 0 // Check loader index to remaining loader.
onRemainingIndexChanged: if( remainingIndex == 0 && asynchronous) asynchronous = false
asynchronous: true
z:1
onStatusChanged: if( status == Loader.Ready) {
remainingIndex = -1 // overwrite to remove signal changed. That way, there is no more binding loops.
@ -315,6 +319,7 @@ Rectangle {
footer: Item{
implicitHeight: composersItem.implicitHeight
width: parent.width
clip: false
Text {
id: composersItem
property var composers : container.proxyModel.chatRoomModel ? container.proxyModel.chatRoomModel.composers : undefined
@ -376,7 +381,6 @@ Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: textAreaBorders.height + chatMessagePreview.height+messageBlock.height
color: ChatStyle.sendArea.backgroundBorder.color
clip: true
ColumnLayout{
anchors.fill: parent
spacing: 0

5
linphone-app/ui/modules/Linphone/Chat/ChatContent.qml
View file

@ -37,7 +37,7 @@ Column{
spacing: 0
property bool isOutgoing : contentModel && contentModel.chatMessageModel && (contentModel.chatMessageModel.isOutgoing || contentModel.chatMessageModel.state == LinphoneEnums.ChatMessageStateIdle);
z: message.visible ? 0 : 1
ChatCalendarMessage{
id: calendarMessage
contentModel: mainItem.contentModel
@ -46,16 +46,19 @@ Column{
gotoButtonMode: 1
onExpandToggle: isExpanded=!isExpanded
height: fitHeight
z: 1
}
ChatAudioMessage{
id: audioMessage
contentModel: mainItem.contentModel
visible: contentModel
z: 1
}
ChatFileMessage{
id: fileMessage
contentModel: mainItem.contentModel
width: parent.width
z: 2
}
ChatTextMessage {
id: message

38
linphone-app/ui/modules/Linphone/Chat/ChatFileMessage.qml
View file

@ -19,10 +19,14 @@ Row {
property ChatMessageModel chatMessageModel: contentModel && contentModel.chatMessageModel
property ContentModel contentModel
property bool isOutgoing : chatMessageModel && ( chatMessageModel.isOutgoing || chatMessageModel.state == LinphoneEnums.ChatMessageStateIdle);
property int fitWidth: visible ? Math.max(fileName.implicitWidth + 5 + thumbnailProvider.width + 3*ChatStyle.entry.message.file.margins
property int fitWidth: visible ? Math.max( (fileName.visible ? fileName.implicitWidth : 0)
+ thumbnailProvider.width + 3*ChatStyle.entry.message.file.margins
, Math.max(ChatStyle.entry.message.file.width, ChatStyle.entry.message.outgoing.areaSize)) : 0
property int fitHeight: visible ? rectangle.height : 0
property bool isAnimatedImage : mainRow.contentModel && mainRow.contentModel.wasDownloaded && UtilsCpp.isAnimatedImage(mainRow.contentModel.filePath)
property bool haveThumbnail: mainRow.contentModel && mainRow.contentModel.thumbnail
signal copyAllDone()
signal copySelectionDone()
signal forwardClicked()
@ -52,7 +56,7 @@ Row {
property string thumbnail : mainRow.contentModel ? mainRow.contentModel.thumbnail : ''
color: 'transparent'
height: thumbnail ? ChatStyle.entry.message.file.heightWithThumbnail : ChatStyle.entry.message.file.height
height: mainRow.isAnimatedImage ? ChatStyle.entry.message.file.heightbetter : ChatStyle.entry.message.file.height
width: mainRow.width
radius: ChatStyle.entry.message.radius
@ -75,11 +79,21 @@ Row {
Image {
id: thumbnailImageSource
property real scaleAnimatorTo : ChatStyle.entry.message.file.animation.thumbnailTo
mipmap: SettingsModel.mipmapEnabled
source: mainRow.contentModel.thumbnail
fillMode: Image.PreserveAspectFit
//sourceSize.width: 200
//sourceSize.height: 100
Loader{
anchors.fill: parent
sourceComponent: Image{// Better quality on zoom
mipmap: SettingsModel.mipmapEnabled
source:'file:/'+mainRow.contentModel.filePath
fillMode: Image.PreserveAspectFit
visible: status == Image.Ready
}
asynchronous: true
active: thumbnailProvider.state == 'hovered'
}
}
}
Component {
@ -87,6 +101,7 @@ Row {
AnimatedImage {
id: animatedImageSource
property real scaleAnimatorTo : ChatStyle.entry.message.file.animation.to
mipmap: SettingsModel.mipmapEnabled
source: 'file:/'+mainRow.contentModel.filePath
fillMode: Image.PreserveAspectFit
@ -99,6 +114,7 @@ Row {
id: extension
Rectangle {
property real scaleAnimatorTo : ChatStyle.entry.message.file.animation.to
color: ChatStyle.entry.message.file.extension.background.color
Text {
@ -120,10 +136,11 @@ Row {
Layout.fillHeight: true
Layout.preferredWidth: parent.height*4/3
sourceComponent: (mainRow.contentModel ?
(mainRow.contentModel.wasDownloaded && UtilsCpp.isAnimatedImage(mainRow.contentModel.filePath)
? animatedImage
: (mainRow.contentModel.thumbnail ? thumbnailImage : extension )
(mainRow.isAnimatedImage ? animatedImage
: (mainRow.haveThumbnail ? thumbnailImage : extension )
) : undefined)
ScaleAnimator {
@ -152,7 +169,7 @@ Row {
}
thumbnailProvider.z = Constants.zPopup
thumbnailProviderAnimator.to = ChatStyle.entry.message.file.animation.to
thumbnailProviderAnimator.to = thumbnailProvider.item.scaleAnimatorTo
thumbnailProviderAnimator.running = true
}
}
@ -203,14 +220,15 @@ Row {
}
text: (mainRow.contentModel ? mainRow.contentModel.name : '')
width: parent.width
width: visible ? parent.width : 0
visible: mainRow.contentModel && !mainRow.isAnimatedImage && !mainRow.haveThumbnail
}
ProgressBar {
id: progressBar
height: ChatStyle.entry.message.file.status.bar.height
width: parent.width
width: visible ? parent.width : 0
to: (mainRow.contentModel ? mainRow.contentModel.fileSize : 0)
value: mainRow.contentModel ? mainRow.contentModel.fileOffset || to : to

1
linphone-app/ui/modules/Linphone/Chat/ChatReplyMessage.qml
View file

@ -118,6 +118,7 @@ Item {
anchors.topMargin: 3
anchors.leftMargin: 5
interactive: false
clip: false
function updateWidth(){
var maxWidth = 0

2
linphone-app/ui/modules/Linphone/Chat/ChatReplyPreview.qml
View file

@ -26,7 +26,6 @@ Rectangle{
radius: 10
state: chatRoomModel && chatRoomModel.reply ? 'showed' : 'hidden'
// Remove bottom corners
clip: false
function hide(){
state = 'hidden'
}
@ -74,7 +73,6 @@ Rectangle{
id: replyPreviewTextArea
ScrollBar.vertical: ForceScrollBar {visible: replyPreviewTextArea.height < messageContentsList.height}
boundsBehavior: Flickable.StopAtBounds
clip: true
contentHeight: messageContentsList.height
contentWidth: width - ScrollBar.vertical.width
flickableDirection: Flickable.VerticalFlick

2
linphone-app/ui/modules/Linphone/Chat/ChatTextMessage.qml
View file

@ -34,7 +34,7 @@ TextEdit {
height: fitHeight
width: parent.width
visible: contentModel && contentModel.isText()
clip: true
clip: false
padding: ChatStyle.entry.message.padding
textMargin: 0
readOnly: true

4
linphone-app/ui/modules/Linphone/Chat/Message.qml
View file

@ -56,7 +56,7 @@ Item {
}
height: parent.height - (deliveryLayout.visible? deliveryLayout.height : 0)
radius: ChatStyle.entry.message.radius
clip: false
width: (
ephemeralTimerRow.visible && dataWidth < ephemeralTimerRow.width + 2*ChatStyle.entry.message.padding
? ephemeralTimerRow.width + 2*ChatStyle.entry.message.padding
@ -82,6 +82,7 @@ Item {
}
ChatReplyMessage{
id: replyMessage
z: 1
mainChatMessageModel: $chatEntry
visible: $chatEntry.isReply
maxWidth: container.width
@ -96,6 +97,7 @@ Item {
anchors.right: parent.right
visible: count > 0
spacing: 0
clip: false
model: ContentProxyModel{
chatMessageModel: $chatEntry
}

11
linphone-app/ui/modules/Linphone/Styles/Chat/ChatStyle.qml
View file

@ -182,12 +182,12 @@ QtObject {
}
property QtObject file: QtObject {
property int height: 64
property int heightWithThumbnail: 200
property int height: 80
property int heightbetter: 200
property int iconSize: 18
property int margins: 8
property int spacing: 8
property int width: 250
property int width: 100
property QtObject download: QtObject{
property string icon: 'download_custom'
property int iconSize: 30
@ -196,8 +196,9 @@ QtObject {
}
property QtObject animation: QtObject {
property int duration: 200
property real to: 1.5
property int duration: 300
property real to: 1.7
property real thumbnailTo: 2
}
property QtObject extension: QtObject {