plugins/components/TextField.qml

0001 /* This file is part of the KDE project
0002  * SPDX-FileCopyrightText: 2012 Arjen Hiemstra <ahiemstra@heimr.nl>
0003  *
0004  * SPDX-License-Identifier: GPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.3
0008 import org.krita.sketch 1.0
0009
0010 Item {
0011     id: base;
0012     width: parent ? parent.width : 0;
0013     height: Constants.GridHeight;
0014
0015     property alias text: input.text;
0016     property alias placeholder: placeholder.text;
0017     property alias validator: input.validator;
0018     property alias inputMask: input.inputMask;
0019     property alias acceptableInput: input.acceptableInput;
0020
0021     property alias background: fill.color;
0022     property alias border: fill.border;
0023     property alias radius: fill.radius;
0024
0025     property alias numeric: input.numeric;
0026     property alias nextFocus: input.nextFocus;
0027
0028     property alias textInput: input; // To allow KeyNavigation to reference TextInput
0029
0030     signal focusLost();
0031     signal accepted();
0032
0033     Item {
0034         anchors.fill: parent;
0035
0036         Rectangle {
0037             id: fill;
0038             anchors.fill: parent;
0039
0040             border.width: 2;
0041             border.color: Settings.theme.color("components/textField/border/normal");
0042             color: Settings.theme.color("components/textField/background");
0043
0044             radius: height / 2;
0045
0046             Label {
0047                 id: placeholder;
0048                 anchors {
0049                     left: parent.left;
0050                     leftMargin: base.height / 4;
0051                     rightMargin: base.height / 4;
0052                     verticalCenter: parent.verticalCenter;
0053                 }
0054                 color: Settings.theme.color("components/textField/placeholder");
0055             }
0056
0057             TextInput {
0058                 id: input;
0059
0060                 property bool numeric: false;
0061                 DoubleValidator { id: numberValidator }
0062                 validator: numeric ? numberValidator : null;
0063                 property Item nextFocus: null;
0064
0065                 anchors {
0066                     left: parent.left;
0067                     leftMargin: base.height / 4;
0068                     right: parent.right;
0069                     rightMargin: base.height / 4;
0070                     verticalCenter: parent.verticalCenter;
0071                 }
0072                 font.family: "Source Sans Pro";
0073                 font.styleName: "Regular";
0074                 font.pixelSize: Constants.DefaultFontSize;
0075                 onFocusChanged: {
0076                     if (focus === false) {
0077                         Qt.inputMethod.hide()
0078                         Settings.focusItem = null;
0079                         base.focusLost();
0080                     } else {
0081                         Settings.focusItem = input;
0082                     }
0083                 }
0084                 onAccepted: base.accepted();
0085             }
0086
0087             states: [
0088                 State {
0089                     name: "error";
0090                     when: !input.acceptableInput
0091                     PropertyChanges { target: fill; border.color: Settings.theme.color("components/textField/border/error"); }
0092                 },
0093                 State {
0094                     name: "focus";
0095                     when: input.focus;
0096                     PropertyChanges { target: fill; border.color: Settings.theme.color("components/textField/border/focus"); }
0097                 }
0098             ]
0099         }
0100     }
0101
0102     MouseArea {
0103         anchors.fill: parent;
0104         onClicked: input.focus = true;
0105     }
0106
0107     states: State {
0108         name: "input";
0109         when: input.focus || input.text != "";
0110
0111         PropertyChanges { target: placeholder; opacity: 0.75; }
0112         AnchorChanges { target: placeholder; anchors.left: undefined; anchors.right: parent.right }
0113     }
0114
0115     transitions: Transition {
0116         ParallelAnimation {
0117             NumberAnimation { duration: 100; properties: "opacity"; }
0118             AnchorAnimation { duration: 100; }
0119         }
0120     }
0121 }