Kirigami2

templates/OverlayDrawer.qml
1/*
2 * SPDX-FileCopyrightText: 2012 Marco Martin <mart@kde.org>
3 *
4 * SPDX-License-Identifier: LGPL-2.0-or-later
5 */
6
7import QtQuick
8import QtQuick.Templates as T
9import QtQuick.Controls as QQC2
10import org.kde.kirigami as Kirigami
11import "private" as KTP
12
13/**
14 * Overlay Drawers are used to expose additional UI elements needed for
15 * small secondary tasks for which the main UI elements are not needed.
16 * For example in Okular Mobile, an Overlay Drawer is used to display
17 * thumbnails of all pages within a document along with a search field.
18 * This is used for the distinct task of navigating to another page.
19 *
20 * @inherit QtQuick.Controls.Drawer
21 */
22T.Drawer {
23 id: root
24
25//BEGIN properties
26 /**
27 * @brief This property tells whether the drawer is open and visible.
28 *
29 * default: ``false``
30 */
31 property bool drawerOpen: false
32
33 /**
34 * @brief This property tells whether the drawer is in a state between open
35 * and closed.
36 *
37 * The drawer is visible but not completely open. This is usually the case when
38 * the user is dragging the drawer from a screen edge, so the user is "peeking"
39 * at what's in the drawer.
40 *
41 * default: ``false``
42 */
43 property bool peeking: false
44
45 /**
46 * @brief This property tells whether the drawer is currently opening or closing itself.
47 */
48 readonly property bool animating : enterAnimation.animating || exitAnimation.animating || positionResetAnim.running
49
50 /**
51 * @brief This property holds whether the drawer can be collapsed to a
52 * very thin, usually icon only sidebar.
53 *
54 * Only modal drawers are collapsible. Collapsible is not supported in
55 * the mobile mode.
56 *
57 * @since 2.5
58 */
59 property bool collapsible: false
60
61 /**
62 * @brief This property tells whether the drawer is collapsed to a
63 * very thin sidebar, usually icon only.
64 *
65 * When true, the drawer will be collapsed to a very thin sidebar,
66 * usually icon only.
67 *
68 * default: ``false``
69 *
70 * @see collapsible Only collapsible drawers can be collapsed.
71 */
72 property bool collapsed: false
73
74 /**
75 * @brief This property holds the size of the collapsed drawer.
76 *
77 * For vertical drawers this will be the width of the drawer and for horizontal
78 * drawers this will be the height of the drawer.
79 *
80 * default: ``Units.iconSizes.medium``, just enough to accommodate medium sized icons
81 */
82 property int collapsedSize: Kirigami.Units.iconSizes.medium
83
84 /**
85 * @brief This property holds the options for handle's open icon.
86 *
87 * This is a grouped property with following components:
88 *
89 * * ``source: var``: The name of a freedesktop-compatible icon.
90 * * ``color: color``: An optional tint color for the icon.
91 *
92 * If no custom icon is set, a menu icon is shown for the application globalDrawer
93 * and an overflow menu icon is shown for the contextDrawer.
94 * That's the default for the GlobalDrawer and ContextDrawer components respectively.
95 *
96 * For OverlayDrawer the default is view-right-close or view-left-close depending on
97 * the drawer location
98 *
99 * @since 2.5
100 */
101 readonly property KTP.IconPropertiesGroup handleOpenIcon: KTP.IconPropertiesGroup {
102 source: root.edge === Qt.RightEdge ? "view-right-close" : "view-left-close"
103 }
104
105 /**
106 * @brief This property holds the options for the handle's close icon.
107 *
108 * This is a grouped property with the following components:
109 * * ``source: var``: The name of a freedesktop-compatible icon.
110 * * ``color: color``: An optional tint color for the icon.
111 *
112 * If no custom icon is set, an X icon is shown,
113 * which will morph into the Menu or overflow icons.
114 *
115 * For OverlayDrawer the default is view-right-new or view-left-new depending on
116 * the drawer location.
118 * @since 2.5
119 */
120 property KTP.IconPropertiesGroup handleClosedIcon: KTP.IconPropertiesGroup {
121 source: root.edge === Qt.RightEdge ? "view-right-new" : "view-left-new"
123
124 /**
125 * @brief This property holds the tooltip displayed when the drawer is open.
126 * @since 2.15
127 */
128 property string handleOpenToolTip: qsTr("Close drawer")
130 /**
131 * @brief This property holds the tooltip displayed when the drawer is closed.
132 * @since 2.15
133 */
134 property string handleClosedToolTip: qsTr("Open drawer")
135
136 /**
137 * @brief This property holds whether the handle is visible, to make opening the
138 * drawer easier.
139 *
140 * Currently supported only on left and right drawers.
141 */
142 property bool handleVisible: {
143 if (typeof applicationWindow === "function") {
144 const w = applicationWindow();
145 if (w) {
146 return w.controlsVisible;
147 }
148 }
149 // For a generic-purpose OverlayDrawer its handle is visible by default
150 return true;
151 }
152
153 /**
154 * @brief Readonly property that points to the item that will act as a physical
155 * handle for the Drawer.
156 * @property MouseArea handle
157 **/
158 readonly property Item handle: KTP.DrawerHandle {
159 drawer: root
160 }
161//END properties
162
163 interactive: modal
164
165 z: Kirigami.OverlayZStacking.z
166
167 Kirigami.Theme.inherit: false
168 Kirigami.Theme.colorSet: modal ? Kirigami.Theme.View : Kirigami.Theme.Window
169 Kirigami.Theme.onColorSetChanged: {
170 contentItem.Kirigami.Theme.colorSet = Kirigami.Theme.colorSet
171 background.Kirigami.Theme.colorSet = Kirigami.Theme.colorSet
172 }
173
174//BEGIN reassign properties
175 //default paddings
176 leftPadding: Kirigami.Units.smallSpacing
177 topPadding: Kirigami.Units.smallSpacing
178 rightPadding: Kirigami.Units.smallSpacing
179 bottomPadding: Kirigami.Units.smallSpacing
180
181 y: modal ? 0 : ((T.ApplicationWindow.menuBar ? T.ApplicationWindow.menuBar.height : 0) + (T.ApplicationWindow.header ? T.ApplicationWindow.header.height : 0))
182
183 height: parent && (root.edge === Qt.LeftEdge || root.edge === Qt.RightEdge) ? (modal ? parent.height : (parent.height - y - (T.ApplicationWindow.footer ? T.ApplicationWindow.footer.height : 0))) : implicitHeight
184
185 parent: modal || edge === Qt.LeftEdge || edge === Qt.RightEdge ? T.ApplicationWindow.overlay : T.ApplicationWindow.contentItem
186
187 edge: Qt.LeftEdge
188 modal: true
189 dim: modal
190 QQC2.Overlay.modal: Rectangle {
191 color: Qt.rgba(0, 0, 0, 0.35)
192 }
193
194 dragMargin: enabled && (edge === Qt.LeftEdge || edge === Qt.RightEdge) ? Math.min(Kirigami.Units.gridUnit, Qt.styleHints.startDragDistance) : 0
195
196 contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
197 contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
198
199 implicitWidth: contentWidth + leftPadding + rightPadding
200 implicitHeight: contentHeight + topPadding + bottomPadding
201
202 enter: Transition {
203 SequentialAnimation {
204 id: enterAnimation
205 /* NOTE: why this? the running status of the enter transition is not relaible and
206 * the SmoothedAnimation is always marked as non running,
207 * so the only way to get to a reliable animating status is with this
208 */
209 property bool animating
210 ScriptAction {
211 script: {
212 enterAnimation.animating = true
213 // on non modal dialog we don't want drawers in the overlay
214 if (!root.modal) {
215 root.background.parent.parent = applicationWindow().overlay.parent
216 }
217 }
218 }
219 SmoothedAnimation {
220 velocity: 5
221 }
222 ScriptAction {
223 script: enterAnimation.animating = false
224 }
225 }
226 }
227
228 exit: Transition {
229 SequentialAnimation {
230 id: exitAnimation
231 property bool animating
232 ScriptAction {
233 script: exitAnimation.animating = true
234 }
235 SmoothedAnimation {
236 velocity: 5
237 }
238 ScriptAction {
239 script: exitAnimation.animating = false
240 }
241 }
242 }
243//END reassign properties
244
245
246//BEGIN signal handlers
247 onCollapsedChanged: {
248 if (Kirigami.Settings.isMobile) {
249 collapsed = false;
250 }
251 if (!__internal.completed) {
252 return;
253 }
254 if ((!collapsible || modal) && collapsed) {
255 collapsed = true;
256 }
257 }
258 onCollapsibleChanged: {
259 if (Kirigami.Settings.isMobile) {
260 collapsible = false;
261 }
262 if (!__internal.completed) {
263 return;
264 }
265 if (!collapsible) {
266 collapsed = false;
267 } else if (modal) {
268 collapsible = false;
269 }
270 }
271 onModalChanged: {
272 if (!__internal.completed) {
273 return;
274 }
275 if (modal) {
276 collapsible = false;
277 }
278 }
279
280 onPositionChanged: {
281 if (peeking) {
282 visible = true
283 }
284 }
285 onVisibleChanged: {
286 if (peeking) {
287 visible = true
288 } else {
289 drawerOpen = visible;
290 }
291 }
292 onPeekingChanged: {
293 if (peeking) {
294 root.enter.enabled = false;
295 root.exit.enabled = false;
296 } else {
297 drawerOpen = position > 0.5 ? 1 : 0;
298 positionResetAnim.running = true
299 root.enter.enabled = true;
300 root.exit.enabled = true;
301 }
302 }
303 onDrawerOpenChanged: {
304 // sync this property only when the component is properly loaded
305 if (!__internal.completed) {
306 return;
307 }
308 positionResetAnim.running = false;
309 if (drawerOpen) {
310 open();
311 } else {
312 close();
313 }
314 Qt.callLater(() => root.handle.displayToolTip = true)
315 }
316
317 Component.onCompleted: {
318 // if defined as drawerOpen by default in QML, don't animate
319 if (root.drawerOpen) {
320 root.enter.enabled = false;
321 root.visible = true;
322 root.position = 1;
323 root.enter.enabled = true;
324 }
325 __internal.completed = true;
326 contentItem.Kirigami.Theme.colorSet = Kirigami.Theme.colorSet;
327 background.Kirigami.Theme.colorSet = Kirigami.Theme.colorSet;
328 }
329//END signal handlers
330
331 // this is as hidden as it can get here
332 property QtObject __internal: QtObject {
333 //here in order to not be accessible from outside
334 property bool completed: false
335 property SequentialAnimation positionResetAnim: SequentialAnimation {
336 id: positionResetAnim
337 property alias to: internalAnim.to
338 NumberAnimation {
339 id: internalAnim
340 target: root
341 to: drawerOpen ? 1 : 0
342 property: "position"
343 duration: (root.position)*Kirigami.Units.longDuration
344 }
345 ScriptAction {
346 script: {
347 root.drawerOpen = internalAnim.to !== 0;
348 }
349 }
350 }
351 readonly property Item statesItem: Item {
352 states: [
353 State {
354 when: root.collapsed
355 PropertyChanges {
356 target: root
357 implicitWidth: edge === Qt.TopEdge || edge === Qt.BottomEdge ? applicationWindow().width : Math.min(collapsedSize + leftPadding + rightPadding, Math.round(applicationWindow().width*0.8))
358
359 implicitHeight: edge === Qt.LeftEdge || edge === Qt.RightEdge ? applicationWindow().height : Math.min(collapsedSize + topPadding + bottomPadding, Math.round(applicationWindow().height*0.8))
360 }
361 },
362 State {
363 when: !root.collapsed
364 PropertyChanges {
365 target: root
366 implicitWidth: edge === Qt.TopEdge || edge === Qt.BottomEdge ? applicationWindow().width : Math.min(contentItem.implicitWidth, Math.round(applicationWindow().width*0.8))
367
368 implicitHeight: edge === Qt.LeftEdge || edge === Qt.RightEdge ? applicationWindow().height : Math.min(contentHeight + topPadding + bottomPadding, Math.round(applicationWindow().height*0.4))
369
370 contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
371 contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
372 }
373 }
374 ]
375 transitions: Transition {
376 reversible: true
377 NumberAnimation {
378 properties: root.edge === Qt.TopEdge || root.edge === Qt.BottomEdge ? "implicitHeight" : "implicitWidth"
379 duration: Kirigami.Units.longDuration
380 easing.type: Easing.InOutQuad
381 }
382 }
383 }
384 }
385}
Type type(const QSqlDatabase &db)
KGuiItem properties()
const QList< QKeySequence > & close()
const QList< QKeySequence > & open()
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Jul 12 2024 12:00:02 by doxygen 1.11.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.