lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-07-19 15:05:40 +02:00
Code Activity

file sending: new design

Browse source 
GitLab: #1325
Change-Id: Ie39a429ae53c9be3d96363fb4bd9af6b47805456
This commit is contained in:
cberthet 2023-12-06 11:41:45 -05:00
parent c1df66f28d
commit 1e4c450423
7 changed files with 150 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/app/commoncomponents/DataTransferMessageDelegate.qml
View file

@ -79,8 +79,6 @@ Loader {
formattedTime: root.formattedTime
formattedDay: root.formattedTime
extraHeight: progressBar.visible ? 18 : 0
Component.onCompleted: bubble.timestampItem.visible = false
innerContent.children: [
RowLayout {
@ -107,7 +105,7 @@ Loader {
property string iconSourceA
property string iconSourceB
Layout.margins: 12
Layout.margins: 8
sourceComponent: {
switch (Status) {
@ -135,14 +133,22 @@ Loader {
}
Component {
id: terminatedComp
ResponsiveImage {
source: buttonsLoader.iconSourceA
Layout.leftMargin: 12
Layout.preferredWidth: 24
Layout.preferredHeight: 24
color: UtilsAdapter.luma(bubble.color)
? JamiTheme.chatviewTextColorLight
: JamiTheme.chatviewTextColorDark
Control {
width: 50
height: 50
padding: 13
background: Rectangle {
color: JamiTheme.blackColor
opacity: 0.15
radius: msgRadius
}
contentItem: ResponsiveImage {
source: buttonsLoader.iconSourceA
color: UtilsAdapter.luma(bubble.color) ? JamiTheme.fileIconLightColor : JamiTheme.fileIconDarkColor
}
}
}
Component {
@ -182,7 +188,7 @@ Loader {
}
Column {
Layout.rightMargin: 24
spacing: 6
spacing: 4
TextEdit {
id: transferName
@ -192,7 +198,6 @@ Loader {
TransferName :
Body
wrapMode: Label.WrapAtWordBoundaryOrAnywhere
font.weight: Font.DemiBold
font.pointSize: 11
renderType: Text.NativeRendering
readOnly: true
@ -220,7 +225,7 @@ Loader {
width: Math.min(implicitWidth, maxMsgWidth)
bottomPadding: 10
text: {
var res = formattedTime + " - "
var res = ""
if (transferStats.totalSize !== undefined) {
if (transferStats.progress !== 0 &&
transferStats.progress !== transferStats.totalSize) {
@ -229,7 +234,7 @@ Loader {
var totalSize = transferStats.totalSize !== 0 ? transferStats.totalSize : TotalSize
res += UtilsAdapter.humanFileSize(totalSize)
}
return res + " - " + MessagesAdapter.getStatusString(Status)
return res
}
wrapMode: Label.WrapAtWordBoundaryOrAnywhere
font.pointSize: 10
@ -271,18 +276,25 @@ Loader {
formattedTime: MessagesAdapter.getFormattedTime(Timestamp)
formattedDay: MessagesAdapter.getFormattedDay(Timestamp)
property real contentWidth
Component.onCompleted: {
if (transferStats.totalSize !== undefined) {
var totalSize = transferStats.totalSize !== 0 ? transferStats.totalSize : TotalSize
var txt = UtilsAdapter.humanFileSize(totalSize)
}
bubble.timestampItem.timeLabel.text += " - " + txt
bubble.color = "transparent"
bubble.timestampItem.timeColor = JamiTheme.whiteColor
bubble.timestampItem.timeLabel.opacity = 1
bubble.z = 1
}
onContentWidthChanged: {
if (bubble.timestampItem.timeLabel.width > contentWidth)
imageTooSmall = true
else {
bubble.timestampItem.timeColor = JamiTheme.whiteColor
bubble.timestampItem.timeLabel.opacity = 1
}
}
innerContent.children: [
@ -300,6 +312,9 @@ Loader {
return animatedImageComp
return avComp
}
Component {
id: avComp
@ -349,6 +364,11 @@ Loader {
radius: msgRadius
}
}
onWidthChanged: {
localMediaMsgItem.contentWidth = width
}
HoverHandler {
target : parent
onHoveredChanged: {
@ -404,9 +424,14 @@ Loader {
if (status == Image.Ready && aspectRatio) {
height = Qt.binding(() => JamiQmlUtils.clamp(idealWidth / aspectRatio, 64, 256))
width = Qt.binding(() => height * aspectRatio)
}
}
onWidthChanged: {
localMediaMsgItem.contentWidth = width
}
Rectangle {
color: JamiTheme.previewImageBackgroundColor
z: -1

11
src/app/commoncomponents/SBSMessageBase.qml
View file

@ -64,6 +64,7 @@ Control {
property real maxMsgWidth: root.width - senderMargin - 2 * hPadding - avatarBlockWidth
property bool bigMsg
property bool imageTooSmall: false
// If the ListView attached properties are not available,
// then the root delegate is likely a Loader.
@ -205,7 +206,7 @@ Control {
RowLayout {
id: msgRowlayout
Layout.preferredHeight: innerContent.height + root.extraHeight + (emojiReactions.emojis === "" ? 0 : emojiReactions.height - 8) + (IsEmojiOnly && (root.seq === MsgSeq.last || root.seq === MsgSeq.single) && emojiReactions.emojis === "" ? 15 : 0)
Layout.preferredHeight: innerContent.height + root.extraHeight + (emojiReactions.emojis === "" ? 0 : emojiReactions.height - 8) + ((IsEmojiOnly && (root.seq === MsgSeq.last || root.seq === MsgSeq.single) && emojiReactions.emojis === "") || root.imageTooSmall ? 15 : 0)
Layout.topMargin: ((seq === MsgSeq.first || seq === MsgSeq.single) && !root.isReply) ? 3.5 : 0
Layout.bottomMargin: root.bigMsg ? timestampItem.timeLabel.height : 0
@ -353,16 +354,16 @@ Control {
showTime: IsEmojiOnly && !(root.seq === MsgSeq.last || root.seq === MsgSeq.single) ? false : true
formattedTime: root.formattedTime
timeColor: IsEmojiOnly ? (JamiTheme.darkTheme ? "white" : "dark") : (UtilsAdapter.luma(bubble.color) ? "white" : "dark")
timeColor: IsEmojiOnly || root.imageTooSmall? (JamiTheme.darkTheme ? "white" : "dark") : (UtilsAdapter.luma(bubble.color) ? "white" : "dark")
timeLabel.opacity: 0.5
anchors.bottom: parent.bottom
anchors.right: IsEmojiOnly ? (isOutgoing ? parent.right : undefined) : parent.right
anchors.left: (IsEmojiOnly && !isOutgoing) ? parent.left : undefined
anchors.left: ((IsEmojiOnly|| root.imageTooSmall) && !isOutgoing) ? parent.left : undefined
anchors.leftMargin: (IsEmojiOnly && !isOutgoing && emojiReactions.visible) ? bubble.timePosition : 0
anchors.rightMargin: IsEmojiOnly ? ((isOutgoing && emojiReactions.visible) ? bubble.timePosition : 0) : 10
anchors.rightMargin: IsEmojiOnly ? ((isOutgoing && emojiReactions.visible) ? bubble.timePosition : 0) : (root.imageTooSmall ? 0 : 10)
timeLabel.Layout.bottomMargin: {
if (IsEmojiOnly)
if (IsEmojiOnly || root.imageTooSmall)
return -15;
if (root.bigMsg || bubble.isDeleted)
return 5;

11
src/app/constant/JamiTheme.qml
View file

@ -235,7 +235,7 @@ Item {
property color timestampColor: darkTheme ? "#515151" : "#E5E5E5"
property color messageReplyColor: darkTheme ? "#bbb" : "#A7A7A7"
property color messageOutTxtColor: "#000000"
property color messageInBgColor: darkTheme ? "#303030" : "#dbdbdb"
property color messageInBgColor: darkTheme ? "#303030" : "#e5e5e5"
property color messageOutBgColor: darkTheme ? "#616161" : "#005699"
property color messageInTxtColor: "#FFFFFF"
property color fileOutTimestampColor: darkTheme ? "#eee" : "#555"
@ -297,6 +297,11 @@ Item {
// Files To Send Container
property color removeFileButtonColor: Qt.rgba(96, 95, 97, 0.5)
property color removeFileButtonHoverColor: "#DEDEDE"
property color fileIconDarkColor: "#656565"
property color fileIconLightColor: "#A6A6A6"
property color fileIconColor: darkTheme ? "#A6A6A6" : "#656565"
property color fileBackgroundColor: darkTheme ? "#515151" : "#c3c3c3"
// JamiScrollBar
property color scrollBarHandleColor: "#cecece"
@ -495,8 +500,8 @@ Item {
property real filesToSendDelegateHeight: 100
property real filesToSendDelegateRadius: 7
property real filesToSendDelegateButtonSize: 16
property real filesToSendDelegateFontPointSize: calcSize(9 + fontSizeOffset)
property real layoutWidthFileTransfer: 80
property real filesToSendDelegateFontPointSize: calcSize(10 + fontSizeOffset)
property real layoutWidthFileTransfer: 56
// SBSMessageBase
property int sbsMessageBasePreferredPadding: 12

25
src/app/mainview/components/ChatViewFooter.qml
View file

@ -33,7 +33,7 @@ Rectangle {
function setFilePathsToSend(filePaths) {
for (var index = 0; index < filePaths.length; ++index) {
var path = UtilsAdapter.getAbsPath(decodeURIComponent(filePaths[index]));
dataTransferSendContainer.filesToSendListModel.addToPending(path);
messageBar.fileContainer.filesToSendListModel.addToPending(path);
}
}
@ -67,7 +67,7 @@ Rectangle {
target: MessagesAdapter
function onNewFilePasted(filePath) {
dataTransferSendContainer.filesToSendListModel.addToPending(filePath);
messageBar.fileContainer.filesToSendListModel.addToPending(filePath);
}
function onNewTextPasted() {
@ -168,7 +168,7 @@ Rectangle {
return -JamiTheme.emojiPickerHeight;
}
sendButtonVisibility: text || dataTransferSendContainer.filesToSendCount
sendButtonVisibility: text || messageBar.fileContainer.filesToSendCount
onEmojiButtonClicked: {
if (emojiPicker != null && emojiPicker.opened) {
@ -206,13 +206,13 @@ Rectangle {
onSendMessageButtonClicked: {
// Send file messages
var fileCounts = dataTransferSendContainer.filesToSendListModel.rowCount();
var fileCounts = messageBar.fileContainer.filesToSendListModel.rowCount();
for (var i = 0; i < fileCounts; i++) {
var currentIndex = dataTransferSendContainer.filesToSendListModel.index(i, 0);
var filePath = dataTransferSendContainer.filesToSendListModel.data(currentIndex, FilesToSend.FilePath);
var currentIndex = messageBar.fileContainer.filesToSendListModel.index(i, 0);
var filePath = messageBar.fileContainer.filesToSendListModel.data(currentIndex, FilesToSend.FilePath);
MessagesAdapter.sendFile(filePath);
}
dataTransferSendContainer.filesToSendListModel.flush();
messageBar.fileContainer.filesToSendListModel.flush();
// Send text message
if (messageBar.text) {
if (MessagesAdapter.editId !== "") {
@ -235,16 +235,5 @@ Rectangle {
}
}
}
FilesToSendContainer {
id: dataTransferSendContainer
objectName: "dataTransferSendContainer"
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.rightMargin: 10
Layout.preferredHeight: filesToSendCount ? JamiTheme.filesToSendDelegateHeight : 0
}
}
}

2
src/app/mainview/components/FilesToSendContainer.qml
View file

@ -59,7 +59,7 @@ Rectangle {
delegate: FilesToSendDelegate {
anchors.verticalCenter: filesToSendContainerRow.verticalCenter
height: JamiTheme.filesToSendDelegateHeight
height: JamiTheme.layoutWidthFileTransfer
onRemoveFileButtonClicked: function (index) {
filesToSendListModel.removeFromPending(index);

142
src/app/mainview/components/FilesToSendDelegate.qml
View file

@ -17,6 +17,7 @@
*/
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import net.jami.Adapters 1.1
import net.jami.Constants 1.1
@ -40,130 +41,92 @@ Item {
id: mainRect
radius: JamiTheme.filesToSendDelegateRadius
Layout.preferredHeight: root.height - 4 * margin
Layout.preferredHeight: JamiTheme.layoutWidthFileTransfer
Layout.preferredWidth: JamiTheme.layoutWidthFileTransfer
color: JamiTheme.transparentColor
color: JamiTheme.fileBackgroundColor
Rectangle {
id: rect
ResponsiveImage {
id: fileIcon
visible: !IsImage
anchors.fill: parent
anchors.margins: 17
containerHeight: 20
source: JamiResources.link_black_24dp_svg
cache: false
color: JamiTheme.fileIconColor
}
AnimatedImage {
id: name
anchors.fill: parent
color: fileIcon.visible ? CurrentConversation.color : JamiTheme.transparentColor
layer.enabled: true
cache: false
layer.effect: OpacityMask {
maskSource: Item {
width: rect.width
height: rect.height
Rectangle {
anchors.centerIn: parent
width: rect.width
height: rect.height
radius: JamiTheme.chatViewFooterButtonRadius
}
}
asynchronous: true
fillMode: Image.PreserveAspectCrop
source: {
if (!IsImage)
return "";
// :/ -> resource url for test purposes
var sourceUrl = FilePath;
if (!sourceUrl.startsWith(":/"))
return JamiQmlUtils.qmlFilePrefix + sourceUrl;
else
return "qrc" + sourceUrl;
}
Rectangle {
anchors.fill: parent
anchors.margins: fileIcon.visible ? margin : 0
radius: JamiTheme.chatViewFooterButtonRadius
color: JamiTheme.secondaryBackgroundColor
ResponsiveImage {
id: fileIcon
visible: !IsImage
anchors.fill: parent
anchors.margins: 14
source: JamiResources.attached_file_svg
cache: false
color: JamiTheme.textColor
}
AnimatedImage {
id: name
anchors.fill: parent
cache: false
asynchronous: true
fillMode: Image.PreserveAspectCrop
source: {
if (!IsImage)
return "";
// :/ -> resource url for test purposes
var sourceUrl = FilePath;
if (!sourceUrl.startsWith(":/"))
return JamiQmlUtils.qmlFilePrefix + sourceUrl;
else
return "qrc" + sourceUrl;
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: mainRect.width
height: mainRect.height
radius: JamiTheme.filesToSendDelegateRadius
}
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: mainRect.width
height: mainRect.height
radius: JamiTheme.filesToSendDelegateRadius
}
}
}
PushButton {
JamiPushButton {
id: removeFileButton
anchors.right: mainRect.right
anchors.rightMargin: -margin
anchors.top: mainRect.top
anchors.topMargin: -margin
radius: 24
preferredSize: 20
preferredSize: 30
imageContainerWidth: 52
imageContainerHeight: 52
toolTipText: JamiStrings.optionRemove
source: JamiResources.round_close_24dp_svg
source: JamiResources.cross_black_24dp_svg
normalColor: JamiTheme.backgroundColor
imageColor: JamiTheme.textColor
normalColor: JamiTheme.secondaryBackgroundColor
imageColor: (hovered && JamiTheme.darkTheme) ? JamiTheme.blackColor : JamiTheme.textColor
hoveredColor: JamiTheme.removeFileButtonHoverColor
onClicked: root.removeFileButtonClicked(index)
}
}
Rectangle {
Control {
id: info
Layout.preferredHeight: root.height - margin
Layout.preferredWidth: JamiTheme.layoutWidthFileTransfer
color: JamiTheme.transparentColor
Layout.alignment: Qt.AlignLeft
ColumnLayout {
Layout.leftMargin: 5
anchors.margins: 5
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
contentItem: ColumnLayout {
spacing: 7
Text {
id: fileName
Layout.alignment: Qt.AlignLeft
Layout.preferredWidth: info.width
Layout.preferredWidth: Math.max(info.width, fileExtensionLayout.width)
font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
color: JamiTheme.chatviewTextColor
font.bold: true
text: FileName
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
}
RowLayout {
id: fileExtensionLayout
Layout.alignment: Qt.AlignLeft
spacing: FileExtension.length === 0 ? 0 : 1
@ -171,7 +134,7 @@ Item {
Text {
id: fileExtension
Layout.alignment: Qt.AlignLeft
font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
font.pointSize: JamiTheme.editedFontSize
font.capitalization: Font.AllUppercase
color: JamiTheme.chatviewTextColor
text: FileExtension
@ -181,11 +144,16 @@ Item {
Text {
id: fileSize
font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
font.pointSize: JamiTheme.editedFontSize
color: JamiTheme.chatviewTextColor
Layout.alignment: Qt.AlignLeft
text: FileSize
elide: Text.ElideMiddle
Component.onCompleted: {
text = text.toLowerCase();
text = text.replace(" ", "");
}
}
}
}

45
src/app/mainview/components/MessageBar.qml
View file

@ -29,6 +29,7 @@ RowLayout {
id: root
property alias text: messageBarTextArea.text
property alias fileContainer: dataTransferSendContainer
property var textAreaObj: messageBarTextArea
property real marginSize: JamiTheme.messageBarMarginSize
property bool sendButtonVisibility: true
@ -51,12 +52,9 @@ RowLayout {
signal showMapClicked
signal emojiButtonClicked
height: {
if (showTypo || multiLine)
return messageBarTextArea.height + 25 + 3 * marginSize + 1
else
return textAreaObj.height + marginSize + 1
}
property real rectHeight: (showTypo || multiLine) ? messageBarTextArea.height + 25 + 4 * marginSize + 1 : textAreaObj.height + 1 * marginSize + 1
height: rectHeight + (dataTransferSendContainer.visible ? dataTransferSendContainer.height + (!showTypo ? 40 : - marginSize) : 0 )
Rectangle {
@ -157,18 +155,19 @@ RowLayout {
id: rowLayout
columns: 2
rows: 2
rows: 3
columnSpacing: 0
rowSpacing: 0
anchors.fill: parent
MessageBarTextArea {
id: messageBarTextArea
objectName: "messageBarTextArea"
maxWidth: rectangle.width - messageBarRowLayout.width - 35
Layout.row: showTypo || multiLine ? 0 : 1
Layout.row: 0
Layout.column: 0
// forward activeFocus to the actual text area object
@ -179,12 +178,10 @@ RowLayout {
placeholderText: JamiStrings.writeTo.arg(CurrentConversation.title)
Layout.alignment: showTypo ? Qt.AlignLeft | Qt.AlignBottom : Qt.AlignBottom
Layout.alignment: showTypo ? Qt.AlignLeft : Qt.AlignBottom
Layout.fillWidth: true
Layout.leftMargin: marginSize / 2
Layout.topMargin: marginSize / 2
Layout.bottomMargin: marginSize / 2
Layout.rightMargin: marginSize / 2
Layout.margins: marginSize / 2
Layout.topMargin: 0
Layout.minimumHeight: JamiTheme.chatViewFooterPreferredHeight
Layout.preferredHeight: contentHeight
Layout.maximumHeight: JamiTheme.chatViewFooterTextAreaMaximumHeight - marginSize / 2
@ -325,14 +322,30 @@ RowLayout {
}
}
FilesToSendContainer {
id: dataTransferSendContainer
objectName: "dataTransferSendContainer"
visible: filesToSendCount > 0
Layout.alignment: Qt.AlignCenter
Layout.fillWidth: true
Layout.rightMargin: marginSize / 2
Layout.leftMargin: marginSize / 2
Layout.row: 1
Layout.column: 0
Layout.columnSpan: 2
Layout.preferredHeight: filesToSendCount ? JamiTheme.layoutWidthFileTransfer : 0
}
Row {
id: messageBarRowLayout
Layout.row: showTypo || multiLine ? 1 : 1
Layout.row: dataTransferSendContainer.visible ? 3 : (showTypo || multiLine ? 2 : 0)
Layout.column: showTypo || multiLine ? 0 : 1
Layout.alignment: showTypo || multiLine ? Qt.AlignRight : Qt.AlignBottom
Layout.columnSpan: showTypo || multiLine ? 2 : 1
Layout.topMargin: marginSize / 2
Layout.topMargin: dataTransferSendContainer.visible ? 0 : marginSize
Layout.rightMargin: 0
Row {
@ -1147,6 +1160,7 @@ RowLayout {
pressedColor: hoveredColor
toolTipText: showPreview ? JamiStrings.continueEditing : JamiStrings.showPreview
onClicked: {
showPreview = !showPreview;
messageBarTextArea.showPreview = showPreview;
@ -1204,6 +1218,7 @@ RowLayout {
onClicked: {
root.showPreview = false;
sendMessageButtonClicked();
root.height = root.rectHeight;
}
}
}