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

View File

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