plugins/components/TextFieldMultiline.qml

0001 /* This file is part of the KDE project
0002  * SPDX-FileCopyrightText: 2012 Arjen Hiemstra <ahiemstra@heimr.nl>
0003  * SPDX-FileCopyrightText: 2013 Dan Leinir Turthra Jensen <admin@leinir.dk>
0004  *
0005  * SPDX-License-Identifier: GPL-2.0-or-later
0006  */
0007
0008 import QtQuick 2.3
0009 import org.krita.sketch 1.0
0010
0011 Item {
0012     id: base;
0013     width: parent ? parent.width : 0;
0014     height: Constants.GridHeight * 4;
0015
0016     property alias text: input.text;
0017     property alias placeholder: placeholder.text;
0018
0019     property alias background: fill.color;
0020     property alias border: fill.border;
0021     property alias radius: fill.radius;
0022
0023     property alias nextFocus: input.nextFocus;
0024
0025     signal focusLost();
0026     signal accepted();
0027
0028     Item {
0029         anchors.fill: parent;
0030         anchors.margins: Constants.DefaultMargin;
0031
0032         Rectangle {
0033             id: fill;
0034             anchors.fill: parent;
0035
0036             border.width: 2;
0037             border.color: Settings.theme.color("components/textFieldMultiline/border");
0038             color: Settings.theme.color("components/textFieldMultiline/background");
0039
0040             radius: Constants.GridHeight / 2;
0041
0042             Label {
0043                 id: placeholder;
0044                 anchors {
0045                     left: parent.left;
0046                     leftMargin: fill.radius / 2;
0047                     rightMargin: fill.radius / 2;
0048                     top: parent.top;
0049                     topMargin: fill.radius / 2;
0050                 }
0051                 color: Constants.Theme.SecondaryTextColor;
0052             }
0053
0054             Item {
0055                 anchors.fill: parent;
0056                 anchors.margins: parent.radius / 2;
0057                 Flickable {
0058                     id: flick;
0059                     anchors {
0060                         fill: parent;
0061                     }
0062                     clip: true;
0063                     contentWidth: input.paintedWidth
0064                     contentHeight: input.paintedHeight
0065                     function ensureVisible(r)
0066                     {
0067                         if (contentX >= r.x)
0068                             contentX = r.x;
0069                         else if (contentX+width <= r.x+r.width)
0070                             contentX = r.x+r.width-width;
0071                         if (contentY >= r.y)
0072                             contentY = r.y;
0073                         else if (contentY+height <= r.y+r.height)
0074                             contentY = r.y+r.height-height;
0075                     }
0076                     TextEdit {
0077                         id: input;
0078                         width: flick.width;
0079                         height: flick.height;
0080                         wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere;
0081                         property Item nextFocus: null;
0082                         onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
0083
0084                         font: Settings.theme.font("application");
0085                         onFocusChanged: {
0086                             if (focus === false) {
0087                                 Qt.inputMethod.hide()
0088                                 Settings.focusItem = null;
0089                                 base.focusLost();
0090                             } else {
0091                                 Settings.focusItem = input;
0092                             }
0093                         }
0094                     }
0095                 }
0096                 ScrollDecorator {
0097                     flickableItem: flick;
0098                 }
0099             }
0100         }
0101     }
0102
0103     MouseArea {
0104         anchors.fill: parent;
0105         onClicked: input.focus = true;
0106     }
0107
0108     states: State {
0109         name: "input";
0110         when: input.focus || input.text != "";
0111
0112         PropertyChanges { target: placeholder; opacity: 0.5; }
0113         AnchorChanges { target: placeholder; anchors.left: undefined; anchors.right: parent.right }
0114     }
0115
0116     transitions: Transition {
0117         ParallelAnimation {
0118             NumberAnimation { duration: 100; properties: "opacity"; }
0119             AnchorAnimation { duration: 100; }
0120         }
0121     }
0122 }