From 6862804a44ea548a1b1c8b41869b56cedce63bdc Mon Sep 17 00:00:00 2001
From: Fadi SHEHADEH <fadi.shehadeh@savoirfairelinux.com>
Date: Fri, 30 Dec 2022 15:41:35 -0500
Subject: [PATCH] file transfer: update design
Change-Id: I05cc9eaa645220f2576b69eaa63853fd24fa7c4d
---
src/app/constant/JamiTheme.qml | 4 +-
src/app/filestosendlistmodel.cpp | 8 +-
src/app/filestosendlistmodel.h | 9 +-
.../mainview/components/ChatViewFooter.qml | 2 +-
.../components/FilesToSendContainer.qml | 2 -
.../components/FilesToSendDelegate.qml | 253 +++++++++++-------
6 files changed, 173 insertions(+), 105 deletions(-)
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index 32e9402e5..1b68a3e8c 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/src/app/constant/JamiTheme.qml
@@ -405,7 +405,6 @@ Item {
property real chatViewFooterButtonSize: 36
property real chatViewFooterButtonIconSize: 48
property real chatViewFooterButtonRadius: 5
- property real chatViewFooterFileContainerPreferredHeight: 150
property real chatViewFooterTextAreaMaximumHeight: 130
property real chatViewScrollToBottomButtonBottomMargin: 8
@@ -419,13 +418,14 @@ Item {
property real typingDotsSize: 8
// MessageWebView File Transfer Container
- property real filesToSendContainerSpacing: 5
+ property real filesToSendContainerSpacing: 120
property real filesToSendContainerPadding: 10
property real filesToSendDelegateWidth: 100
property real filesToSendDelegateHeight: 100
property real filesToSendDelegateRadius: 7
property real filesToSendDelegateButtonSize: 16
property real filesToSendDelegateFontPointSize: calcSize(textFontSize + 2)
+ property real layoutWidthFileTransfer: 80
// SBSMessageBase
property int sbsMessageBasePreferredPadding: 12
diff --git a/src/app/filestosendlistmodel.cpp b/src/app/filestosendlistmodel.cpp
index 4adf36f34..5a98d2863 100644
--- a/src/app/filestosendlistmodel.cpp
+++ b/src/app/filestosendlistmodel.cpp
@@ -64,7 +64,11 @@ FilesToSendListModel::addToPending(QString filePath)
isImage = true;
beginInsertRows(QModelIndex(), pendingFiles_.size(), pendingFiles_.size());
- auto item = FilesToSend::Item(filePath, fileInfo.fileName(), isImage, fileInfo.size());
+ auto item = FilesToSend::Item(filePath,
+ fileInfo.baseName(),
+ fileInfo.suffix(),
+ isImage,
+ fileInfo.size());
pendingFiles_.append(item);
endInsertRows();
}
@@ -97,6 +101,8 @@ FilesToSendListModel::data(const QModelIndex& index, int role) const
return QVariant(item.fileName);
case Role::FilePath:
return QVariant(item.filePath);
+ case Role::FileExtension:
+ return QVariant(item.fileExtension);
case Role::FileSize:
return QVariant(Utils::humanFileSize(item.fileSizeInByte));
case Role::IsImage:
diff --git a/src/app/filestosendlistmodel.h b/src/app/filestosendlistmodel.h
index 87be26270..1652a4dab 100644
--- a/src/app/filestosendlistmodel.h
+++ b/src/app/filestosendlistmodel.h
@@ -25,6 +25,7 @@
X(FileName) \
X(FilePath) \
X(FileSize) \
+ X(FileExtension) \
X(IsImage)
namespace FilesToSend {
@@ -39,15 +40,21 @@ Q_ENUM_NS(Role)
struct Item
{
- Item(QString filePath, QString fileName, bool isImage, qint64 fileSizeInByte)
+ Item(QString filePath,
+ QString fileName,
+ QString fileExtension,
+ bool isImage,
+ qint64 fileSizeInByte)
: filePath(filePath)
, fileName(fileName)
+ , fileExtension(fileExtension)
, isImage(isImage)
, fileSizeInByte(fileSizeInByte)
{}
QString filePath;
QString fileName;
+ QString fileExtension;
bool isImage;
qint64 fileSizeInByte;
};
diff --git a/src/app/mainview/components/ChatViewFooter.qml b/src/app/mainview/components/ChatViewFooter.qml
index f49edcb9f..c1b47bedb 100644
--- a/src/app/mainview/components/ChatViewFooter.qml
+++ b/src/app/mainview/components/ChatViewFooter.qml
@@ -260,7 +260,7 @@ Rectangle {
Layout.preferredWidth: footerColumnLayout.width
Layout.maximumWidth: JamiTheme.chatViewMaximumWidth
Layout.preferredHeight: filesToSendCount ?
- JamiTheme.chatViewFooterFileContainerPreferredHeight : 0
+ JamiTheme.filesToSendDelegateHeight : 0
}
}
}
diff --git a/src/app/mainview/components/FilesToSendContainer.qml b/src/app/mainview/components/FilesToSendContainer.qml
index 9cab85a45..ce0bc575d 100644
--- a/src/app/mainview/components/FilesToSendContainer.qml
+++ b/src/app/mainview/components/FilesToSendContainer.qml
@@ -30,8 +30,6 @@ Rectangle {
property alias filesToSendListModel: repeater.model
property alias filesToSendCount: repeater.count
- color: JamiTheme.messageOutBgColor
-
JamiFlickable {
id: filesToSendContainerScrollView
diff --git a/src/app/mainview/components/FilesToSendDelegate.qml b/src/app/mainview/components/FilesToSendDelegate.qml
index 7f7fa950a..fae215cda 100644
--- a/src/app/mainview/components/FilesToSendDelegate.qml
+++ b/src/app/mainview/components/FilesToSendDelegate.qml
@@ -23,121 +23,178 @@ import Qt5Compat.GraphicalEffects
import net.jami.Adapters 1.1
import net.jami.Constants 1.1
import net.jami.Models 1.1
-
import "../../commoncomponents"
-Rectangle {
+Item {
+
id: root
property real margin: 5
-
signal removeFileButtonClicked(int index)
- radius: JamiTheme.filesToSendDelegateRadius
-
- color: CurrentConversation.color
-
- ColumnLayout {
- id: delegateFileWrapperColumnLayout
-
- anchors.fill: parent
-
- spacing: 0
-
- visible: !IsImage
-
- ResponsiveImage {
- id: fileIcon
-
- Layout.alignment: Qt.AlignTop | Qt.AlignLeft
- Layout.topMargin: margin
- Layout.leftMargin: margin
-
- visible: !IsImage
-
- source: JamiResources.file_black_24dp_svg
- }
-
- Text {
- id: fileName
-
- Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
- Layout.leftMargin: margin
- Layout.preferredWidth: root.width - margin * 2
-
- visible: !IsImage
-
- font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
-
- text: FileName
- elide: Text.ElideMiddle
- }
-
- Text {
- id: fileSize
-
- Layout.alignment: Qt.AlignBottom
- Layout.leftMargin: margin
- Layout.bottomMargin: margin
- Layout.preferredWidth: root.width - margin * 2
+ RowLayout {
+
+ anchors.fill: root
+ spacing : 2
+
+ Rectangle {
+ id: mainRect
+
+ radius: JamiTheme.filesToSendDelegateRadius
+ Layout.preferredHeight: root.height - 4 * margin
+ Layout.preferredWidth: JamiTheme.layoutWidthFileTransfer
+ color: JamiTheme.transparentColor
+
+ Rectangle {
+ id: rect
+
+ anchors.fill: parent
+ color: CurrentConversation.color // "#E5E5E5"
+ layer.enabled: true
+
+ layer.effect: OpacityMask {
+ maskSource: Item {
+ width: rect.width
+ height: rect.height
+ Rectangle {
+ anchors.centerIn: parent
+ width: rect.width
+ height: rect.height
+ radius: JamiTheme.chatViewFooterButtonRadius
+ }
+ }
+ }
+
+ Rectangle {
+ width: parent.width
+ anchors.bottom: parent.bottom
+ height: 3/4 * mainRect.height
+ color: CurrentConversation.color
+ }
+
+ Rectangle {
+
+ anchors.fill: parent
+ anchors.margins: margin
+ radius: JamiTheme.chatViewFooterButtonRadius
+ color: JamiTheme.whiteColor
+
+ ResponsiveImage {
+ id: fileIcon
+ visible : !IsImage
+ anchors.fill: parent
+ anchors.margins: margin
+ source: JamiResources.file_black_24dp_svg
+ }
+
+ AnimatedImage {
+ id: name
+
+ anchors.fill: parent
+ anchors.margins: margin
+
+ 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
+ }
+ }
+ }
+ }
+ }
- visible: !IsImage
+ PushButton {
+ id: removeFileButton
- font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
+ anchors.right: mainRect.right
+ anchors.rightMargin: -margin
+ anchors.top: mainRect.top
+ anchors.topMargin: -margin
- text: FileSize
- elide: Text.ElideMiddle
- }
- }
+ radius: 24
- AnimatedImage {
- id: name
+ preferredSize: 30
+ imageContainerWidth: 52
+ imageContainerHeight: 52
+ toolTipText: JamiStrings.optionRemove
- anchors.fill: parent
+ source: JamiResources.cross_black_24dp_svg
- asynchronous: true
- fillMode: Image.PreserveAspectCrop
- source: {
- if (!IsImage)
- return ""
+ normalColor: JamiTheme.backgroundColor
+ imageColor: JamiTheme.textColor
- // :/ -> resource url for test purposes
- var sourceUrl = FilePath
- if (!sourceUrl.startsWith(":/"))
- return JamiQmlUtils.qmlFilePrefix + sourceUrl
- else
- return "qrc" + sourceUrl
+ onClicked: root.removeFileButtonClicked(index)
+ }
}
- layer.enabled: true
- layer.effect: OpacityMask {
- maskSource: Rectangle {
- width: root.width
- height: root.height
- radius: JamiTheme.filesToSendDelegateRadius
+ Rectangle {
+
+ id: info
+ Layout.preferredHeight: root.height -margin
+ Layout.preferredWidth: JamiTheme.layoutWidthFileTransfer
+ color : JamiTheme.transparentColor
+ Layout.alignment: Qt.AlignLeft
+
+ ColumnLayout {
+
+ anchors.margins: margin
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+
+ Text {
+ id: fileName
+
+ Layout.alignment: Qt.AlignLeft
+ Layout.preferredWidth: info.width
+ font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
+ color: JamiTheme.chatviewTextColor
+ font.bold : true
+ text: FileName
+ elide: Text.ElideRight
+ }
+
+ RowLayout {
+
+ Layout.alignment: Qt.AlignLeft
+ spacing: FileExtension.length === 0 ? 0 : 1
+
+ Text {
+ id: fileExtension
+ Layout.alignment: Qt.AlignLeft
+ font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
+ font.capitalization: Font.AllUppercase
+ color: JamiTheme.chatviewTextColor
+ text: FileExtension
+
+ elide: Text.ElideMiddle
+ }
+
+ Text {
+ id: fileSize
+ font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
+ color: JamiTheme.chatviewTextColor
+ Layout.alignment: Qt.AlignLeft
+ text: FileSize
+ elide: Text.ElideMiddle
+ }
+ }
}
}
}
-
- PushButton {
- id: removeFileButton
-
- anchors.right: root.right
- anchors.rightMargin: -margin
- anchors.top: root.top
- anchors.topMargin: -margin
-
- radius: margin
- preferredSize: JamiTheme.filesToSendDelegateButtonSize
-
- toolTipText: JamiStrings.optionRemove
-
- source: JamiResources.cross_black_24dp_svg
-
- normalColor: JamiTheme.removeFileButtonColor
- hoveredColor: JamiTheme.lightGrey_
- imageColor: JamiTheme.textColor
-
- onClicked: root.removeFileButtonClicked(index)
- }
}
--
GitLab