feat: add download bar with no features but it lists

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -27,6 +27,10 @@ Rectangle {
     }
     property bool currentTabConnected: false
 
+    ListModel {
+        id: downloadModel
+        property var downloads: []
+    }
 
     Layout.fillHeight: true
     Layout.fillWidth: true
@@ -627,7 +631,7 @@ Rectangle {
     }
 
     function onDownloadRequested(download) {
-        downloadView.visible = true;
+        downloadBar.visible = true
         downloadView.append(download);
         download.accept();
     }
@@ -661,12 +665,19 @@ Rectangle {
         }
     }
 
+    // TODO restyle this and only appears when clicking view all
     DownloadView {
         id: downloadView
         visible: false
         anchors.fill: parent
     }
 
+    DownloadBar {
+        id: downloadBar
+        anchors.bottom: parent.bottom
+        z: 60
+    }
+
     FindBar {
         id: findBar
         visible: false

ui/app/AppLayouts/Browser/DownloadBar.qml

@@ -0,0 +1,73 @@
+import QtQuick 2.1
+import QtGraphicalEffects 1.13
+import "../../../shared"
+import "../../../shared/status"
+import "../../../imports"
+
+//downloadModel.downloads[index].receivedBytes
+
+Rectangle {
+    id: root
+    visible: false
+    color: Style.current.background
+    width: parent.width
+    height: 56
+    border.width: 1
+    border.color: Style.current.border
+
+    // This container is to contain the downloaded elements between the parent buttons and hide the overflow
+    Item {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.right: showAllBtn.left
+        anchors.rightMargin: Style.current.smallPadding
+        height: listView.height
+        clip: true
+
+        ListView {
+            id: listView
+            orientation: ListView.Horizontal
+            model: downloadModel
+            height: currentItem ? currentItem.height : 0
+            spacing: Style.current.smallPadding
+            width: parent.width
+            interactive: false
+            delegate: Component {
+                DownloadElement {
+                }
+            }
+        }
+    }
+
+
+    StatusButton {
+        id: showAllBtn
+        size: "small"
+        text: qsTr("Show All")
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: closeBtn.left
+        anchors.rightMargin: Style.current.padding
+        onClicked: {
+            downloadView.visible = true
+        }
+    }
+
+    StatusIconButton {
+        id: closeBtn
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
+        icon.name: "browser/close"
+        iconColor: Style.current.textColor
+        onClicked: {
+            root.visible = false
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:56;width:700}
+}
+##^##*/

ui/app/AppLayouts/Browser/DownloadElement.qml

@@ -0,0 +1,79 @@
+import QtQuick 2.1
+import QtGraphicalEffects 1.13
+import "../../../shared"
+import "../../../shared/status"
+import "../../../imports"
+
+
+Item {
+    id: downloadElement
+    width: 272
+    height: 40
+
+    Loader {
+        id: iconLoader
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        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
+            }
+            return fileImageComponent
+        }
+
+        Component {
+            id: loadingImageComponent
+            LoadingImage {}
+        }
+        Component {
+            id: fileImageComponent
+            SVGImage {
+                source: "../../img/browser/file.svg"
+                width: 24
+                height: 24
+                ColorOverlay {
+                    enabled: false
+                    anchors.fill: parent
+                    source: parent
+                    color: Style.current.darkGrey
+                }
+            }
+        }
+    }
+
+    StyledText {
+        id: filenameText
+        text: downloadFileName
+        elide: Text.ElideRight
+        anchors.left: iconLoader.right
+        anchors.right: optionsBtn.left
+        anchors.top: parent.top
+        minimumPixelSize: 13
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.topMargin: 2
+    }
+
+    StyledText {
+        id: progressText
+        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"
+        elide: Text.ElideRight
+        anchors.left: iconLoader.right
+        anchors.right: optionsBtn.left
+        anchors.bottom: parent.bottom
+        minimumPixelSize: 13
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.bottomMargin: 2
+    }
+
+    StatusIconButton {
+        id: optionsBtn
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.smallPadding
+        icon.name: "dots-icon"
+    }
+}
+

ui/app/AppLayouts/Browser/DownloadView.qml

@@ -58,11 +58,6 @@ Rectangle {
     id: downloadView
     color: "lightgray"
 
-    ListModel {
-        id: downloadModel
-        property var downloads: []
-    }
-
     function append(download) {
         downloadModel.append(download);
         downloadModel.downloads.push(download);
@@ -101,7 +96,7 @@ Rectangle {
                 }
                 Label {
                     id: label
-                    text: downloadDirectory + "/" + downloadFileName
+                    text: downloadModel.downloads[index].downloadDirectory + "/" + downloadModel.downloads[index].downloadFileName
                     anchors {
                         verticalCenter: cancelButton.verticalCenter
                         left: parent.left

ui/app/img/browser/file.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7883 6.37753L15.4501 3.13202C14.7034 2.40611 13.7031 2 12.6618 2H8C5.79086 2 4 3.79086 4 6V18C4 20.2091 5.79086 22 8 22H16C18.2091 22 20 20.2091 20 18V9.24551C20 8.16511 19.563 7.13065 18.7883 6.37753ZM16 20.5H8C6.61929 20.5 5.5 19.3807 5.5 18V6C5.5 4.61929 6.61929 3.5 8 3.5H12.6618C12.7755 3.5 12.8885 3.50776 13 3.52298V8C13 9.10457 13.8954 10 15 10H18.5V18C18.5 19.3807 17.3807 20.5 16 20.5ZM18.3863 8.5C18.2633 8.10658 18.0438 7.74579 17.7427 7.45302L14.5 4.3004V8C14.5 8.27614 14.7239 8.5 15 8.5H18.3863Z" fill="#4360DF"/>
+</svg>

ui/nim-status-client.pro

@@ -127,6 +127,8 @@ DISTFILES += \
     app/AppLayouts/Browser/BrowserTabStyle.qml \
     app/AppLayouts/Browser/BrowserTabs.qml \
     app/AppLayouts/Browser/BrowserWalletMenu.qml \
+    app/AppLayouts/Browser/DownloadBar.qml \
+    app/AppLayouts/Browser/DownloadElement.qml \
     app/AppLayouts/Browser/FaviconImage.qml \
     app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \
     app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml \