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 NoteIconWidget from "../widgets/note_icon.js";
import NotePathsWidget from "../widgets/note_paths.js"; import NotePathsWidget from "../widgets/note_paths.js";
import SearchResultWidget from "../widgets/search_result.js"; import SearchResultWidget from "../widgets/search_result.js";
import ScrollingContainer from "../widgets/scrolling_container.js";
export default class DesktopExtraWindowLayout { export default class DesktopExtraWindowLayout {
constructor(customWidgets) { constructor(customWidgets) {
@ -65,13 +66,14 @@ export default class DesktopExtraWindowLayout {
.child(new InheritedAttributesWidget()) .child(new InheritedAttributesWidget())
) )
) )
.child(new Container() .child(
.css('height: 100%; overflow: auto;') new TabCachingWidget(() => new ScrollingContainer()
.child(new TabCachingWidget(() => new SqlTableSchemasWidget())) .child(new SqlTableSchemasWidget())
.child(new TabCachingWidget(() => new NoteDetailWidget())) .child(new NoteDetailWidget())
.child(new TabCachingWidget(() => new NoteListWidget())) .child(new NoteListWidget())
.child(new TabCachingWidget(() => new SearchResultWidget())) .child(new SearchResultWidget())
.child(new TabCachingWidget(() => new SqlResultWidget())) .child(new SqlResultWidget())
)
) )
.child(...this.customWidgets.get('center-pane')) .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 NoteIconWidget from "../widgets/note_icon.js";
import SearchResultWidget from "../widgets/search_result.js"; import SearchResultWidget from "../widgets/search_result.js";
import SyncStatusWidget from "../widgets/sync_status.js"; import SyncStatusWidget from "../widgets/sync_status.js";
import ScrollingContainer from "../widgets/scrolling_container.js";
const RIGHT_PANE_CSS = ` const RIGHT_PANE_CSS = `
<style> <style>
@ -177,13 +178,14 @@ export default class DesktopMainWindowLayout {
.child(new InheritedAttributesWidget()) .child(new InheritedAttributesWidget())
) )
) )
.child(new Container() .child(
.css('height: 100%; overflow: auto;') new TabCachingWidget(() => new ScrollingContainer()
.child(new TabCachingWidget(() => new SqlTableSchemasWidget())) .child(new SqlTableSchemasWidget())
.child(new TabCachingWidget(() => new NoteDetailWidget())) .child(new NoteDetailWidget())
.child(new TabCachingWidget(() => new NoteListWidget())) .child(new NoteListWidget())
.child(new TabCachingWidget(() => new SearchResultWidget())) .child(new SearchResultWidget())
.child(new TabCachingWidget(() => new SqlResultWidget())) .child(new SqlResultWidget())
)
) )
.child(new TabCachingWidget(() => new SimilarNotesWidget())) .child(new TabCachingWidget(() => new SimilarNotesWidget()))
.child(...this.customWidgets.get('center-pane')) .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 CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js"; import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js"; import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
import ScrollingContainer from "../widgets/scrolling_container.js";
const MOBILE_CSS = ` const MOBILE_CSS = `
<style> <style>
@ -105,10 +106,15 @@ export default class MobileLayout {
.child(new MobileDetailMenuWidget()) .child(new MobileDetailMenuWidget())
.child(new NoteTitleWidget()) .child(new NoteTitleWidget())
.child(new CloseDetailButtonWidget())) .child(new CloseDetailButtonWidget()))
.child(new NoteDetailWidget() .child(
new ScrollingContainer()
.child(
new NoteDetailWidget()
.css('padding', '5px 20px 10px 0') .css('padding', '5px 20px 10px 0')
.css('margin-top', '55px') .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() { isActive() {
return this.$widget.is(":visible"); return this.$widget.is(":visible");
} }
@ -41,10 +35,6 @@ export default class TypeWidget extends TabAwareWidget {
focus() {} focus() {}
scrollToTop() {
this.$widget.scrollTop(0);
}
textPreviewDisabledEvent({tabContext}) { textPreviewDisabledEvent({tabContext}) {
if (this.isTab(tabContext.tabId)) { if (this.isTab(tabContext.tabId)) {
this.refresh(); this.refresh();