diff --git a/packages/web/components/filter.tsx b/packages/web/components/filter.tsx index c0ab4149..2da6d049 100644 --- a/packages/web/components/filter.tsx +++ b/packages/web/components/filter.tsx @@ -89,7 +89,7 @@ export function FilterList({ function updateFilter(originalPhrase: string) { let foundExactMatch = false; let results = fuzzySorter(originalPhrase, options); - if (allowNew && !foundExactMatch) { + if (allowNew && !foundExactMatch && originalPhrase) { results.push({ name: originalPhrase, hint: newHint, @@ -121,6 +121,8 @@ export function FilterList({ }; }, []); + let exiting = false; + const returnEl = (
@@ -133,7 +135,9 @@ export function FilterList({ ref={searchBoxRef} onChange={filterUpdate} onBlur={(e) => { - searchBoxRef.current!.focus(); + if (!exiting) { + searchBoxRef.current!.focus(); + } }} onKeyDown={(e: React.KeyboardEvent) => { // console.log("Key up", e); @@ -150,10 +154,24 @@ export function FilterList({ ); break; case "Enter": + exiting = true; onSelect(matchingOptions[selectedOption]); e.preventDefault(); break; + case "PageUp": + setSelectionOption(Math.max(0, selectedOption - 5)); + break; + case "PageDown": + setSelectionOption(Math.max(0, selectedOption + 5)); + break; + case "Home": + setSelectionOption(0); + break; + case "End": + setSelectionOption(matchingOptions.length - 1); + break; case "Escape": + exiting = true; onSelect(undefined); break; case " ": diff --git a/packages/web/styles/filter_box.scss b/packages/web/styles/filter_box.scss index 9e16e1e7..1783b5cb 100644 --- a/packages/web/styles/filter_box.scss +++ b/packages/web/styles/filter_box.scss @@ -10,7 +10,7 @@ top: 0; bottom: 0; max-height: 290px; - overflow: hide; + // overflow: hide; z-index: 100; } @@ -19,7 +19,8 @@ background-color: #fff; border: rgb(103, 103, 103) 1px solid; border-radius: 8px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px; + overflow: hidden; margin: 10px; .header { @@ -55,7 +56,7 @@ } .result-list { - max-height: 200px; + max-height: 216px; overflow-y: scroll; .icon { @@ -70,11 +71,14 @@ .selected-option { padding: 8px; cursor: pointer; + height: 20px; + line-height: 20px; } .selected-option { background-color: var(--highlight-color); color: #eee; + // border-radius: 5px; } .option .hint, diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md index b5d0aad6..a157b53a 100644 --- a/website/CHANGELOG.md +++ b/website/CHANGELOG.md @@ -5,4 +5,10 @@ An attempt at documenting of the changes/new features introduced in each (pre) r * Plugs can implement their own unfurlers by responding to the `unfurl:options` event (see the [Twitter plug](https://github.com/silverbulletmd/silverbullet-twitter) for an example). * Core implements only one unfurl option: “Extract title” which pulls the `` tag from the linked URL and replaces it with a `[bla](URL)` style link. * Removed status bar: to further simplify the SB UI. You can still pull up the same stat on demand with the `Stats: Show` command. +* The page switcher is now maintaining its ordering based on, in order: + 1. Last opened pages (in current session) + 2. Last modified date (on disk) + 3. Everything else + 4. The currently open page (at the bottom) +* Filter boxes (used for the page switching and command palette among other things) now also support PgUp, PgDown, Home and End and have some visual glitches fixed as well. * Reverted exposing an empty `window` object to sandboxes running in workers and node.js (introduced in 0.0.28)