Use the proper tile view to display reply preview
This commit is contained in:
parent
650389538d
commit
b0c5b2f2ce
2 changed files with 16 additions and 14 deletions
|
@ -18,6 +18,7 @@ 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 {TextMessageView} from "./timeline/TextMessageView.js";
|
import {TextMessageView} from "./timeline/TextMessageView.js";
|
||||||
|
import {viewClassForEntry} from "./TimelineList.js"
|
||||||
|
|
||||||
export class MessageComposer extends TemplateView {
|
export class MessageComposer extends TemplateView {
|
||||||
constructor(viewModel) {
|
constructor(viewModel) {
|
||||||
|
@ -33,8 +34,10 @@ export class MessageComposer extends TemplateView {
|
||||||
onKeydown: e => this._onKeyDown(e),
|
onKeydown: e => this._onKeyDown(e),
|
||||||
onInput: () => vm.setInput(this._input.value),
|
onInput: () => vm.setInput(this._input.value),
|
||||||
});
|
});
|
||||||
const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => !rvm ? null :
|
const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => {
|
||||||
t.div({
|
const View = rvm && viewClassForEntry(rvm);
|
||||||
|
if (!View) { return null; }
|
||||||
|
return t.div({
|
||||||
className: "MessageComposer_replyPreview"
|
className: "MessageComposer_replyPreview"
|
||||||
}, [
|
}, [
|
||||||
t.span({ className: "replying" }, "Replying"),
|
t.span({ className: "replying" }, "Replying"),
|
||||||
|
@ -42,10 +45,9 @@ export class MessageComposer extends TemplateView {
|
||||||
className: "cancel",
|
className: "cancel",
|
||||||
onClick: () => this._clearReplyingTo()
|
onClick: () => this._clearReplyingTo()
|
||||||
}, "Close"),
|
}, "Close"),
|
||||||
// TODO need proper view, not just assumed TextMessageView
|
t.view(new View(rvm, true, "div"))
|
||||||
t.view(new TextMessageView(vm.replyViewModel, true, "div"))
|
|
||||||
])
|
])
|
||||||
);
|
});
|
||||||
const input = t.div({className: "MessageComposer_input"}, [
|
const input = t.div({className: "MessageComposer_input"}, [
|
||||||
this._input,
|
this._input,
|
||||||
t.button({
|
t.button({
|
||||||
|
|
|
@ -24,7 +24,7 @@ import {MissingAttachmentView} from "./timeline/MissingAttachmentView.js";
|
||||||
import {AnnouncementView} from "./timeline/AnnouncementView.js";
|
import {AnnouncementView} from "./timeline/AnnouncementView.js";
|
||||||
import {RedactedView} from "./timeline/RedactedView.js";
|
import {RedactedView} from "./timeline/RedactedView.js";
|
||||||
|
|
||||||
function viewClassForEntry(entry) {
|
export function viewClassForEntry(entry) {
|
||||||
switch (entry.shape) {
|
switch (entry.shape) {
|
||||||
case "gap": return GapView;
|
case "gap": return GapView;
|
||||||
case "announcement": return AnnouncementView;
|
case "announcement": return AnnouncementView;
|
||||||
|
|
Reference in a new issue