59 lines
3.6 KiB
Markdown
59 lines
3.6 KiB
Markdown
# Certificate Dialog Review
|
|
|
|
## Summary
|
|
|
|
ปรับปรุงหน้าต่างแสดงตัวอย่างเกียรติบัตรให้ปุ่มปิดอยู่ในตำแหน่งที่เหมาะสมภายใน dialog และทำให้การแสดงผลรูปภาพมีขนาดที่พอดีกับทั้ง desktop และ mobile โดยไม่กระทบพฤติกรรม preview/fallback และการเปิดไฟล์เดิม
|
|
|
|
## Files Changed
|
|
|
|
- `src/components/ui/dialog.tsx`
|
|
- `src/features/training-records/components/training-record-tables/training-record-image-preview.tsx`
|
|
|
|
## UI Changes
|
|
|
|
- เพิ่มความสามารถ `hideCloseButton` ให้ `DialogContent` เพื่อซ่อนปุ่มปิดแบบ default ในกรณีที่ต้องการจัด header เอง
|
|
- เพิ่ม header แบบมองเห็นได้ใน dialog preview
|
|
- ซ้าย: หัวข้อ `ตัวอย่างเกียรติบัตร`
|
|
- ขวา: ปุ่มปิดแบบ `DialogClose` + `Button`
|
|
- เพิ่มเส้นแบ่ง (`border-b`) ระหว่าง header และเนื้อหา preview
|
|
|
|
## Dialog Behavior
|
|
|
|
- ปุ่มปิดอยู่ภายในกรอบ dialog เสมอ
|
|
- ปุ่มปิดไม่ลอยทับรูปภาพ
|
|
- ปุ่มปิดใช้ `DialogClose asChild` ตาม pattern ของ shadcn/ui
|
|
- dialog ยังคงเปิดจาก thumbnail เดิม และยังรองรับ fallback placeholder เหมือนเดิม
|
|
|
|
## Image Sizing
|
|
|
|
- เปลี่ยนพื้นที่ preview หลักให้ใช้ `object-contain`
|
|
- จำกัดขนาดรูปด้วย `max-h-[70vh]`
|
|
- ให้รูปใช้ `w-full` ภายใน dialog โดยไม่ล้นกรอบ
|
|
- dialog ใช้ขนาด `w-[calc(100vw-2rem)]` และ `max-w-3xl` เพื่อให้พอดีกับหน้าจอ
|
|
|
|
## Mobile/Responsive Notes
|
|
|
|
- dialog ใช้ความกว้างแบบ responsive เพื่อไม่ชนขอบจอมือถือ
|
|
- header ใช้งานง่ายบนหน้าจอเล็ก เพราะปุ่มปิดอยู่ในแถวเดียวกับหัวข้อ
|
|
- เนื้อหาใช้ `overflow-y-auto` เพื่อรองรับกรณีความสูงไม่พอ
|
|
- placeholder non-image และ broken-image ยังแสดงได้เต็มพื้นที่โดยไม่แตก layout
|
|
|
|
## Manual Test Checklist
|
|
|
|
- Certificate preview dialog opens correctly.
|
|
- Close button stays inside dialog.
|
|
- Close button does not overlap image.
|
|
- Close button works on desktop.
|
|
- Close button works on mobile.
|
|
- Large landscape certificate fits inside dialog.
|
|
- Portrait certificate fits inside dialog.
|
|
- Image does not overflow screen.
|
|
- PDF or unsupported file shows certificate placeholder icon.
|
|
- Broken image shows certificate placeholder icon.
|
|
- Download/open certificate still works.
|
|
|
|
## Known Limitations
|
|
|
|
- งานนี้ปรับเฉพาะ dialog ของ certificate preview component ที่ใช้งานอยู่ในโมดูล training records
|
|
- ถ้าภายหลังมี preview dialog แบบใหม่ที่ไม่ใช้ component เดียวกัน จะต้องนำ pattern นี้ไปใช้เพิ่มแยกจุด
|