dwindown/formipay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update design system to match WPCFTO architecture

Browse Source 
- Update CSS tokens to match WPCFTO values (sidebar #2c3e50, content #f0f3f5)
- Update Field component to 40%/60% 2-column layout
- Update Checkbox component to toggle switch UI
- Add GroupTitle component for visual section dividers
- Update TabNav component to WPCFTO sidebar styling
- Add MetaboxLayout component for 2-column wrapper
- Update TabPanel styles to match WPCFTO tab content area
- Fix Coupons page to use native WordPress post.php editor instead of modal

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-19 07:05:14 +07:00
parent d8c81a4022
commit bde43d8c66
10 changed files with 527 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/admin/design-system/WpcftoComponents.js
View File

@@ -24,22 +24,42 @@ export function BoxChild({ children, className = '', ...props }) {
);
}
// Tab Navigation Component
// Tab Navigation Component - WPCFTO sidebar style
export function TabNav({ tabs, activeTab, onTabChange, orientation = 'vertical' }) {
return (
<div className={`formipay-tab-nav formipay-tab-nav-${orientation}`}>
{tabs.map((tab) => (
<div
key={tab.id}
className={`formipay-nav-item ${activeTab === tab.id ? 'active' : ''}`}
onClick={() => onTabChange(tab.id)}
>
<div className="formipay-nav-title">
{tab.icon && <span className="formipay-nav-icon">{tab.icon}</span>}
<span>{tab.label}</span>
<div className={`formipay-wpcfto-tab-nav ${orientation === 'vertical' ? 'formipay-wpcfto-sidebar' : ''}`}>
<div className="formipay-wpcfto-tab-nav-inner">
{tabs.map((tab) => (
<div
key={tab.id}
className={`formipay-wpcfto-nav ${activeTab === tab.id ? 'active' : ''} ${tab.submenu ? 'has-submenu' : ''} ${!tab.icon ? 'no-icon' : ''}`}
onClick={() => onTabChange(tab.id)}
>
<div className="formipay-wpcfto-nav-title">
{tab.icon && <i className={tab.icon}></i>}
<span>{tab.label}</span>
</div>
{tab.submenu && (
<div className="formipay-wpcfto-submenus">
{tab.submenu.map((sub) => (
<div
key={`${tab.id}_${sub.id}`}
className={`formipay-wpcfto-submenu-item ${activeTab === `${tab.id}_${sub.id}` ? 'active' : ''}`}
onClick={(e) => {
e.stopPropagation();
onTabChange(`${tab.id}_${sub.id}`);
}}
>
{sub.label}
<i className="fa fa-chevron-right"></i>
</div>
))}
</div>
)}
</div>
</div>
))}
))}
</div>
</div>
);
}
@@ -62,7 +82,7 @@ export function TabPanel({ tabs, activeTab, children }) {
);
}
// Field Component
// Field Component - WPCFTO-style 2-column layout
export function Field({
label,
description,
@@ -72,18 +92,20 @@ export function Field({
...props
}) {
return (
<div className={`formipay-field ${className}`} {...props}>
{label && (
<div className={`formipay-field-label ${required ? 'required' : ''}`}>
<span className="formipay-field-label-text">{label}</span>
</div>
)}
<div className={`formipay-generic-field ${className}`} {...props}>
<div className="formipay-field-aside">
{label && (
<div className={`formipay-field-label ${required ? 'required' : ''}`}>
<span className="formipay-field-label-text">{label}</span>
</div>
)}
{description && (
<div className="formipay-field-description">{description}</div>
)}
</div>
<div className="formipay-field-content">
{children}
</div>
{description && (
<div className="formipay-field-description">{description}</div>
)}
</div>
);
}
@@ -145,22 +167,26 @@ export function Select({
);
}
// Checkbox Component
// Checkbox Component - WPCFTO toggle switch style
export function Checkbox({
label,
checked,
onChange,
className = '',
isToggle = true,
...props
}) {
return (
<label className={`formipay-checkbox ${className}`}>
<input
type="checkbox"
checked={checked}
onChange={onChange}
{...props}
/>
<label className={`formipay-admin-checkbox ${checked ? 'active' : ''} ${className}`}>
<div className={`formipay-admin-checkbox-wrapper ${isToggle ? 'is_toggle' : ''}`}>
<div className="formipay-checkbox-switcher"></div>
<input
type="checkbox"
checked={checked}
onChange={onChange}
{...props}
/>
</div>
<span>{label}</span>
</label>
);
@@ -272,6 +298,20 @@ export function Notice({
);
}
// Group Title Component - WPCFTO section divider (visual, not accordion)
export function GroupTitle({
title,
icon,
className = '',
}) {
return (
<div className={`formipay-group-title ${className}`}>
{icon && <i className={icon}></i>}
{title}
</div>
);
}
// Loading Spinner Component
export function Spinner({ size = 'md', className = '' }) {
const sizeClass = size !== 'md' ? `formipay-spinner-${size}` : '';
@@ -364,6 +404,22 @@ export function Table({
);
}
// Metabox Layout Component - WPCFTO 2-column wrapper for React metabox islands
export function MetaboxLayout({ tabs, activeTab, onTabChange, children }) {
return (
<div className="formipay-wpcfto-metabox">
<div className="formipay-wpcfto-metabox-inner">
<div className="formipay-wpcfto-container">
<TabNav tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
<div className="formipay-wpcfto-tabs">
{children}
</div>
</div>
</div>
</div>
);
}
export default {
Box,
BoxChild,
@@ -377,8 +433,10 @@ export default {
Button,
Repeater,
Notice,
GroupTitle,
Spinner,
EmptyState,
Badge,
Table,
MetaboxLayout,
};

299
src/admin/design-system/WpcftoDesign.css
View File

@@ -9,21 +9,23 @@
============================================ */
:root {
/* Colors */
/* Colors - WPCFTO-matched values */
--formipay-color-primary: #2985f7;
--formipay-color-sidebar-bg: #1e2a36;
--formipay-color-sidebar-text: #fff;
--formipay-color-content-bg: #fff;
--formipay-color-sidebar-bg: #2c3e50;
--formipay-color-sidebar-text: #bec5cb;
--formipay-color-sidebar-active: #2985f7;
--formipay-color-content-bg: #f0f3f5;
--formipay-color-block-bg: #fff;
--formipay-color-border: #f0f0f1;
--formipay-color-border-dark: #8c99a5;
--formipay-color-input-bg: #f6f9fc;
--formipay-color-text: #1d2327;
--formipay-color-text-muted: #646970;
--formipay-color-text: #27374e;
--formipay-color-text-muted: #8c99a5;
--formipay-color-danger: #d63638;
--formipay-color-success: #00a32a;
--formipay-color-warning: #dba617;
/* Spacing */
/* Spacing - WPCFTO values */
--formipay-spacing-xs: 4px;
--formipay-spacing-sm: 8px;
--formipay-spacing-md: 12px;
@@ -31,13 +33,13 @@
--formipay-spacing-xl: 20px;
--formipay-spacing-xxl: 24px;
/* Border Radius */
/* Border Radius - WPCFTO values */
--formipay-radius-sm: 4px;
--formipay-radius-md: 10px;
--formipay-radius-lg: 30px;
--formipay-radius-full: 50%;
/* Typography */
/* Typography - WPCFTO values */
--formipay-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
--formipay-font-size-sm: 13px;
--formipay-font-size-base: 14px;
@@ -48,6 +50,11 @@
--formipay-font-weight-semibold: 600;
--formipay-font-weight-bold: 700;
/* WPCFTO Layout Dimensions */
--formipay-sidebar-width: 273px;
--formipay-field-aside-width: 40%;
--formipay-field-content-width: 60%;
/* Shadows */
--formipay-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--formipay-shadow-md: -2px 2px 5px rgba(0, 0, 0, 0.08);
@@ -104,86 +111,153 @@
}
/* ============================================
TAB NAVIGATION (Vertical)
TAB NAVIGATION (WPCFTO sidebar)
============================================ */
.formipay-tab-nav {
display: flex;
flex-direction: column;
gap: var(--formipay-spacing-xs);
.formipay-wpcfto-tab-nav {
background-color: var(--formipay-color-sidebar-bg);
width: var(--formipay-sidebar-width);
padding: 21px 0;
flex-grow: 1;
}
.formipay-nav-item {
display: flex;
flex-direction: column;
padding: var(--formipay-spacing-md) var(--formipay-spacing-lg);
border-radius: var(--formipay-radius-sm);
cursor: pointer;
transition: background-color var(--formipay-transition-fast);
user-select: none;
.formipay-wpcfto-tab-nav.hide {
display: none;
}
.formipay-nav-item:hover {
background-color: rgba(41, 133, 247, 0.05);
.formipay-wpcfto-tab-nav-inner {
position: sticky;
top: 133px;
z-index: 99;
}
.formipay-nav-item.active {
background-color: rgba(41, 133, 247, 0.1);
color: var(--formipay-color-primary);
}
.formipay-nav-title {
display: flex;
align-items: center;
gap: var(--formipay-spacing-sm);
.formipay-wpcfto-nav {
background-color: transparent;
position: relative;
padding: 0;
font-size: var(--formipay-font-size-base);
font-weight: var(--formipay-font-weight-medium);
font-weight: 400;
text-transform: uppercase;
color: var(--formipay-color-sidebar-text);
cursor: pointer;
transition: all 0.3s ease 0s;
}
.formipay-nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
.formipay-wpcfto-nav-title {
padding: 13px 32px 13px 34px;
position: relative;
}
.formipay-wpcfto-nav i {
display: block;
position: absolute;
right: 30px;
left: auto;
top: 50%;
margin-top: -11px;
width: 26px;
text-align: center;
font-size: 22px;
}
.formipay-wpcfto-nav.active {
background-color: var(--formipay-color-primary);
color: white;
}
.formipay-wpcfto-nav:hover {
color: white;
}
.formipay-wpcfto-submenus {
background-color: #1e2a36;
padding: 18px 32px 18px 34px;
}
.formipay-wpcfto-submenu-item {
font-size: 15px;
font-weight: 400;
text-transform: initial;
position: relative;
color: var(--formipay-color-text-muted);
margin-bottom: 15px;
}
.formipay-wpcfto-submenu-item i {
font-size: 10px;
right: 0;
margin-top: -5px;
display: none;
}
.formipay-wpcfto-submenu-item.active,
.formipay-wpcfto-submenu-item:hover {
color: white;
}
.formipay-wpcfto-submenu-item.active i {
display: block;
}
/* ============================================
TAB CONTENT PANELS
TAB CONTENT PANELS (WPCFTO tab content area)
============================================ */
.formipay-tabs {
flex-grow: 1;
overflow: hidden;
}
.formipay-tab {
background-color: var(--formipay-color-content-bg);
width: 100%;
padding: 20px 30px 20px 20px;
display: none;
}
.formipay-tab.active {
display: block;
animation: fadeIn 0.4s ease;
}
.formipay-tab-content {
padding: var(--formipay-spacing-lg);
max-width: 100%;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
FIELD COMPONENT
FIELD COMPONENT - WPCFTO 2-column layout
============================================ */
.formipay-field {
.formipay-generic-field {
display: flex;
flex-direction: column;
padding: var(--formipay-spacing-lg) 0;
border-bottom: 1px solid var(--formipay-color-border);
flex-wrap: wrap;
justify-content: space-between;
padding: 1.8rem 1rem 0;
max-width: 100%;
width: 100%;
border-radius: 10px;
background-color: var(--formipay-color-block-bg);
margin: 0 0 10px;
}
.formipay-field:last-child {
border-bottom: none;
.formipay-field-aside {
width: var(--formipay-field-aside-width);
padding-right: 2rem;
}
.formipay-field-label {
display: flex;
align-items: flex-start;
gap: var(--formipay-spacing-xs);
margin-bottom: var(--formipay-spacing-sm);
display: inline;
font-size: var(--formipay-font-size-base);
font-weight: var(--formipay-font-weight-medium);
}
@@ -194,10 +268,15 @@
margin-left: 2px;
}
.formipay-field-content {
width: var(--formipay-field-content-width);
}
.formipay-field-description {
display: block;
margin-top: 0.8em;
font-size: var(--formipay-font-size-sm);
color: var(--formipay-color-text-muted);
margin-top: var(--formipay-spacing-xs);
}
/* ============================================
@@ -239,21 +318,52 @@
}
/* ============================================
CHECKBOX & RADIO
CHECKBOX & RADIO - WPCFTO toggle style
============================================ */
.formipay-checkbox,
.formipay-radio {
display: flex;
align-items: center;
gap: var(--formipay-spacing-sm);
.formipay-admin-checkbox {
align-self: flex-end;
margin-bottom: 0;
}
.formipay-admin-checkbox-wrapper {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
background-color: #bec5cb;
border-radius: 20px;
transition: background-color 0.3s ease;
cursor: pointer;
}
.formipay-checkbox input,
.formipay-radio input {
width: 16px;
height: 16px;
.formipay-admin-checkbox-wrapper.active {
background-color: var(--formipay-color-primary);
}
.formipay-checkbox-switcher {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s ease;
}
.formipay-admin-checkbox-wrapper.active .formipay-checkbox-switcher {
transform: translateX(18px);
}
.formipay-admin-checkbox input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.formipay-admin-checkbox label {
cursor: pointer;
}
@@ -495,6 +605,29 @@
color: var(--formipay-color-text-muted);
}
/* ============================================
GROUP TITLE - WPCFTO section divider
============================================ */
.formipay-group-title {
width: 100%;
padding: 0 0 12px;
color: var(--formipay-color-text-muted);
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
border-bottom: 1px solid #d6dade;
margin: 0 0 17px;
letter-spacing: 1.4px;
display: flex;
align-items: center;
gap: 8px;
}
.formipay-group-title i {
display: block;
}
/* ============================================
NOTICE / ALERT COMPONENTS
============================================ */
@@ -625,6 +758,44 @@
.formipay-gap-3 { gap: var(--formipay-spacing-md); }
.formipay-gap-4 { gap: var(--formipay-spacing-lg); }
/* ============================================
METABOX LAYOUT - WPCFTO 2-column wrapper
============================================ */
.formipay-wpcfto-metabox {
background-color: #fff;
border-radius: var(--formipay-radius-md);
overflow: hidden;
box-shadow: var(--formipay-shadow-sm);
}
.formipay-wpcfto-metabox-inner {
display: flex;
min-height: 400px;
}
.formipay-wpcfto-container {
display: flex;
width: 100%;
position: relative;
}
/* Horizontal variant for mobile/narrow contexts */
.formipay-wpcfto-container.horizontal {
flex-direction: column;
}
.formipay-wpcfto-container.horizontal .formipay-wpcfto-tab-nav {
width: 100%;
flex-direction: row;
overflow-x: auto;
padding: 0;
}
.formipay-wpcfto-container.horizontal .formipay-wpcfto-tabs {
width: 100%;
}
/* ============================================
RESPONSIVE
============================================ */

2
src/admin/design-system/index.js
View File

@@ -18,10 +18,12 @@ export {
Button,
Repeater,
Notice,
GroupTitle,
Spinner,
EmptyState,
Badge,
Table,
MetaboxLayout,
} from './WpcftoComponents';
// Export CSS import helper

24
src/admin/pages/AdminPages.css
View File

@@ -91,4 +91,28 @@ code {
border-radius: 3px;
font-family: monospace;
font-size: 13px;
}
/** Modal Overlay **/
.formipay-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 100000;
}
.formipay-modal-content {
background-color: white;
border-radius: 8px;
max-width: 900px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

17
src/admin/pages/Coupons.js
View File

@@ -13,6 +13,11 @@ export default function CouponsPage() {
const ajaxUrl = window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php';
const nonce = window.formipayAdmin?.nonce || '';
const openEditor = (couponId) => {
// Use native WordPress post editor
window.location.href = `/wp-admin/post.php?post=${couponId}&action=edit`;
};
const handleDelete = async (id) => {
const result = await Swal.fire({
icon: 'info',
@@ -72,7 +77,15 @@ export default function CouponsPage() {
<>
<strong>{row.code || row.post_title}</strong>
<span className="row-actions">
<a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID}&action=edit`}>{__('edit', 'formipay')}</a>
<button
className="button-link"
onClick={(e) => {
e.preventDefault();
openEditor(row.ID);
}}
>
{__('edit', 'formipay')}
</button>
{' | '}
<button
className="button-link delete"
@@ -177,7 +190,7 @@ export default function CouponsPage() {
actions={{
addNew: {
label: __('+ Add New Coupon', 'formipay'),
action: 'formipay-create-coupon-post',
href: '/wp-admin/post-new.php?post_type=formipay_coupon',
},
bulkDelete: {
action: 'formipay-bulk-delete-coupon',