Merge pull request #8 from vector-im/bwindels/selectactiveroom

Mark active room visually in left panel
This commit is contained in:
Bruno Windels 2020-08-12 15:51:42 +00:00 committed by GitHub
commit 348174f973
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 57 additions and 24 deletions

View File

@ -22,10 +22,10 @@ import {EventEmitter} from "../utils/EventEmitter.js";
import {Disposables} from "../utils/Disposables.js";
export class ViewModel extends EventEmitter {
constructor({clock} = {}) {
constructor({clock, emitChange} = {}) {
super();
this.disposables = null;
this._options = {clock};
this._options = {clock, emitChange};
}
childOptions(explicitOptions) {
@ -71,8 +71,12 @@ export class ViewModel extends EventEmitter {
}
emitChange(changedProps) {
if (this._options.emitChange) {
this._options.emitChange(changedProps);
} else {
this.emit("change", changedProps);
}
}
get clock() {
return this._options.clock;

View File

@ -28,12 +28,13 @@ export class SessionViewModel extends ViewModel {
sync: sessionContainer.sync,
reconnector: sessionContainer.reconnector
})));
this._currentRoomTileViewModel = null;
this._currentRoomViewModel = null;
const roomTileVMs = this._session.rooms.mapValues((room, emitUpdate) => {
const roomTileVMs = this._session.rooms.mapValues((room, emitChange) => {
return new RoomTileViewModel({
room,
emitUpdate,
emitOpen: room => this._openRoom(room)
emitChange,
emitOpen: this._openRoom.bind(this)
});
});
this._roomList = roomTileVMs.sortValues((a, b) => a.compare(b));
@ -62,7 +63,11 @@ export class SessionViewModel extends ViewModel {
}
}
_openRoom(room) {
_openRoom(room, roomTileVM) {
if (this._currentRoomTileViewModel) {
this._currentRoomTileViewModel.close();
}
this._currentRoomTileViewModel = roomTileVM;
if (this._currentRoomViewModel) {
this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
}

View File

@ -15,20 +15,33 @@ limitations under the License.
*/
import {avatarInitials} from "../avatar.js";
import {ViewModel} from "../../ViewModel.js";
export class RoomTileViewModel {
export class RoomTileViewModel extends ViewModel {
// we use callbacks to parent VM instead of emit because
// it would be annoying to keep track of subscriptions in
// parent for all RoomTileViewModels
// emitUpdate is ObservableMap/ObservableList update mechanism
constructor({room, emitUpdate, emitOpen}) {
constructor(options) {
super(options);
const {room, emitOpen} = options;
this._room = room;
this._emitUpdate = emitUpdate;
this._emitOpen = emitOpen;
this._isOpen = false;
}
// called by parent for now (later should integrate with router)
close() {
if (this._isOpen) {
this._isOpen = false;
this.emitChange("isOpen");
}
}
open() {
this._emitOpen(this._room);
this._isOpen = true;
this.emitChange("isOpen");
this._emitOpen(this._room, this);
}
compare(other) {
@ -36,6 +49,10 @@ export class RoomTileViewModel {
return this._room.name.localeCompare(other._room.name);
}
get isOpen() {
return this._isOpen;
}
get name() {
return this._room.name;
}

View File

@ -16,7 +16,7 @@ limitations under the License.
import {BaseObservableMap} from "./BaseObservableMap.js";
/*
so a mapped value can emit updates on it's own with this._updater that is passed in the mapping function
so a mapped value can emit updates on it's own with this._emitSpontaneousUpdate that is passed in the mapping function
how should the mapped value be notified of an update though? and can it then decide to not propagate the update?
*/
export class MappedMap extends BaseObservableMap {
@ -25,14 +25,18 @@ export class MappedMap extends BaseObservableMap {
this._source = source;
this._mapper = mapper;
this._mappedValues = new Map();
this._updater = (key, params) => { // this should really be (value, params) but can't make that work for now
}
_emitSpontaneousUpdate(key, params) {
const value = this._mappedValues.get(key);
this.onUpdate(key, value, params);
};
if (value) {
this.emitUpdate(key, value, params);
}
}
onAdd(key, value) {
const mappedValue = this._mapper(value, this._updater);
const emitSpontaneousUpdate = this._emitSpontaneousUpdate.bind(this, key);
const mappedValue = this._mapper(value, emitSpontaneousUpdate);
this._mappedValues.set(key, mappedValue);
this.emitAdd(key, mappedValue);
}
@ -47,17 +51,16 @@ export class MappedMap extends BaseObservableMap {
onUpdate(key, value, params) {
const mappedValue = this._mappedValues.get(key);
if (mappedValue !== undefined) {
const newParams = this._updater(value, params);
// if (newParams !== undefined) {
this.emitUpdate(key, mappedValue, newParams);
// }
// TODO: map params somehow if needed?
this.emitUpdate(key, mappedValue, params);
}
}
onSubscribeFirst() {
this._subscription = this._source.subscribe(this);
for (let [key, value] of this._source) {
const mappedValue = this._mapper(value, this._updater);
const emitSpontaneousUpdate = this._emitSpontaneousUpdate.bind(this, key);
const mappedValue = this._mapper(value, emitSpontaneousUpdate);
this._mappedValues.set(key, mappedValue);
}
super.onSubscribeFirst();

View File

@ -46,6 +46,11 @@ limitations under the License.
align-items: center;
}
.LeftPanel li.active {
background: lightgray;
color: black;
}
.LeftPanel li {
border-bottom: 1px #555 solid;
}
@ -66,7 +71,6 @@ a {
color: white;
}
.SessionStatusView {
padding: 5px;
background-color: #555;

View File

@ -18,7 +18,7 @@ import {TemplateView} from "../general/TemplateView.js";
export class RoomTile extends TemplateView {
render(t) {
return t.li([
return t.li({"className": {"active": vm => vm.isOpen}}, [
t.div({className: "avatar medium"}, vm => vm.avatarInitials),
t.div({className: "description"}, t.div({className: "name"}, vm => vm.name))
]);