Kirigami2

OverlayDrawer.qml
1/*
2 * SPDX-FileCopyrightText: 2016 Marco Martin <mart@kde.org>
3 *
4 * SPDX-License-Identifier: LGPL-2.0-or-later
5 */
6
7import QtQuick
8import QtQuick.Layouts
9import QtQuick.Templates as T
10import org.kde.kirigami as Kirigami
11import "private" as KP
12import "templates" as KT
13
14/**
15 * Overlay Drawers are used to expose additional UI elements needed for
16 * small secondary tasks for which the main UI elements are not needed.
17 * For example in Okular Mobile, an Overlay Drawer is used to display
18 * thumbnails of all pages within a document along with a search field.
19 * This is used for the distinct task of navigating to another page.
20 *
21 * @inherit org::kde::kirigami::templates::OverlayDrawer
22 */
23KT.OverlayDrawer {
24 id: root
25
26//BEGIN Properties
27 focus: false
28 modal: true
29 drawerOpen: !modal
30 closePolicy: modal ? T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside : T.Popup.NoAutoClose
31 handleVisible: interactive && (modal || !drawerOpen) && (typeof(applicationWindow)===typeof(Function) && applicationWindow() ? applicationWindow().controlsVisible : true)
32
33 // FIXME: set to false when it does not lead to blocking closePolicy.
34 // See Kirigami bug: 454119
35 interactive: true
36
37 onPositionChanged: {
38 if (!modal && !root.peeking && !root.animating) {
39 position = 1;
40 }
41 }
42
43 background: Rectangle {
44 color: Kirigami.Theme.backgroundColor
45
46 Item {
47 parent: root.handle
48 anchors.fill: parent
49
50 Kirigami.ShadowedRectangle {
51 id: handleGraphics
52 anchors.centerIn: parent
53
54 Kirigami.Theme.colorSet: parent.parent.handleAnchor && parent.parent.handleAnchor.visible ? parent.parent.handleAnchor.Kirigami.Theme.colorSet : Kirigami.Theme.Button
55
56 Kirigami.Theme.backgroundColor: parent.parent.handleAnchor && parent.parent.handleAnchor.visible ? parent.parent.handleAnchor.Kirigami.Theme.backgroundColor : undefined
57
58 Kirigami.Theme.textColor: parent.parent.handleAnchor && parent.parent.handleAnchor.visible ? parent.parent.handleAnchor.Kirigami.Theme.textColor : undefined
59
60 Kirigami.Theme.inherit: false
61 color: root.handle.pressed ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
62
63 visible: root.modal && (!parent.parent.handleAnchor || !parent.parent.handleAnchor.visible || root.handle.pressed || root.position > 0)
64 opacity: (parent.parent.handleAnchor && parent.parent.handleAnchor.visible) ? root.position : 1
65
66
67 shadow.color: Qt.rgba(0, 0, 0, root.handle.pressed ? 0.6 : 0.4)
68 shadow.yOffset: 1
69 shadow.size: Kirigami.Units.gridUnit / 2
70
71 width: Kirigami.Units.iconSizes.smallMedium + Kirigami.Units.smallSpacing * 2
72 height: width
73 radius: Kirigami.Units.cornerRadius
74 Behavior on color {
75 ColorAnimation {
76 duration: Kirigami.Units.longDuration
77 easing.type: Easing.InOutQuad
78 }
79 }
80 }
81 Loader {
82 anchors.centerIn: handleGraphics
83 width: height
84 height: Kirigami.Units.iconSizes.smallMedium
85
86 Kirigami.Theme.colorSet: handleGraphics.Kirigami.Theme.colorSet
87 Kirigami.Theme.backgroundColor: handleGraphics.Kirigami.Theme.backgroundColor
88 Kirigami.Theme.textColor: handleGraphics.Kirigami.Theme.textColor
89
90 asynchronous: true
91
92 source: {
93 let edge = root.edge;
94 if (Qt.application.layoutDirection === Qt.RightToLeft) {
95 if (edge === Qt.LeftEdge) {
96 edge = Qt.RightEdge;
97 } else {
98 edge = Qt.LeftEdge;
99 }
100 }
101
102 if ((root.handleClosedIcon.source || root.handleClosedIcon.name)
103 && (root.handleOpenIcon.source || root.handleOpenIcon.name)) {
104 return Qt.resolvedUrl("templates/private/GenericDrawerIcon.qml");
105 } else if (edge === Qt.LeftEdge) {
106 return Qt.resolvedUrl("templates/private/MenuIcon.qml");
107 } else if (edge === Qt.RightEdge && root instanceof Kirigami.ContextDrawer) {
108 return Qt.resolvedUrl("templates/private/ContextIcon.qml");
109 } else {
110 return "";
111 }
112 }
113 onItemChanged: {
114 if (item) {
115 item.drawer = root;
116 item.color = Qt.binding(() => root.handle.pressed
117 ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor);
118 }
119 }
120 }
121 }
122
123 Kirigami.Separator {
124 id: separator
125
126 LayoutMirroring.enabled: false
127
128 anchors {
129 top: root.edge === Qt.TopEdge ? parent.bottom : (root.edge === Qt.BottomEdge ? undefined : parent.top)
130 left: root.edge === Qt.LeftEdge ? parent.right : (root.edge === Qt.RightEdge ? undefined : parent.left)
131 right: root.edge === Qt.RightEdge ? parent.left : (root.edge === Qt.LeftEdge ? undefined : parent.right)
132 bottom: root.edge === Qt.BottomEdge ? parent.top : (root.edge === Qt.TopEdge ? undefined : parent.bottom)
133 topMargin: segmentedSeparator.height
134 }
135
136 visible: !root.modal
137
138 Kirigami.Theme.inherit: false
139 Kirigami.Theme.colorSet: Kirigami.Theme.Header
140 }
141
142 Item {
143 id: segmentedSeparator
144
145 // an alternative to segmented style is full height
146 readonly property bool shouldUseSegmentedStyle: {
147 if (root.edge !== Qt.LeftEdge && root.edge !== Qt.RightEdge) {
148 return false;
149 }
150 if (root.collapsed) {
151 return false;
152 }
153 // compatible header
154 const header = root.header ?? null;
155 if (header instanceof T.ToolBar || header instanceof KT.AbstractApplicationHeader) {
156 return true;
157 }
158 // or compatible content
159 if (root.contentItem instanceof ColumnLayout && root.contentItem.children[0] instanceof T.ToolBar) {
160 return true;
161 }
162 return false;
163 }
164
165 anchors {
166 top: parent.top
167 left: separator.left
168 right: separator.right
169 }
170
171 height: {
172 if (root.edge !== Qt.LeftEdge && root.edge !== Qt.RightEdge) {
173 return 0;
174 }
175 if (typeof applicationWindow === "undefined") {
176 return 0;
177 }
178 const window = applicationWindow();
179 const globalToolBar = window.pageStack?.globalToolBar;
180 if (!globalToolBar) {
181 return 0;
182 }
183
184 return globalToolBar.preferredHeight;
185 }
186
187 visible: separator.visible
188
189 Kirigami.Separator {
190 LayoutMirroring.enabled: false
191
192 anchors {
193 fill: parent
194 topMargin: segmentedSeparator.shouldUseSegmentedStyle ? Kirigami.Units.largeSpacing : 0
195 bottomMargin: segmentedSeparator.shouldUseSegmentedStyle ? Kirigami.Units.largeSpacing : 0
196 }
197
198 Behavior on anchors.topMargin {
199 NumberAnimation {
200 duration: Kirigami.Units.longDuration
201 easing.type: Easing.InOutQuad
202 }
203 }
204
205 Behavior on anchors.bottomMargin {
206 NumberAnimation {
207 duration: Kirigami.Units.longDuration
208 easing.type: Easing.InOutQuad
209 }
210 }
211
212 Kirigami.Theme.inherit: false
213 Kirigami.Theme.colorSet: Kirigami.Theme.Header
214 }
215 }
216
217 KP.EdgeShadow {
218 z: -2
219 visible: root.modal
220 edge: root.edge
221 anchors {
222 right: root.edge === Qt.RightEdge ? parent.left : (root.edge === Qt.LeftEdge ? undefined : parent.right)
223 left: root.edge === Qt.LeftEdge ? parent.right : (root.edge === Qt.RightEdge ? undefined : parent.left)
224 top: root.edge === Qt.TopEdge ? parent.bottom : (root.edge === Qt.BottomEdge ? undefined : parent.top)
225 bottom: root.edge === Qt.BottomEdge ? parent.top : (root.edge === Qt.TopEdge ? undefined : parent.bottom)
226 }
227
228 opacity: root.position === 0 ? 0 : 1
229
230 Behavior on opacity {
231 NumberAnimation {
232 duration: Kirigami.Units.longDuration
233 easing.type: Easing.InOutQuad
234 }
235 }
236 }
237 }
238}
This file is part of the KDE documentation.
Documentation copyright © 1996-2025 The KDE developers.
Generated on Fri May 2 2025 12:02:15 by doxygen 1.13.2 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.