status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(StatusChatInput): fix text area alignment so it doesn't jump 

There was a UI bug in the StatusChatInput where, only in the timeline view,
the scrollview wrapping the textarea would have a weird behaviour in which
it would render the visible text(placeholder) *lower* than how it's actually
positioned. Once the textarea is clicked, it would re-adjust with a smooth
scroll.

Obviously this is undesired behaviour as the text should always render in the
correct position.

This commit finally fixes this weird behaviour by moving the dynamic height
calculation to the wrapping Rectangle and changing the textarea's top- and
bottom paddings dynamically.

Fixes #2018
This commit is contained in:
Pascal Precht 2021-03-24 11:11:56 +01:00 committed by Iuri Matias
parent 9a1b1320c0
commit 42e3444731
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/shared/status/StatusChatInput.qml
View File

@ -649,7 +649,7 @@ Rectangle {
Rectangle {
id: messageInput
property int maxInputFieldHeight: control.isStatusUpdateInput ? 123 : 112
property int maxInputFieldHeight: control.isStatusUpdateInput ? 124 : 112
property int defaultInputFieldHeight: control.isStatusUpdateInput ? 56 : 40
anchors.left: imageBtn.visible ? imageBtn.right : parent.left
anchors.leftMargin: imageBtn.visible ? 5 : Style.current.smallPadding
@ -658,7 +658,16 @@ Rectangle {
anchors.bottomMargin: control.isStatusUpdateInput ? 0 : 12
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
height: scrollView.height
height: {
if (messageInputField.implicitHeight <= messageInput.defaultInputFieldHeight) {
return messageInput.defaultInputFieldHeight
}
if (messageInputField.implicitHeight >= messageInput.maxInputFieldHeight) {
return messageInput.maxInputFieldHeight
}
return messageInputField.implicitHeight
}
color: Style.current.inputBackground
radius: control.isStatusUpdateInput ? 36 :
height > defaultInputFieldHeight + 1 || extendedArea.visible ? 16 : 32
@ -689,7 +698,7 @@ Rectangle {
height: {
if (visible) {
if (isImage) {
return imageArea.height + Style.current.halfPadding
return imageArea.height
}
if (isReply) {
@ -763,37 +772,27 @@ Rectangle {
ScrollView {
id: scrollView
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: profileImage.visible ? profileImage.right : parent.left
anchors.leftMargin: Style.current.smallPadding
anchors.right: actions.left
anchors.rightMargin: Style.current.halfPadding
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
height: {
if (messageInputField.implicitHeight <= messageInput.defaultInputFieldHeight) {
return messageInput.defaultInputFieldHeight
}
if (messageInputField.implicitHeight >= messageInput.maxInputFieldHeight) {
return messageInput.maxInputFieldHeight
}
return messageInputField.implicitHeight
}
TextArea {
id: messageInputField
textFormat: Text.RichText
verticalAlignment: TextEdit.AlignVCenter
font.pixelSize: 15
font.family: Style.current.fontRegular.name
wrapMode: TextArea.Wrap
height: parent.height
//% "Type a message"
placeholderText: qsTrId("type-a-message")
placeholderTextColor: Style.current.secondaryText
selectByMouse: true
color: Style.current.textColor
topPadding: Style.current.smallPadding
bottomPadding: 12
topPadding: control.isStatusUpdateInput ? 18 : Style.current.smallPadding
bottomPadding: control.isStatusUpdateInput ? 14 : 12
Keys.onPressed: onKeyPress(event)
Keys.onReleased: onRelease(event) // gives much more up to date cursorPosition
Keys.onShortcutOverride: event.accepted = isUploadFilePressed(event)