Integrated file selection dialogue with the main code. Improved the

[openvpnui.git] / qml / filebrowse / components / ProgressPanel.qml

diff --git a/qml/filebrowse/components/ProgressPanel.qml b/qml/filebrowse/components/ProgressPanel.qml
new file mode 100644 (file)
index 0000000..13b31aa
--- /dev/null
+++ b/qml/filebrowse/components/ProgressPanel.qml
@@ -0,0 +1,112 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+// This component displays a progress panel at top of page and blocks all interactions under it
+Item {
+    id: progressPanel
+    anchors.fill: parent
+
+    // reference to page to prevent back navigation (required)
+    property Item page
+
+    // large text displayed on panel
+    property string headerText: ""
+
+    // small text displayed on panel
+    property string text: ""
+
+    // open status of the panel
+    property alias open: dockedPanel.open
+
+    // shows the panel
+    function showText(txt) {
+        headerText = txt;
+        text = "";
+        dockedPanel.show();
+    }
+
+    // hides the panel
+    function hide() {
+        dockedPanel.hide();
+    }
+
+    // cancelled signal is emitted when user presses the cancel button
+    signal cancelled
+
+
+    //// internal
+
+    InteractionBlocker {
+        anchors.fill: parent
+        visible: dockedPanel.open
+    }
+
+    DockedPanel {
+        id: dockedPanel
+
+        width: parent.width
+        height: Theme.itemSizeExtraLarge + Theme.paddingLarge
+
+        dock: Dock.Top
+        open: false
+        onOpenChanged: page.backNavigation = !open; // disable back navigation
+
+        Rectangle {
+            anchors.fill: parent
+            color: "black"
+            opacity: 0.7
+        }
+        BusyIndicator {
+            id: progressBusy
+            anchors.right: progressHeader.left
+            anchors.rightMargin: Theme.paddingLarge
+            anchors.verticalCenter: parent.verticalCenter
+            running: true
+            size: BusyIndicatorSize.Small
+        }
+        Rectangle {
+            id: cancelButton
+            anchors.right: parent.right
+            width: 100
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            color: cancelMouseArea.pressed ? Theme.secondaryHighlightColor : "transparent"
+
+            MouseArea {
+                id: cancelMouseArea
+                anchors.fill: parent
+                onClicked: cancelled();
+                enabled: true
+                Text {
+                    anchors.centerIn: parent
+                    color: Theme.primaryColor
+                    text: "X"
+                }
+            }
+        }
+        Label {
+            id: progressHeader
+            visible: dockedPanel.open
+            anchors.left: parent.left
+            anchors.right: cancelButton.left
+            anchors.top: parent.top
+            anchors.topMargin: 40
+            anchors.leftMargin: progressBusy.width + Theme.paddingLarge*4
+            anchors.rightMargin: Theme.paddingLarge
+            text: progressPanel.headerText
+            color: Theme.primaryColor
+        }
+        Label {
+            id: progressText
+            visible: dockedPanel.open
+            anchors.left: progressHeader.left
+            anchors.right: cancelButton.left
+            anchors.rightMargin: Theme.paddingLarge
+            anchors.top: progressHeader.bottom
+            text: progressPanel.text
+            wrapMode: Text.Wrap
+            font.pixelSize: Theme.fontSizeTiny
+            color: Theme.primaryColor
+        }
+    }
+}