Feat: emit height difference of NcReferenceList after loading. #5730
Conversation
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
DorraJaouad
added
enhancement
| this.loading = false | ||
| this.$emit('loaded') | ||
| this.$emit('loaded', height) |
There was a problem hiding this comment.
I would say reporting the height is not really a expected payload of the event, no?
Because you do not really need it (see below).
| handleReferenceListLoaded(oldHeight) { | ||
| this.$nextTick(() => { | ||
| // emit height difference to parent component | ||
| const heightDiff = this.$refs.referenceList.$el.offsetHeight - oldHeight | ||
| this.$emit('reference-list-loaded', heightDiff) | ||
| }) | ||
| }, |
There was a problem hiding this comment.
| handleReferenceListLoaded(oldHeight) { | |
| this.$nextTick(() => { | |
| // emit height difference to parent component | |
| const heightDiff = this.$refs.referenceList.$el.offsetHeight - oldHeight | |
| this.$emit('reference-list-loaded', heightDiff) | |
| }) | |
| }, | |
| handleReferenceListLoaded() { | |
| const oldHeight = this.$refs.referenceList.$el.offsetHeight | |
| this.$nextTick(() => { | |
| // emit height difference to parent component | |
| const heightDiff = this.$refs.referenceList.$el.offsetHeight - oldHeight | |
| this.$emit('reference-list-loaded', heightDiff) | |
| }) | |
| }, |
There was a problem hiding this comment.
But in general would it not just work if you emit any event here and in Talk react on that element by scrolling the element into view?
Then you do not need any height calculation here
There was a problem hiding this comment.
calculating the old height here may be already updated with the reference data added height ?
in Talk react on that element by scrolling the element into view?
The goal not to scroll to the element but to calculate the extra height added (it will scroll the view above its previous position) and then we scroll back to the right position.
There was a problem hiding this comment.
calculating the old height here may be already updated with the reference data added height ?
I am not sure about the timing of Vue's event handling, sadly I could not find good documentation about this. Maybe @ShGKme knows more?
The goal not to scroll to the element but to calculate the extra height added (it will scroll the view above its previous position) and then we scroll back to the right position.
I do not know the richtext part good enough (and the talk code) so your solution might be the best.
But then I still would not pass the height as magic number to the event but use a context object with proper property naming like
this.$emit('reference-list-loaded', { heightDiff })
☑️ Resolves
Needed for nextcloud/spreed#10627. Link previews are adding extra height which causes jumping in the chat scroll.
🖼️ Screenshots
No visual changes
🚧 Tasks
loadednow has height difference as a payload [CHANGED BEHAVIOR]🏁 Checklist
nextrequested with a Vue 3 upgrade