From bae8dc7dd7e468c55be4c7afb6752e4b95954013 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 16 Sep 2021 22:28:19 +0200 Subject: [PATCH 1/4] changes should be true when replyVM is not set and we set an entry --- src/domain/session/room/ComposerViewModel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/session/room/ComposerViewModel.js b/src/domain/session/room/ComposerViewModel.js index dad0fd68..81a8fc17 100644 --- a/src/domain/session/room/ComposerViewModel.js +++ b/src/domain/session/room/ComposerViewModel.js @@ -25,7 +25,7 @@ export class ComposerViewModel extends ViewModel { } setReplyingTo(entry) { - const changed = this._replyVM?.id?.equals(entry?.asEventKey()); + const changed = new Boolean(entry) !== new Boolean(this._replyVM) || !this._replyVM?.id.equals(entry.asEventKey()); if (changed) { this._replyVM = this.disposeTracked(this._replyVM); if (entry) { From f02d52ce4c9e46d31cc646afc6eaa958851081c7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 16 Sep 2021 22:29:13 +0200 Subject: [PATCH 2/4] with !interactive, an array of an array is not a valid Child value why didn't this fail before? --- .../web/ui/session/room/timeline/BaseMessageView.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js index 89127453..73183e05 100644 --- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js +++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js @@ -33,6 +33,10 @@ export class BaseMessageView extends TemplateView { } render(t, vm) { + const children = [this.renderMessageBody(t, vm)]; + if (this._interactive) { + children.push(t.button({className: "Timeline_messageOptions"}, "⋯")); + } const li = t.el(this._tagName, {className: { "Timeline_message": true, own: vm.isOwn, @@ -40,13 +44,8 @@ export class BaseMessageView extends TemplateView { unverified: vm.isUnverified, disabled: !this._interactive, continuation: vm => vm.isContinuation, - }}, [ - // dynamically added and removed nodes are handled below - this.renderMessageBody(t, vm), - // should be after body as it is overlayed on top - this._interactive ? t.button({className: "Timeline_messageOptions"}, "⋯") : [], - ]); const avatar = t.a({href: vm.memberPanelLink, className: "Timeline_messageAvatar"}, [renderStaticAvatar(vm, 30)]); + }}, children); // given that there can be many tiles, we don't add // unneeded DOM nodes in case of a continuation, and we add it // with a side-effect binding to not have to create sub views, From c4477a81eaea4b2267e159c8411247c831c3291b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 16 Sep 2021 22:29:48 +0200 Subject: [PATCH 3/4] don't create the avatar node when we won't need it --- src/platform/web/ui/session/room/timeline/BaseMessageView.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js index 73183e05..e1268cb3 100644 --- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js +++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js @@ -44,7 +44,6 @@ export class BaseMessageView extends TemplateView { unverified: vm.isUnverified, disabled: !this._interactive, continuation: vm => vm.isContinuation, - const avatar = t.a({href: vm.memberPanelLink, className: "Timeline_messageAvatar"}, [renderStaticAvatar(vm, 30)]); }}, children); // given that there can be many tiles, we don't add // unneeded DOM nodes in case of a continuation, and we add it @@ -56,8 +55,10 @@ export class BaseMessageView extends TemplateView { li.removeChild(li.querySelector(".Timeline_messageAvatar")); li.removeChild(li.querySelector(".Timeline_messageSender")); } else if (!isContinuation) { + const avatar = tag.a({href: vm.memberPanelLink, className: "Timeline_messageAvatar"}, [renderStaticAvatar(vm, 30)]); + const sender = tag.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName); li.insertBefore(avatar, li.firstChild); - li.insertBefore(tag.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName), li.firstChild); + li.insertBefore(sender, li.firstChild); } }); // similarly, we could do this with a simple ifView, From 41089e280650a247cca9a96e4b41dfa3f1a3b6a4 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 16 Sep 2021 22:30:03 +0200 Subject: [PATCH 4/4] remove leftover logging --- src/platform/web/ui/session/room/TimelineView.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/web/ui/session/room/TimelineView.ts b/src/platform/web/ui/session/room/TimelineView.ts index de2f44fa..3226e05f 100644 --- a/src/platform/web/ui/session/room/TimelineView.ts +++ b/src/platform/web/ui/session/room/TimelineView.ts @@ -176,7 +176,6 @@ export class TimelineView extends TemplateView { bottomNodeIndex = len - 1; } else { const viewportBottom = scrollTop + clientHeight; - // console.log(`viewportBottom: ${viewportBottom} (${scrollTop} + ${clientHeight})`); const anchoredNodeIndex = findFirstNodeIndexAtOrBelow(tilesNode, viewportBottom); this.anchoredNode = tilesNode.childNodes[anchoredNodeIndex] as HTMLElement; this.anchoredBottom = bottom(this.anchoredNode!);