Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live doc search #547

Merged
merged 9 commits into from
Oct 14, 2020
Merged

Live doc search #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1e54cca
Rewrite LiveDocs in functional component
iboss-ptk Oct 5, 2020
bb6847f
Allow normal backspace in livedocs search field
iboss-ptk Oct 5, 2020
1dd5152
Fix popup on ? and decouple fetch query from updating search bar
iboss-ptk Oct 5, 2020
6c359fb
Fix cursor position in content editable
iboss-ptk Oct 5, 2020
7169fa1
Make live doc toggle on click
iboss-ptk Oct 5, 2020
399fca2
Use input instead of contenteditble
iboss-ptk Oct 8, 2020
aca73db
Resolve confict
iboss-ptk Oct 8, 2020
0f02e89
Restore Editor.js
fonsp Oct 14, 2020
7b178c7
add separate button to close Live docs so that you can click the sear…
fonsp Oct 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 31 additions & 6 deletions frontend/components/LiveDocs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
57 changes: 47 additions & 10 deletions frontend/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -1158,17 +1159,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;
Expand All @@ -1192,19 +1236,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 */
Expand Down