show reactions as ListView of buttons if present

This commit is contained in:
Bruno Windels 2021-06-03 19:16:19 +02:00
parent 2152d5e833
commit b722691e85
3 changed files with 55 additions and 4 deletions

View File

@ -20,7 +20,8 @@ limitations under the License.
grid-template: grid-template:
"avatar sender" auto "avatar sender" auto
"avatar body" auto "avatar body" auto
"time body" 1fr / "time body" 1fr
"time reactions" auto /
30px 1fr; 30px 1fr;
column-gap: 8px; column-gap: 8px;
padding: 4px; padding: 4px;
@ -37,9 +38,10 @@ limitations under the License.
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.Timeline_message { .Timeline_message {
grid-template: grid-template:
"avatar sender" auto "avatar sender" auto
"body body" 1fr "body body" 1fr
"time time" auto / "time time" auto
"reactions reactions" auto /
30px 1fr; 30px 1fr;
} }
@ -211,6 +213,10 @@ only loads when the top comes into view*/
color: #ff4b55; color: #ff4b55;
} }
.Timeline_messageReactions {
grid-area: reactions;
}
.AnnouncementView { .AnnouncementView {
margin: 5px 0; margin: 5px 0;
padding: 5px 10%; padding: 5px 10%;

View File

@ -20,6 +20,7 @@ import {tag} from "../../../general/html.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";
import {ReactionsView} from "./ReactionsView.js";
export class BaseMessageView extends TemplateView { export class BaseMessageView extends TemplateView {
constructor(value) { constructor(value) {
@ -38,6 +39,7 @@ export class BaseMessageView extends TemplateView {
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

View File

@ -0,0 +1,43 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ListView} from "../../../general/ListView.js";
import {TemplateView} from "../../../general/TemplateView.js";
export class ReactionsView extends ListView {
constructor(reactionsViewModel) {
const options = {
className: "Timeline_messageReactions",
list: reactionsViewModel.reactions,
onItemClick: (reactionView, evt) => reactionView.onClick(),
}
super(options, reactionVM => new ReactionView(reactionVM));
}
}
class ReactionView extends TemplateView {
render(t, vm) {
const haveReacted = vm => vm.haveReacted;
return t.button({
disabled: haveReacted,
className: {haveReacted},
}, [vm.key, " ", vm => `${vm.count}`]);
}
onClick() {
this.value.react();
}
}