Skip to content

Major UI overhaul. Did several detailed changes to the look and feel. #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mimshwright wants to merge 27 commits into
base: main
Choose a base branch
from
Open

Major UI overhaul. Did several detailed changes to the look and feel. #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
fc36b51
Migrated to pnpm
mimshwright Jun 30, 2026
01073f5
Added missing dependency vue-style-loader
mimshwright Jun 30, 2026
6b4870c
Redesign editor UI: dark mode, preferences menu, 2x2 layout
claude Jun 30, 2026
21e0d75
Keep the examples row collapsible in the 2x2 layout
claude Jun 30, 2026
0dd1332
Refine editor UI: unify menu, parse controls, and polish
mimshwright Jun 30, 2026
17f6cbe
Consistent panel headers, example editor controls, always-on high con…
mimshwright Jun 30, 2026
0454dc6
Parse empty state, header polish, built-in rules panel
mimshwright Jun 30, 2026
62219f2
Editable/non-interactive backgrounds, header polish, editor resize re…
mimshwright Jun 30, 2026
204f451
Make built-in rules panel a collapsible accordion
mimshwright Jun 30, 2026
06c7057
Anchor built-in rules panel to the bottom of the grammar pane
mimshwright Jun 30, 2026
2a945df
Relabel example match toggle and parse option
mimshwright Jun 30, 2026
bc6abb3
Add top app bar, rename Examples to Tests, restyle headers
mimshwright Jul 1, 2026
8307e94
Restyle Parse panel: contrast, icon controls, switches, error labels
mimshwright Jul 1, 2026
c475cf7
Unify built-in rules accordion with the Tests chevron + add slide-in
mimshwright Jul 1, 2026
afb6323
Fix first example loading blank on a fresh load
mimshwright Jul 1, 2026
5d8a82a
Repaint expanded-input canvas on theme toggle
mimshwright Jul 1, 2026
7f14bfe
Top bar refinements + normal-case headers + resize clip fix
mimshwright Jul 1, 2026
775f073
Clearer collapsed-node indicator; docs URL; lint fix
mimshwright Jul 1, 2026
f8a4289
Change header color to #a469f8
mimshwright Jul 1, 2026
84f0ce6
Keep the top app title pink
mimshwright Jul 1, 2026
7d68324
Use #FE3093 for the pink accent
mimshwright Jul 1, 2026
1b1339e
Show collapsed parse nodes as a stack
mimshwright Jul 1, 2026
804e8f8
Mark collapsed parse nodes with a 5px accent bar
mimshwright Jul 1, 2026
8029800
50px min panel size on resize; rename doc link to "Ohm Docs"
mimshwright Jul 1, 2026
e543215
Move the grammar dropdown to the top bar
mimshwright Jul 1, 2026
ad5d08b
Add more spacing between the title and grammar dropdown
mimshwright Jul 1, 2026
19410ca
Set title-to-dropdown spacing to 16px
mimshwright Jul 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8,946 changes: 0 additions & 8,946 deletions package-lock.json
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"uvu": "^0.5.6",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.76.1",
"webpack-cli": "^5.0.1",
Expand Down
5,800 changes: 5,800 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
allowBuilds:
core-js: true
53 changes: 26 additions & 27 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
/>
<link rel="stylesheet" href="style/cm-theme-light-owl.css" />
<link rel="stylesheet" href="style/index.css" />
<link rel="stylesheet" href="style/theme-dark.css" />
<link rel="stylesheet" href="style/ellipsis-dropdown.css" />
<link rel="stylesheet" href="style/example-list.css" />
<link rel="stylesheet" href="style/parseTree.css" />
Expand All @@ -23,29 +24,28 @@
href="third_party/css/bootstrap-dropdown-3.3.7.css"
/>
</head>
<body class="twoPane">
<body class="twoPane high-contrast">
<script>
// Apply the saved theme before the rest of the page renders, to avoid a
// flash of the wrong theme. The theme toggle lives in the top app bar
// (see components/main-layout.vue). Light mode is the default.
(function () {
try {
const darkPref = window.localStorage.getItem('pref:darkMode');
if (darkPref === 'true') document.body.classList.add('dark-mode');
} catch (e) {
/* localStorage may be unavailable; fall back to the light theme. */
}
})();
</script>
<div id="mainLayout"><!-- See components main-layout.vue --></div>

<div id="dragOverlay"></div>

<div id="optionPanel">
<div id="options">
<ul>
<li>
<input type="checkbox" name="showFailures" /><label
>Explain parse</label
>
</li>
<li>
<input type="checkbox" name="showSpaces" /><label
>Show spaces</label
>
</li>
</ul>
<hr />
</div>
<div id="stepControls"><!-- See components/step-controls.vue --></div>
</div>
<!--
The parse controls (option checkboxes + step controls) now live in the
Parse section header; see src/parseTree.js and components/parse-tree.vue.
-->

<div id="promptScreen">
<div id="loginBox" hidden>
Expand Down Expand Up @@ -90,7 +90,6 @@ <h2>Save Grammar As</h2>
value="Done"
/>
</div>
<div class="externalRules"><div class="content"></div></div>
</div>

<div id="parseTreeMenu" class="contextMenu" hidden><ul></ul></div>
Expand Down Expand Up @@ -130,13 +129,13 @@ <h2>Save Grammar As</h2>
| digit+ -- whole
}</pre
>
<pre id="sampleExamples">
<pre>2 * (42 - 1) / 9</pre>
<pre>1+2*3</pre>
<pre>oh no</pre>
<pre> ( 123 ) </pre>
<pre>(2+4)*7</pre>
</pre>
<div id="sampleExamples">
<pre>2 * (42 - 1) / 9</pre>
<pre>1+2*3</pre>
<pre>oh no</pre>
<pre> ( 123 ) </pre>
<pre>(2+4)*7</pre>
</div>
</div>

<script>
Expand Down
17 changes: 10 additions & 7 deletions public/style/cm-theme-light-owl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
/*
A CodeMirror theme based on Sarah Drasner's Night Owl Light:
https://github.com/sdras/night-owl-vscode-theme/blob/main/themes/Night%20Owl-Light-color-theme.json

Token colors have been darkened from the original for higher contrast and
readability against the editor background.
*/

.cm-s-light-owl span.cm-comment {
color: #989fb1;
color: #6b7280;
}
.cm-s-light-owl span.cm-string {
color: #c96765;
color: #b02d2b;
}
.cm-s-light-owl span.cm-grammarDef {
color: #4876d6;
color: #2f5fd0;
}
.cm-s-light-owl span.cm-ruleDef {
color: #4876d6;
color: #2f5fd0;
}
.cm-s-light-owl span.cm-operator {
color: #994cc3;
color: #7d35a8;
}

.cm-s-light-owl span.cm-meta {
color: #989fb1;
color: #6b7280;
}
.cm-s-light-owl span.cm-caseName {
color: #989fb1;
color: #6b7280;
font-style: italic;
}
32 changes: 32 additions & 0 deletions public/style/ellipsis-dropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,36 @@ button.ellipsis-btn:active {

.dropdown-menu {
margin-top: 4px;
background-color: var(--surface-bg);
border-color: var(--border-color);
}

.dropdown-menu > li > a {
color: var(--app-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: var(--app-text);
background-color: var(--surface-bg-2);
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: var(--faint-text);
}

/* Toggle (checkbox) items show a leading checkmark slot. */
.dropdown-menu > li.toggle > a {
display: flex;
align-items: center;
}

.dropdown-menu > li.toggle .check {
display: inline-block;
width: 1.2em;
margin-left: -0.4em;
color: var(--accent);
font-weight: 700;
}
Loading