mod] [popover
This commit is contained in:
parent
13871be80b
commit
13ad78853d
4 changed files with 86 additions and 57 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -33,18 +33,21 @@
|
|||
<quiet-icon slot="checked" name="network" family="outline"></quiet-icon>
|
||||
</quiet-toggle-icon>
|
||||
|
||||
|
||||
<quiet-button href="#" variant="primary" aria-current="page" size="sm">
|
||||
Editor
|
||||
<quiet-button-group>
|
||||
<quiet-button id="bnNew" title="New file">
|
||||
<quiet-icon slot="start" name="file"></quiet-icon>New
|
||||
</quiet-button>
|
||||
<a href="/app/home" target="lsp" rel="noreferrer noopener">
|
||||
LSP Manager <quiet-icon name="external-link"></quiet-icon>
|
||||
</a>
|
||||
<a href="/dba/logs" target="dba" rel="noreferrer noopener" size="sm">
|
||||
Dba <quiet-icon name="external-link"></quiet-icon>
|
||||
</a>
|
||||
|
||||
<quiet-select id="load" style="width:20em;">
|
||||
<quiet-button id="bnRead" title="Open local file">
|
||||
<quiet-icon slot="start" name="folder-open"></quiet-icon>Open
|
||||
</quiet-button>
|
||||
<input type="file" id="fileElem" multiple accept="*/*" style="display: none;" />
|
||||
<quiet-button id="bnUrl" title="Open web file">
|
||||
<quiet-icon slot="start" name="link"></quiet-icon>Web
|
||||
</quiet-button>
|
||||
<quiet-button id="popover__url">URL</quiet-button>
|
||||
|
||||
<quiet-select id="load" style="width:16em;">
|
||||
<option selected value="">load..</option>
|
||||
<optgroup label="XQuery3">
|
||||
<option
|
||||
|
|
@ -68,6 +71,14 @@
|
|||
generator.xquery</option>
|
||||
</optgroup>
|
||||
</quiet-select>
|
||||
</quiet-button-group>
|
||||
|
||||
<a href="/app/home" target="lsp" rel="noreferrer noopener">
|
||||
LSP Manager <quiet-icon name="external-link"></quiet-icon>
|
||||
</a>
|
||||
<a href="/dba/logs" target="dba" rel="noreferrer noopener" size="sm">
|
||||
Dba <quiet-icon name="external-link"></quiet-icon>
|
||||
</a>
|
||||
|
||||
<button popovertarget="popAbout" type="button">
|
||||
<i class="codicon codicon-info"></i>
|
||||
|
|
@ -80,47 +91,41 @@
|
|||
|
||||
<quiet-button-group>
|
||||
|
||||
<button id="search" title="Search" type="button" class="btn btn-light"><i
|
||||
class="codicon codicon-search"></i></button>
|
||||
<button id="search" title="Search" type="button"><i class="codicon codicon-search"></i></button>
|
||||
|
||||
<button id="lint" title="Display diagnostics" type="button" class="btn btn-light"><i
|
||||
<button id="lint" title="Display diagnostics" type="button"><i
|
||||
class="codicon codicon-report"></i></button>
|
||||
|
||||
<button id="symbols2" type="button" class="btn btn-light" title="symbols">
|
||||
<button id="symbols2" type="button" title="symbols">
|
||||
<i class="codicon codicon-symbol-misc"></i></button>
|
||||
|
||||
<button id="format" type="button" class="btn btn-light" title="Format (Shift-Alt-f)"><i
|
||||
<button id="format" type="button" title="Format (Shift-Alt-f)"><i
|
||||
class="codicon codicon-list-flat"></i></button>
|
||||
|
||||
<button id="sync" title="Sync changes to server" type="button" class="btn btn-light">
|
||||
<button id="sync" title="Sync changes to server" type="button">
|
||||
<i class="codicon codicon-sync"></i>
|
||||
</button>
|
||||
|
||||
<button id="cmdList" type="button" class="btn btn-light" title="Command and key mapping help">
|
||||
<button id="cmdList" type="button" title="Command and key mapping help">
|
||||
<i class="codicon codicon-record-keys"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-light" popovertarget="popSettings" title="Settings">
|
||||
<button type="button" popovertarget="popSettings" title="Settings">
|
||||
<i class="codicon codicon-settings"></i></button>
|
||||
</quiet-button-group>
|
||||
|
||||
<quiet-button-group>
|
||||
<button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
|
||||
<button id="fullscreen" title="Full screen editor" type="button">
|
||||
<i class="codicon codicon-screen-full"></i>
|
||||
</button>
|
||||
|
||||
<button id="bnNew" type="button" class="btn btn-light" title="New file"><i
|
||||
class="codicon codicon-new-file"></i></button>
|
||||
|
||||
<button id="bnRead" type="button" class="btn btn-light" title="LOad local file"><i
|
||||
class="codicon codicon-cloud-upload"></i></button>
|
||||
<input type="file" id="fileElem" multiple accept="*/*" style="display: none;" />
|
||||
|
||||
<button id="bnSave" type="button" class="btn btn-light" title="save view">
|
||||
<button id="bnSave" type="button" title="save view">
|
||||
<i class="codicon codicon-git-stash"></i></button>
|
||||
|
||||
<button id="bnLoad" type="button" class="btn btn-light" title="load view">
|
||||
<button id="bnLoad" type="button" title="load view">
|
||||
<i class="codicon codicon-git-stash-pop"></i></button>
|
||||
<button id="bnWordAt" type="button" class="btn btn-light" title="word at">
|
||||
<button id="bnWordAt" type="button" title="word at">
|
||||
<i class="codicon codicon-whole-word"></i></button>
|
||||
|
||||
</quiet-button-group>
|
||||
|
|
@ -199,9 +204,28 @@
|
|||
</footer>
|
||||
</div>
|
||||
<!-- dialogs -->
|
||||
<quiet-popover for="popover__url">
|
||||
<form action="about:blank" target="_blank">
|
||||
<quiet-text-field type="url" name="url" label="URL to fetch" placeholder="http://..."
|
||||
with-clear required style="width: 20em;">
|
||||
<datalist>
|
||||
<option value="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm"></option>
|
||||
|
||||
<option value="Other"></option>
|
||||
</datalist>
|
||||
</quiet-text-field>
|
||||
<quiet-button type="submit" variant="primary">Fetch</quiet-button>
|
||||
<quiet-button data-popover="close" variant="neutral">Cancel</quiet-button>
|
||||
|
||||
</form>
|
||||
|
||||
</quiet-popover>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Popovers -->
|
||||
|
||||
<dialog id="popConnect" popover>
|
||||
<form>
|
||||
<header>Connect to LSP
|
||||
|
|
|
|||
|
|
@ -41,7 +41,11 @@ $("connect").onclick = e => { e.preventDefault(); connect() };
|
|||
|
||||
$("symTrigger").onclick = e => { e.preventDefault(); };
|
||||
$("symOptions").onclick = e => { e.preventDefault(); };
|
||||
$("bnNew").onclick = e => { alert("TODO"); };
|
||||
$("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)
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue