1// SPDX-FileCopyrightText: 2021 Nheko Contributors
2//
3// SPDX-License-Identifier: GPL-3.0-or-later
4
5import QtQuick 2.12
6import QtQuick.Controls 2.12
7import QtQuick.Layouts 1.12
8import im.nheko 1.0
9
10TextField {
11    id: input
12
13    property alias backgroundColor: backgroundRect.color
14
15    palette: Nheko.colors
16    color: Nheko.colors.text
17
18    Rectangle {
19        id: blueBar
20
21        anchors.top: parent.bottom
22        anchors.horizontalCenter: parent.horizontalCenter
23        color: Nheko.colors.highlight
24        height: 1
25        width: parent.width
26
27        Rectangle {
28            id: blackBar
29
30            anchors.verticalCenter: blueBar.verticalCenter
31            anchors.horizontalCenter: parent.horizontalCenter
32            height: parent.height + 1
33            width: 0
34            color: Nheko.colors.text
35
36            states: State {
37                name: "focused"
38                when: input.activeFocus == true
39
40                PropertyChanges {
41                    target: blackBar
42                    width: blueBar.width
43                }
44
45            }
46
47            transitions: Transition {
48                from: ""
49                to: "focused"
50                reversible: true
51
52                NumberAnimation {
53                    target: blackBar
54                    properties: "width"
55                    duration: 500
56                    easing.type: Easing.InOutQuad
57                    alwaysRunToEnd: true
58                }
59
60            }
61
62        }
63
64    }
65
66    background: Rectangle {
67        id: backgroundRect
68
69        color: Nheko.colors.base
70    }
71
72}
73