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.Templates as T
9import org.kde.kirigami as Kirigami
10import "private" as KP
11import "templates" as KT
12
13/**
14 * Overlay Drawers are used to expose additional UI elements needed for
15 * small secondary tasks for which the main UI elements are not needed.
16 * For example in Okular Mobile, an Overlay Drawer is used to display
17 * thumbnails of all pages within a document along with a search field.
18 * This is used for the distinct task of navigating to another page.
19 *
20 * @inherit org::kde::kirigami::templates::OverlayDrawer
21 */
22KT.OverlayDrawer {
23 id: root
24
25//BEGIN Properties
26 focus: false
27 modal: true
28 drawerOpen: !modal
29 closePolicy: modal ? T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside : T.Popup.NoAutoClose
30 handleVisible: interactive && (modal || !drawerOpen) && (typeof(applicationWindow)===typeof(Function) && applicationWindow() ? applicationWindow().controlsVisible : true)
31
32 // FIXME: set to false when it does not lead to blocking closePolicy.
33 // See Kirigami bug: 454119
34 interactive: true
35
36 onPositionChanged: {
37 if (!modal && !root.peeking && !root.animating) {
38 position = 1;
39 }
40 }
41
42 background: Rectangle {
43 color: Kirigami.Theme.backgroundColor
44
45 Item {
46 parent: root.handle
47 anchors.fill: parent
48
49 Kirigami.ShadowedRectangle {
50 id: handleGraphics
51 anchors.centerIn: parent
52
53 Kirigami.Theme.colorSet: parent.parent.handleAnchor && parent.parent.handleAnchor.visible ? parent.parent.handleAnchor.Kirigami.Theme.colorSet : Kirigami.Theme.Button
54
55 Kirigami.Theme.backgroundColor: parent.parent.handleAnchor && parent.parent.handleAnchor.visible ? parent.parent.handleAnchor.Kirigami.Theme.backgroundColor : undefined
56
57 Kirigami.Theme.textColor: parent.parent.handleAnchor && parent.parent.handleAnchor.visible ? parent.parent.handleAnchor.Kirigami.Theme.textColor : undefined
58
59 Kirigami.Theme.inherit: false
60 color: root.handle.pressed ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
61
62 visible: !parent.parent.handleAnchor || !parent.parent.handleAnchor.visible || root.handle.pressed || (root.modal && root.position > 0)
63
64 shadow.color: Qt.rgba(0, 0, 0, root.handle.pressed ? 0.6 : 0.4)
65 shadow.yOffset: 1
66 shadow.size: Kirigami.Units.gridUnit / 2
67
68 width: Kirigami.Units.iconSizes.smallMedium + Kirigami.Units.smallSpacing * 2
69 height: width
70 radius: 2
71 Behavior on color {
72 ColorAnimation {
73 duration: Kirigami.Units.longDuration
74 easing.type: Easing.InOutQuad
75 }
76 }
77 }
78 Loader {
79 anchors.centerIn: handleGraphics
80 width: height
81 height: Kirigami.Units.iconSizes.smallMedium
82
83 Kirigami.Theme.colorSet: handleGraphics.Kirigami.Theme.colorSet
84 Kirigami.Theme.backgroundColor: handleGraphics.Kirigami.Theme.backgroundColor
85 Kirigami.Theme.textColor: handleGraphics.Kirigami.Theme.textColor
86
87 asynchronous: true
88
89 source: {
90 let edge = root.edge;
91 if (Qt.application.layoutDirection === Qt.RightToLeft) {
92 if (edge === Qt.LeftEdge) {
93 edge = Qt.RightEdge;
94 } else {
95 edge = Qt.LeftEdge;
96 }
97 }
98
99 if ((root.handleClosedIcon.source || root.handleClosedIcon.name)
100 && (root.handleOpenIcon.source || root.handleOpenIcon.name)) {
101 return Qt.resolvedUrl("templates/private/GenericDrawerIcon.qml");
102 } else if (edge === Qt.LeftEdge) {
103 return Qt.resolvedUrl("templates/private/MenuIcon.qml");
104 } else if (edge === Qt.RightEdge && root instanceof Kirigami.ContextDrawer) {
105 return Qt.resolvedUrl("templates/private/ContextIcon.qml");
106 } else {
107 return "";
108 }
109 }
110 onItemChanged: {
111 if (item) {
112 item.drawer = root;
113 item.color = Qt.binding(() => root.handle.pressed
114 ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor);
115 }
116 }
117 }
118 }
119
120 Kirigami.Separator {
121 LayoutMirroring.enabled: false
122 // LayoutMirroring.childrenInherit: true
123 anchors {
124 right: root.edge === Qt.RightEdge ? parent.left : (root.edge === Qt.LeftEdge ? undefined : parent.right)
125 left: root.edge === Qt.LeftEdge ? parent.right : (root.edge === Qt.RightEdge ? undefined : parent.left)
126 top: root.edge === Qt.TopEdge ? parent.bottom : (root.edge === Qt.BottomEdge ? undefined : parent.top)
127 bottom: root.edge === Qt.BottomEdge ? parent.top : (root.edge === Qt.TopEdge ? undefined : parent.bottom)
128 }
129 visible: !root.modal
130 Kirigami.Theme.inherit: false
131 Kirigami.Theme.colorSet: Kirigami.Theme.Header
132 }
133 KP.EdgeShadow {
134 z: -2
135 visible: root.modal
136 edge: root.edge
137 anchors {
138 right: root.edge === Qt.RightEdge ? parent.left : (root.edge === Qt.LeftEdge ? undefined : parent.right)
139 left: root.edge === Qt.LeftEdge ? parent.right : (root.edge === Qt.RightEdge ? undefined : parent.left)
140 top: root.edge === Qt.TopEdge ? parent.bottom : (root.edge === Qt.BottomEdge ? undefined : parent.top)
141 bottom: root.edge === Qt.BottomEdge ? parent.top : (root.edge === Qt.TopEdge ? undefined : parent.bottom)
142 }
143
144 opacity: root.position === 0 ? 0 : 1
145
146 Behavior on opacity {
147 NumberAnimation {
148 duration: Kirigami.Units.longDuration
149 easing.type: Easing.InOutQuad
150 }
151 }
152 }
153 }
154}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Sun Feb 25 2024 18:45:17 by doxygen 1.10.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.