Differential D3538 Diff 8666 src/controls/AbstractApplicationWindow.qml

Changeset View

Standalone View

View Options

src/controls/AbstractApplicationWindow.qml

Show All 12 Lines
13 * 13​ *
14 * You should have received a copy of the GNU Library General Public 14​ * You should have received a copy of the GNU Library General Public
15 * License along with this program; if not, write to the 15​ * License along with this program; if not, write to the
16 * Free Software Foundation, Inc., 16​ * Free Software Foundation, Inc.,
17 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 17​ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
18 */ 18​ */
19 19​
20import QtQuick 2.5 20​import QtQuick 2.5
21import QtQuick.Controls 1.3 as Controls 21​import QtQuick.Controls 2.0 as QQC2
22import "templates/private" 22​import "templates/private"
23import org.kde.kirigami 1.0 23​import org.kde.kirigami 2.0
24import QtGraphicalEffects 1.0 24​import QtGraphicalEffects 1.0
25 25​
26/** 26​/**
27 * A window that provides some basic features needed for all apps 27​ * A window that provides some basic features needed for all apps
28 * Use this class only if you need a custom content for your application, 28​ * Use this class only if you need a custom content for your application,
29 * different from the Page Row behavior recomended by the HIG and provided 29​ * different from the Page Row behavior recomended by the HIG and provided
30 * by ApplicationWindow. 30​ * by ApplicationWindow.
31 * It is recomended to use ApplicationWindow instead 31​ * It is recomended to use ApplicationWindow instead
32 * @see ApplicationWindow 32​ * @see ApplicationWindow
33 * 33​ *
34 * It's usually used as a root QML component for the application. 34​ * It's usually used as a root QML component for the application.
35 * It provides support for a central page stack, side drawers and 35​ * It provides support for a central page stack, side drawers and
36 * a top ApplicationHeader, as well as basic support for the 36​ * a top ApplicationHeader, as well as basic support for the
37 * Android back button 37​ * Android back button
38 * 38​ *
39 * Example usage: 39​ * Example usage:
40 * @code 40​ * @code
41 * import org.kde.kirigami 1.0 as Kirigami 41​ * import org.kde.kirigami 2.0 as Kirigami
42 * 42​ *
43 * Kirigami.ApplicationWindow { 43​ * Kirigami.ApplicationWindow {
44 * [...] 44​ * [...]
45 * globalDrawer: Kirigami.GlobalDrawer { 45​ * globalDrawer: Kirigami.GlobalDrawer {
46 * actions: [ 46​ * actions: [
47 * Kirigami.Action { 47​ * Kirigami.Action {
48 * text: "View" 48​ * text: "View"
49 * iconName: "view-list-icons" 49​ * iconName: "view-list-icons"
Show All 22 Lines
72 * ... 72​ * ...
73 * } 73​ * }
74 * [...] 74​ * [...]
75 * } 75​ * }
76 * @endcode 76​ * @endcode
77 * 77​ *
78 * @inherit QtQuick.Controls.ApplicationWindow 78​ * @inherit QtQuick.Controls.ApplicationWindow
79 */ 79​ */
80Controls.ApplicationWindow { 80​QQC2.ApplicationWindow {
81 id: root 81​ id: root
82 82​
83 /** 83​ /**
84 * pageStack: StackView 84​ * pageStack: StackView
85 * Readonly. 85​ * Readonly.
86 * The stack used to allocate the pages and to manage the transitions 86​ * The stack used to allocate the pages and to manage the transitions
87 * between them. 87​ * between them.
88 * Put a container here, such as QQuickControls PageStack 88​ * Put a container here, such as QQuickControls PageStack
Show All 9 Lines
98 * possible values: "short", "long" or the number of milliseconds 98​ * possible values: "short", "long" or the number of milliseconds
99 * @param actionText Text in the action button, if any. 99​ * @param actionText Text in the action button, if any.
100 * @param callBack A JavaScript function that will be executed when the 100​ * @param callBack A JavaScript function that will be executed when the
101 * user clicks the button. 101​ * user clicks the button.
102 */ 102​ */
103 function showPassiveNotification(message, timeout, actionText, callBack) { 103​ function showPassiveNotification(message, timeout, actionText, callBack) {
104 if (!internal.__passiveNotification) { 104​ if (!internal.__passiveNotification) {
105 var component = Qt.createComponent("templates/private/PassiveNotification.qml"); 105​ var component = Qt.createComponent("templates/private/PassiveNotification.qml");
106 internal.__passiveNotification = component.createObject(contentItem.parent); 106​ internal.__passiveNotification = component.createObject(overlay.parent);
107 } 107​ }
108 108​
109 internal.__passiveNotification.showNotification(message, timeout, actionText, callBack); 109​ internal.__passiveNotification.showNotification(message, timeout, actionText, callBack);
110 } 110​ }
111 111​
112 /** 112​ /**
113 * Hide the passive notification, if any is shown 113​ * Hide the passive notification, if any is shown
114 */ 114​ */
Show All 20 Lines130 /**
135 * the minimum, preferred and maximum heights of the item can be controlled with 135​ * the minimum, preferred and maximum heights of the item can be controlled with
136 * * Layout.minimumHeight: default is 0, i.e. hidden 136​ * * Layout.minimumHeight: default is 0, i.e. hidden
137 * * Layout.preferredHeight: default is Units.gridUnit * 1.6 137​ * * Layout.preferredHeight: default is Units.gridUnit * 1.6
138 * * Layout.maximumHeight: default is Units.gridUnit * 3 138​ * * Layout.maximumHeight: default is Units.gridUnit * 3
139 * 139​ *
140 * To achieve a titlebar that stays completely fixed just set the 3 sizes as the same 140​ * To achieve a titlebar that stays completely fixed just set the 3 sizes as the same
141 * //FIXME: this should become an actual ApplicationHeader 141​ * //FIXME: this should become an actual ApplicationHeader
142 */ 142​ */
143 property var header: undefined 143​ header: undefined
144 144​
145 /** 145​ /**
146 * controlsVisible: bool 146​ * controlsVisible: bool
147 * This property controls wether the standard chrome of the app, such 147​ * This property controls wether the standard chrome of the app, such
148 * as the Action button, the drawer handles and the application 148​ * as the Action button, the drawer handles and the application
149 * header should be visible or not. 149​ * header should be visible or not.
150 */ 150​ */
151 property bool controlsVisible: true 151​ property bool controlsVisible: true
152 152​
153 /** 153​ /**
154 * globalDrawer: AbstractDrawer 154​ * globalDrawer: OverlayDrawer
155 * The drawer for global actions, that will be opened by sliding from the 155​ * The drawer for global actions, that will be opened by sliding from the
156 * left screen edge or by dragging the ActionButton to the right. 156​ * left screen edge or by dragging the ActionButton to the right.
157 * It is recommended to use the GlobalDrawer class here 157​ * It is recommended to use the GlobalDrawer class here
158 */ 158​ */
159 property AbstractDrawer globalDrawer 159​ property OverlayDrawer globalDrawer
160 160​
161 /** 161​ /**
162 * wideScreen: bool 162​ * wideScreen: bool
163 * If true the application is considered to be in "widescreen" mode, such as on desktops or horizontal tablets. 163​ * If true the application is considered to be in "widescreen" mode, such as on desktops or horizontal tablets.
164 * Different styles can have an own logic for deciding this 164​ * Different styles can have an own logic for deciding this
165 */ 165​ */
166 property bool wideScreen: width >= Units.gridUnit * 60 166​ property bool wideScreen: width >= Units.gridUnit * 60
167 167​
168 /** 168​ /**
169 * contextDrawer: AbstractDrawer 169​ * contextDrawer: OverlayDrawer
170 * The drawer for context-dependednt actions, that will be opened by sliding from the 170​ * The drawer for context-dependednt actions, that will be opened by sliding from the
171 * right screen edge or by dragging the ActionButton to the left. 171​ * right screen edge or by dragging the ActionButton to the left.
172 * It is recommended to use the ContextDrawer class here. 172​ * It is recommended to use the ContextDrawer class here.
173 * The contents of the context drawer should depend from what page is 173​ * The contents of the context drawer should depend from what page is
174 * loaded in the main pageStack 174​ * loaded in the main pageStack
175 * 175​ *
176 * Example usage: 176​ * Example usage:
177 * @code 177​ * @code
178 * import org.kde.kirigami 1.0 as Kirigami 178​ * import org.kde.kirigami 2.0 as Kirigami
179 * 179​ *
180 * Kirigami.ApplicationWindow { 180​ * Kirigami.ApplicationWindow {
181 * [...] 181​ * [...]
182 * contextDrawer: Kirigami.ContextDrawer { 182​ * contextDrawer: Kirigami.ContextDrawer {
183 * id: contextDrawer 183​ * id: contextDrawer
184 * } 184​ * }
185 * [...] 185​ * [...]
186 * } 186​ * }
187 * @endcode 187​ * @endcode
188 * 188​ *
189 * @code 189​ * @code
190 * import org.kde.kirigami 1.0 as Kirigami 190​ * import org.kde.kirigami 2.0 as Kirigami
191 * 191​ *
192 * Kirigami.Page { 192​ * Kirigami.Page {
193 * [...] 193​ * [...]
194 * contextualActions: [ 194​ * contextualActions: [
195 * Kirigami.Action { 195​ * Kirigami.Action {
196 * iconName: "edit" 196​ * iconName: "edit"
197 * text: "Action text" 197​ * text: "Action text"
198 * onTriggered: { 198​ * onTriggered: {
Show All 10 Lines
209 * ] 209​ * ]
210 * [...] 210​ * [...]
211 * } 211​ * }
212 * @endcode 212​ * @endcode
213 * 213​ *
214 * When this page will be the current one, the context drawer will visualize 214​ * When this page will be the current one, the context drawer will visualize
215 * contextualActions defined as property in that page. 215​ * contextualActions defined as property in that page.
216 */ 216​ */
217 property AbstractDrawer contextDrawer 217​ property OverlayDrawer contextDrawer
218 218​
219 /** 219​ /**
220 * reachableMode: bool 220​ * reachableMode: bool
221 * When true the application is in reachable mode for single hand use. 221​ * When true the application is in reachable mode for single hand use.
222 * the whole content of the application is moved down the screen to be 222​ * the whole content of the application is moved down the screen to be
223 * reachable with the thumb. if wideScreen is true, tis property has 223​ * reachable with the thumb. if wideScreen is true, tis property has
224 * no effect. 224​ * no effect.
225 */ 225​ */
Show All 14 Lines238 Icon {
240 y: x 240​ y: x
241 width: Units.iconSizes.large 241​ width: Units.iconSizes.large
242 height: width 242​ height: width
243 source: "go-up" 243​ source: "go-up"
244 } 244​ }
245 } 245​ }
246 } 246​ }
247 247​
248​ contentItem.anchors.left: contentItem.parent.left
249​ contentItem.anchors.right: contentItem.parent.right
248 contentItem.anchors.topMargin: root.wideScreen && header && controlsVisible ? header.height : 0 250​ contentItem.anchors.topMargin: root.wideScreen && header && controlsVisible ? header.height : 0
249 contentItem.anchors.leftMargin: root.globalDrawer && (root.globalDrawer.modal === false) ? root.globalDrawer.contentItem.width * root.globalDrawer.position : 0 251​ contentItem.anchors.leftMargin: root.globalDrawer && (root.globalDrawer.modal === false) ? root.globalDrawer.contentItem.width * root.globalDrawer.position : 0
250 contentItem.anchors.rightMargin: root.contextDrawer && root.contextDrawer.modal === false ? root.contextDrawer.contentItem.width * root.contextDrawer.position : 0 252​ contentItem.anchors.rightMargin: root.contextDrawer && root.contextDrawer.modal === false ? root.contextDrawer.contentItem.width * root.contextDrawer.position : 0
251 contentItem.transform: Translate { 253​ contentItem.transform: Translate {
252 Behavior on y { 254​ Behavior on y {
253 NumberAnimation { 255​ NumberAnimation {
254 duration: Units.longDuration 256​ duration: Units.longDuration
255 easing.type: Easing.InOutQuad 257​ easing.type: Easing.InOutQuad
256 } 258​ }
257 } 259​ }
258 y: root.reachableMode && !root.wideScreen ? root.height/2 : 0 260​ y: root.reachableMode && !root.wideScreen ? root.height/2 : 0
259 x: root.globalDrawer && root.globalDrawer.modal === true && root.globalDrawer.toString().indexOf("SplitDrawer") === 0 ? root.globalDrawer.contentItem.width * root.globalDrawer.position : 0 261​ x: root.globalDrawer && root.globalDrawer.modal === true && root.globalDrawer.toString().indexOf("SplitDrawer") === 0 ? root.globalDrawer.contentItem.width * root.globalDrawer.position : 0
260 } 262​ }
261 //Don't want overscroll in landscape mode 263​ //Don't want overscroll in landscape mode
262 onWidthChanged: { 264​ onWidthChanged: {
263 if (width > height) { 265​ if (width > height) {
264 root.reachableMode = false; 266​ root.reachableMode = false;
265 } 267​ }
266 } 268​ }
267 269​
268 Binding { 270​ Binding {
269 when: globalDrawer !== undefined 271​ when: globalDrawer !== undefined && root.visible
270 target: globalDrawer 272​ target: globalDrawer
271 property: "parent" 273​ property: "parent"
272 value: contentItem.parent 274​ value: overlay
273 } 275​ }
274 Binding { 276​ Binding {
275 when: contextDrawer !== undefined 277​ when: contextDrawer !== undefined && root.visible
276 target: contextDrawer 278​ target: contextDrawer
277 property: "parent" 279​ property: "parent"
278 value: contentItem.parent 280​ value: overlay
279 } 281​ }
280 onPageStackChanged: pageStack.parent = contentItem; 282​ onPageStackChanged: pageStack.parent = contentItem;
281 283​
282 width: Units.gridUnit * 30 284​ width: Units.gridUnit * 30
283 height: Units.gridUnit * 45 285​ height: Units.gridUnit * 45
284 visible: true 286​ visible: true
285 287​
286 288​
Show All 10 Lines