From 3b194d703f9894c1a8296c8cd236b836ff8524dd Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 27 Nov 2024 09:44:06 -0500 Subject: [PATCH 1/8] Show page number on same line as result text --- src/lib/components/common/Highlight.svelte | 15 ++++++++++++--- .../components/documents/PageHighlights.svelte | 1 + 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/lib/components/common/Highlight.svelte b/src/lib/components/common/Highlight.svelte index 9baadd66a..82378c816 100644 --- a/src/lib/components/common/Highlight.svelte +++ b/src/lib/components/common/Highlight.svelte @@ -3,13 +3,14 @@ export let title: string = ""; export let segments: string[] = []; + export let inlineTitle: boolean = false; function sanitize(s: string): string { return DOMPurify.sanitize(s, { ALLOWED_TAGS: ["em"] }); } -
+
{#if title}

{@html sanitize(title)}

{/if} {#if segments.length > 0}
@@ -23,6 +24,9 @@ diff --git a/src/lib/components/documents/PageHighlights.svelte b/src/lib/components/documents/PageHighlights.svelte index 66bfeb7f7..e5e321872 100644 --- a/src/lib/components/documents/PageHighlights.svelte +++ b/src/lib/components/documents/PageHighlights.svelte @@ -39,6 +39,7 @@ From 0833fe292e860e39dd01c6ba13303c48faf43a45 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 27 Nov 2024 11:43:27 -0500 Subject: [PATCH 2/8] Adds Collapse/Expand All buttons to results list --- src/langs/json/en.json | 4 +- .../components/common/HighlightGroup.svelte | 75 +++++++++++++++++-- .../documents/NoteHighlights.svelte | 16 +++- .../documents/PageHighlights.svelte | 15 +++- .../components/documents/ResultsList.svelte | 37 +++++++-- 5 files changed, 130 insertions(+), 17 deletions(-) diff --git a/src/langs/json/en.json b/src/langs/json/en.json index 117a32423..4e8d523a2 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -14,7 +14,9 @@ "matchingResults": "{n, plural, one {# matching result} other {# matching results}}", "reset": "Clear Search", "help": "Use filters like user:, project: or organization: to refine searches. Use sort: to order results.", - "more": "Learn more" + "more": "Learn more", + "collapseAll": "Collapse all", + "expandAll": "Expand all" }, "homeTemplate": { "signedIn": "Signed in as {name}", diff --git a/src/lib/components/common/HighlightGroup.svelte b/src/lib/components/common/HighlightGroup.svelte index 02ce7b0e9..548b01c00 100644 --- a/src/lib/components/common/HighlightGroup.svelte +++ b/src/lib/components/common/HighlightGroup.svelte @@ -1,19 +1,73 @@ {#if highlights.length} -
+
- - {$_("search.matchingResults", { values: { n: highlights.length } })} - +
+ {#if open} + + {:else} + + {/if} + + {$_("search.matchingResults", { values: { n: highlights.length } })} + +
+
+ + +
    {#each highlights as [id, highlight]} @@ -33,13 +87,22 @@ overflow: hidden; } .highlights summary { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + gap: 0.25rem; color: var(--gray-4); + fill: var(--gray-4); padding: 0.5rem 0.75rem; font-size: var(--font-sm); font-weight: var(--font-semibold); } - .highlights summary::marker { - margin-right: 1rem; + .highlights summary .left, + .highlights summary .right { + display: flex; + align-items: center; + gap: 0.5rem; + white-space: no-wrap; } .highlights ul { list-style-type: none; diff --git a/src/lib/components/documents/NoteHighlights.svelte b/src/lib/components/documents/NoteHighlights.svelte index 1df18798f..9ff69f0cd 100644 --- a/src/lib/components/documents/NoteHighlights.svelte +++ b/src/lib/components/documents/NoteHighlights.svelte @@ -17,6 +17,8 @@ --> - + {$_("documents.matchingNotes", { values: { n: highlights.length } })} diff --git a/src/lib/components/documents/PageHighlights.svelte b/src/lib/components/documents/PageHighlights.svelte index e5e321872..3a3b6d99c 100644 --- a/src/lib/components/documents/PageHighlights.svelte +++ b/src/lib/components/documents/PageHighlights.svelte @@ -13,6 +13,8 @@ - + {$_("documents.matchingPages", { values: { n: highlights.length } })} diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte index a0b58600a..e87bebbe3 100644 --- a/src/lib/components/documents/ResultsList.svelte +++ b/src/lib/components/documents/ResultsList.svelte @@ -18,10 +18,16 @@ ); export let total: Writable = writable(0); + + // In order for the highlight state to be shared between components, we need to + // create a writable store and set it in the context. + export const highlightState: Writable<{ allOpen: boolean }> = writable({ + allOpen: true, + });
    - + {#each results as document (document.id)} - +
    {#if !embed} {/if} - - - +
    + {#if document.highlights} {/if} +
    +
    {:else}

    {$_("noDocuments.noSearchResults")}

    @@ -191,6 +195,24 @@ padding: 1rem; display: flex; flex-direction: column; + width: 100%; + } + + .result-row { + width: 100%; + display: flex; + gap: 0.625rem; + align-items: flex-start; + padding-bottom: 0.5rem; + } + + .result-row.selected { + background-color: var(--blue-1, #f0f0f0); + } + + .result-content { + flex: 1 1 auto; + min-width: 0; } label { @@ -198,9 +220,11 @@ align-items: center; gap: 0.5rem; padding-left: 0.5rem; + margin-top: 1.25rem; } input[type="checkbox"] { + margin: 0; height: 1.25rem; width: 1.25rem; } From 765f04b444d6ff18dde35e8c88d882f4dc720bbc Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 27 Nov 2024 13:19:34 -0500 Subject: [PATCH 4/8] Fix error when missing context value --- .../components/common/HighlightGroup.svelte | 47 ++++++++++--------- .../stories/HighlightGroup.stories.svelte | 8 ++++ .../documents/NoteHighlights.svelte | 5 +- .../documents/PageHighlights.svelte | 5 +- .../stories/NoteHighlights.stories.svelte | 12 ++++- .../stories/PageHighlights.stories.svelte | 13 ++++- 6 files changed, 61 insertions(+), 29 deletions(-) diff --git a/src/lib/components/common/HighlightGroup.svelte b/src/lib/components/common/HighlightGroup.svelte index 548b01c00..0ccfc59f7 100644 --- a/src/lib/components/common/HighlightGroup.svelte +++ b/src/lib/components/common/HighlightGroup.svelte @@ -16,6 +16,7 @@ export let open = false; export let highlights: [string, H][] = []; export let getHref: (id: string) => string; + export let showAll = false; let clientWidth = 1000; $: isSmall = clientWidth < remToPx(27); @@ -46,28 +47,30 @@ {$_("search.matchingResults", { values: { n: highlights.length } })}
    -
    - - -
    + {#if showAll} +
    + + +
    + {/if}
      {#each highlights as [id, highlight]} diff --git a/src/lib/components/common/stories/HighlightGroup.stories.svelte b/src/lib/components/common/stories/HighlightGroup.stories.svelte index 497cd3fff..e1eeea7c6 100644 --- a/src/lib/components/common/stories/HighlightGroup.stories.svelte +++ b/src/lib/components/common/stories/HighlightGroup.stories.svelte @@ -25,3 +25,11 @@ + + + + + + + + diff --git a/src/lib/components/documents/NoteHighlights.svelte b/src/lib/components/documents/NoteHighlights.svelte index 9ff69f0cd..9bddcc697 100644 --- a/src/lib/components/documents/NoteHighlights.svelte +++ b/src/lib/components/documents/NoteHighlights.svelte @@ -30,8 +30,8 @@ export let open = true; const { subscribe } = - getContext>("highlightState"); - $: subscribe((state) => { + getContext>("highlightState") ?? {}; + $: subscribe?.((state) => { open = state.allOpen; }); @@ -49,6 +49,7 @@ {highlights} getHref={noteHref} bind:open + showAll={Boolean(subscribe)} on:collapseAll on:expandAll > diff --git a/src/lib/components/documents/PageHighlights.svelte b/src/lib/components/documents/PageHighlights.svelte index 3a3b6d99c..28504097b 100644 --- a/src/lib/components/documents/PageHighlights.svelte +++ b/src/lib/components/documents/PageHighlights.svelte @@ -27,8 +27,8 @@ export let open = true; const { subscribe } = - getContext>("highlightState"); - $: subscribe((state) => { + getContext>("highlightState") ?? {}; + $: subscribe?.((state) => { open = state.allOpen; }); $: highlights = Object.entries(document.highlights ?? {}); @@ -43,6 +43,7 @@ {highlights} getHref={pageHref} bind:open + showAll={Boolean(subscribe)} on:collapseAll on:expandAll > diff --git a/src/lib/components/documents/stories/NoteHighlights.stories.svelte b/src/lib/components/documents/stories/NoteHighlights.stories.svelte index 015198731..0362c7258 100644 --- a/src/lib/components/documents/stories/NoteHighlights.stories.svelte +++ b/src/lib/components/documents/stories/NoteHighlights.stories.svelte @@ -1,6 +1,9 @@ diff --git a/src/lib/components/documents/stories/PageHighlights.stories.svelte b/src/lib/components/documents/stories/PageHighlights.stories.svelte index 3487685c6..65197166a 100644 --- a/src/lib/components/documents/stories/PageHighlights.stories.svelte +++ b/src/lib/components/documents/stories/PageHighlights.stories.svelte @@ -1,7 +1,9 @@ From cf7153bd9880d79db1c1df7afca7ae3c2505b2ca Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 27 Nov 2024 13:34:24 -0500 Subject: [PATCH 5/8] Fix context in storybooks --- .../stories/NoteHighlights.stories.svelte | 7 +++++-- .../stories/PageHighlights.stories.svelte | 14 ++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/lib/components/documents/stories/NoteHighlights.stories.svelte b/src/lib/components/documents/stories/NoteHighlights.stories.svelte index 0362c7258..a5fb0ede3 100644 --- a/src/lib/components/documents/stories/NoteHighlights.stories.svelte +++ b/src/lib/components/documents/stories/NoteHighlights.stories.svelte @@ -1,6 +1,4 @@ + + + + From 5ce4acced1aace451baa1811df5cc7289f065990 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 27 Nov 2024 14:20:46 -0500 Subject: [PATCH 6/8] Fix storybook, second try --- .../documents/stories/PageHighlights.stories.svelte | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/lib/components/documents/stories/PageHighlights.stories.svelte b/src/lib/components/documents/stories/PageHighlights.stories.svelte index 928e125e1..6578e522c 100644 --- a/src/lib/components/documents/stories/PageHighlights.stories.svelte +++ b/src/lib/components/documents/stories/PageHighlights.stories.svelte @@ -17,13 +17,6 @@ tags: ["autodocs"], parameters: { layout: "fullscreen" }, }; - - setContext( - "highlightState", - writable({ - allOpen: true, - }), - ); diff --git a/src/lib/components/documents/PageHighlights.svelte b/src/lib/components/documents/PageHighlights.svelte index 28504097b..610952bd8 100644 --- a/src/lib/components/documents/PageHighlights.svelte +++ b/src/lib/components/documents/PageHighlights.svelte @@ -11,10 +11,10 @@ ``` --> diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte index fec8f245e..1d114d28c 100644 --- a/src/lib/components/documents/ResultsList.svelte +++ b/src/lib/components/documents/ResultsList.svelte @@ -54,9 +54,11 @@ const embed: boolean = getContext("embed"); setContext("highlightState", highlightState); + function collapseAll() { highlightState.update((state) => ({ ...state, allOpen: false })); } + function expandAll() { highlightState.update((state) => ({ ...state, allOpen: true })); }