admin/family_budget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: close modal popups only on overlay mousedown #18

Merged
admin merged 1 commits from fix/modal-mousedown-overlay-close into main 2026-04-15 14:02:53 +00:00
Conversation 0 Commits 1 Files Changed 5 +34 -12
5 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@@ -15,13 +15,15 @@ family_budget/
## Tech stack ## Tech stack
| Layer | Choice | Rationale |
|---------- |------------------------|--------------------------------------------------------| | Layer | Choice | Rationale |
| Backend | Express + TypeScript | Simple, well-known, sufficient for a small local app | | ---------- | --------------------- | ---------------------------------------------------- |
| Frontend | React + Vite + TS | Fast dev experience, modern tooling | | Backend | Express + TypeScript | Simple, well-known, sufficient for a small local app |
| Database | PostgreSQL | Deployed on Synology NAS | | Frontend | React + Vite + TS | Fast dev experience, modern tooling |
| Migrations | Knex | Lightweight, SQL-close, supports seeds | | Database | PostgreSQL | Deployed on Synology NAS |
| Shared | Pure TypeScript types | Zero-runtime, imported by both backend and frontend | | Migrations | Knex | Lightweight, SQL-close, supports seeds |
| Shared | Pure TypeScript types | Zero-runtime, imported by both backend and frontend |
## Prerequisites ## Prerequisites
@@ -39,4 +41,4 @@ npm install
npm run build -w shared npm run build -w shared
``` ```
See `backend/README.md` and `frontend/README.md` for per-package instructions. See `backend/README.md` and `frontend/README.md` for per-package instructions.

7
frontend/src/components/ClearHistoryModal.tsx
View File

@@ -31,7 +31,12 @@ export function ClearHistoryModal({ onClose, onDone }: Props) {
}; };
return ( return (
<div className="modal-overlay" onClick={onClose}> <div
className="modal-overlay"
onMouseDown={(e) => {
if (e.target === e.currentTarget) onClose();
}}
>
<div className="modal" onClick={(e) => e.stopPropagation()}> <div className="modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header"> <div className="modal-header">
<h2>Очистить историю операций</h2> <h2>Очистить историю операций</h2>

7
frontend/src/components/DeleteImportModal.tsx
View File

@@ -31,7 +31,12 @@ export function DeleteImportModal({ imp, onClose, onDone }: Props) {
}; };
return ( return (
<div className="modal-overlay" onClick={onClose}> <div
className="modal-overlay"
onMouseDown={(e) => {
if (e.target === e.currentTarget) onClose();
}}
>
<div className="modal" onClick={(e) => e.stopPropagation()}> <div className="modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header"> <div className="modal-header">
<h2>Удалить импорт</h2> <h2>Удалить импорт</h2>

7
frontend/src/components/EditTransactionModal.tsx
View File

@@ -82,7 +82,12 @@ export function EditTransactionModal({
}; };
return ( return (
<div className="modal-overlay" onClick={onClose}> <div
className="modal-overlay"
onMouseDown={(e) => {
if (e.target === e.currentTarget) onClose();
}}
>
<div className="modal" onClick={(e) => e.stopPropagation()}> <div className="modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header"> <div className="modal-header">
<h2>Редактирование операции</h2> <h2>Редактирование операции</h2>

7
frontend/src/components/ImportModal.tsx
View File

@@ -59,7 +59,12 @@ export function ImportModal({ onClose, onDone }: Props) {
}; };
return ( return (
<div className="modal-overlay" onClick={onClose}> <div
className="modal-overlay"
onMouseDown={(e) => {
if (e.target === e.currentTarget) onClose();
}}
>
<div className="modal" onClick={(e) => e.stopPropagation()}> <div className="modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header"> <div className="modal-header">
<h2>Импорт выписки</h2> <h2>Импорт выписки</h2>