file transfer: update design

Change-Id: I05cc9eaa645220f2576b69eaa63853fd24fa7c4d

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

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:

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;
 };

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
         }
     }
 }

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
 

src/app/mainview/components/FilesToSendDelegate.qml

@@ -23,77 +23,75 @@ 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)
 
+    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
 
-    color: CurrentConversation.color
+            Rectangle {
-
+                id: rect
-    ColumnLayout {
-        id: delegateFileWrapperColumnLayout
 
                 anchors.fill: parent
+                color: CurrentConversation.color // "#E5E5E5"
+                layer.enabled: true
 
-        spacing: 0
+                layer.effect: OpacityMask {
+                    maskSource: Item {
+                        width: rect.width
+                        height: rect.height
+                        Rectangle {
+                            anchors.centerIn: parent
+                            width:  rect.width
+                            height:  rect.height
+                            radius: JamiTheme.chatViewFooterButtonRadius
+                        }
+                    }
+                }
 
-        visible: !IsImage
+                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
-            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                        anchors.fill: parent
-            Layout.topMargin: margin
+                        anchors.margins: 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
-
-            visible: !IsImage
-
-            font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
-
-            text: FileSize
-            elide: Text.ElideMiddle
-        }
-    }
-
                     AnimatedImage {
                         id: name
 
                         anchors.fill: parent
+                        anchors.margins: margin
 
                         asynchronous: true
                         fillMode: Image.PreserveAspectCrop
@@ -112,32 +110,91 @@ Rectangle {
                         layer.enabled: true
                         layer.effect: OpacityMask {
                             maskSource: Rectangle {
-                width: root.width
+                                width: mainRect.width
-                height: root.height
+                                height: mainRect.height
                                 radius: JamiTheme.filesToSendDelegateRadius
                             }
                         }
                     }
+                }
+            }
 
             PushButton {
                 id: removeFileButton
 
-        anchors.right: root.right
+                anchors.right: mainRect.right
                 anchors.rightMargin: -margin
-        anchors.top: root.top
+                anchors.top: mainRect.top
                 anchors.topMargin: -margin
 
-        radius: margin
+                radius: 24
-        preferredSize: JamiTheme.filesToSendDelegateButtonSize
 
+                preferredSize: 30
+                imageContainerWidth: 52
+                imageContainerHeight: 52
                 toolTipText: JamiStrings.optionRemove
 
                 source: JamiResources.cross_black_24dp_svg
 
-        normalColor:  JamiTheme.removeFileButtonColor
+                normalColor: JamiTheme.backgroundColor
-        hoveredColor: JamiTheme.lightGrey_
                 imageColor: JamiTheme.textColor
 
                 onClicked: root.removeFileButtonClicked(index)
             }
+        }
+
+        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
+                    }
+                }
+            }
+        }
+    }
 }