feat(calc-01): move controls into a compact top bar
This commit is contained in:
+64
-20
@@ -149,12 +149,32 @@ body {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
.topbar {
|
||||
margin-top: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(120px, 148px) minmax(132px, 160px) 1fr minmax(72px, 88px) minmax(108px, 128px) minmax(72px, 88px);
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.topbar-cell,
|
||||
.topbar-status {
|
||||
min-height: 70px;
|
||||
background: rgba(6, 10, 16, 0.18);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 16px;
|
||||
padding: 10px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.topbar-label,
|
||||
.mode-select > span {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 11px;
|
||||
color: #d9e1ec;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.status {
|
||||
@@ -163,6 +183,7 @@ body {
|
||||
gap: 8px;
|
||||
color: #edf2fa;
|
||||
font-size: 12px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.pill {
|
||||
@@ -175,11 +196,33 @@ body {
|
||||
.mode-select {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 148px;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
color: #d9e1ec;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.mode-cell select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.const-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-cell {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.action-cell > button,
|
||||
.const-buttons > button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
select,
|
||||
@@ -225,17 +268,17 @@ select {
|
||||
|
||||
.functions-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(5, 56px);
|
||||
grid-template-rows: repeat(4, 56px);
|
||||
}
|
||||
|
||||
.numbers-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(5, 56px);
|
||||
grid-template-rows: repeat(4, 56px);
|
||||
}
|
||||
|
||||
.operators-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(5, 56px);
|
||||
grid-template-rows: repeat(4, 56px);
|
||||
}
|
||||
|
||||
.key-spacer {
|
||||
@@ -299,6 +342,12 @@ button:active {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.topbar {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.keyboard-layout {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -320,19 +369,14 @@ button:active {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mode-select {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
.topbar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.functions-grid,
|
||||
.numbers-grid,
|
||||
.operators-grid {
|
||||
grid-template-rows: repeat(5, 52px);
|
||||
grid-template-rows: repeat(4, 52px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -25,20 +25,29 @@
|
||||
|
||||
<input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="status">
|
||||
<div class="pill">inputValue: <span id="inputValueLabel"></span></div>
|
||||
<div class="pill">isEditing: <span id="editingLabel"></span></div>
|
||||
</div>
|
||||
|
||||
<label class="mode-select">
|
||||
<span>Angle</span>
|
||||
<div class="topbar">
|
||||
<label class="topbar-cell mode-select mode-cell">
|
||||
<span>mode</span>
|
||||
<select id="angleMode">
|
||||
<option value="deg">Degrees</option>
|
||||
<option value="rad">Radians</option>
|
||||
<option value="grad">Grads</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="topbar-cell consts-cell">
|
||||
<div class="topbar-label">consts</div>
|
||||
<div class="const-buttons" id="constButtons"></div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-status status">
|
||||
<div class="pill">inputValue: <span id="inputValueLabel"></span></div>
|
||||
<div class="pill">isEditing: <span id="editingLabel"></span></div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-cell action-cell" id="deleteButton"></div>
|
||||
<div class="topbar-cell action-cell" id="backspaceButton"></div>
|
||||
<div class="topbar-cell action-cell" id="escapeButton"></div>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-layout">
|
||||
|
||||
+34
-15
@@ -12,12 +12,6 @@ const angleMode = document.getElementById('angleMode');
|
||||
|
||||
const keyLayouts = {
|
||||
functions: [
|
||||
[
|
||||
{ type: 'command', value: 'pi', label: 'π', className: 'key-function' },
|
||||
{ type: 'command', value: 'e', label: 'e', className: 'key-function' },
|
||||
null,
|
||||
null,
|
||||
],
|
||||
[
|
||||
{ type: 'command', value: 'sqrt', label: 'sqrt', className: 'key-function' },
|
||||
{ type: 'command', value: 'pow', label: 'y^x', className: 'key-function' },
|
||||
@@ -44,7 +38,6 @@ const keyLayouts = {
|
||||
],
|
||||
],
|
||||
numbers: [
|
||||
[null, null, null],
|
||||
[
|
||||
{ type: 'input', value: '7', label: '7', className: 'key-number' },
|
||||
{ type: 'input', value: '8', label: '8', className: 'key-number' },
|
||||
@@ -67,13 +60,9 @@ const keyLayouts = {
|
||||
],
|
||||
],
|
||||
operators: [
|
||||
[
|
||||
{ type: 'command', value: 'clear', label: 'del', className: 'key-danger' },
|
||||
{ type: 'action', value: 'escape', label: 'esc', className: 'key-danger' },
|
||||
],
|
||||
[
|
||||
{ type: 'command', value: 'div', label: '/', className: 'key-operator' },
|
||||
{ type: 'command', value: 'drop', label: 'back', className: 'key-operator' },
|
||||
null,
|
||||
],
|
||||
[
|
||||
{ type: 'command', value: 'mul', label: '*', className: 'key-operator' },
|
||||
@@ -90,6 +79,16 @@ const keyLayouts = {
|
||||
],
|
||||
};
|
||||
|
||||
const topButtons = {
|
||||
consts: [
|
||||
{ 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' },
|
||||
};
|
||||
|
||||
let stackCursor = null;
|
||||
let isMovingStackItem = false;
|
||||
let stackSnapshotBeforeMove = null;
|
||||
@@ -128,6 +127,16 @@ function pressKey(key) {
|
||||
render();
|
||||
}
|
||||
|
||||
function handleBackspaceAction() {
|
||||
if (calc.isEditing) {
|
||||
editXWithKey('Backspace');
|
||||
render();
|
||||
return;
|
||||
}
|
||||
|
||||
execute('drop');
|
||||
}
|
||||
|
||||
function createButton(cell) {
|
||||
if (!cell) {
|
||||
const spacer = document.createElement('div');
|
||||
@@ -146,9 +155,15 @@ function createButton(cell) {
|
||||
pressKey(cell.value);
|
||||
return;
|
||||
}
|
||||
if (cell.type === 'action' && cell.value === 'escape') {
|
||||
handleEscapeAction();
|
||||
return;
|
||||
if (cell.type === 'action') {
|
||||
if (cell.value === 'escape') {
|
||||
handleEscapeAction();
|
||||
return;
|
||||
}
|
||||
if (cell.value === 'backspace') {
|
||||
handleBackspaceAction();
|
||||
return;
|
||||
}
|
||||
}
|
||||
execute(cell.value);
|
||||
});
|
||||
@@ -589,6 +604,10 @@ angleMode.addEventListener('change', (event) => {
|
||||
renderKeyLayout(document.getElementById('functionsButtons'), keyLayouts.functions);
|
||||
renderKeyLayout(document.getElementById('numbersButtons'), keyLayouts.numbers);
|
||||
renderKeyLayout(document.getElementById('operatorsButtons'), keyLayouts.operators);
|
||||
renderKeyLayout(document.getElementById('constButtons'), [topButtons.consts]);
|
||||
document.getElementById('deleteButton').appendChild(createButton(topButtons.del));
|
||||
document.getElementById('backspaceButton').appendChild(createButton(topButtons.backspace));
|
||||
document.getElementById('escapeButton').appendChild(createButton(topButtons.escape));
|
||||
|
||||
render();
|
||||
focusScreen();
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
┌───────────── Functions ────────────┬──── Numbers ────┬─── Operators ───┐
|
||||
| consts | | | | | | | del | esc |
|
||||
| sqrt | y^x | x² | 1/x | 7 | 8 | 9 | / | backspace |
|
||||
| log | ln | | % | 4 | 5 | 6 | * | |
|
||||
| sin | cos | tan | | 1 | 2 | 3 | - | Enter |
|
||||
| asin | acos | atan | | 0 | . | +/- | + | Enter |
|
||||
└────────────────────────────────────┴─────────────────┴─────────────────┘
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
| T: |
|
||||
| Z: |
|
||||
| Y: |
|
||||
| X: |
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
| mode | consts | | del | backspace | esc |
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
┌───────────── Functions ───────────────────┬───── Numbers ─────┬─ Operators ─┐
|
||||
| sqrt | y^x | x² | 1/x | 7 | 8 | 9 | / | |
|
||||
| log | ln | | % | 4 | 5 | 6 | * | |
|
||||
| sin | cos | tan | | 1 | 2 | 3 | - | Enter |
|
||||
| asin | acos | atan | | 0 | . | +/- | + | Enter |
|
||||
└───────────────────────────────────────────┴───────────────────┴──────────────┘
|
||||
|
||||
Reference in New Issue
Block a user