diff --git a/src/gui/Base/HRectangleBottomBorder.qml b/src/gui/Base/HRectangleBottomBorder.qml new file mode 100644 index 00000000..1be00180 --- /dev/null +++ b/src/gui/Base/HRectangleBottomBorder.qml @@ -0,0 +1,28 @@ +import QtQuick 2.12 + +Item { + id: root + + property Rectangle rectangle: parent + property alias borderHeight: clipArea.height + property alias color: borderRectangle.color + + implicitWidth: rectangle.width + implicitHeight: rectangle.height + + Item { + id: clipArea + anchors.bottom: parent.bottom + width: parent.width + height: 0 + clip: true + + Rectangle { + id: borderRectangle + anchors.bottom: parent.bottom + width: parent.width + height: root.height + radius: rectangle.radius + } + } +} diff --git a/src/gui/Base/HTextField.qml b/src/gui/Base/HTextField.qml index 2f6c0c83..8f1859c1 100644 --- a/src/gui/Base/HTextField.qml +++ b/src/gui/Base/HTextField.qml @@ -24,11 +24,27 @@ TextField { background: Rectangle { id: textFieldBackground + radius: theme.radius color: field.activeFocus ? focusedBackgroundColor : backgroundColor - border.color: error ? errorBorder : - field.activeFocus ? focusedBorderColor : borderColor + border.width: bordered ? theme.controls.textField.borderWidth : 0 - radius: bordered ? theme.radius : 0 + border.color: borderColor + + HRectangleBottomBorder { + id: bottomBorder + borderHeight: theme.controls.textField.borderWidth + color: error ? errorBorder : focusedBorderColor + + transform: Scale { + origin.x: bottomBorder.width / 2 + origin.y: bottomBorder.height / 2 + xScale: field.activeFocus ? 1 : 0 + + Behavior on xScale { HNumberAnimation {} } + } + + Behavior on color { HColorAnimation {} } + } } // Set it only on component creation to avoid binding loops