[mod] wa though out
This commit is contained in:
parent
c54fbf045e
commit
28081d4694
9 changed files with 803 additions and 198 deletions
328
webapp/static/clients/codemirror/index.html
Normal file
328
webapp/static/clients/codemirror/index.html
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
<!doctype html>
|
||||
<html lang="en" class="wa-cloak wa-brand-blue wa-dark">
|
||||
<!-- also quiet-dark -->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>awesome test</title>
|
||||
|
||||
<link rel="stylesheet" href="../../webawesome/dist-cdn/styles/webawesome.css" />
|
||||
<link rel="icon" type="image/png" href="../favicon.png" />
|
||||
|
||||
<script type="module" src="wa-setup.js"></script>
|
||||
<link rel="stylesheet" href="wa2.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" with-caret appearance="plain" variant="neutral">File</wa-button>
|
||||
<wa-dropdown-item id="bnNew">
|
||||
<wa-icon slot="icon" library="tabler" name="file"></wa-icon>New...
|
||||
<div slot="details">empty document</div>
|
||||
</wa-dropdown-item>
|
||||
|
||||
<wa-dropdown-item id="bnRead">
|
||||
<wa-icon slot="icon" library="tabler" name="folder-open"></wa-icon>Open...
|
||||
<div slot="details">a local file</div>
|
||||
</wa-dropdown-item>
|
||||
<input type="file" id="fileElem" multiple accept="*/*" style="display: none;" />
|
||||
|
||||
<wa-dropdown-item id="popover__url">
|
||||
<wa-icon slot="icon" library="tabler" name="link"></wa-icon>Fetch...
|
||||
<div slot="details">a url from the internet</div>
|
||||
</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
|
||||
<div>
|
||||
<span class="h4">XQuery 4.0 LSP client</span>
|
||||
|
||||
<wa-button id="bConnect" variant="danger">
|
||||
<wa-icon library="tabler" name="network-off"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip id="tipConnect" for="bConnect">Not connected</wa-tooltip>
|
||||
</div>
|
||||
|
||||
|
||||
<wa-button-group style="margin-right: 0.2rem;">
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" with-caret appearance="plain" variant="neutral">Dev tools</wa-button>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="icon" library="tabler" name="external-link"></wa-icon>
|
||||
<a href="/app/home" target="lsp" rel="noreferrer noopener">LSP Manager</a>
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="icon" library="tabler" name="external-link"></wa-icon>
|
||||
<a href="/dba/logs" target="dba" rel="noreferrer noopener">Dba</a>
|
||||
</wa-dropdown-item>
|
||||
<wa-divider></wa-divider>
|
||||
</wa-dropdown>
|
||||
<wa-button popovertarget="popAbout" appearance="plain" variant="neutral">
|
||||
<wa-icon library="tabler" name="help" label="Home"></wa-icon>
|
||||
</wa-button>
|
||||
</wa-button-group>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<!-- Left Column - Details Panels Only (1/4 width) -->
|
||||
<div class="left-column">
|
||||
<div class="left-column-header">EXPLORER</div>
|
||||
<div class="details-container">
|
||||
<div class="details-wrapper">
|
||||
|
||||
|
||||
|
||||
<details id="symPanel" open>
|
||||
<summary>OUTLINE
|
||||
<!-- <wa-dropdown id="symOptions" style="display:inline-block;float:right;">
|
||||
<wa-icon id="symTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
|
||||
<wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
|
||||
|
||||
<wa-divider></wa-divider>
|
||||
<wa-dropdown-item type="checkbox" value="position" checked>sort by:
|
||||
Position</wa-dropdown-item>
|
||||
<wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
|
||||
<wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
|
||||
</wa-dropdown> -->
|
||||
</summary>
|
||||
<qd-list id="symList" style="flex-grow:1;"></qd-list>
|
||||
</details>
|
||||
|
||||
<wa-details id="workspacePanel" open="open" icon-placement="start">
|
||||
<div slot="summary">
|
||||
WORKSPACE
|
||||
<wa-dropdown id="workspaceOptions" style="display:inline-block;float:right;">
|
||||
<wa-icon id="workspaceTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
|
||||
<wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
|
||||
|
||||
<wa-divider></wa-divider>
|
||||
<wa-dropdown-item type="checkbox" value="position" checked>sort by:
|
||||
Position</wa-dropdown-item>
|
||||
<wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
|
||||
<wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
</div>
|
||||
<div style="overflow: scroll;">
|
||||
<wa-tree id="workspace" selection="single">
|
||||
<wa-tree-item>file:///some/file.xqm</wa-tree-item>
|
||||
</wa-tree>
|
||||
</div>
|
||||
</wa-details>
|
||||
|
||||
<details id="msgPanel">
|
||||
<summary>MESSAGES
|
||||
<i id="msgIcon" class='codicon codicon-kebab-vertical' style="float:right"></i>
|
||||
</summary>
|
||||
<qd-list id="msgList" style="flex-grow:1;"></qd-list>
|
||||
</details>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Controls and Information (3/4 width) -->
|
||||
<div class="right-column">
|
||||
<div class="right-column-header">
|
||||
<div class="wa-split " style="font-size: 24px;">
|
||||
|
||||
<wa-button-group>
|
||||
<wa-button id="search" title="Search" icon-label="search">
|
||||
<wa-icon name="search"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="lint" title="Display diagnostics" icon-label="diagnostics">
|
||||
<wa-icon library="tabler" name="message-report"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="symbols2" title="symbols" icon-label="Symbols">
|
||||
<wa-icon library="tabler" name="icons"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="format" type="button" title="Format (Shift-Alt-f)" icon-label="Format">
|
||||
<wa-icon library="tabler" name="align-justified"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
</wa-button-group>
|
||||
|
||||
<wa-button-group>
|
||||
<wa-button id="sync" title="Sync changes to server">
|
||||
<wa-icon library="codicon" name="sync"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="cmdList" title="Command and key mapping help">
|
||||
<wa-icon library="codicon" name="record-keys"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="popover__settings" title="Settings">
|
||||
<wa-icon library="codicon" name="settings"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="fullscreen" title="Full screen editor">
|
||||
<wa-icon library="codicon" name="screen-full"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="bnSave" title="save view">
|
||||
<wa-icon library="codicon" name="git-stash"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="bnLoad" title="load view">
|
||||
<wa-icon library="codicon" name="git-stash-pop"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="bnWordAt" type="wa-button" title="word at">
|
||||
<wa-icon library="codicon" name="whole-word"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-button id="bnDebug" title="Debug " icon-label="debug">
|
||||
<wa-icon library="codicon" name="debug"></wa-icon>
|
||||
</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-column-content">
|
||||
<!-- Editor goes in here -->
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
|
||||
|
||||
<div>
|
||||
<label for="iFile">File:</label>
|
||||
<input id="iFile" type="url" value="file:///some/file.xqm" style="width:20em;display:inline-block;" />
|
||||
|
||||
<label for="symbols">Symbols:</label>
|
||||
<select id="symbols" disabled="disabled" style="width:10em;display:inline-block;"></select>
|
||||
</div>
|
||||
|
||||
<wa-relative-time live id="relative-time__live" sync second="numeric" format='short'
|
||||
style="width:10em;"></wa-relative-time>
|
||||
<select id="language" style="width:10em;display:inline-block;">
|
||||
<option selected>Language</option>
|
||||
<option value="plaintext">plaintext</option>
|
||||
<option value="xquery">xquery</option>
|
||||
<option value="xml">xml</option>
|
||||
</select>
|
||||
|
||||
</footer>
|
||||
<!-- dialogs -->
|
||||
<wa-popover id="popWeb" for="popover__url">
|
||||
<div style="display:flex;background: #ffecb3;">
|
||||
<div style="flex: 1 1 auto;">Load a document from the web</div>
|
||||
<wa-button icon-label="Close" appearance="text" data-popover="close">
|
||||
<wa-icon name="circle-xmark" library="system"></wa-icon>
|
||||
</wa-button>
|
||||
</div>
|
||||
|
||||
<form id="popUrl">
|
||||
<input type="url" name="url" label="URL to fetch" placeholder="http://..." with-clear required
|
||||
style="width: 20em;">
|
||||
|
||||
</input>
|
||||
<wa-button type="submit" variant="primary">Fetch</wa-button>
|
||||
<hr />
|
||||
<wa-tree id="samples" selection="leaf">
|
||||
<wa-tree-item>
|
||||
XQuery 3.1
|
||||
<wa-tree-item
|
||||
data-href="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm">Pdfbox3.xqm
|
||||
(expkg-zone58/pdfbox)</wa-tree-item>
|
||||
<wa-tree-item
|
||||
data-href="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
|
||||
model.xqm (Quodatum/xqdoca)</wa-tree-item>
|
||||
<wa-tree-item>Item X</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
<wa-tree-item>
|
||||
XQuery 4
|
||||
<wa-tree-item>Item B</wa-tree-item>
|
||||
<wa-tree-item>Item C</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
<wa-tree-item>Item 2</wa-tree-item>
|
||||
<wa-tree-item>Item 3</wa-tree-item>
|
||||
</wa-tree>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</wa-popover>
|
||||
<!-- Popovers -->
|
||||
<dialog id="popConnect" popover>
|
||||
<form>
|
||||
<header>Connect to LSP
|
||||
<button type="button" class="btn-close" aria-label="Close" onclick="$('popConnect').hidePopover(); "></button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
<div id="state">🔴</div>
|
||||
<input id="iServer" type="text" style="width:25em" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="connect">connect</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog id="popCmds" popover>
|
||||
<form>
|
||||
<header>Commands and keys
|
||||
<button type="button" class="btn-close" aria-label="Close" onclick="$('popCmds').hidePopover(); "></button>
|
||||
</header>
|
||||
<div id="popHelpInfo" class="modal-body" style="height: 50vh;overflow:scroll;">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
<dialog id="popAbout" popover>
|
||||
<form>
|
||||
<header>Help</header>
|
||||
<div class="modal-body" style="height: 50vh;overflow:scroll;">
|
||||
<p>TODO help info</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
<!-- <popup-info id="popHelp">hhhh</popup-info> -->
|
||||
|
||||
<wa-popover for="popover__settings">
|
||||
<form id="fSettings">
|
||||
<header>Editor configuration
|
||||
<button type="button" class="btn-close" aria-label="Close" onclick="$('popSettings').hidePopover(); "></button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="mb-3 form-check">
|
||||
<input name="wrapLines" type="checkbox" class="form-check-input" id="lineWrap">
|
||||
<label class="form-check-label" for="lineWrap">Wrap lines</label>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input name="highlightWhitespace" type="checkbox" class="form-check-input" id="highlightWhitespace">
|
||||
<label class="form-check-label" for="highlightWhitespace">highlight Whitespace</label>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input name="minimap" type="checkbox" class="form-check-input" id="minimap">
|
||||
<label class="form-check-label" for="minimap">Show minimap</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Apply</button>
|
||||
</div>
|
||||
</form>
|
||||
</wa-popover>
|
||||
<!-- CodeMirror 6 -->
|
||||
<script src="./lsp.bundle.js"></script>
|
||||
<script src="./script.js"></script>
|
||||
<script src="./wc-qd-list.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -40,8 +40,8 @@ window.addEventListener('beforeunload', () => {
|
|||
|
||||
$("connect").onclick = e => { e.preventDefault(); connect() };
|
||||
|
||||
$("symTrigger").onclick = e => { e.preventDefault(); };
|
||||
$("symOptions").onclick = e => { e.preventDefault(); };
|
||||
//$("symTrigger").onclick = e => { e.preventDefault(); };
|
||||
//$("symOptions").onclick = e => { e.preventDefault(); };
|
||||
$("bnNew").onclick = e => {
|
||||
let name = prompt("New file name?", "untitled.xq");
|
||||
if (name === null) return;
|
||||
|
|
@ -137,15 +137,14 @@ $("bConnect").addEventListener('click', e => {
|
|||
e.preventDefault();
|
||||
$("popConnect").showPopover()
|
||||
});
|
||||
$("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;
|
||||
const input=$("popUrl").querySelector('input[name="url"]');
|
||||
input.value = href;
|
||||
//input.setCustomValidity('');
|
||||
});
|
||||
|
||||
function updateSettings(event) {
|
||||
|
|
|
|||
|
|
@ -16,19 +16,11 @@ 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.36.0/icons/outline/${name}.svg`,
|
||||
mutator: svg => {
|
||||
svg.style.fill = 'none';
|
||||
svg.setAttribute('stroke', 'currentColor');
|
||||
}
|
||||
resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@3.36.0/icons/outline/${name}.svg`
|
||||
});
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@
|
|||
--wa-color-surface-lowered: var(--wa-color-neutral-80);
|
||||
}
|
||||
|
||||
wa-details::part(base) {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
wa-button-group>wa-button::part(base) {
|
||||
background-color: var(--wa-color-neutral-95);
|
||||
border: 1px solid var(--wa-color-border-quiet);
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<div>
|
||||
<span class="h4">XQuery 4.0 LSP client</span>
|
||||
|
||||
|
||||
<wa-button id="bConnect" variant="danger">
|
||||
<wa-icon library="tabler" name="network-off"></wa-icon>
|
||||
</wa-button>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<wa-button-group style="margin-right: 0.2rem;" >
|
||||
<wa-button-group style="margin-right: 0.2rem;">
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" with-caret appearance="plain" variant="neutral">Dev tools</wa-button>
|
||||
<wa-dropdown-item>
|
||||
|
|
@ -130,20 +130,29 @@
|
|||
|
||||
<aside class="page-sidebar">
|
||||
|
||||
<details id="workspacePanel" open="open">
|
||||
<summary class='bg-info'>WORKSPACE
|
||||
<wa-icon library="codicon" name="kebab-vertical" style="float:right"></wa-icon>
|
||||
</summary>
|
||||
<wa-details id="workspacePanel" open="open" icon-placement="start">
|
||||
<div slot="summary">
|
||||
WORKSPACE
|
||||
<wa-dropdown id="workspaceOptions" style="display:inline-block;float:right;">
|
||||
<wa-icon id="workspaceTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
|
||||
<wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
|
||||
|
||||
<wa-divider></wa-divider>
|
||||
<wa-dropdown-item type="checkbox" value="position" checked>sort by:
|
||||
Position</wa-dropdown-item>
|
||||
<wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
|
||||
<wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
</div>
|
||||
<div style="overflow: scroll;">
|
||||
<wa-tree id="workspace" selection="single">
|
||||
<wa-tree-item>file:///some/file.xqm</wa-tree-item>
|
||||
</wa-tree>
|
||||
</div>
|
||||
</wa-details>
|
||||
|
||||
</details>
|
||||
|
||||
<details id="symPanel">
|
||||
<summary>OUTLINE
|
||||
<wa-details id="symPanel" icon-placement="start">
|
||||
<div slot="summary">OUTLINE
|
||||
<wa-dropdown id="symOptions" style="display:inline-block;float:right;">
|
||||
<wa-icon id="symTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
|
||||
<wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
|
||||
|
|
@ -154,9 +163,11 @@
|
|||
<wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
|
||||
<wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
</summary>
|
||||
<qd-list id="symList" style="flex-grow:1;"></qd-list>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<qd-list id="symList" style="height: 10em;overflow: scroll;"></qd-list>
|
||||
|
||||
</wa-details>
|
||||
|
||||
<details id="msgPanel">
|
||||
<summary>MESSAGES
|
||||
|
|
@ -164,6 +175,8 @@
|
|||
</summary>
|
||||
<qd-list id="msgList" style="flex-grow:1;"></qd-list>
|
||||
</details>
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
<footer class="page-footer">
|
||||
|
|
@ -247,12 +260,7 @@
|
|||
</form>
|
||||
|
||||
</wa-popover>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Popovers -->
|
||||
|
||||
<dialog id="popConnect" popover>
|
||||
<form>
|
||||
<header>Connect to LSP
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
/* WA customizations for codemirror6 client */
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--wa-focus-ring-offset: 0 /* 0.0625rem */;
|
||||
--wa-focus-ring-style: dotted;
|
||||
--wa-focus-ring-width: 3px;
|
||||
}
|
||||
|
||||
:root,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
|
|
@ -6,154 +14,459 @@
|
|||
--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);
|
||||
}
|
||||
.wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.header{
|
||||
background-color: orange;
|
||||
height: 100px;
|
||||
}
|
||||
.middle{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.left-panel{
|
||||
background-color: lightgreen;
|
||||
width: 100px;
|
||||
}
|
||||
.body-content{
|
||||
background-color: pink;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
.right-panel{
|
||||
background-color: skyblue;
|
||||
width: 100px;
|
||||
}
|
||||
.footer{
|
||||
background-color: grey;
|
||||
height: 100px;
|
||||
}
|
||||
/***********************
|
||||
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;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
/* Prevent page scrolling */
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
background: white;
|
||||
height: 100%;
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: #333;
|
||||
background: #f5f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Main content area - fills available space */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
gap: 15px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Left Column styling - Details Panels Only (1/4 width) */
|
||||
.left-column {
|
||||
flex: 1;
|
||||
/* Takes 1 part */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
/* Prevents flex item from overflowing */
|
||||
}
|
||||
|
||||
.left-column-header {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid #2980b9;
|
||||
}
|
||||
|
||||
/* Details container - fills column height */
|
||||
.details-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Details wrapper with scroll */
|
||||
.details-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Right Column styling - Controls and Information (3/4 width) */
|
||||
.right-column {
|
||||
flex: 3;
|
||||
/* Takes 3 parts (3/4 of width) */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
/* Prevents flex item from overflowing */
|
||||
}
|
||||
|
||||
.right-column-header {
|
||||
|
||||
padding: 2px;
|
||||
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid #34495e;
|
||||
}
|
||||
|
||||
/* Right column content area */
|
||||
.right-column-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling */
|
||||
.details-wrapper::-webkit-scrollbar,
|
||||
.right-column-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.details-wrapper::-webkit-scrollbar-track,
|
||||
.right-column-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.details-wrapper::-webkit-scrollbar-thumb,
|
||||
.right-column-content::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.details-wrapper::-webkit-scrollbar-thumb:hover,
|
||||
.right-column-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* Individual details element styling */
|
||||
details {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
background-color: #f9f9f9;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
details:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
details:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.5);
|
||||
}
|
||||
|
||||
/* Summary styling */
|
||||
summary {
|
||||
background-color: var(--quiet-neutral-fill-softer);
|
||||
}
|
||||
|
||||
/* Set editor dimensions */
|
||||
#editor {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
/* 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;
|
||||
padding: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
background-color: #f1f8ff;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page-sidebar {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 4;
|
||||
summary:hover,
|
||||
summary:focus {
|
||||
background-color: #e8f4fc;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.summary-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/***********************
|
||||
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 button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cm-panel.cm-search [name="search"] {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.item-count {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Content area of details */
|
||||
.details-content {
|
||||
padding: 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* List styling */
|
||||
.details-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.details-list li {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.details-list li:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.details-list li:focus {
|
||||
background-color: #e8f4fc;
|
||||
outline: 2px solid #3498db;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.details-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Right Column Sections */
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid #f1f1f1;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* Panel Controls Section - At the top */
|
||||
.controls-section {
|
||||
background-color: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #2ecc71;
|
||||
margin-bottom: 20px;
|
||||
order: -1;
|
||||
/* This moves it to the top */
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
grid-column: 2 / 3;
|
||||
background: red;
|
||||
|
||||
|
||||
|
||||
|
||||
button#remove-item {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
.page-main {
|
||||
grid-column: 2 / 3;
|
||||
button#remove-item:before {
|
||||
content: "-";
|
||||
}
|
||||
|
||||
button#remove-item:hover,
|
||||
button#remove-item:focus {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
|
||||
button#clear-all {
|
||||
background-color: #f39c12;
|
||||
}
|
||||
|
||||
button#clear-all:before {
|
||||
content: "×";
|
||||
}
|
||||
|
||||
button#clear-all:hover,
|
||||
button#clear-all:focus {
|
||||
background-color: #d68910;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about-section {
|
||||
background-color: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
|
||||
.about-section p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.about-section p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Keyboard Help Section */
|
||||
.keyboard-help-section {
|
||||
background-color: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #9b59b6;
|
||||
}
|
||||
|
||||
.keyboard-help {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
grid-column: 1 / -1;
|
||||
background: #ffecb3;
|
||||
.keyboard-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: #2c3e50;
|
||||
color: white;
|
||||
padding: 3px 7px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
min-width: 35px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.keyboard-description {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Status indicator */
|
||||
.status-indicator {
|
||||
background-color: #f1f8ff;
|
||||
padding: 10px 12px;
|
||||
border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
font-size: 0.85rem;
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
|
||||
/* Footer - always at bottom */
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.85rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* Focus styles for accessibility */
|
||||
summary:focus,
|
||||
li:focus {
|
||||
outline: 2px solid #3498db;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.left-column,
|
||||
.right-column {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header h1 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens: Adjust layout ratio */
|
||||
@media (min-width: 1025px) and (max-width: 1200px) {
|
||||
.left-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
flex: 2.5;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en" class="wa-cloak wa-theme-default wa-palette-default wa-brand-blue">
|
||||
<!-- also quiet-dark -->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>awesome test</title>
|
||||
|
||||
<link rel="stylesheet" href="../../webawesome/dist-cdn/styles/webawesome.css" />
|
||||
<link rel="icon" type="image/png" href="../favicon.png" />
|
||||
|
||||
<script type="module" src="wa-setup.js"></script>
|
||||
<link rel="stylesheet" href="wa2.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class='wrapper'>
|
||||
<section>
|
||||
<div class='header'>Header</div>
|
||||
</section>
|
||||
<section class='middle'>
|
||||
<div class='left-panel'>LeftPanel</div>
|
||||
<div id="editor" class='body-content'>Body</div>
|
||||
<div class='right-panel'>RightPanel</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class='footer'>Footer</div>
|
||||
</section>
|
||||
</section>
|
||||
<script src="./lsp.bundle.js"></script>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -84,11 +84,12 @@ 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("tabindex", "0")
|
||||
listItem.setAttribute("data-index", index)
|
||||
listItem.innerHTML = `<i class='codicon codicon-${icon}'
|
||||
title='${icon}'></i>
|
||||
<span >${item.name} - ${item.detail}</span>`;
|
||||
listItem.innerHTML = `
|
||||
<span tabindex="0">
|
||||
<wa-icon library="codicon" name="${icon}" ></wa-icon>
|
||||
${item.name} - ${item.detail}</span>`;
|
||||
|
||||
listItem.addEventListener('click', select);
|
||||
listItem.addEventListener('keyup', select);
|
||||
|
|
@ -98,7 +99,6 @@ class ListComponent extends HTMLElement {
|
|||
this.#shadow.innerHTML = '';
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@import url("../codicon@0.0.40/codicon.css");
|
||||
ul { list-style-type: none; padding:0;margin:0;overflow: auto;
|
||||
background-color: #f8f9fa;font-size: 80%;}
|
||||
li { padding: 0 0 0 2px; cursor: pointer; width:100%; }
|
||||
|
|
@ -181,13 +181,9 @@ class PanelComponent extends HTMLElement {
|
|||
this.#shadow.innerHTML = '';
|
||||
const style = document.createElement('style');
|
||||
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%; 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;}
|
||||
i {vertical-align: middle;}
|
||||
|
||||
`;
|
||||
this.#shadow.appendChild(style);
|
||||
this.#shadow.appendChild(list);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 3H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1m0 8H3V4h11zm-3-6h-1v1h1zm-1 2H9v1h1zm2-2h1v1h-1zm1 4h-1v1h1zM6 9h5v1H6zm7-2h-2v1h2zM8 5h1v1H8zm0 2H7v1h1zM4 9h1v1H4zm0-4h1v1H4zm3 0H6v1h1zM4 7h2v1H4z" clip-rule="evenodd"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M3 10.5C3 10.2239 3.22386 10 3.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H3.5C3.22386 11 3 10.7761 3 10.5ZM3.25 7C3.66421 7 4 6.66421 4 6.25C4 5.83579 3.66421 5.5 3.25 5.5C2.83579 5.5 2.5 5.83579 2.5 6.25C2.5 6.66421 2.83579 7 3.25 7ZM10 6.25C10 6.66421 9.66421 7 9.25 7C8.83579 7 8.5 6.66421 8.5 6.25C8.5 5.83579 8.83579 5.5 9.25 5.5C9.66421 5.5 10 5.83579 10 6.25ZM6.25 7C6.66421 7 7 6.66421 7 6.25C7 5.83579 6.66421 5.5 6.25 5.5C5.83579 5.5 5.5 5.83579 5.5 6.25C5.5 6.66421 5.83579 7 6.25 7ZM13 6.25C13 6.66421 12.6642 7 12.25 7C11.8358 7 11.5 6.66421 11.5 6.25C11.5 5.83579 11.8358 5.5 12.25 5.5C12.6642 5.5 13 5.83579 13 6.25ZM5.25 9C5.66421 9 6 8.66421 6 8.25C6 7.83579 5.66421 7.5 5.25 7.5C4.83579 7.5 4.5 7.83579 4.5 8.25C4.5 8.66421 4.83579 9 5.25 9ZM9 8.25C9 8.66421 8.66421 9 8.25 9C7.83579 9 7.5 8.66421 7.5 8.25C7.5 7.83579 7.83579 7.5 8.25 7.5C8.66421 7.5 9 7.83579 9 8.25ZM11.25 9C11.6642 9 12 8.66421 12 8.25C12 7.83579 11.6642 7.5 11.25 7.5C10.8358 7.5 10.5 7.83579 10.5 8.25C10.5 8.66421 10.8358 9 11.25 9ZM1 4.75C1 3.7835 1.7835 3 2.75 3H13.25C14.2165 3 15 3.7835 15 4.75V11.25C15 12.2165 14.2165 13 13.25 13H2.75C1.7835 13 1 12.2165 1 11.25V4.75ZM2.75 4C2.33579 4 2 4.33579 2 4.75V11.25C2 11.6642 2.33579 12 2.75 12H13.25C13.6642 12 14 11.6642 14 11.25V4.75C14 4.33579 13.6642 4 13.25 4H2.75Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 381 B After Width: | Height: | Size: 1.4 KiB |
Loading…
Add table
Reference in a new issue