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)

หน้าเรือธง: request-qualification-adjustments (ใช้ตรวจสอบผลจริงที่ localhost:4200)
Sidebar + top toolbar (ใช้ทั้งแอปอยู่แล้ว เปลี่ยนที่เดียว)
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 ไม่พังอะไรที่มีอยู่เดิม

9.9 KiB Raw Permalink Blame History Unescape Escape