WIP: Render the whole view instead of messageBody

This commit is contained in:
RMidhunSuresh 2021-12-17 16:22:45 +05:30
parent 7f1b3e25e8
commit 1b9f970d7f
5 changed files with 51 additions and 22 deletions

View file

@ -17,7 +17,7 @@ limitations under the License.
import {TemplateView} from "../../general/TemplateView"; import {TemplateView} from "../../general/TemplateView";
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 {viewClassForEntry} from "./TimelineView" import {viewClassForEntry} from "./common"
export class MessageComposer extends TemplateView { export class MessageComposer extends TemplateView {
constructor(viewModel) { constructor(viewModel) {

View file

@ -27,6 +27,7 @@ import {AnnouncementView} from "./timeline/AnnouncementView.js";
import {RedactedView} from "./timeline/RedactedView.js"; import {RedactedView} from "./timeline/RedactedView.js";
import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js"; import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js";
import {BaseObservableList as ObservableList} from "../../../../../observable/list/BaseObservableList"; import {BaseObservableList as ObservableList} from "../../../../../observable/list/BaseObservableList";
import {viewClassForEntry} from "./common";
//import {TimelineViewModel} from "../../../../../domain/session/room/timeline/TimelineViewModel.js"; //import {TimelineViewModel} from "../../../../../domain/session/room/timeline/TimelineViewModel.js";
export interface TimelineViewModel extends IObservableValue { export interface TimelineViewModel extends IObservableValue {
@ -35,25 +36,9 @@ export interface TimelineViewModel extends IObservableValue {
setVisibleTileRange(start?: SimpleTile, end?: SimpleTile); setVisibleTileRange(start?: SimpleTile, end?: SimpleTile);
} }
type TileView = GapView | AnnouncementView | TextMessageView | export type TileView = GapView | AnnouncementView | TextMessageView |
ImageView | VideoView | FileView | MissingAttachmentView | RedactedView; ImageView | VideoView | FileView | MissingAttachmentView | RedactedView;
type TileViewConstructor = (this: TileView, SimpleTile) => void;
export function viewClassForEntry(entry: SimpleTile): TileViewConstructor | undefined {
switch (entry.shape) {
case "gap": return GapView;
case "announcement": return AnnouncementView;
case "message":
case "message-status":
return TextMessageView;
case "image": return ImageView;
case "video": return VideoView;
case "file": return FileView;
case "missing-attachment": return MissingAttachmentView;
case "redacted":
return RedactedView;
}
}
function bottom(node: HTMLElement): number { function bottom(node: HTMLElement): number {
return node.offsetTop + node.clientHeight; return node.offsetTop + node.clientHeight;

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 {TextMessageView} from "./timeline/TextMessageView.js";
import {ImageView} from "./timeline/ImageView.js";
import {VideoView} from "./timeline/VideoView.js";
import {FileView} from "./timeline/FileView.js";
import {MissingAttachmentView} from "./timeline/MissingAttachmentView.js";
import {AnnouncementView} from "./timeline/AnnouncementView.js";
import {RedactedView} from "./timeline/RedactedView.js";
import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js";
import {GapView} from "./timeline/GapView.js";
import type {TileView} from "./TimelineView";
type TileViewConstructor = (this: TileView, SimpleTile) => void;
export function viewClassForEntry(entry: SimpleTile): TileViewConstructor | undefined {
switch (entry.shape) {
case "gap": return GapView;
case "announcement": return AnnouncementView;
case "message":
case "message-status":
return TextMessageView;
case "image": return ImageView;
case "video": return VideoView;
case "file": return FileView;
case "missing-attachment": return MissingAttachmentView;
case "redacted":
return RedactedView;
}
}

View file

@ -54,7 +54,7 @@ export class BaseMessageView extends TemplateView {
if (isContinuation && wasContinuation === false) { if (isContinuation && wasContinuation === false) {
li.removeChild(li.querySelector(".Timeline_messageAvatar")); li.removeChild(li.querySelector(".Timeline_messageAvatar"));
li.removeChild(li.querySelector(".Timeline_messageSender")); li.removeChild(li.querySelector(".Timeline_messageSender"));
} else if (!isContinuation) { } else if (!isContinuation && this._interactive) {
const avatar = tag.a({href: vm.memberPanelLink, className: "Timeline_messageAvatar"}, [renderStaticAvatar(vm, 30)]); 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); const sender = tag.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName);
li.insertBefore(avatar, li.firstChild); li.insertBefore(avatar, li.firstChild);

View file

@ -16,7 +16,7 @@ limitations under the License.
import {renderStaticAvatar} from "../../../avatar"; import {renderStaticAvatar} from "../../../avatar";
import {TemplateView} from "../../../general/TemplateView"; import {TemplateView} from "../../../general/TemplateView";
import {viewClassForEntry} from "../TimelineView"; import {viewClassForEntry} from "../common";
export class ReplyPreviewView extends TemplateView { export class ReplyPreviewView extends TemplateView {
render(t, vm) { render(t, vm) {
@ -26,8 +26,9 @@ export class ReplyPreviewView extends TemplateView {
_renderReplyPreview(t, vm) { _renderReplyPreview(t, vm) {
// todo: this should probably be called viewClassForTile instead // todo: this should probably be called viewClassForTile instead
const viewClass = viewClassForEntry(vm); const viewClass = viewClassForEntry(vm);
const view = new viewClass(vm) const view = new viewClass(vm, false)
const rendered = this._renderContent(t, vm, view); // const rendered = this._renderContent(t, vm, view);
const rendered = view.render(t, vm);
return this._renderReplyHeader(t, vm, [rendered]); return this._renderReplyHeader(t, vm, [rendered]);
} }