mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-22 19:14:52 +01:00
Merge pull request #8 from vector-im/bwindels/selectactiveroom
Mark active room visually in left panel
This commit is contained in:
commit
348174f973
@ -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,7 +71,11 @@ export class ViewModel extends EventEmitter {
|
||||
}
|
||||
|
||||
emitChange(changedProps) {
|
||||
this.emit("change", changedProps);
|
||||
if (this._options.emitChange) {
|
||||
this._options.emitChange(changedProps);
|
||||
} else {
|
||||
this.emit("change", changedProps);
|
||||
}
|
||||
}
|
||||
|
||||
get clock() {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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
|
||||
const value = this._mappedValues.get(key);
|
||||
this.onUpdate(key, value, params);
|
||||
};
|
||||
}
|
||||
|
||||
_emitSpontaneousUpdate(key, params) {
|
||||
const value = this._mappedValues.get(key);
|
||||
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();
|
||||
|
@ -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;
|
||||
|
@ -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))
|
||||
]);
|
||||
|
Loading…
Reference in New Issue
Block a user