Live doc search (#547)

Co-authored-by: Fons van der Plas <[email protected]>
fonsp · Oct 14, 2020 · 04a984e · 04a984e
1 parent 7a844dd
commit 04a984e
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 16 deletions.
diff --git a/frontend/components/LiveDocs.js b/frontend/components/LiveDocs.js
@@ -7,6 +7,7 @@ import { RawHTMLContainer, highlight_julia } from "./CellOutput.js"
 
 export let LiveDocs = ({ desired_doc_query, client, on_update_doc_query, notebook }) => {
     let container_ref = useRef()
+    let live_doc_search_ref = useRef()
     let [state, set_state] = useState({
         shown_query: null,
         searched_query: null,
@@ -54,12 +55,11 @@ export let LiveDocs = ({ desired_doc_query, client, on_update_doc_query, noteboo
         }
 
         if (state.searched_query !== desired_doc_query) {
-            fetch_docs()
+            fetch_docs(desired_doc_query)
         }
-    }, [desired_doc_query])
+    }, [desired_doc_query, state.hidden])
 
-    let fetch_docs = () => {
-        const new_query = desired_doc_query
+    let fetch_docs = (new_query) => {
         update_state((state) => {
             state.loading = true
             state.searched_query = new_query
@@ -90,8 +90,33 @@ export let LiveDocs = ({ desired_doc_query, client, on_update_doc_query, noteboo
     return html`
         <aside id="helpbox-wrapper" ref=${container_ref}>
             <pluto-helpbox class=${cl({ hidden: state.hidden, loading: state.loading })}>
-                <header onClick=${() => set_state((state) => ({ ...state, hidden: !state.hidden }))}>
-                    ${state.hidden || state.searched_query == null ? "Live docs" : state.searched_query}
+                <header
+                    onClick=${() => {
+                        if (state.hidden) {
+                            set_state((state) => ({ ...state, hidden: false }))
+                            // wait for next event loop
+                            setTimeout(() => live_doc_search_ref.current && live_doc_search_ref.current.focus(), 0)
+                        }
+                    }}
+                >
+                    ${state.hidden
+                        ? "Live docs"
+                        : html`
+                        <input
+                            id="live-docs-search"
+                            placeholder="Live docs"
+                            ref=${live_doc_search_ref}
+                            onInput=${(e) => fetch_docs(e.target.value)}
+                            value=${state.searched_query}
+                            type="text"
+                        ></input>
+                        <button onClick=${(e) => {
+                            set_state((state) => ({ ...state, hidden: true }))
+                            e.stopPropagation()
+                            console.log(state)
+                            setTimeout(() => live_doc_search_ref.current && live_doc_search_ref.current.focus(), 0)
+                        }}><span></span></button>
+                    `}
                 </header>
                 <section ref=${(ref) => ref != null && resolve_doc_reference_links(ref, on_update_doc_query)}>
                     <h1><code>${state.shown_query}</code></h1>

diff --git a/frontend/editor.css b/frontend/editor.css
@@ -47,6 +47,7 @@ main {
 @media screen and (min-width: calc(700px + 25px + 6px + 350px)) and (max-width: calc(700px + 25px + 6px + 500px)) {
     main {
         margin-left: 0px;
+        align-self: flex-start;
     }
 }
 @media screen and (min-width: calc(700px + 25px + 6px + 500px)) and (max-width: calc(700px + 25px + 6px + 500px + 500px)) {
@@ -1168,17 +1169,60 @@ dropruler {
         box-shadow: 0 0 11px 0px #00000010;
         font-family: "Alegreya Sans", sans-serif;
     }
+
     pluto-helpbox > header {
+        display: flex;
         padding: 15px;
         background-color: #eef1f7;
         color: hsl(230, 14%, 11%);
         font-family: "Roboto Mono", monospace;
         font-weight: 700;
-        cursor: pointer;
         border-top-left-radius: 6px;
         border-top-right-radius: 6px;
         /* border-top: 4px solid #8a8a8a; */
     }
+    pluto-helpbox > header::before {
+        content: "📖 ";
+        margin-right: 10px;
+    }
+    /* pluto-helpbox.loading>header::before{
+                content: "⌛ ";
+        margin-right: 10px;
+            } */
+    pluto-helpbox.hidden > header::before {
+        content: "📚 ";
+        margin-right: 10px;
+    }
+    pluto-helpbox > header > input {
+        flex-grow: 1;
+        background-color: inherit;
+        color: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        font-size: inherit;
+        border: none;
+    }
+    pluto-helpbox > header > input:focus {
+        outline: none;
+    }
+    pluto-helpbox > header > button {
+        border: none;
+        background: none;
+        cursor: pointer;
+
+        /* for bigger hitbox */
+        margin: -15px;
+        border: 15px solid transparent;
+    }
+    pluto-helpbox > header > button > span {
+        display: block;
+        content: " " !important;
+        background-size: 1em 1em;
+        height: 1em;
+        width: 1em;
+        background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/chevron-down-outline.svg");
+    }
+
     pluto-helpbox > section {
         height: 100%;
         overflow: auto;
@@ -1202,19 +1246,12 @@ dropruler {
     }
     pluto-helpbox.hidden {
         height: initial;
+        cursor: pointer;
     }
     pluto-helpbox.hidden > section {
         display: none;
     }
-    pluto-helpbox > header::before {
-        content: "📖 ";
-    }
-    /* pluto-helpbox.loading>header::before{
-                content: "⌛ ";
-            } */
-    pluto-helpbox.hidden > header::before {
-        content: "📚 ";
-    }
+
 }
 
 /* FOOTER */