status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add interactions for the downloaded elements

This commit is contained in:
Jonathan Rainville 2020-10-22 15:51:49 -04:00 committed by Iuri Matias
parent 4639517786
commit ce0d717717
7 changed files with 134 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/app/AppLayouts/Browser/BrowserLayout.qml
View File

@ -32,6 +32,13 @@ Rectangle {
property var downloads: []
}
function removeDownloadFromModel(index) {
downloadModel.downloads = downloadModel.downloads.filter(function (el) {
return el.id !== downloadModel.downloads[index].id;
});
downloadModel.remove(index);
}
Layout.fillHeight: true
Layout.fillWidth: true
@ -631,7 +638,7 @@ Rectangle {
}
function onDownloadRequested(download) {
downloadBar.visible = true
downloadBar.isVisible = true
downloadView.append(download);
download.accept();
}

8
ui/app/AppLayouts/Browser/DownloadBar.qml
View File

@ -4,11 +4,11 @@ import "../../../shared"
import "../../../shared/status"
import "../../../imports"
//downloadModel.downloads[index].receivedBytes
Rectangle {
property bool isVisible: false
id: root
visible: false
visible: isVisible && !!listView.count
color: Style.current.background
width: parent.width
height: 56
@ -61,7 +61,7 @@ Rectangle {
icon.name: "browser/close"
iconColor: Style.current.textColor
onClicked: {
root.visible = false
root.isVisible = false
}
}
}

121
ui/app/AppLayouts/Browser/DownloadElement.qml
View File

@ -1,14 +1,44 @@
import QtQuick 2.1
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../../../shared"
import "../../../shared/status"
import "../../../imports"
Item {
id: downloadElement
Rectangle {
property bool downloadComplete: {
return !!downloadModel.downloads && !!downloadModel.downloads[index] && downloadModel.downloads[index].receivedBytes >= downloadModel.downloads[index].totalBytes
}
property bool isCanceled: false
property bool hovered: false
id: root
width: 272
height: 40
border.width: 0
color: hovered ? Style.current.backgroundHover : Style.current.transparent
radius: Style.current.radius
function openFile() {
Qt.openUrlExternally(`file://${downloadDirectory}/${downloadFileName}`)
removeDownloadFromModel(index)
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
root.hovered = true
}
onExited: {
root.hovered = false
}
onClicked: {
openFile()
}
}
Loader {
id: iconLoader
@ -17,11 +47,11 @@ Item {
anchors.leftMargin: Style.current.smallPadding
active: root.visible
sourceComponent: {
if (!downloadModel.downloads || !downloadModel.downloads[index] || downloadModel.downloads[index].receivedBytes < downloadModel.downloads[index].totalBytes) {
return loadingImageComponent
}
if (downloadComplete || !downloadModel.downloads[index] || downloadModel.downloads[index].isPaused || isCanceled) {
return fileImageComponent
}
return loadingImageComponent
}
Component {
id: loadingImageComponent
@ -34,10 +64,9 @@ Item {
width: 24
height: 24
ColorOverlay {
enabled: false
anchors.fill: parent
source: parent
color: Style.current.darkGrey
color: downloadComplete ? Style.current.transparent : Style.current.darkGrey
}
}
}
@ -49,7 +78,8 @@ Item {
elide: Text.ElideRight
anchors.left: iconLoader.right
anchors.right: optionsBtn.left
anchors.top: parent.top
anchors.top: downloadComplete ? undefined : parent.top
anchors.verticalCenter: downloadComplete ? parent.verticalCenter : undefined
minimumPixelSize: 13
anchors.leftMargin: Style.current.smallPadding
anchors.topMargin: 2
@ -57,8 +87,17 @@ Item {
StyledText {
id: progressText
visible: !downloadComplete
color: Style.current.secondaryText
text: `${downloadModel.downloads[index] ? downloadModel.downloads[index].receivedBytes / 1000000 : 0}/${downloadModel.downloads[index] ? downloadModel.downloads[index].totalBytes / 1000000 : 0} MB` //"14.4/109 MB, 26 sec left"
text: {
if (isCanceled) {
return qsTr("Cancelled")
}
if (downloadModel.downloads[index] && downloadModel.downloads[index].isPaused) {
return qsTr("Paused")
}
return `${downloadModel.downloads[index] ? (downloadModel.downloads[index].receivedBytes / 1000000).toFixed(2) : 0}/${downloadModel.downloads[index] ? (downloadModel.downloads[index].totalBytes / 1000000).toFixed(2) : 0} MB` //"14.4/109 MB, 26 sec left"
}
elide: Text.ElideRight
anchors.left: iconLoader.right
anchors.right: optionsBtn.left
@ -74,6 +113,70 @@ Item {
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
icon.name: "dots-icon"
onClicked: {
downloadMenu.x = optionsBtn.x
downloadMenu.open()
}
}
// TODO Move this outside?
PopupMenu {
id: downloadMenu
y: -height - Style.current.smallPadding
Action {
enabled: downloadComplete
icon.source: "../../img/browser/file.svg"
icon.width: 16
icon.height: 16
text: qsTr("Open")
onTriggered: openFile()
}
Action {
icon.source: "../../img/add_watch_only.svg"
icon.width: 13
icon.height: 9
text: qsTr("Show in folder")
// TODO check if this works in Windows and Mac
onTriggered: Qt.openUrlExternally("file://" + downloadDirectory)
}
Action {
enabled: !downloadComplete && !!downloadModel.downloads[index] && !downloadModel.downloads[index].isPaused
icon.source: "../../img/browser/pause.svg"
icon.width: 16
icon.height: 16
text: qsTr("Pause")
onTriggered: {
downloadModel.downloads[index].pause()
}
}
Action {
enabled: !downloadComplete && !!downloadModel.downloads[index] && downloadModel.downloads[index].isPaused
icon.source: "../../img/browser/play.svg"
icon.width: 16
icon.height: 16
text: qsTr("Resume")
onTriggered: {
downloadModel.downloads[index].resume()
}
}
Separator {
visible: !downloadComplete
}
Action {
enabled: !downloadComplete
icon.source: "../../img/block-icon.svg"
icon.width: 13
icon.height: 13
text: qsTr("Cancel")
onTriggered: {
downloadModel.downloads[index].cancel()
isCanceled = true
}
icon.color: Style.current.red
}
}
}

7
ui/app/AppLayouts/Browser/DownloadView.qml
View File

@ -96,7 +96,7 @@ Rectangle {
}
Label {
id: label
text: downloadModel.downloads[index].downloadDirectory + "/" + downloadModel.downloads[index].downloadFileName
text: downloadDirectory + "/" + downloadFileName
anchors {
verticalCenter: cancelButton.verticalCenter
left: parent.left
@ -112,10 +112,7 @@ Rectangle {
download.cancel();
downloadModel.downloads = downloadModel.downloads.filter(function (el) {
return el.id !== download.id;
});
downloadModel.remove(index);
removeDownloadFromModel(index)
}
}
}

4
ui/app/img/browser/pause.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.50033 3.5C4.4878 3.5 3.66699 4.32081 3.66699 5.33333V10.6667C3.66699 11.6792 4.4878 12.5 5.50033 12.5C6.51285 12.5 7.33366 11.6792 7.33366 10.6667V5.33333C7.33366 4.32081 6.51285 3.5 5.50033 3.5ZM4.66699 5.33333C4.66699 4.8731 5.04009 4.5 5.50033 4.5C5.96056 4.5 6.33366 4.8731 6.33366 5.33333V10.6667C6.33366 11.1269 5.96056 11.5 5.50033 11.5C5.04009 11.5 4.66699 11.1269 4.66699 10.6667V5.33333Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5003 3.5C9.4878 3.5 8.66699 4.32081 8.66699 5.33333V10.6667C8.66699 11.6792 9.4878 12.5 10.5003 12.5C11.5128 12.5 12.3337 11.6792 12.3337 10.6667V5.33333C12.3337 4.32081 11.5128 3.5 10.5003 3.5ZM9.66699 5.33333C9.66699 4.8731 10.0401 4.5 10.5003 4.5C10.9606 4.5 11.3337 4.8731 11.3337 5.33333V10.6667C11.3337 11.1269 10.9606 11.5 10.5003 11.5C10.0401 11.5 9.66699 11.1269 9.66699 10.6667V5.33333Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
ui/app/img/browser/play.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66699 4.56312C4.66699 3.63702 5.6942 3.08011 6.47028 3.58546L12.1775 7.3018C12.6823 7.63052 12.6823 8.36976 12.1775 8.69847L6.47028 12.4148C5.6942 12.9202 4.66699 12.3633 4.66699 11.4371V4.56312ZM5.9246 4.42346C5.81374 4.35127 5.66699 4.43082 5.66699 4.56312V11.4371C5.66699 11.5694 5.81374 11.649 5.9246 11.5768L11.2029 8.1398C11.3038 8.07406 11.3038 7.92621 11.2029 7.86047L5.9246 4.42346Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 565 B

2
ui/shared/Separator.qml
View File

@ -4,7 +4,7 @@ import "../imports"
Rectangle {
id: separator
width: parent.width
height: 1
height: visible ? 1 : 0
color: Style.current.border
anchors.topMargin: Style.current.padding
}