Kirigami2

ActionTextField.qml
1/*
2 * SPDX-FileCopyrightText: 2019 Carl-Lucien Schwan <carl@carlschwan.eu>
3 *
4 * SPDX-License-Identifier: LGPL-2.0-or-later
5 */
6
7import QtQuick
8import QtQuick.Controls as QQC2
9import QtQuick.Templates as T
10import org.kde.kirigami as Kirigami
11
12/**
13 * This is advanced textfield. It is recommended to use this class when there
14 * is a need to create a create a textfield with action buttons (e.g a clear
15 * action).
16 *
17 * Example usage for a search field:
18 * @code
19 * import org.kde.kirigami as Kirigami
20 *
21 * Kirigami.ActionTextField {
22 * id: searchField
23 *
24 * placeholderText: i18n("Search…")
25 *
26 * focusSequence: StandardKey.Find
27 *
28 * rightActions: Kirigami.Action {
29 * icon.name: "edit-clear"
30 * visible: searchField.text.length > 0
31 * onTriggered: {
32 * searchField.clear();
33 * searchField.accepted();
34 * }
35 * }
36 *
37 * onAccepted: console.log("Search text is " + searchField.text);
38 * }
39 * @endcode
40 *
41 * @since 5.56
42 * @inherit QtQuick.Controls.TextField
43 */
44QQC2.TextField {
45 id: root
46
47 /**
48 * @brief This property holds a shortcut sequence that will focus the text field.
49 * @since 5.56
50 */
51 property alias focusSequence: focusShortcut.sequence
52
53 /**
54 * @brief This property holds a list of actions that will be displayed on the left side of the text field.
55 *
56 * By default this list is empty.
57 *
58 * @since 5.56
59 */
60 property list<T.Action> leftActions
61
62 /**
63 * @brief This property holds a list of actions that will be displayed on the right side of the text field.
64 *
65 * By default this list is empty.
66 *
67 * @since 5.56
68 */
69 property list<T.Action> rightActions
70
71 property alias _leftActionsRow: leftActionsRow
72 property alias _rightActionsRow: rightActionsRow
73
74 hoverEnabled: true
75
76 // Manually setting this fixes alignment in RTL layouts
77 horizontalAlignment: TextInput.AlignLeft
78
79 leftPadding: Kirigami.Units.smallSpacing + (root.effectiveHorizontalAlignment === TextInput.AlignRight ? rightActionsRow : leftActionsRow).width
80 rightPadding: Kirigami.Units.smallSpacing + (root.effectiveHorizontalAlignment === TextInput.AlignRight ? leftActionsRow : rightActionsRow).width
81
82 Behavior on leftPadding {
83 NumberAnimation {
84 duration: Kirigami.Units.longDuration
85 easing.type: Easing.InOutQuad
86 }
87 }
88
89 Behavior on rightPadding {
90 NumberAnimation {
91 duration: Kirigami.Units.longDuration
92 easing.type: Easing.InOutQuad
93 }
94 }
95
96 Shortcut {
97 id: focusShortcut
98 enabled: root.visible && root.enabled
99 onActivated: {
100 root.forceActiveFocus(Qt.ShortcutFocusReason)
101 root.selectAll()
102 }
103 }
104
105 QQC2.ToolTip {
106 visible: focusShortcut.nativeText.length > 0 && root.text.length === 0 && root.hovered
107 text: focusShortcut.nativeText
108 }
109
110 component InlineActionIcon: Kirigami.Icon {
111 id: iconDelegate
112
113 required property T.Action modelData
114
115 implicitWidth: Kirigami.Units.iconSizes.sizeForLabels
116 implicitHeight: Kirigami.Units.iconSizes.sizeForLabels
117
118 anchors.verticalCenter: parent.verticalCenter
119
120 source: modelData.icon.name.length > 0 ? modelData.icon.name : modelData.icon.source
121 visible: !(modelData instanceof Kirigami.Action) || modelData.visible
122 active: actionArea.containsPress || actionArea.activeFocus
123 enabled: modelData.enabled
124
125 MouseArea {
126 id: actionArea
127
128 anchors.fill: parent
129 activeFocusOnTab: true
130 cursorShape: Qt.PointingHandCursor
131 hoverEnabled: true
132
133 Accessible.name: iconDelegate.modelData.text
134 Accessible.role: Accessible.Button
135
136 Keys.onPressed: event => {
137 switch (event.key) {
138 case Qt.Key_Space:
139 case Qt.Key_Enter:
140 case Qt.Key_Return:
141 case Qt.Key_Select:
142 clicked(null);
143 event.accepted = true;
144 break;
145 }
146 }
147 onClicked: mouse => iconDelegate.modelData.trigger()
148 }
149
150 QQC2.ToolTip {
151 visible: (actionArea.containsMouse || actionArea.activeFocus) && (iconDelegate.modelData.text.length > 0)
152 text: iconDelegate.modelData.text
153 }
154 }
155
156 Row {
157 id: leftActionsRow
158 padding: Kirigami.Units.smallSpacing
159 spacing: Kirigami.Units.smallSpacing
160 layoutDirection: Qt.LeftToRight
161 LayoutMirroring.enabled: root.effectiveHorizontalAlignment === TextInput.AlignRight
162 anchors.left: parent.left
163 anchors.leftMargin: Kirigami.Units.smallSpacing
164 anchors.top: parent.top
165 anchors.topMargin: parent.topPadding
166 anchors.bottom: parent.bottom
167 anchors.bottomMargin: parent.bottomPadding
168 Repeater {
169 model: root.leftActions
170 InlineActionIcon { }
171 }
172 }
173
174 Row {
175 id: rightActionsRow
176 padding: Kirigami.Units.smallSpacing
177 spacing: Kirigami.Units.smallSpacing
178 layoutDirection: Qt.RightToLeft
179 LayoutMirroring.enabled: root.effectiveHorizontalAlignment === TextInput.AlignRight
180 anchors.right: parent.right
181 anchors.rightMargin: Kirigami.Units.smallSpacing
182 anchors.top: parent.top
183 anchors.topMargin: parent.topPadding
184 anchors.bottom: parent.bottom
185 anchors.bottomMargin: parent.bottomPadding
186 Repeater {
187 model: root.rightActions
188 InlineActionIcon { }
189 }
190 }
191}
AKONADI_CALENDAR_EXPORT KCalendarCore::Event::Ptr event(const Akonadi::Item &item)
QString name(StandardAction id)
PointingHandCursor
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Jul 19 2024 11:52:23 by doxygen 1.11.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.