ray
38 lines
1.9 KiB
Markdown
38 lines
1.9 KiB
Markdown
# ShopProQuote UX Conventions
|
|
|
|
## Modal behavior — NEVER close on outside click
|
|
|
|
User preference: modals should ONLY close via explicit Save/Close/Cancel buttons. Clicking the backdrop (outside the modal) must NOT dismiss the modal.
|
|
|
|
### Files that had click-outside-to-close handlers (all removed):
|
|
|
|
| File | Modal | Was |
|
|
|---|---|---|
|
|
| `quote-tab-manager.js:1379` | Service edit modal | `modal.classList.add('hidden')` on `e.target === modal` |
|
|
| `quote-tab-manager.js:1680` | Parts availability modal | `closeModal()` on `e.target === modal` |
|
|
| `shared/customer-lookup.js:253` | Customer lookup modal | `modal.remove()` on `e.target === modal` |
|
|
| `settings.js:315` | Site settings modal | `closeModal()` on `e.target === modal` |
|
|
| `shared/modal-manager.js:328` | Confirm dialog overlay | `overlay.remove(); resolve(false)` on `e.target === overlay` |
|
|
|
|
### Pattern to recognize
|
|
|
|
Any `modal.addEventListener('click', (e) => { if (e.target === modal) { ... } });` blocks must be removed. If adding a new modal, do NOT add an outside-click handler.
|
|
|
|
### What was NOT changed (correctly)
|
|
|
|
Dropdown menus (service search, customer search, header menus) still close on outside click. This is expected UX for dropdowns — the rule only applies to modal dialogs.
|
|
|
|
## Toggle checkboxes — always show the icon
|
|
|
|
Approval/decline checkboxes (green ✓ and red ✕ in the ServiceRow) must always render their SVG icon, not conditionally. When inactive the icon is grayed-out (`text-gray-300`), when active the icon is white on a colored background (`text-white` on `bg-green-600` or `bg-red-600`).
|
|
|
|
**Pattern:**
|
|
```tsx
|
|
// ✓ — always visible, gray when inactive, white when active
|
|
<button className={`... ${active ? 'bg-green-600 border-green-600 text-white' : 'border-gray-300 text-gray-300'}`}>
|
|
<svg>...</svg> // always rendered, never conditional
|
|
</button>
|
|
```
|
|
|
|
Do NOT wrap the SVG in `{active && <svg>...</svg>}` — the icon should always be visible as a preview of the action.
|