MauiKit Controls

SideBar.qml
1/*
2 * Copyright 2018 Camilo Higuita <milo.h@aol.com>
3 *
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU Library General Public License as
6 * published by the Free Software Foundation; either version 2, or
7 * (at your option) any later version.
8 *
9 * This program is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details
13 *
14 * You should have received a copy of the GNU Library General Public
15 * License along with this program; if not, write to the
16 * Free Software Foundation, Inc.,
17 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
18 */
19
20import QtQuick
21import QtQuick.Controls
22import QtQml
23import org.mauikit.controls 1.3 as Maui
24
25/**
26 @brief The container for the sidebar section in the SideBarView.
27 This is the container for the sidebar section in the SideBarView.
28 @warning This control is private and can not be used independently. It exists only as part of the SideBarView implementation and can only be accessed via the exposed alias property `sideBar` in said control.
29 @see SideBarView
31 */
32Pane
33{
34 id: control
35
36 Maui.Theme.colorSet: Maui.Theme.Window
37 Maui.Theme.inherit: false
38
39 /**
40 * @brief The SideBarView item to which this sidebar section belongs.
41 */
42 property Item sideBarView : null
43
44 /**
45 * @brief The position of the sidebar. 1 means it is full opened, while 0 means it has been hidden.
46 * Values in-between can be used to determined the actual position between the open and hidden states.
47 * @property double SideBar::position
48 */
49 readonly property alias position : _private.position
50
51 /**
52 * @brief True when the sidebar is collapse but it is still visible.
53 */
54 readonly property bool peeking : control.collapsed && control.position > 0
55
56 /**
57 * @brief True when the resizing the sidebar by the user action.
58 */
59 readonly property bool resizing: _dragHandler.active
61 /**
62 * @brief Where all the sidebar section contents go.
63 * @property list<QtObject> AbstractSideBar::content
64 */
65 default property alias content : _content.data
66
67 /**
68 * @brief If the sidebar should be collapsed or not, this property can be used to dynamically collapse the sidebar on constrained spaces.
69 * For example, using unit metrics to determine an appropriate size-width restriction: if the application window width is less than 400 pixels then collapse the sidebar, or if the SideBarView main content area width is less than an ideal width size, then collapse the sidebar.
70 */
71 property bool collapsed: false
72
73 /**
74 * @brief Wether the sidebar area can be resized manually by using a cursor or touch gesture. The resizing will be stopped at reaching the minimum and/or maximum values.
75 */
76 property bool resizeable : !Maui.Handy.isMobile
77
78 /**
79 * @brief If when collapsed the sidebar should automatically be hidden or stay in place.
80 * By default the sidebar will stay in place, and the SideBarView main area content will be displaced.
81 */
82 property bool autoHide: false
83
84 /**
85 * @brief If when opened/un-collapsed - after have been hidden - the sidebar should automatically be shown or remain hidden.
86 * By default the sidebar will be shown as soon as it is un-collapsed.
87 */
88 property bool autoShow: true
89
90 /**
91 * @brief The actual size of the width that the sidebar will have in order to reserve a right margin to never exceed the SideBarView full width.
92 * Most of the time this value will be the same as the sidebar preferred width
93 */
94 readonly property int constrainedWidth : Math.min(control.preferredWidth, control.sideBarView.width*0.9)
95
96 /**
97 * @brief The preferred width of the sidebar in the expanded state.
98 * This value can be changed by the user action of manually resizing the sidebar.
99 */
100 property int preferredWidth : Maui.Style.units.gridUnit * 12
101
102 /**
103 * @brief The maximum width the sidebar can have when being resized.
104 */
105 property int maximumWidth: Maui.Style.units.gridUnit * 20
106
107 /**
108 * @brief The minimum width the sidebar can have when being resized.
109 */
110 property int minimumWidth: Maui.Style.units.gridUnit * 4
111
112
113 visible: position > 0
114
115 width: position * constrainedWidth
116
117 clip: true
118
119 padding: 0
120 topPadding: 0
121 bottomPadding: 0
122 leftPadding: 0
123 rightPadding: 0
124
125 signal opened()
126 signal closed()
127
128 background: Rectangle
129 {
130 opacity: Maui.Style.translucencyAvailable && Maui.Style.enableEffects ? 0.8 : 1
131 color: Maui.Theme.backgroundColor
132 Behavior on color
133 {
134 Maui.ColorTransition{}
135 }
136 }
137
138 QtObject
139 {
140 id: _private
141 property bool initial: true
142 property double position
143 property int resizeValue
144 property int finalWidth : control.constrainedWidth + _dragHandler.centroid.position.x
145
146 // Binding on resizeValue
147 // {
148 // //delayed: true
149 // // when: _dragHandler.active
150 // value:
151 // restoreMode: Binding.RestoreBindingOrValue
152 // }
153 //
154 Binding on position
155 {
156 // when: control.autoHide
157 value: control.enabled ? (!control.autoShow ? 0 : (control.collapsed && control.autoHide ? 0 : 1)) : 0
158 restoreMode: Binding.RestoreBindingOrValue
159 }
160
161 Behavior on position
162 {
163 enabled: Maui.Style.enableEffects
164
165 NumberAnimation
166 {
167 duration: Maui.Style.units.shortDuration
168 easing.type: Easing.InOutQuad
169 }
170 }
171 }
172
173 onCollapsedChanged:
174 {
175 if(control.collapsed || !control.enabled)
176 {
177 if(control.autoHide)
178 {
179 control.close()
180 }
181 }
182 else
183 {
184
185 if(control.autoShow)
186 {
187 control.open()
188 }
189 }
190 }
191
192 contentItem: Item
193 {
194 Item
195 {
196 id: _content
197 width: control.constrainedWidth
198 anchors.top: parent.top
199 anchors.bottom: parent.bottom
200 anchors.right: parent.right
201 }
202
203 Loader
204 {
205 active: control.resizing
206 sourceComponent: Item
207 {
208 Rectangle
209 {
210 parent: control.parent
211 id: _resizeTarget
212 width: Math.max(Math.min(_private.finalWidth, control.maximumWidth), control.minimumWidth)
213 height: parent.height
214 color: control.Maui.Theme.backgroundColor
215
216 HoverHandler
217 {
218 cursorShape: Qt.SizeHorCursor
219 }
220
221 Maui.Separator
222 {
223 anchors.top: parent.top
224 anchors.bottom: parent.bottom
225 anchors.right: parent.right
226 weight: Maui.Separator.Weight.Light
227 opacity: 0.4
228
229 Behavior on color
230 {
231 Maui.ColorTransition{}
232 }
233 }
234 }
235
236 Rectangle
237 {
238 Maui.Theme.colorSet: Maui.Theme.View
239 Maui.Theme.inherit: false
240 parent: control.parent
241 id: _resizeTarget2
242 anchors.leftMargin: _resizeTarget.width
243 width: parent.width
244 height: parent.height
245 color: Maui.Theme.backgroundColor
246 }
247 }
248 }
249
250 Rectangle
251 {
252 visible: control.resizeable
253 height: parent.height
254 width : 6
255 anchors.right: parent.right
256 color: _dragHandler.active ? Maui.Theme.highlightColor : "transparent"
257
258 HoverHandler
259 {
260 cursorShape: Qt.SizeHorCursor
261 }
262
263 DragHandler
264 {
265 id: _dragHandler
266 enabled: control.resizeable
267 yAxis.enabled: false
268 xAxis.enabled: true
269 xAxis.minimum: control.minimumWidth - control.constrainedWidth
270 xAxis.maximum: control.maximumWidth - control.constrainedWidth
271 target: null
272 cursorShape: Qt.SizeHorCursor
273
274 onActiveChanged:
275 {
276 let value = control.preferredWidth + _dragHandler.centroid.position.x
277 if(!active)
278 {
279 if(value > control.maximumWidth)
280 {
281 control.preferredWidth = control.maximumWidth
282 return
283 }
284
285 if( value < control.minimumWidth)
286 {
287 control.preferredWidth = control.minimumWidth
288 return
289 }
290 control.preferredWidth = value
291 }
292 }
293 }
294 }
295
296 Maui.Separator
297 {
298 anchors.top: parent.top
299 anchors.bottom: parent.bottom
300 anchors.right: parent.right
301 weight: Maui.Separator.Weight.Light
302
303 Behavior on color
304 {
305 Maui.ColorTransition{}
306 }
307 }
308 }
309
310 /**
311 * @brief Force to open the sidebar and expand it.
312 */
313 function open()
314 {
315 _private.position = 1
316 }
317
318 /**
319 * @brief Force to close the sidebar. This will make the position of the sidebar equal to 0.
320 */
321 function close()
322 {
323 _private.position = 0
324 }
325
326 /**
327 * @brief Switch between the open and closed states.
328 */
329 function toggle()
330 {
331 if(_private.position === 0)
332 {
333 control.open()
334 }else
335 {
336 control.close()
337 }
338 }
339}
340
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 Tue Mar 26 2024 11:16:19 by doxygen 1.10.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.