From 566831c73d141de36e4ba08288476518c2f5c2fc Mon Sep 17 00:00:00 2001 From: Andy Bunce Date: Mon, 8 Dec 2025 23:00:48 +0000 Subject: [PATCH] [mod] wa fixes --- .vscode/settings.json | 3 + .../codemirror/index.html => index.html | 0 webapp/static/clients/codemirror/script.js | 36 +++-- webapp/static/clients/codemirror/wa-setup.js | 33 ++++ webapp/static/clients/codemirror/wa.css | 151 ++++++++++++++++++ .../codemirror/{webawesome.html => wa.html} | 133 ++++++++------- webapp/static/clients/codemirror/wa2.html | 34 ++++ .../static/clients/codemirror/webawesome.css | 122 -------------- .../codicon@0.0.40/icons/kebab-vertical.svg | 1 + 9 files changed, 309 insertions(+), 204 deletions(-) create mode 100644 .vscode/settings.json rename webapp/static/clients/codemirror/index.html => index.html (100%) create mode 100644 webapp/static/clients/codemirror/wa-setup.js create mode 100644 webapp/static/clients/codemirror/wa.css rename webapp/static/clients/codemirror/{webawesome.html => wa.html} (74%) create mode 100644 webapp/static/clients/codemirror/wa2.html delete mode 100644 webapp/static/clients/codemirror/webawesome.css create mode 100644 webapp/static/clients/codicon@0.0.40/icons/kebab-vertical.svg diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..662268b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "html.customData": ["./node_modules/@awesome.me/webawesome/dist/vscode.html-custom-data.json"] +} diff --git a/webapp/static/clients/codemirror/index.html b/index.html similarity index 100% rename from webapp/static/clients/codemirror/index.html rename to index.html diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js index efaf2b7..04332e8 100644 --- a/webapp/static/clients/codemirror/script.js +++ b/webapp/static/clients/codemirror/script.js @@ -14,7 +14,7 @@ function $(id) { return document.getElementById(id) }; // Load saved content from localStorage when the page loads window.addEventListener('load', () => { - + const savedText = localStorage.getItem('code'); if (savedText) doc = savedText; let svr = localStorage.getItem('lsp'); @@ -87,10 +87,10 @@ $("symList").addEventListener("itemSelected", e => { const hd = plugin.fromPosition(sel.end) //view.dispatch({ selection: { anchor: an, head: hd }, scrollIntoView: true }); - view.dispatch({ - selection: { anchor: an, head: hd }, - scrollIntoView: true , - effects: [lsp.EditorView.scrollIntoView(an,{y:"center"})] + view.dispatch({ + selection: { anchor: an, head: hd }, + scrollIntoView: true, + effects: [lsp.EditorView.scrollIntoView(an, { y: "center" })] }); }); @@ -141,7 +141,12 @@ $("msgIcon").onclick = e => { e.preventDefault(); alert("NOT YET") }; - +$("samples").addEventListener('wa-selection-change', e => { + const sel=e.detail.selection; + const href=sel[0].getAttribute("data-href") + if(!href) return; + $("popUrl").querySelector('wa-input[name="url"]').value=href; +}); function updateSettings(event) { event.preventDefault(); @@ -172,7 +177,7 @@ function connect() { client.connect(transport); $("popConnect").hidePopover(); $("tConnect").checked = true; - $("tipConnect").innerText=server; + $("tipConnect").innerText = server; const extLsp = client.plugin(file, "xquery"); view.dispatch({ @@ -190,8 +195,8 @@ function connect() { }; // change active doc -function docSwitch(text,urlNew) { - const urlOld=$("iFile").value; +function docSwitch(text, urlNew) { + const urlOld = $("iFile").value; client.workspace.closeFile(urlOld); view.dispatch({ changes: { @@ -200,11 +205,18 @@ function docSwitch(text,urlNew) { insert: text } }) - client.workspace.openFile(urlNew,"xquery",view) + client.workspace.openFile(urlNew, "xquery", view) $("iFile").value = urlNew; + treeAdd($("workspace"), urlNew) }; - +function treeAdd(tree, txt) { + const treeItem = document.createElement('wa-tree-item'); + treeItem.innerText = txt; + tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false)); + tree.insertBefore(treeItem,tree.firstChild); + treeItem.selected=true; +}; function incoming(msg) { const rpc = JSON.parse(msg); log(rpc); @@ -217,7 +229,7 @@ function log(rpc) { const msg = { name: rpc.method ?? rpc.id, detail: when.substring(1 + when.indexOf("T")), kind: 23 /* event */ }; //name,details,kind $("msgList").setData([msg], true) - $("relative-time__live").date=new Date(); + $("relative-time__live").date = new Date(); }; function formFromStore(name) { diff --git a/webapp/static/clients/codemirror/wa-setup.js b/webapp/static/clients/codemirror/wa-setup.js new file mode 100644 index 0000000..14c41e2 --- /dev/null +++ b/webapp/static/clients/codemirror/wa-setup.js @@ -0,0 +1,33 @@ +import { setBasePath, registerIconLibrary } from '../../webawesome/dist-cdn/webawesome.js'; +import '../../webawesome/dist-cdn/components/button/button.js'; +import '../../webawesome/dist-cdn/components/button-group/button-group.js'; +import '../../webawesome/dist-cdn/components/details/details.js'; +import '../../webawesome/dist-cdn/components/dropdown/dropdown.js'; +import '../../webawesome/dist-cdn/components/divider/divider.js'; +import '../../webawesome/dist-cdn/components/icon/icon.js'; +import '../../webawesome/dist-cdn/components/input/input.js'; +import '../../webawesome/dist-cdn/components/relative-time/relative-time.js'; +import '../../webawesome/dist-cdn/components/tooltip/tooltip.js'; +import '../../webawesome/dist-cdn/components/popover/popover.js'; +import '../../webawesome/dist-cdn/components/split-panel/split-panel.js'; +import '../../webawesome/dist-cdn/components/tree/tree.js'; + + +setBasePath('/static/webawesome/dist-cdn'); + +registerIconLibrary('tabler', { + resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@3.35.0/icons/outline/${name}.svg`, + mutator: svg => { + svg.style.fill = 'none'; + svg.setAttribute('stroke', 'currentColor'); + } +}); +registerIconLibrary('codicon', { + resolver: (name, family) => { + return `/static/clients/codicon@0.0.40/icons/${name}.svg` + }, + mutator: svg => { + svg.style.fill = 'none'; + svg.setAttribute('stroke', 'currentColor'); + } +}); \ No newline at end of file diff --git a/webapp/static/clients/codemirror/wa.css b/webapp/static/clients/codemirror/wa.css new file mode 100644 index 0000000..4d04d32 --- /dev/null +++ b/webapp/static/clients/codemirror/wa.css @@ -0,0 +1,151 @@ +:root, +.wa-light, +.wa-dark .wa-invert { + --wa-color-surface-raised: var(--wa-color-neutral-95); + --wa-color-surface-default: var(--wa-color-neutral-90); + --wa-color-surface-lowered: var(--wa-color-neutral-80); +} + +wa-button-group>wa-button::part(base) { + background-color: var(--wa-color-neutral-95); + border: 1px solid var(--wa-color-border-quiet); + color: var(--wa-color-on-quiet); +} +wa-button-group>wa-button::part(base):hover { + transform: scale(1.05); + background-color: var(--wa-color-neutral-80); +} +/*********************** + codemirror6 search panel tweaks to show close + **********************/ +.cm-panel.cm-search [name="close"] { + color: black +} +.cm-panel.cm-panel-lint [name="close"] { + color: black +} +.cm-panel.cm-search [name="search"] { + width:98%; +} + +form header { + background-color: burlywood; +} + +.page-wrap { + background: white; + height: 100vh; + display: grid; + grid-template-columns: minmax(10px, 1fr) minmax(10px, 4fr); + grid-template-rows: min-content min-content 1fr min-content; +} + +details[open] { + flex-grow: 1; + overflow: hidden; +} + +summary { + background-color: var(--quiet-neutral-fill-softer); +} + +/* Set editor dimensions */ +#editor { + max-width: 100%; + overflow: hidden; + height: 75cqh; +} + +/* Stretch editor to fit inside its containing div */ +.cm-editor { + height: 100%; + width: 100%; + overflow: auto; +} + +details[open]::details-content { + padding: 0.1em; + border: thin solid grey; + overflow: auto; +} + +::backdrop { + backdrop-filter: blur(2px); +} + + +#tConnect:state(unchecked) { + outline: dashed 4px deeppink; + outline-offset: 4px; +} + +.page-header { + grid-column: 1 / -1; + display: flex; + justify-content: space-between; + background: red; +} + +.page-sidebar { + grid-column: 1 / 2; + grid-row: 2 / 4; + display: flex; + flex-direction: column; + + details { + display: flex; + flex-direction: column; + + } +} + +.page-nav { + grid-column: 2 / 3; + background: red; + +} + +.page-main { + grid-column: 2 / 3; + display: flex; + flex-direction: column; +} + +.page-footer { + grid-column: 1 / -1; + background: #ffecb3; + display: flex; + justify-content: space-between; + padding: 2px; +} + +wa-button.pink::part(base) { + border-radius: 6px; + border: solid 2px; + background: #ff1493; + border-top-color: #ff7ac1; + border-left-color: #ff7ac1; + border-bottom-color: #ad005c; + border-right-color: #ad005c; + color: white; + font-size: 1.125rem; + box-shadow: 0 2px 10px #0002; + transition: all var(--wa-transition-slow) var(--wa-transition-easing); +} + +wa-button.pink::part(base):hover { + transform: scale(1.05); +} + +wa-button.pink::part(base):active { + border-top-color: #ad005c; + border-right-color: #ff7ac1; + border-bottom-color: #ff7ac1; + border-left-color: #ad005c; + transform: translateY(1px); +} + +wa-button.pink::part(base):focus-visible { + outline: dashed 2px deeppink; + outline-offset: 4px; +} \ No newline at end of file diff --git a/webapp/static/clients/codemirror/webawesome.html b/webapp/static/clients/codemirror/wa.html similarity index 74% rename from webapp/static/clients/codemirror/webawesome.html rename to webapp/static/clients/codemirror/wa.html index da4ce3e..c966de3 100644 --- a/webapp/static/clients/codemirror/webawesome.html +++ b/webapp/static/clients/codemirror/wa.html @@ -1,66 +1,37 @@ - - + Codemirror6 example using BaseX LSP - + - - - + +
- File + File New... -
create a new doc
+
empty document
 Open... -
select a local file
+
a local file
 - Url... -
Fetch from a url
+ Fetch... +
a url from the internet
 @@ -90,30 +61,30 @@ - +
- - - - - - + + + + + diff --git a/webapp/static/clients/codemirror/wa2.html b/webapp/static/clients/codemirror/wa2.html new file mode 100644 index 0000000..e2ca92d --- /dev/null +++ b/webapp/static/clients/codemirror/wa2.html @@ -0,0 +1,34 @@ + + + + + + + + awesome test + + + + + + + + + +
+ Filled-Outlined + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/webapp/static/clients/codemirror/webawesome.css b/webapp/static/clients/codemirror/webawesome.css deleted file mode 100644 index 01e8b00..0000000 --- a/webapp/static/clients/codemirror/webawesome.css +++ /dev/null @@ -1,122 +0,0 @@ - - -:root { - color-scheme: light dark; - --quiet-primary-seed: #e98d61; - --quiet-content-spacing: 0.75rem; - --quiet-form-control-height-md:0.9rem; - --quiet-focus-width: 2px; - --quiet-focus-offset: 0px; -} - - - - -form header { - background-color: burlywood; -} - -.page-wrap { - background: white; - height: 100vh ; - - - display: grid; - grid-template-columns: minmax(10px, 1fr) minmax(10px, 4fr); - grid-template-rows: min-content min-content 1fr min-content; - - - - - details { - - } - - details[open] { - flex-grow: 1; - overflow: hidden; - } - - summary { - background-color: var(--quiet-neutral-fill-softer); - } - - /* Set editor dimensions */ - #editor { - max-width: 100%; - overflow: hidden; - height: 75cqh; - } - - /* Stretch editor to fit inside its containing div */ - .cm-editor { - height: 100%; - width: 100%; - overflow: auto; - } - - details[open]::details-content { - padding: 0.1em; - border: thin solid grey; - overflow: auto; - } - - ::backdrop { - backdrop-filter: blur(2px); - } - - @media (max-width: 600px) { - grid-template-columns: 100%; - grid-template-rows: auto; - - >* { - grid-column: 1 / -1 !important; - grid-row: auto !important; - } - } -} - -#tConnect:state(unchecked) { - outline: dashed 4px deeppink; - outline-offset: 4px; -} - -.page-header { - grid-column: 1 / -1; - display: flex; - justify-content: space-between; - background: red; -} - -.page-sidebar { - grid-column: 1 / 2; - grid-row: 2 / 4; - display: flex; - flex-direction: column; - - details { - display: flex; - flex-direction: column; - - } -} - -.page-nav { - grid-column: 2 / 3; - background: red; - -} - -.page-main { - grid-column: 2 / 3; - display: flex; - flex-direction: column; -} - -.page-footer { - grid-column: 1 / -1; - background: #ffecb3; - display: flex; - justify-content: space-between; - padding:2px; -} \ No newline at end of file diff --git a/webapp/static/clients/codicon@0.0.40/icons/kebab-vertical.svg b/webapp/static/clients/codicon@0.0.40/icons/kebab-vertical.svg new file mode 100644 index 0000000..41cdbb1 --- /dev/null +++ b/webapp/static/clients/codicon@0.0.40/icons/kebab-vertical.svg @@ -0,0 +1 @@ + \ No newline at end of file