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