src/controls/ActionTextField.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2019 Carl-Lucien Schwan <carl@carlschwan.eu>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick
0008 import QtQuick.Controls as QQC2
0009 import QtQuick.Templates as T
0010 import org.kde.kirigami as Kirigami
0011
0012 /**
0013  * This is advanced textfield. It is recommended to use this class when there
0014  * is a need to create a create a textfield with action buttons (e.g a clear
0015  * action).
0016  *
0017  * Example usage for a search field:
0018  * @code
0019  * import org.kde.kirigami 2.20 as Kirigami
0020  *
0021  * Kirigami.ActionTextField {
0022  *     id: searchField
0023  *
0024  *     placeholderText: i18n("Search…")
0025  *
0026  *     focusSequence: StandardKey.Find
0027  *
0028  *     rightActions: Kirigami.Action {
0029  *         icon.name: "edit-clear"
0030  *         visible: searchField.text.length > 0
0031  *         onTriggered: {
0032  *             searchField.clear();
0033  *             searchField.accepted();
0034  *         }
0035  *     }
0036  *
0037  *     onAccepted: console.log("Search text is " + searchField.text);
0038  * }
0039  * @endcode
0040  *
0041  * @since 5.56
0042  * @inherit QtQuick.Controls.TextField
0043  */
0044 QQC2.TextField {
0045     id: root
0046
0047     /**
0048      * @brief This property holds a shortcut sequence that will focus the text field.
0049      * @since 5.56
0050      */
0051     property alias focusSequence: focusShortcut.sequence
0052
0053     /**
0054      * @brief This property holds a list of actions that will be displayed on the left side of the text field.
0055      *
0056      * By default this list is empty.
0057      *
0058      * @since 5.56
0059      */
0060     property list<T.Action> leftActions
0061
0062     /**
0063      * @brief This property holds a list of actions that will be displayed on the right side of the text field.
0064      *
0065      * By default this list is empty.
0066      *
0067      * @since 5.56
0068      */
0069     property list<T.Action> rightActions
0070
0071     property alias _leftActionsRow: leftActionsRow
0072     property alias _rightActionsRow: rightActionsRow
0073
0074     hoverEnabled: true
0075
0076     // Manually setting this fixes alignment in RTL layouts
0077     horizontalAlignment: TextInput.AlignLeft
0078
0079     leftPadding: Kirigami.Units.smallSpacing + (root.effectiveHorizontalAlignment === TextInput.AlignRight ? rightActionsRow : leftActionsRow).width
0080     rightPadding: Kirigami.Units.smallSpacing + (root.effectiveHorizontalAlignment === TextInput.AlignRight ? leftActionsRow : rightActionsRow).width
0081
0082     Behavior on leftPadding {
0083         NumberAnimation {
0084             duration: Kirigami.Units.longDuration
0085             easing.type: Easing.InOutQuad
0086         }
0087     }
0088
0089     Behavior on rightPadding {
0090         NumberAnimation {
0091             duration: Kirigami.Units.longDuration
0092             easing.type: Easing.InOutQuad
0093         }
0094     }
0095
0096     Shortcut {
0097         id: focusShortcut
0098         enabled: root.visible && root.enabled
0099         onActivated: {
0100             root.forceActiveFocus(Qt.ShortcutFocusReason)
0101             root.selectAll()
0102         }
0103     }
0104
0105     QQC2.ToolTip {
0106         visible: focusShortcut.nativeText.length > 0 && root.text.length === 0 && !rightActionsRow.hovered && !leftActionsRow.hovered && root.hovered
0107         text: focusShortcut.nativeText
0108     }
0109
0110     component ActionIconMouseArea: MouseArea {
0111         anchors.fill: parent
0112         activeFocusOnTab: true
0113         cursorShape: Qt.PointingHandCursor
0114         hoverEnabled: true
0115         Accessible.role: Accessible.Button
0116         Keys.onPressed: event => {
0117             switch (event.key) {
0118             case Qt.Key_Space:
0119             case Qt.Key_Enter:
0120             case Qt.Key_Return:
0121             case Qt.Key_Select:
0122                 clicked(null);
0123                 event.accepted = true;
0124                 break;
0125             }
0126         }
0127     }
0128
0129     Row {
0130         id: leftActionsRow
0131         padding: Kirigami.Units.smallSpacing
0132         spacing: Kirigami.Units.smallSpacing
0133         layoutDirection: Qt.LeftToRight
0134         LayoutMirroring.enabled: root.effectiveHorizontalAlignment === TextInput.AlignRight
0135         anchors.left: parent.left
0136         anchors.leftMargin: Kirigami.Units.smallSpacing
0137         anchors.top: parent.top
0138         anchors.topMargin: parent.topPadding
0139         anchors.bottom: parent.bottom
0140         anchors.bottomMargin: parent.bottomPadding
0141         Repeater {
0142             model: root.leftActions
0143             Kirigami.Icon {
0144                 id: delegate
0145
0146                 required property T.Action modelData
0147
0148                 implicitWidth: Kirigami.Units.iconSizes.sizeForLabels
0149                 implicitHeight: Kirigami.Units.iconSizes.sizeForLabels
0150
0151                 anchors.verticalCenter: parent.verticalCenter
0152
0153                 source: modelData.icon.name.length > 0 ? modelData.icon.name : modelData.icon.source
0154                 active: actionArea.containsPress || actionArea.activeFocus
0155                 visible: !(modelData instanceof Kirigami.Action) || modelData.visible
0156                 enabled: modelData.enabled
0157
0158                 ActionIconMouseArea {
0159                     id: actionArea
0160                     Accessible.name: delegate.modelData.text
0161                     onClicked: mouse => delegate.modelData.trigger()
0162                 }
0163
0164                 QQC2.ToolTip {
0165                     visible: (actionArea.containsMouse || actionArea.activeFocus) && (delegate.modelData.text.length > 0)
0166                     text: delegate.modelData.text
0167                 }
0168             }
0169         }
0170     }
0171
0172     Row {
0173         id: rightActionsRow
0174         padding: Kirigami.Units.smallSpacing
0175         spacing: Kirigami.Units.smallSpacing
0176         layoutDirection: Qt.RightToLeft
0177         LayoutMirroring.enabled: root.effectiveHorizontalAlignment === TextInput.AlignRight
0178         anchors.right: parent.right
0179         anchors.rightMargin: Kirigami.Units.smallSpacing
0180         anchors.top: parent.top
0181         anchors.topMargin: parent.topPadding
0182         anchors.bottom: parent.bottom
0183         anchors.bottomMargin: parent.bottomPadding
0184         Repeater {
0185             model: root.rightActions
0186             Kirigami.Icon {
0187                 id: delegate
0188
0189                 required property T.Action modelData
0190
0191                 implicitWidth: Kirigami.Units.iconSizes.sizeForLabels
0192                 implicitHeight: Kirigami.Units.iconSizes.sizeForLabels
0193
0194                 anchors.verticalCenter: parent.verticalCenter
0195
0196                 source: modelData.icon.name.length > 0 ? modelData.icon.name : modelData.icon.source
0197                 active: actionArea.containsPress || actionArea.activeFocus
0198                 visible: !(modelData instanceof Kirigami.Action) || modelData.visible
0199                 enabled: modelData.enabled
0200
0201                 ActionIconMouseArea {
0202                     id: actionArea
0203                     Accessible.name: delegate.modelData.text
0204                     onClicked: mouse => delegate.modelData.trigger()
0205                 }
0206
0207                 QQC2.ToolTip {
0208                     visible: (actionArea.containsMouse || actionArea.activeFocus) && (delegate.modelData.text.length > 0)
0209                     text: delegate.modelData.text
0210                 }
0211             }
0212         }
0213     }
0214 }