quodatum/basex-lsp
1
0
Fork 0
Code Issues 14 Activity Actions

[mod] css

Browse source
This commit is contained in:
Andy Bunce 2025-10-31 23:06:43 +00:00
parent 559828340e
commit 4bfb36e4e0
5 changed files with 48 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/lsp/position.xqm
View file

@ -91,7 +91,7 @@ declare function pos:range-from-ast(
$text as xs:string)
as lspt:Range{
lspt:Range(
pos:toPosition($text,number($ast/@start)),
pos:toPosition($text,number($ast/@start)-1),
pos:toPosition($text, number($ast/@end))
)
};

52
webapp/static/clients/codemirror/grail.css
View file

@ -2,18 +2,26 @@
:root {
color-scheme: light dark;
--quiet-primary-seed: #e98d61;
--quiet-content-spacing: 0.75rem;
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #e4e4e4;
padding: 0;
height: 100vh;
min-height: 100vh;
margin: 0;
}
form header {
background-color: burlywood;
}
@ -26,27 +34,23 @@ form header {
display: grid;
grid-template-columns: minmax(10px, 1fr) minmax(10px, 4fr);
grid-template-rows: min-content min-content 1fr min-content;
gap: 1px;
.navbar * {
box-sizing: content-box;
}
details {
padding:2px;
padding-left: 3px;
}
details {
}
details[open] {
flex-grow: 1;
overflow:hidden;
overflow: hidden;
}
summary {
/* class: bg-info; */
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;
background-color: var(--quiet-neutral-fill-softer);
}
/* Set editor dimensions */
@ -63,15 +67,15 @@ form header {
overflow: auto;
}
details[open]::details-content {
padding: 0.1em;
border: thin solid grey;
overflow:auto;
}
details[open]::details-content {
padding: 0.1em;
border: thin solid grey;
overflow: auto;
}
::backdrop {
::backdrop {
backdrop-filter: blur(2px);
}
}
@media (max-width: 600px) {
grid-template-columns: 100%;
@ -83,15 +87,16 @@ details[open]::details-content {
}
}
}
#tConnect:state(unchecked) {
outline: dashed 4px deeppink;
outline-offset: 4px;
}
#tConnect:state(unchecked) {
outline: dashed 4px deeppink;
outline-offset: 4px;
}
.page-header {
grid-column: 1 / -1;
display:flex;
justify-content:space-between;
display: flex;
justify-content: space-between;
}
.page-sidebar {
@ -99,10 +104,11 @@ details[open]::details-content {
grid-row: 2 / 4;
display: flex;
flex-direction: column;
details {
display: flex;
flex-direction: column;
}
}

26
webapp/static/clients/codemirror/grail.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" class="quiet-cloak "> <!-- also quiet-dark -->
<html lang="en" class="quiet-cloak quiet-blue"> <!-- also quiet-dark -->
<head>
<meta charset="utf-8">
@ -11,9 +11,9 @@
<!-- Default theme (if not already installed) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.6.1/dist/themes/quiet.css">
<!-- Quiet Restyle
<!-- Quiet Restyle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.6.1/dist/themes/restyle.css">
-->
<script type="module" src="https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.6.1/dist/quiet.loader.js"></script>
@ -26,8 +26,8 @@
<div class="page-wrap">
<header class="page-header">
<div>XQuery 4.0 LSP client </div>
<quiet-toggle-icon id="tConnect" label="Connection status" size="md"
<div> XQuery 4.0 LSP client </div>
<quiet-toggle-icon id="tConnect" label="Connection status" size="lg"
style="--checked-color: green;--unchecked-color: red;">
<quiet-icon slot="unchecked" name="network-off" family="outline"></quiet-icon>
<quiet-icon slot="checked" name="network" family="outline"></quiet-icon>
@ -38,10 +38,10 @@
Editor
</quiet-button>
<quiet-button href="/app/home" target="lsp" rel="noreferrer noopener" size="sm">
LSP Manager
LSP Manager <quiet-icon name="external-link"></quiet-icon>
</quiet-button>
<quiet-button href="/dba/logs" target="dba" rel="noreferrer noopener" size="sm">
Dba
Dba <quiet-icon name="external-link"></quiet-icon>
</quiet-button>
</quiet-toolbar>
<quiet-select id="load" style="width:20em;">
@ -75,7 +75,7 @@
</header>
<main class="page-main" style="overflow: auto;">
<main id="main" class="page-main" style="overflow: auto;">
<quiet-toolbar>
<quiet-button-group>
@ -133,7 +133,7 @@
<aside class="page-sidebar">
<details id="workspacePanel" open="open">
<summary class='bg-info'>Workspace <i class='codicon codicon-kebab-vertical' style="float:right"></i>
<summary class='bg-info'>WORKSPACE <i class='codicon codicon-kebab-vertical' style="float:right"></i>
</summary>
@ -143,9 +143,9 @@
</details>
<details id="symPanel">
<summary>OutLine
<quiet-dropdown id="dropdown__checkboxes" style="display:inline-block;float:right;">
<quiet-icon name="dots-vertical" slot="trigger"></quiet-icon>
<summary>OUTLINE
<quiet-dropdown id="symOptions" style="display:inline-block;float:right;">
<quiet-icon id="symTrigger" name="dots-vertical" slot="trigger"></quiet-icon>
<quiet-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</quiet-dropdown-item>
<quiet-divider></quiet-divider>
@ -159,7 +159,7 @@
</details>
<details id="msgPanel">
<summary>Messages
<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>

4
webapp/static/clients/codemirror/script.js
View file

@ -39,6 +39,10 @@ window.addEventListener('beforeunload', () => {
$("connect").onclick = e => { e.preventDefault(); connect() };
$("symTrigger").onclick = e => { e.preventDefault(); };
$("symOptions").onclick = e => { e.preventDefault(); };
$("bnNew").onclick = e => { alert("TODO"); };
$("search").onclick = e => lsp.openSearchPanel(view);
$("fullscreen").onclick = e => $("editor").requestFullscreen();

2
webapp/static/clients/codemirror/wc-qd-list.js
View file

@ -101,7 +101,7 @@ class ListComponent extends HTMLElement {
@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; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; }
li { padding: 0 0 0 2px; cursor: pointer; width:100%; }
li:not(.selected) :hover { background-color: #ccc; }
.selected { background-color: #0d6efd;color: #ffff;}
i {vertical-align: middle;}