status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-02 09:46:38 +00:00
Code Issues Projects Releases Wiki Activity

uiux: Refactor chat images so they look like they've been designed

Browse Source 
Fixes: #1114
This commit is contained in:
Pascal Precht 2020-11-12 15:08:40 +01:00 committed by Jonathan Rainville
parent 4ac8400038
commit be2aadb4e2
2 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml
View File

@ -1,10 +1,12 @@
import QtQuick 2.3
import QtGraphicalEffects 1.13
import "../../../../../shared"
import "../../../../../imports"
Item {
property int verticalPadding: 0
property int imageWidth: 350
property bool isCurrentUser: false
property url source
signal clicked(string source)
@ -49,6 +51,39 @@ Item {
}
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Item {
width: imageMessage.width
height: imageMessage.height
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
width: imageMessage.width
height: imageMessage.height
radius: 16
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 32
height: 32
radius: 4
visible: !imageContainer.isCurrentUser
}
Rectangle {
anchors.bottom: parent.bottom
anchors.right: parent.right
width: 32
height: 32
radius: 4
visible: imageContainer.isCurrentUser
}
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent

15
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml
View File

@ -35,13 +35,21 @@ Item {
}
Rectangle {
property int chatVerticalPadding: 7
property int chatHorizontalPadding: 12
property int chatVerticalPadding: isImage ? 4 : 7
property int chatHorizontalPadding: isImage ? 0 : 12
property bool longReply: chatReply.visible && repliedMessageContent.length > 54
property bool longChatText: chatsModel.plainText(message).length > 54
id: chatBox
color: isSticker ? Style.current.background : (isCurrentUser ? Style.current.blue : Style.current.secondaryBackground)
color: {
if (isSticker) {
return Style.current.background
}
if (isImage) {
return "transparent"
}
return isCurrentUser ? Style.current.primary : Style.current.secondaryBackground
}
border.color: isSticker ? Style.current.border : Style.current.transparent
border.width: 1
height: {
@ -131,6 +139,7 @@ Item {
id: chatImageComponent
imageSource: image
imageWidth: 250
isCurrentUser: messageItem.isCurrentUser
}
}
}