[mod] move icons into list wc
This commit is contained in:
parent
3cd8bb4f76
commit
dcfc390f1e
5 changed files with 68 additions and 59 deletions
|
|
@ -57,7 +57,7 @@ as xs:integer
|
|||
};
|
||||
|
||||
(:~ format position for text display :)
|
||||
declare function pos:ln-col($pos as lspt:Position,$offset as xs:integer:=1)
|
||||
declare function pos:ln-col($pos as lspt:Position,$offset as xs:integer:=0)
|
||||
{
|
||||
`Ln { $pos?line + $offset}, Col { $pos?character + $offset}`
|
||||
};
|
||||
|
|
|
|||
|
|
@ -64,7 +64,6 @@ form header {
|
|||
}
|
||||
|
||||
details[open]::details-content {
|
||||
color: dodgerblue;
|
||||
padding: 0.1em;
|
||||
border: thin solid grey;
|
||||
overflow:auto;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<a class="nav-link active" aria-current="page" href="#">Editor</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/app/home" target="lsp">LSP Manager</a>
|
||||
<a class="nav-link" href="/app/home" target="lsp">LSP Manager</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/dba/logs" target="dba">Dba</a>
|
||||
|
|
@ -57,11 +57,11 @@
|
|||
generator.xquery</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<button popovertarget="popAbout" type="button" class="btn btn-light">
|
||||
<button popovertarget="popAbout" type="button" class="btn btn-light">
|
||||
<i class="codicon codicon-info"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
<nav class="page-nav">
|
||||
|
|
@ -90,24 +90,23 @@
|
|||
<button id="sync" title="Sync changes to server" type="button" class="btn btn-light">
|
||||
<i class="codicon codicon-sync"></i>
|
||||
</button>
|
||||
<button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
|
||||
<i class="codicon codicon-screen-full"></i>
|
||||
</button>
|
||||
|
||||
<button id="cmdList" type="button" class="btn btn-light" 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">
|
||||
<i class="codicon codicon-settings"></i></button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
|
||||
<button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
|
||||
<i class="codicon codicon-screen-full"></i>
|
||||
</button>
|
||||
<button id="syntax" type="button" class="btn btn-light" title="Unused"><i
|
||||
class="codicon codicon-comment"></i></button>
|
||||
|
||||
|
||||
|
||||
<button id="wordAt" type="button" class="btn btn-light" title="word at">
|
||||
<i>1</i></button>
|
||||
|
||||
|
||||
<button id="unused3" type="button" class="btn btn-light" title="unused3">
|
||||
<i>3</i></button>
|
||||
</div>
|
||||
|
|
@ -122,7 +121,7 @@
|
|||
<aside class="page-sidebar">
|
||||
|
||||
<details id="workspacePanel" open="open">
|
||||
<summary class='bg-info'>Workspace <b>0</b></summary>
|
||||
<summary class='bg-info'>Workspace <i class='codicon codicon-kebab-vertical' style="float:right"></i></summary>
|
||||
|
||||
|
||||
<ul id="traffic" style="overflow: scroll;">
|
||||
|
|
@ -131,12 +130,14 @@
|
|||
</details>
|
||||
|
||||
<details id="symPanel">
|
||||
<summary>OutLine <b>0</b></summary>
|
||||
<summary>OutLine <i class='codicon codicon-kebab-vertical' style="float:right"></i></summary>
|
||||
<qd-list id="symList" style="flex-grow:1;"></qd-list>
|
||||
</details>
|
||||
|
||||
<details id="msgPanel">
|
||||
<summary>Messages <b>0</b></summary>
|
||||
<summary>Messages
|
||||
<i id="msgIcon" class='codicon codicon-kebab-vertical' style="float:right"></i>
|
||||
</summary>
|
||||
<div id="msg">(msgs)<i class='codicon codicon-symbol-method'></i></div>
|
||||
</details>
|
||||
</aside>
|
||||
|
|
@ -148,10 +149,8 @@
|
|||
<option value="xquery">xquery</option>
|
||||
<option value="xml">xml</option>
|
||||
</select>
|
||||
|
||||
<button id="cmdList" type="button" class="btn btn-light" title="Command and key mapping help">
|
||||
<i class="codicon codicon-record-keys"></i>
|
||||
</button>
|
||||
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Popovers -->
|
||||
|
|
@ -178,7 +177,7 @@
|
|||
onclick="$('popCmds').hidePopover(); "></button>
|
||||
</header>
|
||||
<div id="popHelpInfo" class="modal-body" style="height: 50vh;overflow:scroll;">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
|
|
@ -189,7 +188,7 @@
|
|||
<form>
|
||||
<header>Help</header>
|
||||
<div class="modal-body" style="height: 50vh;overflow:scroll;">
|
||||
<p>TODO help info</p>
|
||||
<p>TODO help info</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
|
|
|
|||
|
|
@ -53,35 +53,8 @@ $("symbols2").onclick = e => {
|
|||
.then(r => {
|
||||
console.log("symbols", r)
|
||||
$("symPanel").open = true;
|
||||
const icons = [
|
||||
'symbol-file',
|
||||
'symbol-class',
|
||||
'symbol-namespace',
|
||||
'symbol-structure',
|
||||
'symbol-class',
|
||||
'symbol-method',
|
||||
'symbol-property',
|
||||
'symbol-field',
|
||||
'symbol-method-arrow',
|
||||
'symbol-enum',
|
||||
'symbol-interface',
|
||||
'symbol-method',
|
||||
'symbol-variable',
|
||||
'symbol-constant',
|
||||
'symbol-string',
|
||||
'symbol-numeric',
|
||||
'symbol-boolean',
|
||||
'symbol-array',
|
||||
'symbol-structure',
|
||||
'symbol-key',
|
||||
'dash',
|
||||
'symbol-enum-member',
|
||||
'symbol-misc',
|
||||
'symbol-event',
|
||||
'symbol-operator',
|
||||
'symbol-parameter'
|
||||
];
|
||||
$("symList").setData(r, icons);
|
||||
|
||||
$("symList").setData(r);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -134,6 +107,11 @@ $("load").onchange = e => {
|
|||
$("load").value = "";
|
||||
};
|
||||
|
||||
$("msgIcon").onclick=e=>{
|
||||
e.preventDefault();
|
||||
alert("NOT YET")
|
||||
};
|
||||
|
||||
function updateSettings(event) {
|
||||
event.preventDefault();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
/* Define the web component for settable list
|
||||
/* Define a web component providing a settable and selectable list
|
||||
$("symList").setData(r, append = false);
|
||||
where r is array of objects with properties name,details,kind
|
||||
|
||||
https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from
|
||||
https://www.w3schools.com/howto/howto_js_treeview.asp
|
||||
*/
|
||||
|
|
@ -10,16 +13,44 @@ class ListComponent extends HTMLElement {
|
|||
super();
|
||||
this.#shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
|
||||
this.#data = [];
|
||||
this.#iconKinds = [];
|
||||
// codicons kind
|
||||
this.#iconKinds = [
|
||||
'symbol-file',
|
||||
'symbol-class',
|
||||
'symbol-namespace',
|
||||
'symbol-structure',
|
||||
'symbol-class',
|
||||
'symbol-method',
|
||||
'symbol-property',
|
||||
'symbol-field',
|
||||
'symbol-method-arrow',
|
||||
'symbol-enum',
|
||||
'symbol-interface',
|
||||
'symbol-method',
|
||||
'symbol-variable',
|
||||
'symbol-constant',
|
||||
'symbol-string',
|
||||
'symbol-numeric',
|
||||
'symbol-boolean',
|
||||
'symbol-array',
|
||||
'symbol-structure',
|
||||
'symbol-key',
|
||||
'dash',
|
||||
'symbol-enum-member',
|
||||
'symbol-misc',
|
||||
'symbol-event',
|
||||
'symbol-operator',
|
||||
'symbol-parameter'
|
||||
];
|
||||
this.render();
|
||||
}
|
||||
|
||||
setData(newData, icons, append = false) {
|
||||
setData(newData, append = false) {
|
||||
if (!Array.isArray(newData)) {
|
||||
console.warn("Invalid format, expected an array.");
|
||||
return;
|
||||
}
|
||||
this.#iconKinds = icons;
|
||||
|
||||
this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
|
||||
this.render();
|
||||
}
|
||||
|
|
@ -34,7 +65,7 @@ class ListComponent extends HTMLElement {
|
|||
/* Render the list items #data */
|
||||
render() {
|
||||
const list = document.createElement('ul');
|
||||
list.style = "max-height:45cqh;overflow: auto;";
|
||||
list.style = "overflow: auto;";
|
||||
|
||||
const select = e => {
|
||||
if(e.type ==="keyup" && !(e.key==="Enter" )) return;
|
||||
|
|
@ -51,9 +82,11 @@ class ListComponent extends HTMLElement {
|
|||
};
|
||||
this.#data.forEach((item, index) => {
|
||||
const listItem = document.createElement('li');
|
||||
const icon=this.#iconKinds[item.kind];
|
||||
listItem.setAttribute("tabindex", "0")
|
||||
listItem.setAttribute("data-index", index)
|
||||
listItem.innerHTML = `<i class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
|
||||
listItem.innerHTML = `<i class='codicon codicon-${icon}'
|
||||
title='${icon}'></i>
|
||||
<span >${item.name} - ${item.detail}</span>`;
|
||||
|
||||
listItem.addEventListener('click', select);
|
||||
|
|
@ -97,12 +130,11 @@ class PanelComponent extends HTMLElement {
|
|||
this.render();
|
||||
}
|
||||
|
||||
setData(newData, icons, append = false) {
|
||||
setData(newData, append = false) {
|
||||
if (!Array.isArray(newData)) {
|
||||
console.warn("Invalid format, expected an array.");
|
||||
return;
|
||||
}
|
||||
this.#iconKinds = icons;
|
||||
this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
|
||||
this.render();
|
||||
}
|
||||
|
|
@ -134,9 +166,10 @@ class PanelComponent extends HTMLElement {
|
|||
};
|
||||
this.#data.forEach((item, index) => {
|
||||
const listItem = document.createElement('li');
|
||||
const icon=this.#iconKinds[item.kind];
|
||||
listItem.setAttribute("tabindex", "0")
|
||||
listItem.setAttribute("data-index", index)
|
||||
listItem.innerHTML = `<i class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
|
||||
listItem.innerHTML = `<span title='A ${icon}'>XX<i class='codicon codicon-${icon}' >*</i></span>
|
||||
<span >${item.name} - ${item.detail}</span>`;
|
||||
|
||||
listItem.addEventListener('click', select);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue