diff --git a/src/app/commoncomponents/DataTransferMessageDelegate.qml b/src/app/commoncomponents/DataTransferMessageDelegate.qml index ec247abf..dc711101 100644 --- a/src/app/commoncomponents/DataTransferMessageDelegate.qml +++ b/src/app/commoncomponents/DataTransferMessageDelegate.qml @@ -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 diff --git a/src/app/commoncomponents/SBSMessageBase.qml b/src/app/commoncomponents/SBSMessageBase.qml index 0121b278..e3ae6e1c 100644 --- a/src/app/commoncomponents/SBSMessageBase.qml +++ b/src/app/commoncomponents/SBSMessageBase.qml @@ -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; diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml index 2ff11e42..69c9254d 100644 --- a/src/app/constant/JamiTheme.qml +++ b/src/app/constant/JamiTheme.qml @@ -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 diff --git a/src/app/mainview/components/ChatViewFooter.qml b/src/app/mainview/components/ChatViewFooter.qml index e47a404c..516bb811 100644 --- a/src/app/mainview/components/ChatViewFooter.qml +++ b/src/app/mainview/components/ChatViewFooter.qml @@ -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 - } } } diff --git a/src/app/mainview/components/FilesToSendContainer.qml b/src/app/mainview/components/FilesToSendContainer.qml index e2e7a526..101bd1f6 100644 --- a/src/app/mainview/components/FilesToSendContainer.qml +++ b/src/app/mainview/components/FilesToSendContainer.qml @@ -59,7 +59,7 @@ Rectangle { delegate: FilesToSendDelegate { anchors.verticalCenter: filesToSendContainerRow.verticalCenter - height: JamiTheme.filesToSendDelegateHeight + height: JamiTheme.layoutWidthFileTransfer onRemoveFileButtonClicked: function (index) { filesToSendListModel.removeFromPending(index); diff --git a/src/app/mainview/components/FilesToSendDelegate.qml b/src/app/mainview/components/FilesToSendDelegate.qml index ed45400a..6c519640 100644 --- a/src/app/mainview/components/FilesToSendDelegate.qml +++ b/src/app/mainview/components/FilesToSendDelegate.qml @@ -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(" ", ""); + } } } } diff --git a/src/app/mainview/components/MessageBar.qml b/src/app/mainview/components/MessageBar.qml index 6d2a00e6..daa6f9be 100644 --- a/src/app/mainview/components/MessageBar.qml +++ b/src/app/mainview/components/MessageBar.qml @@ -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; } } }