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: !parent.parent.handleAnchor || !parent.parent.handleAnchor.visible || root.handle.pressed || (root.modal && root.position > 0)
64
65 shadow.color: Qt.rgba(0, 0, 0, root.handle.pressed ? 0.6 : 0.4)
66 shadow.yOffset: 1
67 shadow.size: Kirigami.Units.gridUnit / 2
68
69 width: Kirigami.Units.iconSizes.smallMedium + Kirigami.Units.smallSpacing * 2
70 height: width
71 radius: Kirigami.Units.cornerRadius
72 Behavior on color {
73 ColorAnimation {
74 duration: Kirigami.Units.longDuration
75 easing.type: Easing.InOutQuad
76 }
77 }
78 }
79 Loader {
80 anchors.centerIn: handleGraphics
81 width: height
82 height: Kirigami.Units.iconSizes.smallMedium
83
84 Kirigami.Theme.colorSet: handleGraphics.Kirigami.Theme.colorSet
85 Kirigami.Theme.backgroundColor: handleGraphics.Kirigami.Theme.backgroundColor
86 Kirigami.Theme.textColor: handleGraphics.Kirigami.Theme.textColor
87
88 asynchronous: true
89
90 source: {
91 let edge = root.edge;
92 if (Qt.application.layoutDirection === Qt.RightToLeft) {
93 if (edge === Qt.LeftEdge) {
94 edge = Qt.RightEdge;
95 } else {
96 edge = Qt.LeftEdge;
97 }
98 }
99
100 if ((root.handleClosedIcon.source || root.handleClosedIcon.name)
101 && (root.handleOpenIcon.source || root.handleOpenIcon.name)) {
102 return Qt.resolvedUrl("templates/private/GenericDrawerIcon.qml");
103 } else if (edge === Qt.LeftEdge) {
104 return Qt.resolvedUrl("templates/private/MenuIcon.qml");
105 } else if (edge === Qt.RightEdge && root instanceof Kirigami.ContextDrawer) {
106 return Qt.resolvedUrl("templates/private/ContextIcon.qml");
107 } else {
108 return "";
109 }
110 }
111 onItemChanged: {
112 if (item) {
113 item.drawer = root;
114 item.color = Qt.binding(() => root.handle.pressed
115 ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor);
116 }
117 }
118 }
119 }
120
121 Kirigami.Separator {
122 id: separator
123
124 LayoutMirroring.enabled: false
125
126 anchors {
127 top: root.edge === Qt.TopEdge ? parent.bottom : (root.edge === Qt.BottomEdge ? undefined : parent.top)
128 left: root.edge === Qt.LeftEdge ? parent.right : (root.edge === Qt.RightEdge ? undefined : parent.left)
129 right: root.edge === Qt.RightEdge ? parent.left : (root.edge === Qt.LeftEdge ? undefined : parent.right)
130 bottom: root.edge === Qt.BottomEdge ? parent.top : (root.edge === Qt.TopEdge ? undefined : parent.bottom)
131 topMargin: segmentedSeparator.height
132 }
133
134 visible: !root.modal
135
136 Kirigami.Theme.inherit: false
137 Kirigami.Theme.colorSet: Kirigami.Theme.Header
138 }
139
140 Item {
141 id: segmentedSeparator
142
143 // an alternative to segmented style is full height
144 readonly property bool shouldUseSegmentedStyle: {
145 if (root.edge !== Qt.LeftEdge && root.edge !== Qt.RightEdge) {
146 return false;
147 }
148 if (root.collapsed) {
149 return false;
150 }
151 // compatible header
152 const header = root.header ?? null;
153 if (header instanceof T.ToolBar || header instanceof KT.AbstractApplicationHeader) {
154 return true;
155 }
156 // or compatible content
157 if (root.contentItem instanceof ColumnLayout && root.contentItem.children[0] instanceof T.ToolBar) {
158 return true;
159 }
160 return false;
161 }
162
163 anchors {
164 top: parent.top
165 left: separator.left
166 right: separator.right
167 }
168
169 height: {
170 if (root.edge !== Qt.LeftEdge && root.edge !== Qt.RightEdge) {
171 return 0;
172 }
173 if (typeof applicationWindow === "undefined") {
174 return 0;
175 }
176 const window = applicationWindow();
177 const globalToolBar = window.pageStack?.globalToolBar;
178 if (!globalToolBar) {
179 return 0;
180 }
181
182 return globalToolBar.preferredHeight;
183 }
184
185 visible: separator.visible
186
187 Kirigami.Separator {
188 LayoutMirroring.enabled: false
189
190 anchors {
191 fill: parent
192 topMargin: segmentedSeparator.shouldUseSegmentedStyle ? Kirigami.Units.largeSpacing : 0
193 bottomMargin: segmentedSeparator.shouldUseSegmentedStyle ? Kirigami.Units.largeSpacing : 0
194 }
195
196 Behavior on anchors.topMargin {
197 NumberAnimation {
198 duration: Kirigami.Units.longDuration
199 easing.type: Easing.InOutQuad
200 }
201 }
202
203 Behavior on anchors.bottomMargin {
204 NumberAnimation {
205 duration: Kirigami.Units.longDuration
206 easing.type: Easing.InOutQuad
207 }
208 }
209
210 Kirigami.Theme.inherit: false
211 Kirigami.Theme.colorSet: Kirigami.Theme.Header
212 }
213 }
214
215 KP.EdgeShadow {
216 z: -2
217 visible: root.modal
218 edge: root.edge
219 anchors {
220 right: root.edge === Qt.RightEdge ? parent.left : (root.edge === Qt.LeftEdge ? undefined : parent.right)
221 left: root.edge === Qt.LeftEdge ? parent.right : (root.edge === Qt.RightEdge ? undefined : parent.left)
222 top: root.edge === Qt.TopEdge ? parent.bottom : (root.edge === Qt.BottomEdge ? undefined : parent.top)
223 bottom: root.edge === Qt.BottomEdge ? parent.top : (root.edge === Qt.TopEdge ? undefined : parent.bottom)
224 }
225
226 opacity: root.position === 0 ? 0 : 1
227
228 Behavior on opacity {
229 NumberAnimation {
230 duration: Kirigami.Units.longDuration
231 easing.type: Easing.InOutQuad
232 }
233 }
234 }
235 }
236}
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.