scroll room list to top when entering query first

This commit is contained in:
Bruno Windels 2021-09-30 17:19:42 +02:00
parent 8911588de9
commit e42739ec81
3 changed files with 27 additions and 14 deletions

View file

@ -127,11 +127,14 @@ export class LeftPanelViewModel extends ViewModel {
query = query.trim();
if (query.length === 0) {
this.clearFilter();
return false;
} else {
const startFiltering = !this._tileViewModelsFilterMap.hasApply();
const filter = new RoomFilter(query);
this._tileViewModelsFilterMap.setApply((roomId, vm) => {
vm.hidden = !filter.matches(vm);
});
return startFiltering;
}
}
}

View file

@ -24,6 +24,10 @@ export class ApplyMap extends BaseObservableMap {
this._subscription = null;
}
hasApply() {
return !!this._apply;
}
setApply(apply) {
this._apply = apply;
if (apply) {

View file

@ -58,6 +58,19 @@ export class LeftPanelView extends TemplateView {
vm.i18n`Show single room` :
vm.i18n`Enable grid layout`;
};
const roomList = t.view(new ListView(
{
className: "RoomList",
list: vm.tileViewModels,
},
tileVM => {
if (tileVM.kind === "invite") {
return new InviteTileView(tileVM);
} else {
return 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`}),
t.view(new FilterField({
@ -65,7 +78,12 @@ export class LeftPanelView extends TemplateView {
label: vm.i18n`Filter rooms…`,
name: "room-filter",
autocomplete: true,
set: query => vm.setFilter(query),
set: query => {
// scroll up if we just started filtering
if (vm.setFilter(query)) {
roomList.scrollTop = 0;
}
},
clear: () => vm.clearFilter()
})),
t.button({
@ -83,19 +101,7 @@ export class LeftPanelView extends TemplateView {
return t.div({className: "LeftPanel"}, [
utilitiesRow,
t.view(new ListView(
{
className: "RoomList",
list: vm.tileViewModels,
},
tileVM => {
if (tileVM.kind === "invite") {
return new InviteTileView(tileVM);
} else {
return new RoomTileView(tileVM);
}
}
))
roomList
]);
}
}