From 72c0fbceee6194507dd781671a6bd420a046cc62 Mon Sep 17 00:00:00 2001 From: Connor Burns Date: Mon, 2 Oct 2023 20:53:36 -0600 Subject: [PATCH] Rework welcome screen open options --- frontend/components/DesktopInterface.js | 6 +++ frontend/components/FilePicker.js | 39 ++++---------- frontend/components/welcome/Open.js | 71 ++++++++++++++----------- frontend/index.css | 14 +++-- frontend/welcome.css | 13 ----- 5 files changed, 65 insertions(+), 78 deletions(-) create mode 100644 frontend/components/DesktopInterface.js diff --git a/frontend/components/DesktopInterface.js b/frontend/components/DesktopInterface.js new file mode 100644 index 0000000000..8c38b79df3 --- /dev/null +++ b/frontend/components/DesktopInterface.js @@ -0,0 +1,6 @@ +export const open_from_path = () => { + window.plutoDesktop?.fileSystem.openNotebook("path") +} +export const open_from_url = (/** @type string */ url) => { + window.plutoDesktop?.fileSystem.openNotebook("url", url) +} diff --git a/frontend/components/FilePicker.js b/frontend/components/FilePicker.js index 35e50f3420..fed7ee8d37 100644 --- a/frontend/components/FilePicker.js +++ b/frontend/components/FilePicker.js @@ -47,12 +47,6 @@ const set_cm_value = (/** @type{EditorView} */ cm, /** @type {string} */ value, } } -const is_desktop = !!window.plutoDesktop - -if (is_desktop) { - console.log("Running in Desktop Environment! Found following properties/methods:", window.plutoDesktop) -} - /** * @param {{ * value: String, @@ -60,11 +54,10 @@ if (is_desktop) { * button_label: String, * placeholder: String, * on_submit: (new_path: String) => Promise, - * on_desktop_submit?: (loc?: string) => Promise, * client: import("../common/PlutoConnection.js").PlutoConnection, * }} props */ -export const FilePicker = ({ value, suggest_new_file, button_label, placeholder, on_submit, on_desktop_submit, client }) => { +export const FilePicker = ({ value, suggest_new_file, button_label, placeholder, on_submit, client, force_on_blur = true }) => { const [is_button_disabled, set_is_button_disabled] = useState(true) const forced_value = useRef("") /** @type {import("../imports/Preact.js").Ref} */ @@ -87,18 +80,9 @@ export const FilePicker = ({ value, suggest_new_file, button_label, placeholder, const onSubmit = () => { const current_cm = cm.current if (current_cm == null) return - if (!is_desktop) { - const my_val = current_cm.state.doc.toString() - if (my_val === forced_value.current) { - suggest_not_tmp() - return true - } - } run(async () => { try { - if (is_desktop && on_desktop_submit) { - await on_desktop_submit() - } else await on_submit(current_cm.state.doc.toString()) + await on_submit(current_cm.state.doc.toString()) current_cm.dom.blur() } catch (error) { set_cm_value(current_cm, forced_value.current, true) @@ -141,7 +125,7 @@ export const FilePicker = ({ value, suggest_new_file, button_label, placeholder, }, blur: (event, cm) => { setTimeout(() => { - if (!cm.hasFocus) { + if (!cm.hasFocus && force_on_blur) { set_cm_value(cm, forced_value.current, true) } }, 200) @@ -252,7 +236,7 @@ export const FilePicker = ({ value, suggest_new_file, button_label, placeholder, }) const current_cm = cm.current - if (!is_desktop) base.current.insertBefore(current_cm.dom, base.current.firstElementChild) + base.current.insertBefore(current_cm.dom, base.current.firstElementChild) // window.addEventListener("resize", () => { // if (!cm.current.hasFocus()) { // deselect(cm.current) @@ -268,16 +252,11 @@ export const FilePicker = ({ value, suggest_new_file, button_label, placeholder, } }) - return is_desktop - ? html`
- ${value.replace(/^.*[\\\/]/, "")} - -
` - : html` - - - - ` + return html` + + + + ` } const pathhints = diff --git a/frontend/components/welcome/Open.js b/frontend/components/welcome/Open.js index 612daad500..c02efd05d8 100644 --- a/frontend/components/welcome/Open.js +++ b/frontend/components/welcome/Open.js @@ -1,10 +1,12 @@ import _ from "../../imports/lodash.js" -import { html } from "../../imports/Preact.js" +import { html, useState } from "../../imports/Preact.js" import { FilePicker } from "../FilePicker.js" import { PasteHandler } from "../PasteHandler.js" import { guess_notebook_location } from "../../common/NotebookLocationFromURL.js" +import * as desktop from "../DesktopInterface.js" + /** * @param {{ * client: import("../../common/PlutoConnection.js").PlutoConnection?, @@ -28,43 +30,52 @@ export const Open = ({ client, connected, CustomPicker, show_samples, on_start_n } } - const desktop_on_open_path = async (_p) => { - window.plutoDesktop?.fileSystem.openNotebook("path") - } - - const desktop_on_open_url = async (url) => { - window.plutoDesktop?.fileSystem.openNotebook("url", url) - } - const picker = CustomPicker ?? { text: "Open a notebook", placeholder: "Enter path or URL...", } + // may be passed to FilePicker to disable autocomplete by spoofing an autocompletion client + const dummy_client = { + send: (_) => { + return { + then: (_) => {}, + } + }, + } + return html`<${PasteHandler} on_start_navigation=${on_start_navigation} />

${picker.text}

- <${FilePicker} - key=${picker.placeholder} - client=${client} - value="" - on_submit=${on_open_path} - on_desktop_submit=${desktop_on_open_path} - button_label=${window.plutoDesktop ? "Open File" : "Open"} - placeholder=${picker.placeholder} - /> - ${window.plutoDesktop && - html`<${FilePicker} - key=${picker.placeholder} - client=${client} - value="" - on_desktop_submit=${() => { - console.log("TODO: implement prompt or input component") - desktop_on_open_url(prompt("Enter notebook URL")) - }} - button_label="Open from URL" - placeholder=${picker.placeholder} - />`} + ${window.plutoDesktop + ? html` +
+ +
— OR —
+
+ <${FilePicker} + key=${picker.placeholder} + client=${client} + value="" + on_submit=${desktop.open_from_url} + button_label=${"Open from URL"} + placeholder=${"Enter a URL..."} + client=${dummy_client} + force_on_blur=${false} + /> +
+
+ ` + : html` + <${FilePicker} + key=${picker.placeholder} + client=${client} + value="" + on_submit=${on_open_path} + button_label=${window.plutoDesktop ? "Open File" : "Open"} + placeholder=${picker.placeholder} + /> + `}
` } diff --git a/frontend/index.css b/frontend/index.css index fc305dd8c5..8037ee0ca2 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -131,21 +131,25 @@ pluto-filepicker button, .desktop_picker_group { flex-grow: 1; - display: flex; + /* display: flex; */ padding: 5px; } .desktop_picker_group > button { cursor: pointer; - flex-grow: 1; padding: 8px; + width: 100%; } -.desktop_picker_group > button.full_width { - width: 100%; +.desktop_picker_group > .option_splitter { + color: gray; + font-style: italic; + text-align: center; + margin: 15px 0; + font-size: 10pt; } -pluto-filepicker button { +#new pluto-filepicker button { cursor: pointer; border-top-left-radius: 0; border-bottom-left-radius: 0; diff --git a/frontend/welcome.css b/frontend/welcome.css index 891ab44c37..c1baafceda 100644 --- a/frontend/welcome.css +++ b/frontend/welcome.css @@ -91,19 +91,6 @@ section#open { /* border: 0.3rem solid #d6e0d8; */ } -#new.desktop_opener { - display: flex; - flex-direction: row; - align-content: center; - justify-content: space-around; - box-shadow: none; - position: relative; -} - -#new.desktop_opener .desktop_picker { - width: 100%; -} - section { display: flex; /* overflow: hidden; */ /* place-items: center; */ /* margin: 0rem 0rem; */