have a single tile view that supports all 3 view models

This commit is contained in:
Bruno Windels 2022-02-08 16:22:44 +01:00
parent 5325b0b466
commit 743f2270e5
4 changed files with 22 additions and 83 deletions

View File

@ -25,17 +25,14 @@ export class InviteTileViewModel extends BaseTileViewModel {
this._url = this.urlCreator.openRoomActionUrl(this._invite.id);
}
get busy() {
return this._invite.accepting || this._invite.rejecting;
}
get kind() {
return "invite";
}
get url() {
return this._url;
}
get busy() { return this._invite.accepting || this._invite.rejecting; }
get kind() { return "invite"; }
get url() { return this._url; }
get name() { return this._invite.name; }
get isHighlighted() { return true; }
get isUnread() { return true; }
get badgeCount() { return this.i18n`!`; }
get _avatarSource() { return this._invite; }
compare(other) {
const parentComparison = super.compare(other);
@ -44,12 +41,4 @@ export class InviteTileViewModel extends BaseTileViewModel {
}
return other._invite.timestamp - this._invite.timestamp;
}
get name() {
return this._invite.name;
}
get _avatarSource() {
return this._invite;
}
}

View File

@ -1,50 +0,0 @@
/*
Copyright 2020 Bruno Windels <bruno@windels.cloud>
Copyright 2020, 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 {TemplateView} from "../../general/TemplateView";
import {AvatarView} from "../../AvatarView";
import {spinner} from "../../common.js";
export class InviteTileView extends TemplateView {
render(t, vm) {
const classes = {
"active": vm => vm.isOpen,
"hidden": vm => vm.hidden
};
return t.li({"className": classes}, [
t.a({href: vm.url}, [
t.view(new AvatarView(vm, 32), {parentProvidesUpdates: true}),
t.div({className: "description"}, [
t.div({className: "name"}, vm => vm.name),
t.map(vm => vm.busy, busy => {
if (busy) {
return spinner(t);
} else {
return t.div({className: "badge highlighted"}, "!");
}
})
])
])
]);
}
update(value, props) {
super.update(value);
// update the AvatarView as we told it to not subscribe itself with parentProvidesUpdates
this.updateSubViews(value, props);
}
}

View File

@ -17,7 +17,6 @@ limitations under the License.
import {ListView} from "../../general/ListView";
import {TemplateView} from "../../general/TemplateView";
import {RoomTileView} from "./RoomTileView.js";
import {InviteTileView} from "./InviteTileView.js";
class FilterField extends TemplateView {
render(t, options) {
@ -63,13 +62,7 @@ export class LeftPanelView extends TemplateView {
className: "RoomList",
list: vm.tileViewModels,
},
tileVM => {
if (tileVM.kind === "invite" || tileVM.kind === "roomBeingCreated") {
return new InviteTileView(tileVM);
} else {
return new RoomTileView(tileVM);
}
}
tileVM => new RoomTileView(tileVM)
));
const utilitiesRow = t.div({className: "utilities"}, [
t.a({className: "button-utility close-session", href: vm.closeUrl, "aria-label": vm.i18n`Back to account list`, title: vm.i18n`Back to account list`}),

View File

@ -17,6 +17,7 @@ limitations under the License.
import {TemplateView} from "../../general/TemplateView";
import {AvatarView} from "../../AvatarView.js";
import {spinner} from "../../common.js";
export class RoomTileView extends TemplateView {
render(t, vm) {
@ -29,13 +30,19 @@ export class RoomTileView extends TemplateView {
t.view(new AvatarView(vm, 32), {parentProvidesUpdates: true}),
t.div({className: "description"}, [
t.div({className: {"name": true, unread: vm => vm.isUnread}}, vm => vm.name),
t.div({
className: {
badge: true,
highlighted: vm => vm.isHighlighted,
hidden: vm => !vm.badgeCount
t.map(vm => vm.busy, busy => {
if (busy) {
return spinner(t);
} else {
return t.div({
className: {
badge: true,
highlighted: vm => vm.isHighlighted,
hidden: vm => !vm.badgeCount
}
}, vm => vm.badgeCount);
}
}, vm => vm.badgeCount),
})
])
])
]);