apply css from prototype, other small changes, keep scroll at bottom
This commit is contained in:
Bruno Windels
parent
d72a7102b2
commit
4a657b279d
24 changed files with 415 additions and 100 deletions
49
index.html
49
index.html
|
|
@ -2,54 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 80vh;
|
||||
border: 1px solid black;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.SessionView {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ListView {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.SessionView > .ListView {
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
border-right: 1px solid black;
|
||||
list-style: none;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.SessionView > .ListView > li {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid grey;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.SessionView > .RoomView {
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.SessionView > .RoomView > .ListView {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.RoomView_error {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<script type="module">
|
||||
|
|
|
|||
4
src/domain/session/avatar.js
Normal file
4
src/domain/session/avatar.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export function avatarInitials(name) {
|
||||
const words = name.split(" ").slice(0, 2);
|
||||
return words.reduce((i, w) => i + w.charAt(0).toUpperCase(), "");
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import EventEmitter from "../../../EventEmitter.js";
|
||||
import TimelineViewModel from "./timeline/TimelineViewModel.js";
|
||||
import {avatarInitials} from "../avatar.js";
|
||||
|
||||
export default class RoomViewModel extends EventEmitter {
|
||||
constructor(room, ownUserId) {
|
||||
|
|
@ -50,6 +51,10 @@ export default class RoomViewModel extends EventEmitter {
|
|||
if (this._timelineError) {
|
||||
return `Something went wrong loading the timeline: ${this._timelineError.message}`;
|
||||
}
|
||||
return null;
|
||||
return "";
|
||||
}
|
||||
|
||||
get avatarInitials() {
|
||||
return avatarInitials(this._room.name);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default class MessageTile extends SimpleTile {
|
|||
}
|
||||
|
||||
get time() {
|
||||
return this._date.toLocaleTimeString();
|
||||
return this._date.toLocaleTimeString({}, {hour: "numeric", minute: "2-digit"});
|
||||
}
|
||||
|
||||
get isOwn() {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,19 @@ export default class RoomNameTile extends SimpleTile {
|
|||
get announcement() {
|
||||
const event = this._entry.event;
|
||||
const content = event.content;
|
||||
return `${event.sender} changed membership to ${content.membership}`;
|
||||
switch (content.membership) {
|
||||
case "invite": return `${event.state_key} was invited to the room by ${event.sender}`;
|
||||
case "join": return `${event.state_key} joined the room`;
|
||||
case "leave": {
|
||||
if (event.state_key === event.sender) {
|
||||
return `${event.state_key} left the room`;
|
||||
} else {
|
||||
const reason = content.reason;
|
||||
return `${event.state_key} was kicked from the room by ${event.sender}${reason ? `: ${reason}` : ""}`;
|
||||
}
|
||||
}
|
||||
case "ban": return `${event.state_key} was banned from the room by ${event.sender}`;
|
||||
default: return `${event.sender} membership changed to ${content.membership}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import MessageTile from "./MessageTile.js";
|
||||
|
||||
export default class TextTile extends MessageTile {
|
||||
get label() {
|
||||
get text() {
|
||||
const content = this._getContent();
|
||||
const body = content && content.body;
|
||||
const sender = this._entry.event.sender;
|
||||
if (this._entry.type === "m.emote") {
|
||||
return `* ${sender} ${body}`;
|
||||
} else {
|
||||
return `${sender}: ${body}`;
|
||||
return body;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import {avatarInitials} from "../avatar.js";
|
||||
|
||||
export default class RoomTileViewModel {
|
||||
// we use callbacks to parent VM instead of emit because
|
||||
// it would be annoying to keep track of subscriptions in
|
||||
|
|
@ -21,4 +23,8 @@ export default class RoomTileViewModel {
|
|||
get name() {
|
||||
return this._room.name;
|
||||
}
|
||||
|
||||
get avatarInitials() {
|
||||
return avatarInitials(this._room.name);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
27
src/ui/web/css/avatar.css
Normal file
27
src/ui/web/css/avatar.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.avatar {
|
||||
--avatar-size: 32px;
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
line-height: var(--avatar-size);
|
||||
font-size: calc(var(--avatar-size) * 0.6);
|
||||
text-align: center;
|
||||
letter-spacing: calc(var(--avatar-size) * -0.05);
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.avatar.large {
|
||||
--avatar-size: 40px;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
56
src/ui/web/css/layout.css
Normal file
56
src/ui/web/css/layout.css
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.SessionView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.SessionView > .main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* mobile layout */
|
||||
@media screen and (max-width: 800px) {
|
||||
.back { display: block !important; }
|
||||
.RoomView, .RoomPlaceholderView { display: none; }
|
||||
.room-shown .RoomView { display: unset; }
|
||||
.room-shown .LeftPanel { display: none; }
|
||||
.right-shown .TimelinePanel { display: none; }
|
||||
}
|
||||
|
||||
.LeftPanel {
|
||||
flex: 0 0 300px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.RoomPlaceholderView, .RoomView {
|
||||
flex: 1 0 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.RoomView {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.TimelinePanel {
|
||||
flex: 3;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.RoomHeader {
|
||||
display: flex;
|
||||
}
|
||||
47
src/ui/web/css/left-panel.css
Normal file
47
src/ui/web/css/left-panel.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
|
||||
.LeftPanel {
|
||||
background: #333;
|
||||
color: white;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.LeftPanel ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.LeftPanel li {
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.LeftPanel li {
|
||||
border-bottom: 1px #555 solid;
|
||||
}
|
||||
|
||||
.LeftPanel li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.LeftPanel li > * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.LeftPanel div.description {
|
||||
margin: 0;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.LeftPanel .description > * {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.LeftPanel .description .last-message {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
21
src/ui/web/css/main.css
Normal file
21
src/ui/web/css/main.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
@import url('layout.css');
|
||||
@import url('left-panel.css');
|
||||
@import url('room.css');
|
||||
@import url('timeline.css');
|
||||
@import url('avatar.css');
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.SyncStatusBar {
|
||||
background-color: #555;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.SyncStatusBar_shown {
|
||||
display: unset;
|
||||
}
|
||||
65
src/ui/web/css/room.css
Normal file
65
src/ui/web/css/room.css
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
.RoomHeader {
|
||||
padding: 10px;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.RoomHeader *:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.RoomHeader > * {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.RoomHeader button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: none;
|
||||
font-size: 1.5em;
|
||||
padding: 0;
|
||||
display: block;
|
||||
background: white;
|
||||
border: none;
|
||||
font-weight: bolder;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.RoomHeader button.back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.RoomHeader .topic {
|
||||
font-size: 0.8em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.back::before {
|
||||
content: "☰";
|
||||
}
|
||||
|
||||
.more::before {
|
||||
content: "⋮";
|
||||
}
|
||||
|
||||
.RoomHeader {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.RoomHeader .description {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.RoomHeader h2 {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.RoomView_error {
|
||||
color: red;
|
||||
}
|
||||
74
src/ui/web/css/timeline.css
Normal file
74
src/ui/web/css/timeline.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
.TimelinePanel ul {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.TimelinePanel li {
|
||||
}
|
||||
|
||||
.message-container {
|
||||
flex: 0 1 auto;
|
||||
max-width: 80%;
|
||||
padding: 5px 10px;
|
||||
margin: 5px 10px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.message-container .sender {
|
||||
margin: 5px 0;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.TextMessageView {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.TextMessageView.own .message-container {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.TextMessageView .message-container time {
|
||||
float: right;
|
||||
padding: 2px 0 0px 20px;
|
||||
font-size: 0.9em;
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.message-container time {
|
||||
font-size: 0.9em;
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.own time {
|
||||
color: lightgreen;
|
||||
}
|
||||
|
||||
.own .message-container {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
.message-container p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.AnnouncementView {
|
||||
margin: 5px 0;
|
||||
padding: 5px 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.AnnouncementView > div {
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
background-color: #333;
|
||||
font-size: 0.9em;
|
||||
color: #CCC;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -19,9 +19,10 @@ function insertAt(parentNode, idx, childNode) {
|
|||
}
|
||||
|
||||
export default class ListView {
|
||||
constructor({list, onItemClick}, childCreator) {
|
||||
constructor({list, onItemClick, className}, childCreator) {
|
||||
this._onItemClick = onItemClick;
|
||||
this._list = list;
|
||||
this._className = className;
|
||||
this._root = null;
|
||||
this._subscription = null;
|
||||
this._childCreator = childCreator;
|
||||
|
|
@ -47,7 +48,11 @@ export default class ListView {
|
|||
}
|
||||
|
||||
mount() {
|
||||
this._root = tag.ul({className: "ListView"});
|
||||
const attr = {};
|
||||
if (this._className) {
|
||||
attr.className = this._className;
|
||||
}
|
||||
this._root = tag.ul(attr);
|
||||
this._loadList();
|
||||
if (this._onItemClick) {
|
||||
this._root.addEventListener("click", this._onClick);
|
||||
|
|
@ -95,25 +100,34 @@ export default class ListView {
|
|||
}
|
||||
|
||||
onAdd(idx, value) {
|
||||
this.onBeforeListChanged();
|
||||
const child = this._childCreator(value);
|
||||
this._childInstances.splice(idx, 0, child);
|
||||
insertAt(this._root, idx, child.mount());
|
||||
this.onListChanged();
|
||||
}
|
||||
|
||||
onRemove(idx, _value) {
|
||||
this.onBeforeListChanged();
|
||||
const [child] = this._childInstances.splice(idx, 1);
|
||||
child.root().remove();
|
||||
child.unmount();
|
||||
this.onListChanged();
|
||||
}
|
||||
|
||||
onMove(fromIdx, toIdx, value) {
|
||||
this.onBeforeListChanged();
|
||||
const [child] = this._childInstances.splice(fromIdx, 1);
|
||||
this._childInstances.splice(toIdx, 0, child);
|
||||
child.root().remove();
|
||||
insertAt(this._root, toIdx, child.root());
|
||||
this.onListChanged();
|
||||
}
|
||||
|
||||
onUpdate(i, value, params) {
|
||||
this._childInstances[i].update(value, params);
|
||||
}
|
||||
|
||||
onBeforeListChanged() {}
|
||||
onListChanged() {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default class TemplateView {
|
|||
this._template = null;
|
||||
}
|
||||
|
||||
update(value) {
|
||||
update(value, prop) {
|
||||
this._template.update(value);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export function text(str) {
|
|||
export const TAG_NAMES = [
|
||||
"ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
|
||||
"p", "strong", "em", "span", "img", "section", "main", "article", "aside",
|
||||
"pre", "button"];
|
||||
"pre", "button", "time"];
|
||||
|
||||
export const tag = {};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default class RoomPlaceholderView {
|
|||
}
|
||||
|
||||
mount() {
|
||||
this._root = tag.div(tag.h2("Choose a room on the left side."));
|
||||
this._root = tag.div({className: "RoomPlaceholderView"}, tag.h2("Choose a room on the left side."));
|
||||
return this._root;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@ import TemplateView from "../general/TemplateView.js";
|
|||
|
||||
export default class RoomTile extends TemplateView {
|
||||
render(t) {
|
||||
return t.li(vm => vm.name);
|
||||
return t.li([
|
||||
t.div({className: "avatar medium"}, vm => vm.avatarInitials),
|
||||
t.div({className: "description"}, t.div({className: "name"}, vm => vm.name))
|
||||
]);
|
||||
}
|
||||
|
||||
// called from ListView
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export default class SessionView {
|
|||
this._syncStatusBar = new SyncStatusBar(this._viewModel.syncStatusViewModel);
|
||||
this._roomList = new ListView(
|
||||
{
|
||||
className: "RoomList",
|
||||
list: this._viewModel.roomList,
|
||||
onItemClick: (roomTile, event) => roomTile.clicked(event)
|
||||
},
|
||||
|
|
@ -35,7 +36,7 @@ export default class SessionView {
|
|||
this._root = tag.div({className: "SessionView"}, [
|
||||
this._syncStatusBar.mount(),
|
||||
tag.div({className: "main"}, [
|
||||
this._roomList.mount(),
|
||||
tag.div({className: "LeftPanel"}, this._roomList.mount()),
|
||||
this._middleSwitcher.mount()
|
||||
])
|
||||
]);
|
||||
|
|
@ -51,6 +52,7 @@ export default class SessionView {
|
|||
|
||||
_onViewModelChange(prop) {
|
||||
if (prop === "currentRoom") {
|
||||
this._root.classList.add("room-shown");
|
||||
this._middleSwitcher.switch(new RoomView(this._viewModel.currentRoom));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export default class SyncStatusBar extends TemplateView {
|
|||
render(t, vm) {
|
||||
return t.div({className: {
|
||||
"SyncStatusBar": true,
|
||||
"SyncStatusBar_shown": true,
|
||||
}}, [
|
||||
vm => vm.status,
|
||||
t.if(vm => !vm.isSyncing, t => t.button({onClick: () => vm.trySync()}, "Try syncing"))
|
||||
|
|
|
|||
|
|
@ -1,55 +1,47 @@
|
|||
import TimelineTile from "./timeline/TimelineTile.js";
|
||||
import ListView from "../../general/ListView.js";
|
||||
import {tag} from "../../general/html.js";
|
||||
import GapView from "./timeline/GapView.js";
|
||||
import TemplateView from "../../general/TemplateView.js";
|
||||
import TimelineList from "./TimelineList.js";
|
||||
|
||||
export default class RoomView {
|
||||
export default class RoomView extends TemplateView {
|
||||
constructor(viewModel) {
|
||||
this._viewModel = viewModel;
|
||||
this._root = null;
|
||||
super(viewModel, true);
|
||||
this._timelineList = null;
|
||||
this._nameLabel = null;
|
||||
this._onViewModelUpdate = this._onViewModelUpdate.bind(this);
|
||||
this._checkScroll = this._checkScroll.bind(this);
|
||||
}
|
||||
|
||||
render(t) {
|
||||
return t.div({className: "RoomView"}, [
|
||||
t.div({className: "TimelinePanel"}, [
|
||||
t.div({className: "RoomHeader"}, [
|
||||
t.button({className: "back"}),
|
||||
t.div({className: "avatar large"}, vm => vm.avatarInitials),
|
||||
t.div({className: "room-description"}, [
|
||||
t.h2(vm => vm.name),
|
||||
]),
|
||||
]),
|
||||
t.div({className: "RoomView_error"}, vm => vm.error),
|
||||
this._timelineList.mount()
|
||||
])
|
||||
]);
|
||||
}
|
||||
|
||||
mount() {
|
||||
this._viewModel.on("change", this._onViewModelUpdate);
|
||||
this._nameLabel = tag.h2(null, this._viewModel.name);
|
||||
this._errorLabel = tag.div({className: "RoomView_error"});
|
||||
|
||||
this._timelineList = new ListView({}, entry => {
|
||||
return entry.shape === "gap" ? new GapView(entry) : new TimelineTile(entry);
|
||||
});
|
||||
this._timelineList.mount();
|
||||
|
||||
this._root = tag.div({className: "RoomView"}, [
|
||||
this._nameLabel,
|
||||
this._errorLabel,
|
||||
this._timelineList.root()
|
||||
]);
|
||||
|
||||
return this._root;
|
||||
this._timelineList = new TimelineList();
|
||||
return super.mount();
|
||||
}
|
||||
|
||||
unmount() {
|
||||
this._timelineList.unmount();
|
||||
this._viewModel.off("change", this._onViewModelUpdate);
|
||||
super.unmount();
|
||||
}
|
||||
|
||||
root() {
|
||||
return this._root;
|
||||
}
|
||||
|
||||
_onViewModelUpdate(prop) {
|
||||
if (prop === "name") {
|
||||
this._nameLabel.innerText = this._viewModel.name;
|
||||
}
|
||||
else if (prop === "timelineViewModel") {
|
||||
this._timelineList.update({list: this._viewModel.timelineViewModel.tiles});
|
||||
} else if (prop === "error") {
|
||||
this._errorLabel.innerText = this._viewModel.error;
|
||||
update(value, prop) {
|
||||
super.update(value, prop);
|
||||
if (prop === "timelineViewModel") {
|
||||
this._timelineList.update({list: this.viewModel.timelineViewModel.tiles});
|
||||
}
|
||||
}
|
||||
|
||||
update() {}
|
||||
_checkScroll() {
|
||||
// const list = this._timelineList.root();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
31
src/ui/web/session/room/TimelineList.js
Normal file
31
src/ui/web/session/room/TimelineList.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import ListView from "../../general/ListView.js";
|
||||
import GapView from "./timeline/GapView.js";
|
||||
import TextMessageView from "./timeline/TextMessageView.js";
|
||||
import AnnouncementView from "./timeline/AnnouncementView.js";
|
||||
|
||||
export default class TimelineList extends ListView {
|
||||
constructor(options = {}) {
|
||||
options.className = "Timeline";
|
||||
super(options, entry => {
|
||||
switch (entry.shape) {
|
||||
case "gap": return new GapView(entry);
|
||||
case "announcement": return new AnnouncementView(entry);
|
||||
case "message":return new TextMessageView(entry);
|
||||
}
|
||||
});
|
||||
this._atBottom = false;
|
||||
}
|
||||
|
||||
onBeforeListChanged() {
|
||||
const root = this.root();
|
||||
const fromBottom = root.scrollHeight - root.scrollTop - root.clientHeight;
|
||||
this._atBottom = fromBottom < 1;
|
||||
}
|
||||
|
||||
onListChanged() {
|
||||
if (this._atBottom) {
|
||||
const root = this.root();
|
||||
root.scrollTop = root.scrollHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,6 @@ import TemplateView from "../../../general/TemplateView.js";
|
|||
|
||||
export default class AnnouncementView extends TemplateView {
|
||||
render(t) {
|
||||
return t.li({className: "AnnouncementView"}, vm => vm.announcement);
|
||||
return t.li({className: "AnnouncementView"}, t.div(vm => vm.announcement));
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import TemplateView from "../../../general/TemplateView.js";
|
|||
|
||||
export default class TextMessageView extends TemplateView {
|
||||
render(t, vm) {
|
||||
// no bindings ... should this be a template view?
|
||||
return t.li(
|
||||
{className: {"TextMessageView": true, own: vm.isOwn}},
|
||||
t.div({className: "message-container"}, [
|
||||
|
|
|
|||
Reference in a new issue