qml/filebrowse/components/NotificationPanel.qml

   1 import QtQuick 2.0
   2 import Sailfish.Silica 1.0
   3
   4 // This component displays a notification panel at top of page
   5 Item {
   6     anchors.fill: parent
   7
   8     // reference to page to prevent back navigation (required)
   9     property Item page
  10
  11     // open status of the panel
  12     property alias open: dockedPanel.open
  13
  14     // shows the panel
  15     function showText(header, txt) {
  16         headerLabel.text = header;
  17         textLabel.text = txt;
  18         dockedPanel.show();
  19     }
  20
  21     // shows the panel, maximum 5 secs
  22     function showTextWithTimer(header, txt) {
  23         headerLabel.text = header;
  24         textLabel.text = txt;
  25         dockedPanel.show();
  26         timer.start();
  27     }
  28
  29     // hides the panel
  30     function hide() {
  31         timer.stop()
  32         dockedPanel.hide();
  33     }
  34
  35
  36     //// internal
  37
  38     InteractionBlocker {
  39         anchors.fill: parent
  40         visible: dockedPanel.open
  41         onClicked: {
  42             dockedPanel.hide();
  43             timer.stop();
  44         }
  45     }
  46
  47     DockedPanel {
  48         id: dockedPanel
  49
  50         width: parent.width
  51         height: Theme.itemSizeExtraLarge + Theme.paddingLarge
  52
  53         dock: Dock.Top
  54         open: false
  55         onOpenChanged: page.backNavigation = !open; // disable back navigation
  56
  57         Rectangle {
  58             anchors.fill: parent
  59             color: "black"
  60             opacity: 0.7
  61         }
  62         MouseArea {
  63             anchors.fill: parent
  64             enabled: true
  65             onClicked: {
  66                 dockedPanel.hide();
  67                 timer.stop();
  68             }
  69         }
  70         Label {
  71             id: headerLabel
  72             visible: dockedPanel.open
  73             anchors.left: parent.left
  74             anchors.right: parent.right
  75             anchors.top: parent.top
  76             anchors.leftMargin: Theme.paddingLarge
  77             anchors.rightMargin: Theme.paddingLarge
  78             anchors.topMargin: 40
  79             horizontalAlignment: Text.AlignHCenter
  80             text: ""
  81             wrapMode: Text.Wrap
  82             color: Theme.primaryColor
  83         }
  84         Label {
  85             id: textLabel
  86             visible: dockedPanel.open
  87             anchors.left: parent.left
  88             anchors.right: parent.right
  89             anchors.top: headerLabel.bottom
  90             anchors.leftMargin: Theme.paddingLarge
  91             anchors.rightMargin: Theme.paddingLarge
  92             horizontalAlignment: Text.AlignHCenter
  93             text: ""
  94             wrapMode: Text.Wrap
  95             font.pixelSize: Theme.fontSizeTiny
  96             color: Theme.primaryColor
  97         }
  98     }
  99
 100     // timer to auto-hide panel
 101     Timer {
 102         id: timer
 103         interval: 5000
 104         onTriggered: {
 105             dockedPanel.hide();
 106             stop();
 107         }
 108     }
 109 }