Skip to content
Snippets Groups Projects
Commit 6862804a authored by Fadi Shehadeh's avatar Fadi Shehadeh Committed by Sébastien Blin
Browse files

file transfer: update design 

Change-Id: I05cc9eaa645220f2576b69eaa63853fd24fa7c4d
parent 297ad484
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/constant/JamiTheme.qml
+ 2
− 2
View file @ 6862804a
......@@ -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
+ 7
− 1
View file @ 6862804a
......@@ -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
+ 8
− 1
View file @ 6862804a
......@@ -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
+ 1
− 1
View file @ 6862804a
......@@ -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
+ 0
− 2
View file @ 6862804a
......@@ -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
+ 155
− 98
View file @ 6862804a
......@@ -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)
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment