Skip to content

Commit a0f7cf1

Browse files
rcosta358rcosta358
committed
Improve UI
1 parent f1db8d5 commit a0f7cf1

7 files changed

Lines changed: 84 additions & 22 deletions

File tree

‎_sass/custom/custom.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
}
4444

4545
.main-content pre.highlight,
46-
.main-content div.highlighter-rouge {
46+
.main-content div.highlighter-rouge,
47+
.main-content #lj-editor {
4748
overflow-x: auto;
4849
overflow-y: hidden;
4950
scrollbar-width: thin;

‎package-lock.json‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
},
1414
"dependencies": {
1515
"@codemirror/lang-java": "6.0.2",
16+
"@codemirror/language": "6.12.4",
1617
"@codemirror/lint": "6.8.5",
18+
"@lezer/highlight": "1.2.5",
1719
"codemirror": "6.0.2"
1820
}
1921
}

‎playground/editor.css‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
1-
.lj-playground { border: 1px solid var(--border-color, #d7dce2); border-radius: 8px; overflow: hidden; margin: 1.5rem 0; }
2-
.lj-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: 1rem; background: #f5f7fa; }
3-
.lj-toolbar label { font-weight: 600; }
4-
.lj-toolbar select { font: inherit; max-width: 100%; padding: .35rem; border: 1px solid #bbc4ce; border-radius: 4px; background: white; }
5-
.lj-toolbar button:disabled { opacity: .5; cursor: default; }
6-
.lj-playground .cm-editor { font-size: 14px; background: #fff; }
7-
.lj-playground .cm-scroller { min-height: 300px; max-height: 560px; overflow: auto; font-family: 'JetBrains Mono', monospace; }
8-
.lj-playground .cm-focused { outline: 2px solid #1269a8; outline-offset: -2px; }
1+
.lj-playground { margin: 1.5rem 0; }
2+
.lj-toolbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
3+
.lj-example-picker { display: flex; flex-direction: column; gap: .35rem; max-width: 100%; }
4+
.lj-toolbar label { color: #555c65; font-size: .8rem; font-weight: 400; }
5+
.lj-toolbar select,
6+
.lj-toolbar button { min-height: 2.5rem; border: 1px solid #cbd2d9; border-radius: .5rem; font: inherit; font-size: .875rem; font-weight: 400; line-height: 1.4; }
7+
.lj-toolbar select { max-width: 100%; padding: .5rem .75rem; color: #2a2f36; background: #fff; cursor: pointer; }
8+
.lj-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
9+
.lj-toolbar button { padding: .5rem .9rem; color: #334e68; background: transparent; box-shadow: none; cursor: pointer; }
10+
.lj-toolbar button:hover:not(:disabled) { background: #e5eef7; border-color: #5f7ea1; }
11+
.lj-toolbar #lj-verify { color: #fff; background: #334e68; border-color: #334e68; }
12+
.lj-toolbar #lj-verify:hover:not(:disabled) { background: #253b50; border-color: #253b50; }
13+
.lj-toolbar #lj-reset { border-color: transparent; }
14+
.lj-toolbar button:disabled { color: #8a929b; background: #efefec; border-color: #e4e4e7; cursor: default; }
15+
.lj-toolbar #lj-verify:disabled { color: #fff; background: #7f90a1; border-color: #7f90a1; }
16+
.lj-toolbar select:focus-visible,
17+
.lj-toolbar button:focus-visible { outline: 2px solid #5f7ea1; outline-offset: 3px; }
18+
#lj-editor { margin: 1rem 0; overflow: hidden; }
19+
.lj-playground .cm-editor { font-size: .75em; border-radius: inherit; overflow: hidden; }
20+
.lj-playground .cm-scroller { min-height: 300px; max-height: 560px; overflow: auto; font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; line-height: 1.6; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .72) rgba(255, 255, 255, .16); }
21+
.lj-playground .cm-focused { outline: 2px solid #7dd3fc; outline-offset: -2px; }
922
#lj-status { margin: 0; padding: 1rem; border-top: 1px solid #d7dce2; font-size: .9rem; }
1023
#lj-status[data-state="success"] { color: #156b35; background: #eef9f1; }
1124
#lj-status[data-state="error"], #lj-status[data-state="failure"] { color: #9b2323; background: #fff1f1; }
@@ -14,4 +27,4 @@
1427
.lj-issue p { margin: .5rem 0; white-space: pre-wrap; }
1528
.lj-issue pre { white-space: pre-wrap; margin: .5rem 0; }
1629
.lj-issue button { font: inherit; border: 0; padding: 0; background: transparent; color: #1269a8; cursor: pointer; text-decoration: underline; }
17-
@media (max-width: 600px) { .lj-toolbar { gap: .5rem; padding: .75rem; } .lj-playground .cm-editor { font-size: 12px; } }
30+
@media (max-width: 600px) { .lj-example-picker { width: 100%; } }

‎playground/index.md‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,20 @@ Edit an example and select **Verify** to check it with LiquidJava. Verification
1313
<link rel="stylesheet" href="{{ '/playground/editor.css' | relative_url }}">
1414
<div id="lj-playground" class="lj-playground" data-runtime="{{ '/playground/runtime/' | relative_url }}">
1515
<div class="lj-toolbar">
16-
<label for="lj-example">Example</label>
17-
<select id="lj-example">
18-
<option value="positive">Positive numbers</option>
19-
<option value="bounds">Parameter bounds</option>
20-
<option value="alias">Refinement aliases</option>
21-
<option value="state">Object states</option>
22-
</select>
23-
<button id="lj-verify" class="btn btn-primary" type="button" disabled>Verify</button>
24-
<button id="lj-stop" class="btn" type="button" disabled>Stop</button>
25-
<button id="lj-reset" class="btn" type="button">Reset example</button>
16+
<div class="lj-example-picker">
17+
<label for="lj-example">Example</label>
18+
<select id="lj-example">
19+
<option value="positive">Positive numbers</option>
20+
<option value="bounds">Parameter bounds</option>
21+
<option value="alias">Refinement aliases</option>
22+
<option value="state">Object states</option>
23+
</select>
24+
</div>
25+
<div class="lj-actions">
26+
<button id="lj-verify" type="button" disabled>Verify</button>
27+
<button id="lj-stop" type="button" disabled>Stop</button>
28+
<button id="lj-reset" type="button">Reset example</button>
29+
</div>
2630
</div>
2731
<div id="lj-editor"></div>
2832
<p id="lj-status" role="status" aria-live="polite">Choose an example or edit the code, then verify. Ctrl+Enter / ⌘+Enter also verifies.</p>

‎scripts/playground/editor-theme.mjs‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { EditorView } from 'codemirror';
2+
import { javaLanguage } from '@codemirror/lang-java';
3+
import { HighlightStyle, LanguageSupport, syntaxHighlighting } from '@codemirror/language';
4+
import { styleTags, tags } from '@lezer/highlight';
5+
6+
const snippetJava = javaLanguage.configure({ props: [styleTags({
7+
'Annotation/Identifier MarkerAnnotation/Identifier': tags.annotation,
8+
'ClassDeclaration/Definition InterfaceDeclaration/Definition EnumDeclaration/Definition': tags.typeName,
9+
'MethodDeclaration/Definition ConstructorDeclaration/Definition': tags.function(tags.variableName),
10+
'ImportDeclaration/ScopedIdentifier!': tags.namespace
11+
})] });
12+
13+
export const editorJava = new LanguageSupport(snippetJava);
14+
15+
export const editorTheme = [
16+
EditorView.theme({
17+
'&': { color: '#e6edf7', backgroundColor: 'transparent' },
18+
'.cm-content': { caretColor: '#e6edf7', padding: '1rem 0' },
19+
'.cm-line': { padding: '0 1.15rem' },
20+
'.cm-gutters': { color: '#7f90ad', backgroundColor: 'transparent', border: 'none' },
21+
'.cm-activeLine, .cm-activeLineGutter': { backgroundColor: '#ffffff08' },
22+
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': { backgroundColor: '#334e6880' },
23+
'.cm-cursor, .cm-dropCursor': { borderLeftColor: '#e6edf7' },
24+
'.cm-tooltip, .cm-panels': { color: '#e6edf7', backgroundColor: '#172033', borderColor: '#334e68' },
25+
'.cm-searchMatch': { backgroundColor: '#b39b5e55' },
26+
'.cm-searchMatch-selected': { backgroundColor: '#b39b5e88' },
27+
'.cm-matchingBracket': { backgroundColor: '#7dd3fc26', outline: '1px solid #7dd3fc66' }
28+
}, { dark: true }),
29+
syntaxHighlighting(HighlightStyle.define([
30+
{ tag: tags.name, color: '#dce6f2' },
31+
{ tag: tags.comment, color: '#7f90ad', fontStyle: 'italic' },
32+
{ tag: [tags.keyword, tags.bool], color: '#ffb86c' },
33+
{ tag: [tags.typeName, tags.annotation, tags.function(tags.variableName)], color: '#7dd3fc' },
34+
{ tag: tags.string, color: '#a7f3c1' },
35+
{ tag: tags.number, color: '#f6c177' },
36+
{ tag: [tags.namespace, tags.attributeName], color: '#c4b5fd' },
37+
{ tag: [tags.operator, tags.punctuation], color: '#c9d4e5' },
38+
{ tag: tags.invalid, color: '#ffd6d6', backgroundColor: '#b43e4747' }
39+
]))
40+
];

‎scripts/playground/editor.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { EditorView, basicSetup } from 'codemirror';
2-
import { java } from '@codemirror/lang-java';
32
import { setDiagnostics } from '@codemirror/lint';
43
import { examples } from './examples.mjs';
54
import { editorDiagnostic } from './diagnostics.mjs';
5+
import { editorJava, editorTheme } from './editor-theme.mjs';
66

77
const root = document.querySelector('#lj-playground');
88
const example = document.querySelector('#lj-example');
@@ -18,7 +18,7 @@ let source;
1818
let timer;
1919
const view = new EditorView({
2020
doc: examples.positive,
21-
extensions: [basicSetup, java(), EditorView.contentAttributes.of({ 'aria-label': 'Java source code' }),
21+
extensions: [basicSetup, editorJava, editorTheme, EditorView.contentAttributes.of({ 'aria-label': 'Java source code' }),
2222
EditorView.updateListener.of(update => {
2323
if (update.docChanged) {
2424
queueMicrotask(() => view.dispatch(setDiagnostics(view.state, [])));

0 commit comments

Comments
 (0)