mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-22 04:21:44 +00:00
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:
parent
9a1b1320c0
commit
42e3444731
@ -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)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user