diff --git a/webapp/static/clients/codemirror/grail.css b/webapp/static/clients/codemirror/grail.css index 7982e1f..c60d9f3 100644 --- a/webapp/static/clients/codemirror/grail.css +++ b/webapp/static/clients/codemirror/grail.css @@ -30,7 +30,7 @@ form header { .page-wrap { background: white; height: calc(100vh - 10px); - box-shadow: 0 0 3px rgba(black, 0.33); + display: grid; grid-template-columns: minmax(10px, 1fr) minmax(10px, 4fr); @@ -98,6 +98,7 @@ form header { grid-column: 1 / -1; display: flex; justify-content: space-between; + background: #ffecb3; } .page-sidebar { diff --git a/webapp/static/clients/codemirror/grail.html b/webapp/static/clients/codemirror/grail.html index b7feb00..199c393 100644 --- a/webapp/static/clients/codemirror/grail.html +++ b/webapp/static/clients/codemirror/grail.html @@ -33,10 +33,46 @@ + + + New + + + + Open + + + + Web + + URL + + + + + + + + + + + + + + + + + - - Editor - LSP Manager @@ -44,31 +80,6 @@ Dba - - - - - - - - - - - - - - - - @@ -80,47 +91,41 @@ - + - - - - - - - - - - - - - @@ -199,9 +204,28 @@ + +
+ + + + + + + + Fetch + Cancel + +
+ + + + +
Connect to LSP diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js index 823a7ae..feaf037 100644 --- a/webapp/static/clients/codemirror/script.js +++ b/webapp/static/clients/codemirror/script.js @@ -39,9 +39,13 @@ window.addEventListener('beforeunload', () => { $("connect").onclick = e => { e.preventDefault(); connect() }; -$("symTrigger").onclick = e => { e.preventDefault(); }; -$("symOptions").onclick = e => { e.preventDefault(); }; -$("bnNew").onclick = e => { alert("TODO"); }; +$("symTrigger").onclick = e => { e.preventDefault(); }; +$("symOptions").onclick = e => { e.preventDefault(); }; +$("bnNew").onclick = e => { + let name = prompt("New file name?"); + if (name === null) return; + alert("TODO") +}; $("search").onclick = e => lsp.openSearchPanel(view); @@ -76,13 +80,13 @@ $("cmdList").onclick = e => { }; $("symList").addEventListener("itemSelected", e => { - const plugin=lsp.LSPPlugin.get(view) - if(!plugin) return; + const plugin = lsp.LSPPlugin.get(view) + if (!plugin) return; const sel = e.detail.range // or selectionRange; console.log("SYM selection range", sel); const an = plugin.fromPosition(sel.start) const hd = plugin.fromPosition(sel.end) - view.dispatch({ selection: { anchor: an, head: hd}, scrollIntoView: true }); + view.dispatch({ selection: { anchor: an, head: hd }, scrollIntoView: true }); }); $("lint").onclick = async e => { @@ -129,7 +133,7 @@ $("load").onchange = e => { $("tConnect").addEventListener('quiet-change', e => { e.preventDefault(); $("popConnect").showPopover() - }); +}); $("msgIcon").onclick = e => { e.preventDefault(); alert("NOT YET") @@ -158,13 +162,13 @@ function connect() { const file = $("iFile").value; lsp.simpleWebSocketTransport(server) .then(transport => { - transport.socket.onclose = (event) => $("tConnect").checked=false; + transport.socket.onclose = (event) => $("tConnect").checked = false; transport.socket.oneror = (event) => $("msg").innerText = "sock error!"; transport.subscribe(incoming); client = new lsp.LSPClient({ extensions: lsp.languageServerExtensions() }); client.connect(transport); $("popConnect").hidePopover(); - $("tConnect").checked=true; + $("tConnect").checked = true; const extLsp = client.plugin(file, "xquery"); view.dispatch({ @@ -175,7 +179,7 @@ function connect() { }) .catch(e => { console.log(e); - $("tConnect").checked=false; + $("tConnect").checked = false; alert("connection failed: " + server) }); diff --git a/webapp/static/clients/codemirror/wc-qd-list.js b/webapp/static/clients/codemirror/wc-qd-list.js index db7627d..69e34b8 100644 --- a/webapp/static/clients/codemirror/wc-qd-list.js +++ b/webapp/static/clients/codemirror/wc-qd-list.js @@ -183,7 +183,7 @@ class PanelComponent extends HTMLElement { style.textContent = ` @import url("../codicon@0.0.40/codicon.css"); ul { list-style-type: none; padding:0;margin:0; - background-color: #e3e4e4ff;font-size: 80%;} + background-color: #e3e4e4ff;font-size: 80%; scrollbar-color: #000077 #bada55;} li { padding: 0 0 0 2px; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; } li:not(.selected) :hover { background-color: #ccc; } .selected { background-color: #0d6efd;color: #ffff;}