Kirigami2

AbstractApplicationWindow.qml
1 /*
2  * SPDX-FileCopyrightText: 2015 Marco Martin <[email protected]>
3  *
4  * SPDX-License-Identifier: LGPL-2.0-or-later
5  */
6 
7 import QtQuick 2.12
8 import QtQml 2.15
9 import QtQuick.Controls 2.0 as QQC2
10 import QtQuick.Window 2.5
11 import org.kde.kirigami 2.4 as Kirigami
12 import "templates/private" as TP
13 /**
14  * @brief A window that provides some basic features needed for all apps.
15  *
16  * An abstract application window is a top-level component that provides
17  * several utilities for convenience such as:
18  * * ::applicationWindow()
19  * * ::globalDrawer
20  * * ::pageStack
21  * * ::wideScreen
22  *
23  * Use this class only if you need custom content for your application that is
24  * different from the PageRow behavior recommended by the HIG and provided
25  * by kirigami::AbstractApplicationWindow.
26  *
27  * Example usage:
28  * @code{.qml}
29  * import org.kde.kirigami 2.4 as Kirigami
30  *
31  * Kirigami.ApplicationWindow {
32  * [...]
33  * globalDrawer: Kirigami.GlobalDrawer {
34  * actions: [
35  * Kirigami.Action {
36  * text: "View"
37  * icon.name: "view-list-icons"
38  * Kirigami.Action {
39  * text: "action 1"
40  * }
41  * Kirigami.Action {
42  * text: "action 2"
43  * }
44  * Kirigami.Action {
45  * text: "action 3"
46  * }
47  * },
48  * Kirigami.Action {
49  * text: "Sync"
50  * icon.name: "folder-sync"
51  * }
52  * ]
53  * }
54  *
55  * contextDrawer: Kirigami.ContextDrawer {
56  * id: contextDrawer
57  * }
58  *
59  * pageStack.initialPage: Kirigami.Page {
60  * actions.contextualActions: [
61  * Kirigami.Action {
62  * text: "context action 1"
63  * },
64  * Kirigami.Action {
65  * text: "context action 2"
66  * },
67  * Kirigami.Action {
68  * text: "context action 3"
69  * }
70  * ]
71  * }
72  * [...]
73  * }
74  * @endcode
75  * @inherit QtQuick.Controls.ApplicationWindow
76  */
77 QQC2.ApplicationWindow {
78  id: root
79 
80 //BEGIN properties
81  /**
82  * @brief This property holds the stack used to allocate the pages and to
83  * manage the transitions between them.
84  *
85  * Put a container here, such as QtQuick.Controls.StackView or PageRow.
86  */
87  property Item pageStack
88 
89  /**
90  * @brief This property sets whether the standard chrome of the app is
91  * visible.
92  *
93  * These are the action button, the drawer handles, and the application
94  * header.
95  *
96  * default: ``true``
97  */
98  property bool controlsVisible: true
99 
100  /**
101  * @brief This property holds the drawer for global actions.
102  *
103  * This drawer can be opened by sliding from the left screen edge
104  * or by either pressing on the handle or sliding it to the right.
105  *
106  * @note It is recommended to use the GlobalDrawer here.
107  * @property kirigami::OverlayDrawer globalDrawer
108  */
109  property OverlayDrawer globalDrawer
110 
111  /**
112  * @brief This property specifies whether the application is in "widescreen" mode.
113  *
114  * This is enabled on desktops or horizontal tablets.
115  *
116  * @note Different styles can have their own logic for deciding this.
117  */
118  property bool wideScreen: width >= Kirigami.Units.gridUnit * 60
119 
120  /**
121  * @brief This property holds the drawer for context-dependent actions.
122  *
123  * The drawer that will be opened by sliding from the right screen edge
124  * or by dragging the ActionButton to the left.
125  *
126  * @note It is recommended to use the ContextDrawer class here.
127  *
128  * The context drawer will display the previously defined contextual
129  * actions of the page that is currently active in the pageStack.
130  *
131  * Example usage:
132  * @code{.qml}
133  * import org.kde.kirigami 2.4 as Kirigami
134  *
135  * Kirigami.ApplicationWindow {
136  * [...]
137  * contextDrawer: Kirigami.ContextDrawer {
138  * id: contextDrawer
139  * }
140  * [...]
141  * }
142  * @endcode
143  *
144  * @code{.qml}
145  * import org.kde.kirigami 2.4 as Kirigami
146  *
147  * Kirigami.Page {
148  * [...]
149  * // setting the contextual actions
150  * actions.contextualActions: [
151  * Kirigami.Action {
152  * icon.name: "edit"
153  * text: "Action text"
154  * onTriggered: {
155  * // do stuff
156  * }
157  * },
158  * Kirigami.Action {
159  * icon.name: "edit"
160  * text: "Action text"
161  * onTriggered: {
162  * // do stuff
163  * }
164  * }
165  * ]
166  * [...]
167  * }
168  * @endcode
169  *
170  * @property kirigami::ContextDrawer contextDrawer
171  */
172  property OverlayDrawer contextDrawer
173 
174  /**
175  * @brief This property specifies whether the application is in reachable
176  * mode for single hand use.
177  *
178  * The whole content of the application is moved down the screen to be
179  * reachable with the thumb. If wideScreen is true, or reachableModeEnabled
180  * is false, this property has no effect.
181  *
182  * @warning This property should be treated as readonly. Use
183  * ``reachableModeEnabled`` instead.
184  *
185  * default: ``false``
186  */
187  property bool reachableMode: false
188 
189  /**
190  * @brief This property sets whether reachable mode can be used.
191  */
192  property bool reachableModeEnabled: true
193 
194  /**
195  * @brief This property holds a Kirigami action that will quit the
196  * application when triggered.
197  *
198  * @since KDE Frameworks 5.76
199  */
200  readonly property Kirigami.Action quitAction: Kirigami.Action {
201  text: qsTr("Quit")
202  icon.name: "application-exit";
203  shortcut: StandardKey.Quit
204  onTriggered: source => root.close();
205  }
206 //END properties
207 
208 //BEGIN functions
209  /**
210  * @brief This function shows a passive notification at the bottom of the
211  * app window lasting for few seconds, with an optional action button.
212  *
213  * @param message Notification's text message that is shown to the user.
214  * @param timeout Notification's visibility duration. Possible values are:
215  * "short", "long" or the number of milliseconds. Default is ``7000``.
216  * @param actionText Notification's action button's text.
217  * @param callBack A JavaScript function that will be executed when the user
218  * clicks the button.
219  */
220  function showPassiveNotification(message, timeout, actionText, callBack) {
221  notificationsObject.showNotification(message, timeout, actionText, callBack);
222  }
223 
224  /**
225  * @brief This function hides the passive notification at specified index,
226  * if any is shown.
227  *
228  * @param index Index of the notification to hide. Default is 0
229  * (oldest notification).
230  */
231  function hidePassiveNotification(index = 0) {
232  notificationsObject.hideNotification(index);
233  }
234 
235  /**
236  * @brief This property returns a pointer
237  * to the main instance of AbstractApplicationWindow.
238  *
239  * This is available to any children of this window,
240  * including those instantiated from separate QML files,
241  * making interoperation with multiple files easier.
242  *
243  * Use this whenever you need access to properties
244  * that are available to the main AbstractApplicationWindow,
245  * such as its ::pageStack or ::globalDrawer.
246  *
247  * @see AbstractApplicationItem::applicationWindow()
248  * @returns a pointer to the instantiated AbstractApplicationWindow.
249  */
250  function applicationWindow() {
251  return root;
252  }
253 //END functions
254 
255  LayoutMirroring.enabled: Qt.application.layoutDirection === Qt.RightToLeft
256  LayoutMirroring.childrenInherit: true
257 
258  color: Kirigami.Theme.backgroundColor
259 
260  TP.PassiveNotificationsManager {
261  id: notificationsObject
262  anchors.bottom: parent.bottom
263  anchors.horizontalCenter: parent.horizontalCenter
264  z: 1
265  }
266 
267  MouseArea {
268  parent: contentItem.parent
269  z: 0
270  anchors.fill: parent
271  onClicked: mouse => {
272  root.reachableMode = false;
273  }
274  visible: root.reachableMode && root.reachableModeEnabled
275  Rectangle {
276  anchors.fill: parent
277  color: Qt.rgba(0, 0, 0, 0.3)
278  opacity: 0.15
279  Kirigami.Icon {
280  anchors.horizontalCenter: parent.horizontalCenter
281  y: x
282  width: Kirigami.Units.iconSizes.large
283  height: width
284  source: "go-up"
285  }
286  }
287  }
288 
289  contentItem.z: 1
290  contentItem.anchors.left: contentItem.parent.left
291  contentItem.anchors.right: contentItem.parent.right
292  contentItem.anchors.topMargin: root.wideScreen && header && controlsVisible ? header.height : 0
293  contentItem.anchors.leftMargin: root.globalDrawer && root.globalDrawer.modal === false && (!root.pageStack || root.pageStack.leftSidebar !== root.globalDrawer) ? root.globalDrawer.width * root.globalDrawer.position : 0
294  contentItem.anchors.rightMargin: root.contextDrawer && root.contextDrawer.modal === false ? root.contextDrawer.width * root.contextDrawer.position : 0
295 
296  Binding {
297  when: menuBar !== undefined
298  target: menuBar
299  property: "x"
300  value: -contentItem.x
301  restoreMode: Binding.RestoreBinding
302  }
303  Binding {
304  when: header !== undefined
305  target: header
306  property: "x"
307  value: -contentItem.x
308  restoreMode: Binding.RestoreBinding
309  }
310  Binding {
311  when: footer !== undefined
312  target: footer
313  property: "x"
314  value: -contentItem.x
315  restoreMode: Binding.RestoreBinding
316  }
317 
318  contentItem.transform: Translate {
319  Behavior on y {
320  NumberAnimation {
321  duration: Kirigami.Units.longDuration
322  easing.type: Easing.InOutQuad
323  }
324  }
325  y: root.reachableMode && root.reachableModeEnabled && !root.wideScreen ? root.height/2 : 0
326  x: root.globalDrawer && root.globalDrawer.modal === true && root.globalDrawer.toString().indexOf("SplitDrawer") === 0 ? root.globalDrawer.contentItem.width * root.globalDrawer.position : 0
327  }
328  //Don't want overscroll in landscape mode
329  onWidthChanged: {
330  if (width > height) {
331  root.reachableMode = false;
332  }
333  }
334  Binding {
335  when: globalDrawer !== undefined && root.visible
336  target: globalDrawer
337  property: "parent"
338  value: overlay
339  restoreMode: Binding.RestoreBinding
340  }
341  Binding {
342  when: contextDrawer !== undefined && root.visible
343  target: contextDrawer
344  property: "parent"
345  value: overlay
346  restoreMode: Binding.RestoreBinding
347  }
348  onPageStackChanged: pageStack.parent = contentItem;
349 
350  width: Kirigami.Settings.isMobile ? Kirigami.Units.gridUnit * 30 : Kirigami.Units.gridUnit * 55
351  height: Kirigami.Settings.isMobile ? Kirigami.Units.gridUnit * 45 : Kirigami.Units.gridUnit * 40
352  visible: true
353 
354  Component.onCompleted: {
355  // Explicitly break the binding as we need this to be set only at startup.
356  // if the bindings are active, after this the window is resized by the
357  // compositor and then the bindings are reevaluated, then the window
358  // size would reset ignoring what the compositor asked.
359  // see BUG 433849
360  root.width = root.width;
361  root.height = root.height;
362  }
363 
364  // This is needed because discover in mobile mode does not
365  // close with the global drawer open.
366  Shortcut {
367  sequence: root.quitAction.shortcut
368  context: Qt.ApplicationShortcut
369  onActivated: root.close();
370  }
371 }
Overlay drawers are used to expose additional UI elements needed for small secondary tasks for which ...
QString message
This file is part of the KDE documentation.
Documentation copyright © 1996-2023 The KDE developers.
Generated on Thu Nov 30 2023 04:01:10 by doxygen 1.8.17 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.