mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

keep the DOM small, avoid a node for reactions on every message

Browse source
This commit is contained in:
Bruno Windels 2021-06-04 10:08:07 +02:00
parent 4ef5afc011
commit 2878208e94
1 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/platform/web/ui/session/room/timeline/BaseMessageView.js
View file

@ -17,6 +17,7 @@ limitations under the License.
import {renderStaticAvatar} from "../../../avatar.js"; import {renderStaticAvatar} from "../../../avatar.js";
import {tag} from "../../../general/html.js"; import {tag} from "../../../general/html.js";
import {mountView} from "../../../general/utils.js";
import {TemplateView} from "../../../general/TemplateView.js"; import {TemplateView} from "../../../general/TemplateView.js";
import {Popup} from "../../../general/Popup.js"; import {Popup} from "../../../general/Popup.js";
import {Menu} from "../../../general/Menu.js"; import {Menu} from "../../../general/Menu.js";
@ -36,10 +37,10 @@ export class BaseMessageView extends TemplateView {
unverified: vm.isUnverified, unverified: vm.isUnverified,
continuation: vm => vm.isContinuation, continuation: vm => vm.isContinuation,
}}, [ }}, [
// dynamically added and removed nodes are handled below
this.renderMessageBody(t, vm), this.renderMessageBody(t, vm),
// should be after body as it is overlayed on top // should be after body as it is overlayed on top
t.button({className: "Timeline_messageOptions"}, "⋯"), t.button({className: "Timeline_messageOptions"}, "⋯"),
t.ifView(vm => vm.reactions, vm => new ReactionsView(vm.reactions)),
]); ]);
// given that there can be many tiles, we don't add // given that there can be many tiles, we don't add
// unneeded DOM nodes in case of a continuation, and we add it // unneeded DOM nodes in case of a continuation, and we add it
@ -55,6 +56,21 @@ export class BaseMessageView extends TemplateView {
li.insertBefore(tag.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName), li.firstChild); li.insertBefore(tag.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName), li.firstChild);
} }
}); });
// similarly, we could do this with a simple ifView,
// but that adds a comment node to all messages without reactions
let reactionsView = null;
t.mapSideEffect(vm => vm.reactions, reactions => {
if (reactions && !reactionsView) {
reactionsView = new ReactionsView(vm.reactions);
this.addSubView(reactionsView);
li.appendChild(mountView(reactionsView));
} else if (!reactions && reactionsView) {
li.removeChild(reactionsView.root());
reactionsView.unmount();
this.removeSubView(reactionsView);
reactionsView = null;
}
});
return li; return li;
} }