added ScrollingContainer to guarantee scrolling to top when switching notes

This commit is contained in:
zadam 2021-03-20 19:44:43 +01:00
parent 135b4fe88e
commit 9dd95b62a9
5 changed files with 47 additions and 29 deletions

View File

@ -23,6 +23,7 @@ import NotePropertiesWidget from "../widgets/type_property_widgets/note_properti
import NoteIconWidget from "../widgets/note_icon.js";
import NotePathsWidget from "../widgets/note_paths.js";
import SearchResultWidget from "../widgets/search_result.js";
import ScrollingContainer from "../widgets/scrolling_container.js";
export default class DesktopExtraWindowLayout {
constructor(customWidgets) {
@ -65,13 +66,14 @@ export default class DesktopExtraWindowLayout {
.child(new InheritedAttributesWidget())
)
)
.child(new Container()
.css('height: 100%; overflow: auto;')
.child(new TabCachingWidget(() => new SqlTableSchemasWidget()))
.child(new TabCachingWidget(() => new NoteDetailWidget()))
.child(new TabCachingWidget(() => new NoteListWidget()))
.child(new TabCachingWidget(() => new SearchResultWidget()))
.child(new TabCachingWidget(() => new SqlResultWidget()))
.child(
new TabCachingWidget(() => new ScrollingContainer()
.child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget())
.child(new SearchResultWidget())
.child(new SqlResultWidget())
)
)
.child(...this.customWidgets.get('center-pane'))
)

View File

@ -34,6 +34,7 @@ import NotePropertiesWidget from "../widgets/type_property_widgets/note_properti
import NoteIconWidget from "../widgets/note_icon.js";
import SearchResultWidget from "../widgets/search_result.js";
import SyncStatusWidget from "../widgets/sync_status.js";
import ScrollingContainer from "../widgets/scrolling_container.js";
const RIGHT_PANE_CSS = `
<style>
@ -177,13 +178,14 @@ export default class DesktopMainWindowLayout {
.child(new InheritedAttributesWidget())
)
)
.child(new Container()
.css('height: 100%; overflow: auto;')
.child(new TabCachingWidget(() => new SqlTableSchemasWidget()))
.child(new TabCachingWidget(() => new NoteDetailWidget()))
.child(new TabCachingWidget(() => new NoteListWidget()))
.child(new TabCachingWidget(() => new SearchResultWidget()))
.child(new TabCachingWidget(() => new SqlResultWidget()))
.child(
new TabCachingWidget(() => new ScrollingContainer()
.child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget())
.child(new SearchResultWidget())
.child(new SqlResultWidget())
)
)
.child(new TabCachingWidget(() => new SimilarNotesWidget()))
.child(...this.customWidgets.get('center-pane'))

View File

@ -6,6 +6,7 @@ import MobileGlobalButtonsWidget from "../widgets/mobile_widgets/mobile_global_b
import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
import ScrollingContainer from "../widgets/scrolling_container.js";
const MOBILE_CSS = `
<style>
@ -105,10 +106,15 @@ export default class MobileLayout {
.child(new MobileDetailMenuWidget())
.child(new NoteTitleWidget())
.child(new CloseDetailButtonWidget()))
.child(new NoteDetailWidget()
.child(
new ScrollingContainer()
.child(
new NoteDetailWidget()
.css('padding', '5px 20px 10px 0')
.css('margin-top', '55px')
.css('overflow-y', 'auto')
.css('contain', 'content')));
.css('contain', 'content')
)
)
);
}
}

View File

@ -0,0 +1,18 @@
import Container from "./container.js";
export default class ScrollingContainer extends Container {
constructor() {
super();
this.css('height: 100%; overflow: auto;');
}
async tabNoteSwitchedEvent({tabContext, notePath}) {
// if notePath does not match then the tabContext has been switched to another note in the mean time
if (tabContext.notePath === notePath) {
console.log("SCROLLING");
this.$widget.scrollTop(0);
}
}
}

View File

@ -27,12 +27,6 @@ export default class TypeWidget extends TabAwareWidget {
}
}
async noteSwitched() {
this.scrollToTop();
await super.noteSwitched();
}
isActive() {
return this.$widget.is(":visible");
}
@ -41,10 +35,6 @@ export default class TypeWidget extends TabAwareWidget {
focus() {}
scrollToTop() {
this.$widget.scrollTop(0);
}
textPreviewDisabledEvent({tabContext}) {
if (this.isTab(tabContext.tabId)) {
this.refresh();