mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
more css fixes, and make back button work for compact layout
This commit is contained in:
parent
38a8132397
commit
fc873fbfa5
@ -10,12 +10,12 @@ export default class SessionViewModel extends EventEmitter {
|
||||
this._syncStatusViewModel = new SyncStatusViewModel(sync);
|
||||
this._currentRoomViewModel = null;
|
||||
const roomTileVMs = this._session.rooms.mapValues((room, emitUpdate) => {
|
||||
return new RoomTileViewModel({
|
||||
room,
|
||||
emitUpdate,
|
||||
emitOpen: room => this._openRoom(room)
|
||||
});
|
||||
return new RoomTileViewModel({
|
||||
room,
|
||||
emitUpdate,
|
||||
emitOpen: room => this._openRoom(room)
|
||||
});
|
||||
});
|
||||
this._roomList = roomTileVMs.sortValues((a, b) => a.compare(b));
|
||||
}
|
||||
|
||||
@ -31,12 +31,24 @@ export default class SessionViewModel extends EventEmitter {
|
||||
return this._currentRoomViewModel;
|
||||
}
|
||||
|
||||
_closeCurrentRoom() {
|
||||
if (this._currentRoomViewModel) {
|
||||
this._currentRoomViewModel.dispose();
|
||||
this._currentRoomViewModel = null;
|
||||
this.emit("change", "currentRoom");
|
||||
}
|
||||
}
|
||||
|
||||
_openRoom(room) {
|
||||
if (this._currentRoomViewModel) {
|
||||
this._currentRoomViewModel.disable();
|
||||
this._currentRoomViewModel.dispose();
|
||||
}
|
||||
this._currentRoomViewModel = new RoomViewModel(room, this._session.userId);
|
||||
this._currentRoomViewModel.enable();
|
||||
this._currentRoomViewModel = new RoomViewModel({
|
||||
room,
|
||||
ownUserId: this._session.userId,
|
||||
closeCallback: () => this._closeCurrentRoom(),
|
||||
});
|
||||
this._currentRoomViewModel.load();
|
||||
this.emit("change", "currentRoom");
|
||||
}
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import TimelineViewModel from "./timeline/TimelineViewModel.js";
|
||||
import {avatarInitials} from "../avatar.js";
|
||||
|
||||
export default class RoomViewModel extends EventEmitter {
|
||||
constructor(room, ownUserId) {
|
||||
constructor({room, ownUserId, closeCallback}) {
|
||||
super();
|
||||
this._room = room;
|
||||
this._ownUserId = ownUserId;
|
||||
@ -11,9 +11,10 @@ export default class RoomViewModel extends EventEmitter {
|
||||
this._timelineVM = null;
|
||||
this._onRoomChange = this._onRoomChange.bind(this);
|
||||
this._timelineError = null;
|
||||
this._closeCallback = closeCallback;
|
||||
}
|
||||
|
||||
async enable() {
|
||||
async load() {
|
||||
this._room.on("change", this._onRoomChange);
|
||||
try {
|
||||
this._timeline = await this._room.openTimeline();
|
||||
@ -26,13 +27,18 @@ export default class RoomViewModel extends EventEmitter {
|
||||
}
|
||||
}
|
||||
|
||||
disable() {
|
||||
dispose() {
|
||||
// this races with enable, on the await openTimeline()
|
||||
if (this._timeline) {
|
||||
// will stop the timeline from delivering updates on entries
|
||||
this._timeline.close();
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this._closeCallback();
|
||||
}
|
||||
|
||||
// room doesn't tell us yet which fields changed,
|
||||
// so emit all fields originating from summary
|
||||
_onRoomChange() {
|
||||
|
@ -21,7 +21,7 @@ body {
|
||||
|
||||
/* mobile layout */
|
||||
@media screen and (max-width: 800px) {
|
||||
div.back { display: block !important; }
|
||||
.RoomHeader button.back { display: block; }
|
||||
div.RoomView, div.RoomPlaceholderView { display: none; }
|
||||
div.LeftPanel {flex-grow: 1;}
|
||||
div.room-shown div.RoomView { display: unset; }
|
||||
|
@ -4,12 +4,13 @@
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.RoomHeader *:last-child {
|
||||
margin-right: 0 !important;
|
||||
.RoomHeader > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.RoomHeader > * {
|
||||
margin-right: 10px !important;
|
||||
margin-right: 10px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.RoomHeader button {
|
||||
@ -25,10 +26,15 @@
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.RoomHeader button.back {
|
||||
.RoomHeader .back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.RoomHeader .room-description {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.RoomHeader .topic {
|
||||
font-size: 0.8em;
|
||||
overflow: hidden;
|
||||
|
@ -52,8 +52,13 @@ export default class SessionView {
|
||||
|
||||
_onViewModelChange(prop) {
|
||||
if (prop === "currentRoom") {
|
||||
this._root.classList.add("room-shown");
|
||||
this._middleSwitcher.switch(new RoomView(this._viewModel.currentRoom));
|
||||
if (this._viewModel.currentRoom) {
|
||||
this._root.classList.add("room-shown");
|
||||
this._middleSwitcher.switch(new RoomView(this._viewModel.currentRoom));
|
||||
} else {
|
||||
this._root.classList.remove("room-shown");
|
||||
this._middleSwitcher.switch(new RoomPlaceholderView());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -7,11 +7,11 @@ export default class RoomView extends TemplateView {
|
||||
this._timelineList = null;
|
||||
}
|
||||
|
||||
render(t) {
|
||||
render(t, vm) {
|
||||
return t.div({className: "RoomView"}, [
|
||||
t.div({className: "TimelinePanel"}, [
|
||||
t.div({className: "RoomHeader"}, [
|
||||
t.button({className: "back"}),
|
||||
t.button({className: "back", onClick: () => vm.close()}),
|
||||
t.div({className: "avatar large"}, vm => vm.avatarInitials),
|
||||
t.div({className: "room-description"}, [
|
||||
t.h2(vm => vm.name),
|
||||
|
Loading…
Reference in New Issue
Block a user