diff --git a/src/platform/web/ui/session/room/timeline/BaseMediaView.js b/src/platform/web/ui/session/room/timeline/BaseMediaView.js index 2b6b07e1..80c37b81 100644 --- a/src/platform/web/ui/session/room/timeline/BaseMediaView.js +++ b/src/platform/web/ui/session/room/timeline/BaseMediaView.js @@ -14,11 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {TemplateView} from "../../../general/TemplateView.js"; -import {renderMessage} from "./common.js"; +import {BaseMessageView} from "./BaseMessageView.js"; -export class BaseMediaView extends TemplateView { - render(t, vm) { +export class BaseMediaView extends BaseMessageView { + renderMessageBody(t, vm) { const heightRatioPercent = (vm.height / vm.width) * 100; let spacerStyle = `padding-top: ${heightRatioPercent}%;`; if (vm.platform.isIE11) { @@ -52,9 +51,9 @@ export class BaseMediaView extends TemplateView { }); children.push(sendStatus, progress); } - return renderMessage(t, vm, t.div({className: "Timeline_messageBody"}, [ + return t.div({className: "Timeline_messageBody"}, [ t.div({className: "media", style: `max-width: ${vm.width}px`}, children), t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) - ])); + ]); } } diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js new file mode 100644 index 00000000..d95ebd90 --- /dev/null +++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js @@ -0,0 +1,42 @@ +/* +Copyright 2020 Bruno Windels +Copyright 2020 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 {renderStaticAvatar} from "../../../avatar.js"; +import {TemplateView} from "../../../general/TemplateView.js"; + +export class BaseMessageView extends TemplateView { + render(t, vm) { + const classes = { + "Timeline_message": true, + own: vm.isOwn, + unsent: vm.isUnsent, + unverified: vm.isUnverified, + continuation: vm => vm.isContinuation, + }; + return t.li({className: classes}, [ + t.if(vm => !vm.isContinuation, t => renderStaticAvatar(vm, 30, "Timeline_messageAvatar")), + t.if(vm => !vm.isContinuation, t => t.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName)), + this.renderMessageBody(t, vm), + // should be after body as it is overlayed on top + t.button({className: "Timeline_messageOptions"}, "⋯"), + ]); + } + + renderMessageBody() { + + } +} diff --git a/src/platform/web/ui/session/room/timeline/FileView.js b/src/platform/web/ui/session/room/timeline/FileView.js index b45bd011..674f2d23 100644 --- a/src/platform/web/ui/session/room/timeline/FileView.js +++ b/src/platform/web/ui/session/room/timeline/FileView.js @@ -14,22 +14,21 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {TemplateView} from "../../../general/TemplateView.js"; -import {renderMessage} from "./common.js"; +import {BaseMessageView} from "./BaseMessageView.js"; -export class FileView extends TemplateView { - render(t, vm) { +export class FileView extends BaseMessageView { + renderMessageBody(t, vm) { if (vm.isPending) { - return renderMessage(t, vm, t.p([ + return t.p([ vm => vm.label, " ", t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Cancel`), - ])); + ]); } else { - return renderMessage(t, vm, t.p({className: "Timeline_messageBody statusMessage"}, [ + return t.p({className: "Timeline_messageBody statusMessage"}, [ t.button({className: "link", onClick: () => vm.download()}, vm => vm.label), t.time(vm.date + " " + vm.time) - ])); + ]); } } } diff --git a/src/platform/web/ui/session/room/timeline/MissingAttachmentView.js b/src/platform/web/ui/session/room/timeline/MissingAttachmentView.js index 600f9c3c..08d41b0e 100644 --- a/src/platform/web/ui/session/room/timeline/MissingAttachmentView.js +++ b/src/platform/web/ui/session/room/timeline/MissingAttachmentView.js @@ -14,12 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {TemplateView} from "../../../general/TemplateView.js"; -import {renderMessage} from "./common.js"; +import {BaseMessageView} from "./BaseMessageView.js"; -export class MissingAttachmentView extends TemplateView { - render(t, vm) { +export class MissingAttachmentView extends BaseMessageView { + renderMessageBody(t, vm) { const remove = t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Remove`); - return renderMessage(t, vm, t.p({className: "Timeline_messageBody statusMessage"}, [vm.label, " ", remove])); + return t.p({className: "Timeline_messageBody statusMessage"}, [vm.label, " ", remove]); } } diff --git a/src/platform/web/ui/session/room/timeline/RedactedView.js b/src/platform/web/ui/session/room/timeline/RedactedView.js index 0d6e9696..bd485b58 100644 --- a/src/platform/web/ui/session/room/timeline/RedactedView.js +++ b/src/platform/web/ui/session/room/timeline/RedactedView.js @@ -14,14 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {TemplateView} from "../../../general/TemplateView.js"; -import {renderMessage} from "./common.js"; +import {BaseMessageView} from "./BaseMessageView.js"; -export class RedactedView extends TemplateView { - render(t, vm) { +export class RedactedView extends BaseMessageView { + renderMessageBody(t, vm) { const cancelButton = t.if(vm => vm.isRedacting, t => t.button({onClick: () => vm.abortPendingRedaction()}, "Cancel")); - return renderMessage(t, vm, - t.p({className: "Timeline_messageBody statusMessage"}, [vm => vm.description, " ", cancelButton]) - ); + return t.p({className: "Timeline_messageBody statusMessage"}, [vm => vm.description, " ", cancelButton]); } } \ No newline at end of file diff --git a/src/platform/web/ui/session/room/timeline/TextMessageView.js b/src/platform/web/ui/session/room/timeline/TextMessageView.js index 6fd7fdb8..d0aae8f3 100644 --- a/src/platform/web/ui/session/room/timeline/TextMessageView.js +++ b/src/platform/web/ui/session/room/timeline/TextMessageView.js @@ -14,21 +14,19 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {TemplateView} from "../../../general/TemplateView.js"; import {StaticView} from "../../../general/StaticView.js"; import {tag, text} from "../../../general/html.js"; -import {renderMessage} from "./common.js"; +import {BaseMessageView} from "./BaseMessageView.js"; -export class TextMessageView extends TemplateView { - render(t, vm) { - const bodyView = t.mapView(vm => vm.body, body => new BodyView(body)); - return renderMessage(t, vm, t.p({ +export class TextMessageView extends BaseMessageView { + renderMessageBody(t, vm) { + return t.p({ className: "Timeline_messageBody", statusMessage: vm => vm.shape === "message-status" }, [ - bodyView, + t.mapView(vm => vm.body, body => new BodyView(body)), t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time) - ])); + ]); } } diff --git a/src/platform/web/ui/session/room/timeline/common.js b/src/platform/web/ui/session/room/timeline/common.js deleted file mode 100644 index 79fd6c7f..00000000 --- a/src/platform/web/ui/session/room/timeline/common.js +++ /dev/null @@ -1,35 +0,0 @@ -/* -Copyright 2020 Bruno Windels -Copyright 2020 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 {renderStaticAvatar} from "../../../avatar.js"; - -export function renderMessage(t, vm, body) { - const classes = { - "Timeline_message": true, - own: vm.isOwn, - unsent: vm.isUnsent, - unverified: vm.isUnverified, - continuation: vm => vm.isContinuation, - }; - return t.li({className: classes}, [ - t.if(vm => !vm.isContinuation, t => renderStaticAvatar(vm, 30, "Timeline_messageAvatar")), - t.if(vm => !vm.isContinuation, t => t.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName)), - body, - // should be after body as it is overlayed on top - t.button({className: "Timeline_messageOptions"}, "⋯"), - ]); -}