feat: add interactions for the downloaded elements

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -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();
     }

ui/app/AppLayouts/Browser/DownloadBar.qml

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

ui/app/AppLayouts/Browser/DownloadElement.qml

@@ -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 {
+Rectangle {
-    id: downloadElement
+    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,10 +47,10 @@ Item {
         anchors.leftMargin: Style.current.smallPadding
         active: root.visible
         sourceComponent: {
-            if (!downloadModel.downloads || !downloadModel.downloads[index] || downloadModel.downloads[index].receivedBytes < downloadModel.downloads[index].totalBytes) {
+            if (downloadComplete || !downloadModel.downloads[index] || downloadModel.downloads[index].isPaused || isCanceled) {
-                return loadingImageComponent
+                return fileImageComponent
             }
-            return fileImageComponent
+            return loadingImageComponent
         }
 
         Component {
@@ -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
+        }
     }
 }
 

ui/app/AppLayouts/Browser/DownloadView.qml

@@ -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) {
+                        removeDownloadFromModel(index)
-                            return el.id !== download.id;
-                        });
-                        downloadModel.remove(index);
                     }
                 }
             }

ui/app/img/browser/pause.svg

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

ui/app/img/browser/play.svg

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

ui/shared/Separator.qml

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