m/mtm-rpn-js
1
0
Fork 0
Code Issues Actions Activity

feat: refresh calculator keypad labels and layout

Browse Source 
Update the sample calculator UI to use compact math symbols, uppercase action labels, and a revised top bar layout. Also uppercase the angle mode button text and remove the backspace-specific width override.
This commit is contained in:
MatMoul
2026-04-25 02:47:41 +02:00
parent 144c334fe5
commit 223bf56339
4 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-01/index.css
+1 -5
View File
@@ -160,7 +160,7 @@ body {
.topbar-group {
display: grid;
grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(84px, 100px) minmax(60px, 72px);
grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(60px, 72px) minmax(60px, 72px);
gap: 6px;
align-items: stretch;
}
@@ -228,10 +228,6 @@ body {
font-size: 12px;
}
.wide-action {
min-width: 0;
}
select,
button {
border-radius: 12px;
samples/calc-01/index.html
+2 -2
View File
@@ -33,14 +33,14 @@
</div>
<div class="menu-cell" id="constsMenuWrap">
<button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">consts</button>
<button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">π/e</button>
<div class="popup-menu popup-menu-compact" id="constsMenu" hidden></div>
</div>
<div class="topbar-spacer" aria-hidden="true"></div>
<div class="action-cell" id="deleteButton"></div>
<div class="action-cell wide-action" id="backspaceButton"></div>
<div class="action-cell" id="backspaceButton"></div>
<div class="action-cell" id="escapeButton"></div>
</div>
</div>
samples/calc-01/index.js
+11 -11
View File
@@ -15,8 +15,8 @@ const constsMenu = document.getElementById('constsMenu');
const keyLayouts = {
functions: [
[
{ type: 'command', value: 'sqrt', label: 'sqrt', className: 'key-function' },
{ type: 'command', value: 'pow', label: 'y^x', className: 'key-function' },
{ type: 'command', value: 'sqrt', label: '√x', className: 'key-function' },
{ type: 'command', value: 'pow', label: 'yˣ', className: 'key-function' },
{ type: 'command', value: 'sqr', label: 'x²', className: 'key-function' },
{ type: 'command', value: 'recip', label: '1/x', className: 'key-function' },
],
@@ -58,21 +58,21 @@ const keyLayouts = {
[
{ type: 'input', value: '0', label: '0', className: 'key-number' },
{ type: 'input', value: '.', label: '.', className: 'key-number' },
{ type: 'command', value: 'neg', label: '+/−', className: 'key-number' },
{ type: 'command', value: 'neg', label: '±', className: 'key-number' },
],
],
operators: [
[
{ type: 'command', value: 'div', label: '/', className: 'key-operator' },
{ type: 'command', value: 'div', label: '÷', className: 'key-operator' },
null,
],
[
{ type: 'command', value: 'mul', label: '*', className: 'key-operator' },
{ type: 'command', value: 'mul', label: '×', className: 'key-operator' },
null,
],
[
{ type: 'command', value: 'sub', label: '-', className: 'key-operator' },
{ type: 'command', value: 'enter', label: 'Enter', className: 'key-enter' },
{ type: 'command', value: 'sub', label: '−', className: 'key-operator' },
{ type: 'command', value: 'enter', label: 'ENTER', className: 'key-enter' },
],
[
{ type: 'command', value: 'add', label: '+', className: 'key-operator' },
@@ -86,9 +86,9 @@ const topButtons = {
{ type: 'command', value: 'pi', label: 'π', className: 'key-function' },
{ type: 'command', value: 'e', label: 'e', className: 'key-function' },
],
del: { type: 'command', value: 'clear', label: 'del', className: 'key-danger' },
backspace: { type: 'action', value: 'backspace', label: 'backspace', className: 'key-operator' },
escape: { type: 'action', value: 'escape', label: 'esc', className: 'key-danger' },
del: { type: 'command', value: 'clear', label: 'DEL', className: 'key-danger' },
backspace: { type: 'action', value: 'backspace', label: '⌫', className: 'key-danger' },
escape: { type: 'action', value: 'escape', label: 'ESC', className: 'key-danger' },
};
let stackCursor = null;
@@ -376,7 +376,7 @@ function render() {
displayEl.textContent = 'READY';
}
modeLabel.textContent = calc.angleMode;
modeMenuButton.textContent = calc.angleMode;
modeMenuButton.textContent = calc.angleMode.toUpperCase();
angleMode.value = calc.angleMode;
errorEl.textContent = '';
}
samples/calc-01/visual.txt
+1 -1
View File
@@ -5,7 +5,7 @@
| X: |
└──────────────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────────────┐
| mode | consts | | del | esc | backspace |
| mode | consts | | del | backspace | esc |
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────── Functions ───────────────────┬───── Numbers ─────┬─ Operators ─┐
| sqrt | y^x | x² | 1/x | 7 | 8 | 9 | / | |