FloatingTextField added

src/imports/controls/FloatingTextField.qml

@@ -0,0 +1,99 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.4
+import QtQuick.Templates 2.4 as T
+
+import Fluid.Controls 1.0
+
+T.TextField {
+ id: control
+
+ implicitWidth: Math.max((background ? background.implicitWidth : 0),
+ placeholderText ?
+ placeholder.implicitWidth +
+ leftPadding + rightPadding : 0) ||
+ (contentWidth + leftPadding + rightPadding)
+ implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
+ (background ? background.implicitHeight : 0),
+ placeholder.implicitHeight + topPadding + bottomPadding)
+
+ topPadding: contentHeight
+ bottomPadding: Units.smallSpacing * 2
+
+ selectByMouse: true
+
+ Label {
+ id: placeholder
+
+ anchors.top: parent.top
+ x: control.leftPadding
+
+ font: control.font
+ text: control.placeholderText
+ elide: Label.AlignRight
+ width: control.width - (control.leftPadding + control.rightPadding)
+
+ readonly property int offset: Qt.application.font.pixelSize
+
+
+ states: [
+ State {
+ name: "focused"
+ when: control.focus
+ PropertyChanges {
+ target: placeholder
+
+ color: enabled ? Material.accent : Material.hintTextColor
+ font.pointSize: Qt.application.font.pointSize
+ anchors.topMargin: 0
+ }
+ },
+ State {
+ name: "notFocusedNotEmpty"
+ when: !control.focus && control.text != ""
+ PropertyChanges {
+ target: placeholder
+
+ font.pointSize: Qt.application.font.pointSize
+ anchors.topMargin: 0
+ color: Material.hintTextColor
+ }
+ },
+ State {
+ name: "notFocusedEmpty"
+ when: !control.focus && control.text == ""
+ PropertyChanges {
+ target: placeholder
+
+ color: Material.hintTextColor
+ anchors.topMargin: offset * 2
+ font.pointSize: Qt.application.font.pointSize + 2
+ }
+ }
+ ]
+
+ transitions: [
+ Transition {
+ NumberAnimation {
+ properties: "anchors.topMargin,font.pointSize"
+ duration: Units.shortDuration
+ easing.type: Easing.InOutQuad
+ }
+ ColorAnimation {
+ duration: Units.shortDuration
+ }
+ }
+ ]
+ }
+
+ background: Rectangle {
+ y: control.height - height - control.bottomPadding + 8
+ implicitWidth: 120
+ height: control.activeFocus || control.hovered ? 2 : 1
+ color: control.activeFocus ?
+ control.Material.accentColor :
+ (control.hovered ?
+ control.Material.primaryTextColor :
+ control.Material.hintTextColor)
+ }
+}

src/imports/controls/qmldir

@@ -62,6 +62,7 @@ ApplicationWindow 1.1 ApplicationWindow11.qml
 AppToolBar 1.1 AppToolBar11.qml
 AppBar 1.1 AppBar11.qml
 Chip 1.1 Chip.qml
+FloatingTextField 1.1 FloatingTextField.qml
 Page 1.1 Page11.qml
 PageSidebar 1.1 PageSidebar.qml
 SearchBar 1.1 SearchBar11.qml