Nut.ไปเรื่อย
59 lines
9.9 KiB
Markdown
59 lines
9.9 KiB
Markdown
# Visual reskin — sidebar, tables, buttons, badges, icons, font
|
||
|
||
## บริบท
|
||
|
||
ผู้ใช้ส่งภาพตัวอย่างดีไซน์ใหม่ (หน้า "คำของบประมาณเงินรายได้ > แบบฟอร์มเสนอขอปรับคุณวุฒิ") และต้องการปรับให้ทั้งแอป (`rmutr-web`) มีหน้าตาแบบนี้: sidebar, font, รูปแบบตาราง, สีตาราง, สีปุ่ม, รูปแบบไอคอน
|
||
|
||
## สิ่งที่พบจากการสำรวจโค้ด (สำคัญต่อขอบเขตงาน)
|
||
|
||
แอปนี้มีโครงสร้างธีมกลางที่ค่อนข้างแข็งแรงอยู่แล้ว ไม่ได้กระจัดกระจายทั้งหมดตามที่กังวลไว้ตอนแรก:
|
||
|
||
- **ธีม Angular Material กลาง**: `src/themes/default-theme.scss` — สี primary ปัจจุบันคือแดงอิฐ `#bd413a`
|
||
- **CSS ตาราง/การ์ดกลางขนาดใหญ่**: `src/styles.scss` บรรทัด ~1360–1520 — ควบคุม header ตาราง (`th.mat-header-cell`, `tr.mat-header-row`), ขอบ, แถบสีสลับ, ท้ายตาราง, `.rmutr_card` แถบหัวข้อ, `.tables`, `.table-excel` ของ**เกือบทุกตารางทั้งแอป**ผ่าน selector แบบ `!important` — สีปัจจุบันคือเทาอมเบจ `#e6e6df`
|
||
- **ปุ่มหลักกลาง**: `.bg-bpi-primary-color` ใน `styles.scss` — ปัจจุบันเป็นสีฟ้า `#5f9adc`
|
||
- **Sidebar/แถบบน**: `src/app/layout/components/**` (menu-bar, basic-menu, collapsable, tool-bar, head-menu) — ใช้สีแบรนด์แดง `#bd413a` เดียวกันทั้งหมดอยู่แล้วอย่างสม่ำเสมอ (โลโก้, ไฮไลท์เมนู active, badge, ไอคอนออกจากระบบ)
|
||
- **ฟอนต์กลาง**: `*:not(.material-icons,...) { font-family: 'Sarabun' !important; }` ใน `styles.scss` บรรทัด 138 — ครอบทั้งแอปอยู่แล้วที่จุดเดียว โหลดผ่าน Google Fonts CDN link ใน `src/index.html`
|
||
|
||
**ผลต่อขอบเขตงาน**: การแก้ไฟล์กลางเหล่านี้ (ไม่กี่ไฟล์) จะกระจายผลไปยังเกือบทุกเมนูทั้งแอปโดยอัตโนมัติ ไม่ต้องไล่แก้ทีละหน้า — หน้าเรือธง (request-qualification-adjustments) ใช้สไตล์กลางเหล่านี้อยู่แล้วโดยไม่มี override เฉพาะหน้า จึงเป็นตัวอย่างทดสอบที่สะอาด
|
||
|
||
**ขอบเขตที่เหลือนอกเหนือจากไฟล์กลาง**: หน้าเรือธงมี 2 จุดที่เขียนเฉพาะหน้า ไม่ได้ใช้ pattern กลาง ต้องแก้เพิ่ม:
|
||
- คอลัมน์สถานะ: ปัจจุบันเป็นไอคอนจุดสี (`fiber_manual_record`) ไม่ใช่ badge ทรงเม็ดยา
|
||
- คอลัมน์เครื่องมือ: ปัจจุบันเป็น `material-icons` สีเปล่าๆ ไม่มีพื้นหลังวงกลม
|
||
|
||
## ขอบเขตงาน (Phase 1)
|
||
|
||
1. หน้าเรือธง: `request-qualification-adjustments` (ใช้ตรวจสอบผลจริงที่ `localhost:4200`)
|
||
2. Sidebar + top toolbar (ใช้ทั้งแอปอยู่แล้ว เปลี่ยนที่เดียว)
|
||
3. Global CSS tokens (ตาราง, ปุ่ม, badge, icon-btn, font) — ไฟล์เดียวที่กระทบทั้งแอป
|
||
|
||
เมนูอื่นที่เหลือ (ที่ไม่มี override เฉพาะหน้าเหมือน request-qualification-adjustments) จะได้รับผลอัตโนมัติบางส่วนจาก global CSS แต่การไล่ปรับ badge/icon-btn เฉพาะหน้าให้ครบทุกเมนู เป็น**งานเฟสถัดไป** นอกขอบเขต spec นี้
|
||
|
||
## การเปลี่ยนแปลง
|
||
|
||
### 1. ฟอนต์ — IBM Plex Sans Thai (ฝังในแอป)
|
||
- ติดตั้ง `@fontsource/ibm-plex-sans-thai` (npm package ที่รวมไฟล์ woff2 จริงไว้ในแพ็กเกจ ไม่ต้องพึ่ง Google Fonts CDN ตอนรันไทม์)
|
||
- เพิ่มไฟล์ CSS น้ำหนัก 100, 200, 400, 500, 700 (ชุดเดียวกับที่ Sarabun ใช้อยู่เดิม) เข้า `angular.json` (`projects.rmutr-web.architect.build.options.styles`)
|
||
- ลบ `<link href="https://fonts.googleapis.com/css2?family=Sarabun...">` ออกจาก `src/index.html` (คง Material Icons link ไว้ตามเดิม ไม่เกี่ยวกับฟอนต์ตัวอักษร)
|
||
- เปลี่ยน `font-family: 'Sarabun', sans-serif !important;` → `font-family: 'IBM Plex Sans Thai', sans-serif !important;` ที่ `styles.scss:138` (จุดเดียว ครอบทั้งแอป)
|
||
|
||
### 2. สีตาราง/การ์ด (global, styles.scss ~1360–1520)
|
||
เปลี่ยนกลุ่มสีเทาอมเบจ (`#e6e6df`, `$primary-mid`) ที่ใช้ใน header ตาราง/การ์ด → เขียวอมฟ้า (teal) ให้ตรงกับภาพตัวอย่าง ค่าเริ่มต้นที่จะใช้: `#3d8b7a` (header background) + ตัวอักษรสีขาว `#ffffff` — ปรับค่าจริงสดผ่าน `localhost:4200` ระหว่างทำ เพราะ `ng serve --hmr` reload อัตโนมัติ ไม่ต้องรอ build ใหม่ จุดที่ต้องแก้:
|
||
- `.rmutr_card > .mat-header-cell` (แถบหัวข้อการ์ด/ค้นหา)
|
||
- `tr.mat-header-row`, `th.mat-header-cell` (หัวตาราง Material ทั่วแอป)
|
||
- `.tables th:not(.th_class)`, `.table-excel th:not(.th_class)` (ตาราง HTML ธรรมดา)
|
||
|
||
### 3. ปุ่มหลัก (global)
|
||
เปลี่ยน `.bg-bpi-primary-color` (ปัจจุบันฟ้า `#5f9adc`) → สีส้ม/แดงอิฐ ค่าเริ่มต้น `#d9652d` (border เข้มกว่าเดิมสัดส่วนเดียวกับปัจจุบัน)
|
||
|
||
### 4. Sidebar/แถบบน
|
||
สีแบรนด์แดงปัจจุบัน (`#bd413a`) ใกล้เคียงกับสีส้มในภาพตัวอย่างอยู่แล้ว — เปลี่ยนเป็นค่าเดียวกับปุ่มหลัก (`#d9652d`) ให้เป็นสีเดียวกันทั้งแอป (โลโก้, ไฮไลท์เมนู active, badge, ไอคอนออกจากระบบ) ไม่เปลี่ยนรูปทรง/ตำแหน่ง (ไฟล์: `menu-bar`, `basic-menu`, `collapsable`, `tool-bar` component scss)
|
||
|
||
### 5. Status badge (dot icon → เม็ดยา)
|
||
ยกระดับ pattern badge ทรงเม็ดยา (`.badge-success` / `.badge-warning` / `.badge-pending` / `.badge-draft`) ที่เคยสร้างเฉพาะหน้าไว้ในงาน "คำขอระหว่างปี" (`list-between-year.component.scss`) ให้เป็น**คลาสกลางใน styles.scss** (ย้ายนิยามมาไว้ที่เดียว คอมโพเนนต์เดิมยังใช้ได้ปกติเพราะชื่อคลาสเหมือนเดิม) แล้วนำมาใช้แทนไอคอนจุดสีในคอลัมน์สถานะของหน้าเรือธง (`ปกติ` = เขียว ใช้ `.badge-success`)
|
||
|
||
### 6. ไอคอนเครื่องมือ (plain icon → ปุ่มวงกลมพื้นสีอ่อน)
|
||
สร้างคลาสกลางใหม่ `.icon-btn` (+ variant `--view` สีฟ้าอ่อน / `--edit` สีส้มอ่อน / `--delete` สีแดงอ่อน — พื้นหลังโทนอ่อนของสีไอคอนเดิม) แทนที่ `material-icons` สีเปล่าในคอลัมน์เครื่องมือของหน้าเรือธง
|
||
|
||
## การทดสอบ
|
||
ไม่มี unit test culture สำหรับไฟล์เหล่านี้ (เหมือนงานก่อนหน้าในโปรเจกต์นี้) — ตรวจสอบด้วย `ng build --configuration=production` ให้ผ่าน + ดูผลจริงสดที่ `localhost:4200/app/request-qualification-adjustments` (ผู้ใช้มี dev server รันอยู่แล้ว, HMR reload อัตโนมัติ) และสุ่มเช็คอีก 1-2 เมนูอื่นเพื่อยืนยันว่า global CSS ไม่พังอะไรที่มีอยู่เดิม
|