add quick search in mobile layout (#2360)

Co-authored-by: jasongwq <jasongwq@126.com>
This commit is contained in:
jasongwq 2021-11-21 03:55:52 +08:00 committed by GitHub
parent 7a383a1314
commit db9e35a7e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 1 deletions

View file

@ -1,6 +1,7 @@
import FlexContainer from "../widgets/containers/flex_container.js";
import NoteTitleWidget from "../widgets/note_title.js";
import NoteDetailWidget from "../widgets/note_detail.js";
import QuickSearchWidget from "../widgets/quick_search.js";
import NoteTreeWidget from "../widgets/note_tree.js";
import MobileGlobalButtonsWidget from "../widgets/mobile_widgets/mobile_global_buttons.js";
import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
@ -27,13 +28,19 @@ kbd {
padding-right: 0.5em;
color: var(--main-text-color);
}
.quick-search {
margin: 55px 0px 0px 0px;
}
.quick-search .dropdown-menu {
max-width: 350px;
}
</style>`;
const FANCYTREE_CSS = `
<style>
.tree-wrapper {
max-height: 100%;
margin-top: 55px;
margin-top: 0px;
overflow-y: auto;
contain: content;
padding-left: 10px;
@ -95,6 +102,7 @@ export default class MobileLayout {
.css('padding-left', 0)
.css('contain', 'content')
.child(new MobileGlobalButtonsWidget())
.child(new QuickSearchWidget())
.child(new NoteTreeWidget("main")
.cssBlock(FANCYTREE_CSS)))
.child(new ScreenContainer("detail", "column")

View file

@ -52,6 +52,20 @@ export default class QuickSearchWidget extends BasicWidget {
this.$widget.find('.input-group-prepend').on('shown.bs.dropdown', () => this.search());
if(utils.isMobile()) {
this.$searchString.keydown(e =>{
if(e.which==13) {
if (this.$dropdownMenu.is(":visible")) {
this.search(); // just update already visible dropdown
} else {
this.$dropdownToggle.dropdown('show');
}
e.preventDefault();
e.stopPropagation();
}
})
}
utils.bindElShortcut(this.$searchString, 'return', () => {
if (this.$dropdownMenu.is(":visible")) {
this.search(); // just update already visible dropdown