add matrix text field

resources/qml/Completer.qml

@@ -12,6 +12,8 @@ Popup {
     property var completer
     property bool bottomToTop: true
     property bool fullWidth: false
+    property int avatarHeight: 24
+    property int avatarWidth: 24
     property alias count: listView.count
 
     signal completionClicked(string completion)
@@ -128,8 +130,8 @@ Popup {
                         anchors.centerIn: parent
 
                         Avatar {
-                            height: 24
+                            height: popup.avatarHeight
-                            width: 24
+                            width: popup.avatarWidth
                             displayName: model.displayName
                             url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
                             onClicked: popup.completionClicked(completer.completionAt(model.index))
@@ -181,8 +183,8 @@ Popup {
                         anchors.centerIn: parent
 
                         Avatar {
-                            height: 24
+                            height: popup.avatarHeight
-                            width: 24
+                            width: popup.avatarWidth
                             url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
                             onClicked: {
                                 popup.completionClicked(completer.completionAt(model.index))
@@ -208,8 +210,8 @@ Popup {
                         anchors.centerIn: parent
 
                         Avatar {
-                            height: 24
+                            height: popup.avatarHeight
-                            width: 24
+                            width: popup.avatarWidth
                             url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
                             onClicked: popup.completionClicked(completer.completionAt(model.index))
                         }

resources/qml/MatrixTextField.qml

@@ -0,0 +1,51 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.13
+
+TextInput {
+    id: input
+
+    Rectangle {
+        id: blueBar
+
+        anchors.top: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        color: "blue"
+        height: 1
+        width: parent.width
+    
+        Rectangle {
+            id: blackBar
+
+            anchors.verticalCenter: blueBar.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            height: parent.height+1
+            width: 0
+            color: "#000000"
+        
+            states: State {
+                name: "focused"; when: input.activeFocus == true
+                PropertyChanges {
+                    target: blackBar
+                    width: blueBar.width
+                }
+            }
+        
+            transitions: Transition {
+                from: ""
+                to: "focused"
+                reversible: true
+
+                NumberAnimation { 
+                    target: blackBar
+                    properties: "width"
+                    duration: 500
+                    easing.type: Easing.InOutQuad
+                    alwaysRunToEnd: true 
+                }
+            }
+        }
+    }
+}

resources/qml/QuickSwitcher.qml

@@ -4,9 +4,13 @@ import im.nheko 1.0
 
 Popup {
     id: quickSwitcher
+
+    property int textWidth: 48
+
     x: parent.width / 2 - width / 2
     y: parent.height / 4 - height / 2
     width: parent.width / 2
+    height: textWidth
     modal: true
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
     parent: Overlay.overlay
@@ -15,12 +19,11 @@ Popup {
         color: "#aa1E1E1E"
     }
 
-    TextInput {
+    MatrixTextField {
         id: roomTextInput
 
-        focus: true
         anchors.fill: parent
-        color: colors.text
+        font.pixelSize: quickSwitcher.textWidth - 12
 
         onTextEdited: {
             completerPopup.completer.setSearchString(text)
@@ -43,19 +46,23 @@ Popup {
     Completer {
         id: completerPopup
 
-        x: roomTextInput.x
+        x: roomTextInput.x - 5
-        y: roomTextInput.y + parent.height
+        y: roomTextInput.y + roomTextInput.height + 5
-        width: parent.width
+        width: parent.width + 10
         completerName: "room"
         bottomToTop: true
         fullWidth: true
+        avatarHeight: textWidth
+        avatarWidth: textWidth
 
         closePolicy: Popup.NoAutoClose
     }
 
     onOpened: {
         completerPopup.open()
-        roomTextInput.forceActiveFocus()
+        delay(200, function() {
+            roomTextInput.forceActiveFocus()
+        })
     }
 
     onClosed: {
@@ -71,4 +78,15 @@ Popup {
         }
         target: completerPopup
     }
+
+    Timer {
+        id: timer
+    }
+
+    function delay(delayTime, cb) {
+        timer.interval = delayTime;
+        timer.repeat = false;
+        timer.triggered.connect(cb);
+        timer.start();
+    }
 }

resources/res.qrc

@@ -128,6 +128,7 @@
         <file>qml/EncryptionIndicator.qml</file>
         <file>qml/ImageButton.qml</file>
         <file>qml/MatrixText.qml</file>
+        <file>qml/MatrixTextField.qml</file>
         <file>qml/ToggleButton.qml</file>
         <file>qml/MessageInput.qml</file>
         <file>qml/MessageView.qml</file>