Unity 8
 All Classes Functions Properties
Panel.qml
1 /*
2  * Copyright (C) 2013 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.0
18 import Ubuntu.Components 0.1
19 import "../Components"
20 
21 Item {
22  id: root
23  readonly property real panelHeight: units.gu(3) + units.dp(2)
24  property real indicatorsMenuWidth: width
25  property alias indicators: indicatorsMenu
26  property bool fullscreenMode: false
27  property bool searchVisible: true
28 
29  readonly property real separatorLineHeight: leftSeparatorLine.height
30  readonly property real __panelMinusSeparatorLineHeight: panelHeight - separatorLineHeight
31 
32  signal searchClicked
33 
34  function hideIndicatorMenu(delay) {
35  if (delay !== undefined) {
36  hideTimer.interval = delay;
37  hideTimer.start();
38  } else {
39  indicatorsMenu.hide();
40  }
41  }
42 
43  Timer {
44  id: hideTimer
45  running: false
46  onTriggered: {
47  indicatorsMenu.hide();
48  }
49  }
50 
51  Connections {
52  target: indicatorsMenu
53  onShownChanged: hideTimer.stop()
54  }
55 
56  PanelBackground {
57  id: panelBackground
58  anchors {
59  left: parent.left
60  right: parent.right
61  }
62  height: __panelMinusSeparatorLineHeight
63  y: 0
64 
65  Behavior on y { StandardAnimation { duration: 500 } }
66  }
67 
68  PanelSeparatorLine {
69  id: leftSeparatorLine
70  anchors {
71  top: panelBackground.bottom
72  left: parent.left
73  right: indicatorsMenu.left
74  }
75  saturation: 1 - indicatorsMenu.unitProgress
76  }
77 
78  Rectangle {
79  id: darkenedArea
80  property real darkenedOpacity: 0.6
81  anchors {
82  left: parent.left
83  right: parent.right
84  top: panelBackground.bottom
85  bottom: parent.bottom
86  }
87  color: "black"
88  opacity: indicatorsMenu.unitProgress * darkenedOpacity
89  MouseArea {
90  anchors.fill: parent
91  enabled: indicatorsMenu.shown
92  onClicked: if (indicatorsMenu.fullyOpened) indicatorsMenu.hide();
93  }
94  }
95 
96  Indicators {
97  id: indicatorsMenu
98  objectName: "indicators"
99 
100  anchors.right: parent.right
101  y: panelBackground.y
102  width: root.indicatorsMenuWidth
103  shown: false
104  panelHeight: __panelMinusSeparatorLineHeight
105  openedHeight: parent.height + (pinnedMode ? 0 : root.panelHeight)
106  pinnedMode: !fullscreenMode
107  overFlowWidth: search.state=="hidden" ? parent.width : parent.width - search.width
108  }
109 
110  PanelSeparatorLine {
111  id: indicatorsSeparatorLine
112  visible: true
113  anchors {
114  left: indicatorsMenu.left
115  right: indicatorsMenu.right
116  }
117  y: indicatorsMenu.visualBottom
118  }
119 
120  BorderImage {
121  id: dropShadow
122  anchors {
123  top: indicators.top
124  bottom: indicatorsSeparatorLine.bottom
125  left: indicators.left
126  right: indicators.right
127  margins: -units.gu(1)
128  }
129  visible: indicatorsMenu.height > indicatorsMenu.panelHeight
130  source: "graphics/rectangular_dropshadow.sci"
131  }
132 
133  SearchIndicator {
134  id: search
135  objectName: "search"
136  enabled: root.searchVisible
137 
138  state: {
139  if (parent.width < indicatorsMenu.width + width) {
140  if (indicatorsMenu.state != "initial") {
141  return "hidden";
142  }
143  }
144  if (root.searchVisible && !indicatorsMenu.showAll) {
145  return "visible";
146  }
147 
148  return "hidden";
149  }
150 
151  height: __panelMinusSeparatorLineHeight
152  anchors {
153  top: panelBackground.top
154  left: panelBackground.left
155  }
156 
157  onClicked: root.searchClicked()
158  }
159 
160  states: [
161  State {
162  name: "in" //fully opaque and visible at top edge of screen
163  when: !fullscreenMode
164  PropertyChanges { target: panelBackground; y: 0 }
165  },
166  State {
167  name: "out" //pushed off screen
168  when: fullscreenMode
169  PropertyChanges { target: panelBackground; y: -panelHeight }
170  }
171  ]
172 }