qml/filebrowse/components/ProgressPanel.qml

   1 import QtQuick 2.0
   2 import Sailfish.Silica 1.0
   3
   4 // This component displays a progress panel at top of page and blocks all interactions under it
   5 Item {
   6     id: progressPanel
   7     anchors.fill: parent
   8
   9     // reference to page to prevent back navigation (required)
  10     property Item page
  11
  12     // large text displayed on panel
  13     property string headerText: ""
  14
  15     // small text displayed on panel
  16     property string text: ""
  17
  18     // open status of the panel
  19     property alias open: dockedPanel.open
  20
  21     // shows the panel
  22     function showText(txt) {
  23         headerText = txt;
  24         text = "";
  25         dockedPanel.show();
  26     }
  27
  28     // hides the panel
  29     function hide() {
  30         dockedPanel.hide();
  31     }
  32
  33     // cancelled signal is emitted when user presses the cancel button
  34     signal cancelled
  35
  36
  37     //// internal
  38
  39     InteractionBlocker {
  40         anchors.fill: parent
  41         visible: dockedPanel.open
  42     }
  43
  44     DockedPanel {
  45         id: dockedPanel
  46
  47         width: parent.width
  48         height: Theme.itemSizeExtraLarge + Theme.paddingLarge
  49
  50         dock: Dock.Top
  51         open: false
  52         onOpenChanged: page.backNavigation = !open; // disable back navigation
  53
  54         Rectangle {
  55             anchors.fill: parent
  56             color: "black"
  57             opacity: 0.7
  58         }
  59         BusyIndicator {
  60             id: progressBusy
  61             anchors.right: progressHeader.left
  62             anchors.rightMargin: Theme.paddingLarge
  63             anchors.verticalCenter: parent.verticalCenter
  64             running: true
  65             size: BusyIndicatorSize.Small
  66         }
  67         Rectangle {
  68             id: cancelButton
  69             anchors.right: parent.right
  70             width: 100
  71             anchors.top: parent.top
  72             anchors.bottom: parent.bottom
  73             color: cancelMouseArea.pressed ? Theme.secondaryHighlightColor : "transparent"
  74
  75             MouseArea {
  76                 id: cancelMouseArea
  77                 anchors.fill: parent
  78                 onClicked: cancelled();
  79                 enabled: true
  80                 Text {
  81                     anchors.centerIn: parent
  82                     color: Theme.primaryColor
  83                     text: "X"
  84                 }
  85             }
  86         }
  87         Label {
  88             id: progressHeader
  89             visible: dockedPanel.open
  90             anchors.left: parent.left
  91             anchors.right: cancelButton.left
  92             anchors.top: parent.top
  93             anchors.topMargin: 40
  94             anchors.leftMargin: progressBusy.width + Theme.paddingLarge*4
  95             anchors.rightMargin: Theme.paddingLarge
  96             text: progressPanel.headerText
  97             color: Theme.primaryColor
  98         }
  99         Label {
 100             id: progressText
 101             visible: dockedPanel.open
 102             anchors.left: progressHeader.left
 103             anchors.right: cancelButton.left
 104             anchors.rightMargin: Theme.paddingLarge
 105             anchors.top: progressHeader.bottom
 106             text: progressPanel.text
 107             wrapMode: Text.Wrap
 108             font.pixelSize: Theme.fontSizeTiny
 109             color: Theme.primaryColor
 110         }
 111     }
 112 }