templates/Page.qml

   1 import QtQuick
   2
   3 import tlb
   4
   5 /*
   6  * This template is a full page in the system. Contains:
   7  *  - HEADER
   8  *  - CONTENT
   9  *  - FOOTER
  10  */
  11
  12 Rectangle {
  13     id: root
  14
  15     border {
  16         color: "blue"
  17         width: 1
  18     }
  19
  20     /* HEADER */
  21     Item {
  22         id: header
  23         anchors {
  24             left: root.left
  25             right: root.right
  26             top: root.top
  27         }
  28         height: 30
  29
  30         Text {
  31             anchors.centerIn: header
  32             text: "Tom's Podcasts"
  33         }
  34     }
  35
  36     property alias pageTitle: pageName.text
  37     Text {
  38         id: pageName
  39         anchors {
  40             verticalCenter: header.verticalCenter
  41             left: parent.left
  42             leftMargin: 10
  43         }
  44     }
  45
  46     /* something just so there is a transition */
  47     Rectangle {
  48         id: sep
  49         height: 2
  50         width: root.width
  51         anchors {
  52             top: header.bottom
  53         }
  54         border {
  55             color: "black"
  56             width: 1
  57         }
  58     }
  59
  60     /* CONTENT */
  61     property alias content: load.sourceComponent
  62     Loader {
  63         id: load
  64         sourceComponent: undefined
  65
  66         anchors {
  67             top: sep.bottom
  68             bottom: footer.top
  69             left: root.left
  70             right: root.right
  71         }
  72     }
  73
  74     /* FOOTER */
  75     Item {
  76         id: footer
  77
  78         anchors {
  79             bottom: root.bottom
  80             left: root.left
  81             right: root.right
  82         }
  83
  84         height: 30
  85
  86         Rectangle {
  87             height: footer.height
  88             width: 140
  89
  90             anchors {
  91                 right: middle.left
  92                 rightMargin: 15
  93             }
  94             color: "black"
  95
  96             MouseArea {
  97                 anchors.fill: parent
  98                 onClicked: {
  99                     AppManager.requestBack()
 100                 }
 101             }
 102         }
 103
 104         Rectangle {
 105             id: middle
 106             height: footer.height
 107             width: 140
 108
 109             visible: false
 110
 111             anchors {
 112                 horizontalCenter: footer.horizontalCenter
 113             }
 114             color: "gold"
 115         }
 116
 117         Rectangle {
 118             height: footer.height
 119             width: 140
 120
 121             visible: false
 122
 123             anchors {
 124                 left: middle.right
 125                 leftMargin: 15
 126             }
 127             color: "red"
 128         }
 129     }
 130 }