portfolio-edit: form is edit-mode only; submit becomes a + glyph
Two related polishes:
- The add form was auto-shown by the empty-state path so brand-new
users would see something to act on. That conflicts with the user's
preference for "Edit always toggles the form, no other path." The
empty state now shows guidance copy ("click edit to add one")
instead. exitEditMode always hides the form too.
- The submit "add" word-button is replaced by a square accent-bordered
+ glyph (26×26). Matches the visual weight of the calendar ghost
next to it but stays in the accent colour so it reads as primary.
Adds a tiny active-state scale tick for tactile feedback.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
2ffd228976
commit
6377c929b8
4 changed files with 27 additions and 17 deletions
|
|
@ -2461,22 +2461,29 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Submit button — ghost styled to match the EDIT pill. Lights up to
|
/* Submit button — a square accent-bordered plus glyph. Visually
|
||||||
* solid accent only when an add is actually possible. */
|
* heavier than the ghost calendar icon (larger size, accent border)
|
||||||
|
* so the primary action reads as primary. Lights up to solid accent
|
||||||
|
* on hover/focus when enabled. */
|
||||||
.pf-add__submit {
|
.pf-add__submit {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid var(--accent);
|
border: 1px solid var(--accent);
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
padding: 3px 14px;
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
padding: 0;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 12px;
|
font-size: 18px;
|
||||||
letter-spacing: 0.06em;
|
font-weight: 600;
|
||||||
text-transform: lowercase;
|
line-height: 1;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
transition: background 120ms ease-out, color 120ms ease-out,
|
transition: background 120ms ease-out, color 120ms ease-out,
|
||||||
border-color 120ms ease-out;
|
border-color 120ms ease-out, transform 120ms ease-out;
|
||||||
}
|
}
|
||||||
.pf-add__submit:hover:not(:disabled),
|
.pf-add__submit:hover:not(:disabled),
|
||||||
.pf-add__submit:focus-visible:not(:disabled) {
|
.pf-add__submit:focus-visible:not(:disabled) {
|
||||||
|
|
@ -2484,6 +2491,9 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
|
||||||
color: var(--bg);
|
color: var(--bg);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
.pf-add__submit:active:not(:disabled) {
|
||||||
|
transform: scale(0.94);
|
||||||
|
}
|
||||||
.pf-add__submit:disabled {
|
.pf-add__submit:disabled {
|
||||||
border-color: var(--border);
|
border-color: var(--border);
|
||||||
color: var(--dim);
|
color: var(--dim);
|
||||||
|
|
|
||||||
|
|
@ -189,13 +189,13 @@
|
||||||
mount.innerHTML =
|
mount.innerHTML =
|
||||||
'<div class="empty" style="padding:16px;">' +
|
'<div class="empty" style="padding:16px;">' +
|
||||||
notice +
|
notice +
|
||||||
'Welcome — start by adding a position above, or ' +
|
'No positions yet — click <strong>edit</strong> to add one, or ' +
|
||||||
'<a href="/settings#import">import a CSV from your broker →</a>' +
|
'<a href="/settings#import">import a CSV from your broker →</a>' +
|
||||||
'</div>';
|
'</div>';
|
||||||
// When empty, the add form should be visible by default — the
|
// The form is only ever visible in edit mode — never auto-shown by
|
||||||
// edit module toggles it via the pf-empty class.
|
// the empty state. Defensive: ensure it stays hidden here.
|
||||||
var form = document.getElementById('pf-add-form');
|
var form = document.getElementById('pf-add-form');
|
||||||
if (form) form.hidden = false;
|
if (form) form.hidden = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Silently remove an unrecoverable cloud blob and re-render. The user
|
// Silently remove an unrecoverable cloud blob and re-render. The user
|
||||||
|
|
|
||||||
|
|
@ -28,11 +28,10 @@
|
||||||
|
|
||||||
function exitEditMode() {
|
function exitEditMode() {
|
||||||
panel.classList.remove('pf-editing');
|
panel.classList.remove('pf-editing');
|
||||||
// Form stays visible when the pie is empty (empty-state UX handled
|
// The form is edit-mode-only — always hide it on exit, including
|
||||||
// by portfolio.js setting the pf-empty class on the panel).
|
// when the portfolio is empty. The empty state shows guidance text
|
||||||
if (!panel.classList.contains('pf-empty')) {
|
// that nudges the user back to the Edit button.
|
||||||
form.hidden = true;
|
form.hidden = true;
|
||||||
}
|
|
||||||
editBtn.hidden = false;
|
editBtn.hidden = false;
|
||||||
doneBtn.hidden = true;
|
doneBtn.hidden = true;
|
||||||
editBtn.setAttribute('aria-pressed', 'false');
|
editBtn.setAttribute('aria-pressed', 'false');
|
||||||
|
|
|
||||||
|
|
@ -84,7 +84,8 @@
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="pf-add-date" class="pf-add__date" hidden>
|
<input type="date" id="pf-add-date" class="pf-add__date" hidden>
|
||||||
<button type="button" id="pf-add-submit" class="pf-add__submit" disabled>add</button>
|
<button type="button" id="pf-add-submit" class="pf-add__submit"
|
||||||
|
disabled aria-label="Add position" title="Add position">+</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="pf-add__notes">
|
<div class="pf-add__notes">
|
||||||
<span id="pf-add-date-status" class="pf-add-status"></span>
|
<span id="pf-add-date-status" class="pf-add-status"></span>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue