Styles styels styles
This commit is contained in:
IGNY8 VPS (Salman)
@@ -793,7 +793,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
|
||||
return 'bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-400';
|
||||
}
|
||||
if (statusLower === 'approved') {
|
||||
return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
|
||||
return 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-400';
|
||||
}
|
||||
if (statusLower === 'review') {
|
||||
return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400';
|
||||
|
||||
@@ -81,11 +81,13 @@ interface ColumnConfig {
|
||||
width?: string;
|
||||
fixed?: boolean;
|
||||
align?: 'left' | 'center' | 'right';
|
||||
headingAlign?: 'left' | 'center' | 'right'; // Separate alignment for heading
|
||||
render?: (value: any, row: any) => ReactNode;
|
||||
toggleable?: boolean; // If true, this column will have a toggle button for expanding content
|
||||
toggleContentKey?: string; // Key of the field containing content to display when toggled
|
||||
toggleContentLabel?: string; // Label for the expanded content (e.g., "Content Outline")
|
||||
defaultVisible?: boolean; // Whether column is visible by default (default: true)
|
||||
hasActions?: boolean; // If true, this column will include row actions (3-dot menu)
|
||||
}
|
||||
|
||||
interface FilterConfig {
|
||||
@@ -179,6 +181,8 @@ interface TablePageTemplateProps {
|
||||
};
|
||||
// Custom row highlight function (returns bg class based on row data)
|
||||
getRowClassName?: (row: any) => string;
|
||||
// Custom checkbox column width (default: w-12 = 48px)
|
||||
checkboxColumnWidth?: string;
|
||||
}
|
||||
|
||||
export default function TablePageTemplate({
|
||||
@@ -217,6 +221,7 @@ export default function TablePageTemplate({
|
||||
bulkActions: customBulkActions,
|
||||
primaryAction,
|
||||
getRowClassName,
|
||||
checkboxColumnWidth = '48px',
|
||||
}: TablePageTemplateProps) {
|
||||
const location = useLocation();
|
||||
const [isBulkActionsDropdownOpen, setIsBulkActionsDropdownOpen] = useState(false);
|
||||
@@ -799,7 +804,8 @@ export default function TablePageTemplate({
|
||||
{selection && (
|
||||
<TableCell
|
||||
isHeader
|
||||
className="font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400 w-12"
|
||||
className="font-medium text-gray-500 text-center text-theme-xs dark:text-gray-400"
|
||||
style={{ width: checkboxColumnWidth, maxWidth: checkboxColumnWidth }}
|
||||
>
|
||||
{showContent && (
|
||||
<Checkbox
|
||||
@@ -816,15 +822,19 @@ export default function TablePageTemplate({
|
||||
)}
|
||||
{visibleColumnsList.map((column, colIndex) => {
|
||||
const isLastColumn = colIndex === visibleColumnsList.length - 1;
|
||||
const hasActionsInColumn = column.hasActions && rowActions.length > 0;
|
||||
const displayName = column.label || formatColumnKey(column.key);
|
||||
const headerAlign = column.headingAlign || column.align || 'start';
|
||||
const justifyClass = headerAlign === 'center' ? 'justify-center' : headerAlign === 'right' ? 'justify-end' : 'justify-start';
|
||||
return (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
isHeader
|
||||
className={`font-medium text-gray-500 text-${column.align || 'start'} text-[11px] dark:text-gray-400 ${column.sortable ? 'cursor-pointer hover:text-gray-700 dark:hover:text-gray-300' : ''} ${isLastColumn && rowActions.length > 0 ? 'pr-16' : ''}`}
|
||||
className={`font-medium text-gray-500 text-${hasActionsInColumn ? 'start' : headerAlign} dark:text-gray-400 ${column.sortable ? 'cursor-pointer hover:text-gray-700 dark:hover:text-gray-300' : ''} ${hasActionsInColumn ? 'pr-16' : ''}`}
|
||||
style={column.width ? { width: column.width } : undefined}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center flex-1">
|
||||
<div className={`flex items-center gap-2 ${hasActionsInColumn ? 'justify-between' : justifyClass}`}>
|
||||
<div className={`flex items-center ${hasActionsInColumn ? 'flex-1' : justifyClass}`}>
|
||||
{column.sortable ? (
|
||||
<div onClick={() => handleSort(column)} className="flex items-center">
|
||||
{displayName}
|
||||
@@ -915,7 +925,10 @@ export default function TablePageTemplate({
|
||||
className={`igny8-data-row ${isRowAdded ? 'bg-brand-50 dark:bg-brand-500/10' : ''} ${customRowClass}`}
|
||||
>
|
||||
{selection && (
|
||||
<TableCell className="text-start">
|
||||
<TableCell
|
||||
className="text-center"
|
||||
style={{ width: checkboxColumnWidth, maxWidth: checkboxColumnWidth }}
|
||||
>
|
||||
<Checkbox
|
||||
checked={selectedIds.includes(row.id?.toString() || '')}
|
||||
onChange={(checked) => handleSelectRow(row.id?.toString() || '', checked)}
|
||||
@@ -925,11 +938,11 @@ export default function TablePageTemplate({
|
||||
</TableCell>
|
||||
)}
|
||||
{visibleColumnsList.map((column, colIndex) => {
|
||||
const isLastColumn = colIndex === visibleColumnsList.length - 1;
|
||||
const rowId = row.id || index;
|
||||
const hasActionsInColumn = column.hasActions && rowActions.length > 0;
|
||||
|
||||
// Get or create ref for this row's actions button
|
||||
if (isLastColumn && rowActions.length > 0) {
|
||||
if (hasActionsInColumn) {
|
||||
if (!rowActionButtonRefs.current.has(rowId)) {
|
||||
const ref = React.createRef<HTMLButtonElement>();
|
||||
rowActionButtonRefs.current.set(rowId, ref);
|
||||
@@ -939,7 +952,7 @@ export default function TablePageTemplate({
|
||||
return (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className={`text-${column.align || 'start'} text-gray-800 dark:text-white/90 ${isLastColumn && rowActions.length > 0 ? 'relative pr-16' : ''}`}
|
||||
className={`text-${column.align || 'start'} text-gray-800 dark:text-white/90 ${hasActionsInColumn ? 'relative pr-16' : ''}`}
|
||||
>
|
||||
<div className={`flex items-center ${column.align === 'center' ? 'justify-center' : column.align === 'end' ? 'justify-end' : ''} ${column.toggleable && hasToggleContent ? 'justify-between w-full' : ''} gap-2`}>
|
||||
<div className={column.toggleable && hasToggleContent ? 'flex-1' : ''}>
|
||||
@@ -962,8 +975,8 @@ export default function TablePageTemplate({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions button - absolutely positioned in last column */}
|
||||
{isLastColumn && rowActions.length > 0 && (() => {
|
||||
{/* Actions button - absolutely positioned in column with hasActions flag */}
|
||||
{hasActionsInColumn && (() => {
|
||||
// Check if row is already added - use same logic as handleBulkAddSelected
|
||||
const isRowAdded = !!(row as any).isAdded;
|
||||
|
||||
@@ -1172,7 +1185,7 @@ export default function TablePageTemplate({
|
||||
|
||||
{/* Pagination - Compact icon-based pagination */}
|
||||
{pagination && (
|
||||
<div className="mt-6 border-t border-gray-200 dark:border-gray-800 pt-6">
|
||||
<div className="mt-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Showing {data.length} of {pagination.totalCount} {selectionLabel || 'items'}
|
||||
|
||||
Reference in New Issue
Block a user