kbenestad/reimburse
1
0
Fork 0
mirror of https://github.com/kbenestad/reimburse.git synced 2026-06-18 08:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polish FX direction picker and toolbar clipping

Browse source 
- Replace plain <select> for FX direction with the same makeCDD custom
  dropdown used for currency selection throughout the form
- Add padding-right:2px to .kb-toolbar so the theme icon button border
  is not clipped on the right edge

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
This commit is contained in:
Claude 2026-06-08 04:50:00 +00:00
parent e371505323
commit 013563d13e
No known key found for this signature in database
1 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/index.html
View file

@ -111,7 +111,7 @@ body{
.kb-wrap{max-width:960px;margin:0 auto;padding:24px 20px 56px;} .kb-wrap{max-width:960px;margin:0 auto;padding:24px 20px 56px;}
/* ── Toolbar ──────────────────────────────────────────────────────────────── */ /* ── Toolbar ──────────────────────────────────────────────────────────────── */
.kb-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;} .kb-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding-right:2px;}
.kb-toolbar .spacer{flex:1;} .kb-toolbar .spacer{flex:1;}
.kb-seg{ .kb-seg{
display:inline-flex;align-items:center;gap:2px; display:inline-flex;align-items:center;gap:2px;
@ -937,10 +937,12 @@ function renderLine(ln, item) {
// Canonical: ln.fxRate is always "foreign per 1 base" (divide to get base amount). // Canonical: ln.fxRate is always "foreign per 1 base" (divide to get base amount).
// ln.fxDir controls display direction: 'foreign' = show canonical, 'base' = show 1/canonical. // ln.fxDir controls display direction: 'foreign' = show canonical, 'base' = show 1/canonical.
const fxIn = el('input', {className:'kb-input num', type:'text', placeholder:'0.00000', style:{minWidth:'0', width:'90px'}}); const fxIn = el('input', {className:'kb-input num', type:'text', placeholder:'0.00000', style:{minWidth:'0', width:'90px'}});
const fxDirSel = el('select', {className:'kb-select', style:{padding:'0 20px 0 6px', fontSize:'var(--fs-small)', minWidth:'0', width:'auto'}}); const fxDirContainer = el('div', {style:{display:'inline-block'}});
const fxPerLbl = el('span', {style:{fontSize:'var(--fs-small)', color:'var(--text-muted)', whiteSpace:'nowrap', userSelect:'none'}}); const fxPerLbl = el('span', {style:{fontSize:'var(--fs-small)', color:'var(--text-muted)', whiteSpace:'nowrap', userSelect:'none'}});
const fxWrap = el('div', {style:{display:'flex', alignItems:'center', gap:'4px'}}); const fxWrap = el('div', {style:{display:'flex', alignItems:'center', gap:'4px'}});
fxWrap.append(fxIn, fxDirSel, fxPerLbl); fxWrap.append(fxIn, fxDirContainer, fxPerLbl);
let fxDirDD = null;
function fxDisplayVal() { function fxDisplayVal() {
if (!ln.fxRate || ln.fxRate === '' || ln.fxRate === '1.00000') return ln.fxRate; if (!ln.fxRate || ln.fxRate === '' || ln.fxRate === '1.00000') return ln.fxRate;
@ -955,16 +957,22 @@ function renderLine(ln, item) {
} }
function rebuildFxDirSel() { function rebuildFxDirSel() {
const fcy = ln.currency || '???'; const fcy = ln.currency || '???';
fxDirSel.innerHTML = ''; const initCode = ln.fxDir === 'base' ? baseCur : fcy;
fxDirSel.append( const opts = [
el('option', {value:'foreign'}, fcy), {code: fcy, name: getCurrencyName(fcy) || fcy},
el('option', {value:'base'}, baseCur) {code: baseCur, name: getCurrencyName(baseCur) || baseCur}
); ];
fxDirSel.value = ln.fxDir || 'foreign'; fxDirDD = makeCDD(opts, initCode, code => {
fxPerLbl.textContent = 'per ' + (fxDirSel.value === 'foreign' ? baseCur : fcy); ln.fxDir = code === baseCur ? 'base' : 'foreign';
fxIn.value = fxDisplayVal();
fxPerLbl.textContent = 'per ' + (ln.fxDir === 'foreign' ? baseCur : ln.currency || '???');
});
fxDirContainer.innerHTML = '';
fxDirContainer.appendChild(fxDirDD);
fxPerLbl.textContent = 'per ' + (ln.fxDir === 'foreign' ? baseCur : fcy);
} }
function showFxControls(show) { function showFxControls(show) {
fxDirSel.style.display = show ? '' : 'none'; fxDirContainer.style.display = show ? '' : 'none';
fxPerLbl.style.display = show ? '' : 'none'; fxPerLbl.style.display = show ? '' : 'none';
} }
@ -981,12 +989,6 @@ function renderLine(ln, item) {
if (progAreaEl) progAreaEl._refresh(); if (progAreaEl) progAreaEl._refresh();
}); });
fxDirSel.addEventListener('change', () => {
ln.fxDir = fxDirSel.value;
fxIn.value = fxDisplayVal();
fxPerLbl.textContent = 'per ' + (ln.fxDir === 'foreign' ? baseCur : ln.currency || '???');
});
async function showFxModal(code) { async function showFxModal(code) {
const bn = getCurrencyName(baseCur); const bn = getCurrencyName(baseCur);
const isOther = !code || code === 'Other'; const isOther = !code || code === 'Other';