From 4639517786ae9f588dbfdb552d69c850d0a9421c Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Thu, 22 Oct 2020 13:34:14 -0400 Subject: [PATCH] feat: add download bar with no features but it lists --- ui/app/AppLayouts/Browser/BrowserLayout.qml | 15 +++- ui/app/AppLayouts/Browser/DownloadBar.qml | 73 +++++++++++++++++ ui/app/AppLayouts/Browser/DownloadElement.qml | 79 +++++++++++++++++++ ui/app/AppLayouts/Browser/DownloadView.qml | 9 +-- ui/app/img/browser/file.svg | 3 + ui/nim-status-client.pro | 2 + 6 files changed, 172 insertions(+), 9 deletions(-) create mode 100644 ui/app/AppLayouts/Browser/DownloadBar.qml create mode 100644 ui/app/AppLayouts/Browser/DownloadElement.qml create mode 100644 ui/app/img/browser/file.svg diff --git a/ui/app/AppLayouts/Browser/BrowserLayout.qml b/ui/app/AppLayouts/Browser/BrowserLayout.qml index 4c74e6d298..7770038458 100644 --- a/ui/app/AppLayouts/Browser/BrowserLayout.qml +++ b/ui/app/AppLayouts/Browser/BrowserLayout.qml @@ -21,12 +21,16 @@ Rectangle { border.width: 0 property Item currentWebView: tabs.currentIndex < tabs.count ? tabs.getTab(tabs.currentIndex).item : null - + property Component browserDialogComponent: BrowserDialog { onClosing: destroy() } 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 diff --git a/ui/app/AppLayouts/Browser/DownloadBar.qml b/ui/app/AppLayouts/Browser/DownloadBar.qml new file mode 100644 index 0000000000..1073fd1d21 --- /dev/null +++ b/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} +} +##^##*/ diff --git a/ui/app/AppLayouts/Browser/DownloadElement.qml b/ui/app/AppLayouts/Browser/DownloadElement.qml new file mode 100644 index 0000000000..37ecf642d7 --- /dev/null +++ b/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" + } +} + diff --git a/ui/app/AppLayouts/Browser/DownloadView.qml b/ui/app/AppLayouts/Browser/DownloadView.qml index 74a00f8bfb..b1dee6dd27 100644 --- a/ui/app/AppLayouts/Browser/DownloadView.qml +++ b/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 @@ -172,4 +167,4 @@ Rectangle { } } } -} \ No newline at end of file +} diff --git a/ui/app/img/browser/file.svg b/ui/app/img/browser/file.svg new file mode 100644 index 0000000000..c802b9d2f4 --- /dev/null +++ b/ui/app/img/browser/file.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 710644d8c3..f71dcbb42e 100644 --- a/ui/nim-status-client.pro +++ b/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 \