diff --git a/resources/qml/Completer.qml b/resources/qml/Completer.qml
index cef19fbf..9fad7156 100644
--- a/resources/qml/Completer.qml
+++ b/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
- width: 24
+ height: popup.avatarHeight
+ 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
- width: 24
+ height: popup.avatarHeight
+ 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
- width: 24
+ height: popup.avatarHeight
+ width: popup.avatarWidth
url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
onClicked: popup.completionClicked(completer.completionAt(model.index))
}
diff --git a/resources/qml/MatrixTextField.qml b/resources/qml/MatrixTextField.qml
new file mode 100644
index 00000000..2852044b
--- /dev/null
+++ b/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
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/resources/qml/QuickSwitcher.qml b/resources/qml/QuickSwitcher.qml
index 609c443f..2d2ae5cf 100644
--- a/resources/qml/QuickSwitcher.qml
+++ b/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
- y: roomTextInput.y + parent.height
- width: parent.width
+ x: roomTextInput.x - 5
+ y: roomTextInput.y + roomTextInput.height + 5
+ 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();
+ }
}
\ No newline at end of file
diff --git a/resources/res.qrc b/resources/res.qrc
index d30d6e18..7d6b3a6d 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -128,6 +128,7 @@
qml/EncryptionIndicator.qml
qml/ImageButton.qml
qml/MatrixText.qml
+ qml/MatrixTextField.qml
qml/ToggleButton.qml
qml/MessageInput.qml
qml/MessageView.qml