From cc6fb42d14db78c24bdd8e3dde851e24fd55c94b Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Thu, 22 Oct 2020 16:33:30 -0400 Subject: [PATCH] feat: style download full view --- ui/app/AppLayouts/Browser/DownloadBar.qml | 12 +- ui/app/AppLayouts/Browser/DownloadView.qml | 179 +++++---------------- 2 files changed, 50 insertions(+), 141 deletions(-) diff --git a/ui/app/AppLayouts/Browser/DownloadBar.qml b/ui/app/AppLayouts/Browser/DownloadBar.qml index d4897f0ffd..db6fae077e 100644 --- a/ui/app/AppLayouts/Browser/DownloadBar.qml +++ b/ui/app/AppLayouts/Browser/DownloadBar.qml @@ -34,11 +34,17 @@ Rectangle { layoutDirection: Qt.RightToLeft spacing: Style.current.smallPadding anchors.left: parent.left - width: childrenRect.width + width: { + // Children rect shows a warning but this works ¯\_(ツ)_/¯ + let w = 0 + for (let i = 0; i < count; i++) { + w += this.itemAtIndex(i).width + this.spacing + } + return w + } interactive: false delegate: Component { - DownloadElement { - } + DownloadElement {} } } } diff --git a/ui/app/AppLayouts/Browser/DownloadView.qml b/ui/app/AppLayouts/Browser/DownloadView.qml index efc4e56e9b..a1d4da51db 100644 --- a/ui/app/AppLayouts/Browser/DownloadView.qml +++ b/ui/app/AppLayouts/Browser/DownloadView.qml @@ -1,167 +1,70 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the QtWebEngine module of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:BSD$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, you may use this file under the terms of the BSD license -** as follows: -** -** "Redistribution and use in source and binary forms, with or without -** modification, are permitted provided that the following conditions are -** met: -** * Redistributions of source code must retain the above copyright -** notice, this list of conditions and the following disclaimer. -** * Redistributions in binary form must reproduce the above copyright -** notice, this list of conditions and the following disclaimer in -** the documentation and/or other materials provided with the -** distribution. -** * Neither the name of The Qt Company Ltd nor the names of its -** contributors may be used to endorse or promote products derived -** from this software without specific prior written permission. -** -** -** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - import QtQuick 2.1 import QtQuick.Controls 1.0 import QtQuick.Controls.Styles 1.0 import QtWebEngine 1.9 import QtQuick.Layouts 1.0 +import "../../../shared" +import "../../../shared/status" +import "../../../imports" Rectangle { id: downloadView - color: "lightgray" + color: Style.current.background function append(download) { downloadModel.append(download); downloadModel.downloads.push(download); } - Component { - id: downloadItemDelegate - - Rectangle { - width: listView.width - height: childrenRect.height - anchors.margins: 10 - radius: 3 - color: "transparent" - border.color: "black" - Rectangle { - id: progressBar - - property real progress: downloadModel.downloads[index] - ? downloadModel.downloads[index].receivedBytes / downloadModel.downloads[index].totalBytes : 0 - - radius: 3 - color: width == listView.width ? "green" : "#2b74c7" - width: listView.width * progress - height: cancelButton.height - - Behavior on width { - SmoothedAnimation { duration: 100 } - } - } - Rectangle { - anchors { - left: parent.left - right: parent.right - leftMargin: 20 - } - Label { - id: label - text: downloadDirectory + "/" + downloadFileName - anchors { - verticalCenter: cancelButton.verticalCenter - left: parent.left - right: cancelButton.left - } - } - Button { - id: cancelButton - anchors.right: parent.right - text: "X" - onClicked: { - var download = downloadModel.downloads[index]; - - download.cancel(); - - removeDownloadFromModel(index) - } - } - } + StatusIconButton { + id: closeBtn + anchors.top: parent.top + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + anchors.topMargin: Style.current.padding + icon.name: "browser/close" + iconColor: Style.current.textColor + onClicked: { + downloadView.visible = false } - } + ListView { id: listView anchors { - topMargin: 10 + topMargin: Style.current.bigPadding top: parent.top bottom: parent.bottom + bottomMargin: Style.current.bigPadding * 2 horizontalCenter: parent.horizontalCenter } - width: parent.width - 20 - spacing: 5 + width: 624 + spacing: Style.current.padding model: downloadModel - delegate: downloadItemDelegate - - Text { - visible: !listView.count - horizontalAlignment: Text.AlignHCenter - height: 30 - anchors { - top: parent.top - left: parent.left - right: parent.right - } - font.pixelSize: 20 - text: qsTr("No active downloads.") - } - - Rectangle { - color: "gray" - anchors { - bottom: parent.bottom - left: parent.left - right: parent.right - } - height: 30 - Button { - id: okButton - text: qsTr("OK") - anchors.centerIn: parent - onClicked: { - downloadView.visible = false; - } + delegate: Component { + DownloadElement { + width: parent.width } } } + + Text { + visible: !listView.count + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 15 + text: qsTr("Downloaded files will appear here.") + color: Style.current.secondaryText + } + + StatusButton { + text: qsTr("Close") + onClicked: { + downloadView.visible = false; + } + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: Style.current.padding + } }