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,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
+    RowLayout {
 
-    color: CurrentConversation.color
+        anchors.fill: root
+        spacing : 2
 
-    ColumnLayout {
-        id: delegateFileWrapperColumnLayout
+        Rectangle {
+            id: mainRect
 
-        anchors.fill: parent
+            radius: JamiTheme.filesToSendDelegateRadius
+            Layout.preferredHeight: root.height - 4 * margin
+            Layout.preferredWidth: JamiTheme.layoutWidthFileTransfer
+            color: JamiTheme.transparentColor
 
-        spacing: 0
+            Rectangle {
+                id: rect
 
-        visible: !IsImage
+                anchors.fill: parent
+                color: CurrentConversation.color // "#E5E5E5"
+                layer.enabled: true
 
-        ResponsiveImage {
-            id: fileIcon
+                layer.effect: OpacityMask {
+                    maskSource: Item {
+                        width: rect.width
+                        height: rect.height
+                        Rectangle {
+                            anchors.centerIn: parent
+                            width:  rect.width
+                            height:  rect.height
+                            radius: JamiTheme.chatViewFooterButtonRadius
+                        }
+                    }
+                }
 
-            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
-            Layout.topMargin: margin
-            Layout.leftMargin: margin
+                Rectangle {
+                    width: parent.width
+                    anchors.bottom: parent.bottom
+                    height: 3/4 * mainRect.height
+                    color: CurrentConversation.color
+                }
 
-            visible: !IsImage
+                Rectangle {
 
-            source: JamiResources.file_black_24dp_svg
+                    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
+                            }
+                        }
+                    }
+                }
+            }
+
+            PushButton {
+                id: removeFileButton
+
+                anchors.right: mainRect.right
+                anchors.rightMargin: -margin
+                anchors.top: mainRect.top
+                anchors.topMargin: -margin
+
+                radius: 24
+
+                preferredSize: 30
+                imageContainerWidth: 52
+                imageContainerHeight: 52
+                toolTipText: JamiStrings.optionRemove
+
+                source: JamiResources.cross_black_24dp_svg
+
+                normalColor: JamiTheme.backgroundColor
+                imageColor: JamiTheme.textColor
+
+                onClicked: root.removeFileButtonClicked(index)
+            }
         }
 
-        Text {
-            id: fileName
+        Rectangle {
 
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            Layout.leftMargin: margin
-            Layout.preferredWidth: root.width - margin * 2
+            id: info
+            Layout.preferredHeight: root.height -margin
+            Layout.preferredWidth: JamiTheme.layoutWidthFileTransfer
+            color : JamiTheme.transparentColor
+            Layout.alignment: Qt.AlignLeft
 
-            visible: !IsImage
+            ColumnLayout {
 
-            font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
+                anchors.margins: margin
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
 
-            text: FileName
-            elide: Text.ElideMiddle
-        }
+                Text {
+                    id: fileName
 
-        Text {
-            id: fileSize
+                    Layout.alignment: Qt.AlignLeft
+                    Layout.preferredWidth: info.width
+                    font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
+                    color: JamiTheme.chatviewTextColor
+                    font.bold : true
+                    text: FileName
+                    elide: Text.ElideRight
+                }
 
-            Layout.alignment: Qt.AlignBottom
-            Layout.leftMargin: margin
-            Layout.bottomMargin: margin
-            Layout.preferredWidth: root.width - margin * 2
+                RowLayout {
 
-            visible: !IsImage
+                    Layout.alignment: Qt.AlignLeft
+                    spacing: FileExtension.length === 0 ? 0 : 1
 
-            font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
+                    Text {
+                        id: fileExtension
+                        Layout.alignment: Qt.AlignLeft
+                        font.pointSize: JamiTheme.filesToSendDelegateFontPointSize
+                        font.capitalization: Font.AllUppercase
+                        color: JamiTheme.chatviewTextColor
+                        text: FileExtension
 
-            text: FileSize
-            elide: Text.ElideMiddle
-        }
-    }
+                        elide: Text.ElideMiddle
+                    }
 
-    AnimatedImage {
-        id: name
-
-        anchors.fill: parent
-
-        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: root.width
-                height: root.height
-                radius: JamiTheme.filesToSendDelegateRadius
+                    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)
-    }
 }