feat: implement 8 OpenSpec proposals for security, reliability, and UX improvements
## Security Enhancements (P0) - Add input validation with max_length and numeric range constraints - Implement WebSocket token authentication via first message - Add path traversal prevention in file storage service ## Permission Enhancements (P0) - Add project member management for cross-department access - Implement is_department_manager flag for workload visibility ## Cycle Detection (P0) - Add DFS-based cycle detection for task dependencies - Add formula field circular reference detection - Display user-friendly cycle path visualization ## Concurrency & Reliability (P1) - Implement optimistic locking with version field (409 Conflict on mismatch) - Add trigger retry mechanism with exponential backoff (1s, 2s, 4s) - Implement cascade restore for soft-deleted tasks ## Rate Limiting (P1) - Add tiered rate limits: standard (60/min), sensitive (20/min), heavy (5/min) - Apply rate limits to tasks, reports, attachments, and comments ## Frontend Improvements (P1) - Add responsive sidebar with hamburger menu for mobile - Improve touch-friendly UI with proper tap target sizes - Complete i18n translations for all components ## Backend Reliability (P2) - Configure database connection pool (size=10, overflow=20) - Add Redis fallback mechanism with message queue - Add blocker check before task deletion ## API Enhancements (P3) - Add standardized response wrapper utility - Add /health/ready and /health/live endpoints - Implement project templates with status/field copying ## Tests Added - test_input_validation.py - Schema and path traversal tests - test_concurrency_reliability.py - Optimistic locking and retry tests - test_backend_reliability.py - Connection pool and Redis tests - test_api_enhancements.py - Health check and template tests Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
beabigegg
@@ -30,6 +30,7 @@ interface Task {
|
||||
subtask_count: number
|
||||
parent_task_id: string | null
|
||||
custom_values?: CustomValueResponse[]
|
||||
version?: number
|
||||
}
|
||||
|
||||
interface TaskStatus {
|
||||
@@ -49,6 +50,7 @@ type ViewMode = 'list' | 'kanban' | 'calendar' | 'gantt'
|
||||
|
||||
const VIEW_MODE_STORAGE_KEY = 'tasks-view-mode'
|
||||
const COLUMN_VISIBILITY_STORAGE_KEY = 'tasks-column-visibility'
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
// Get column visibility settings from localStorage
|
||||
const getColumnVisibility = (projectId: string): Record<string, boolean> => {
|
||||
@@ -66,7 +68,7 @@ const saveColumnVisibility = (projectId: string, visibility: Record<string, bool
|
||||
}
|
||||
|
||||
export default function Tasks() {
|
||||
const { t } = useTranslation('tasks')
|
||||
const { t, i18n } = useTranslation('tasks')
|
||||
const { projectId } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { subscribeToProject, unsubscribeFromProject, addTaskEventListener, isConnected } = useProjectSync()
|
||||
@@ -75,6 +77,7 @@ export default function Tasks() {
|
||||
const [statuses, setStatuses] = useState<TaskStatus[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showCreateModal, setShowCreateModal] = useState(false)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [viewMode, setViewMode] = useState<ViewMode>(() => {
|
||||
const saved = localStorage.getItem(VIEW_MODE_STORAGE_KEY)
|
||||
return (saved === 'kanban' || saved === 'list' || saved === 'calendar' || saved === 'gantt') ? saved : 'list'
|
||||
@@ -105,6 +108,17 @@ export default function Tasks() {
|
||||
const columnMenuRef = useRef<HTMLDivElement>(null)
|
||||
const createModalOverlayRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Detect mobile viewport
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
return () => window.removeEventListener('resize', checkMobile)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [projectId])
|
||||
@@ -464,20 +478,112 @@ export default function Tasks() {
|
||||
}
|
||||
}
|
||||
|
||||
const getPriorityStyle = (priority: string): React.CSSProperties => {
|
||||
const getPriorityColor = (priority: string): string => {
|
||||
const colors: { [key: string]: string } = {
|
||||
low: '#808080',
|
||||
medium: '#0066cc',
|
||||
high: '#ff9800',
|
||||
urgent: '#f44336',
|
||||
}
|
||||
return colors[priority] || colors.medium
|
||||
}
|
||||
|
||||
const getPriorityStyle = (priority: string): React.CSSProperties => {
|
||||
return {
|
||||
width: '4px',
|
||||
backgroundColor: colors[priority] || colors.medium,
|
||||
backgroundColor: getPriorityColor(priority),
|
||||
borderRadius: '2px',
|
||||
}
|
||||
}
|
||||
|
||||
// Format date according to locale
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString(i18n.language, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
// Render task card for mobile view
|
||||
const renderTaskCard = (task: Task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
style={styles.taskCard}
|
||||
onClick={() => handleTaskClick(task)}
|
||||
>
|
||||
<div style={styles.taskCardHeader}>
|
||||
<div
|
||||
style={{
|
||||
...styles.taskCardPriority,
|
||||
backgroundColor: getPriorityColor(task.priority),
|
||||
}}
|
||||
/>
|
||||
<h3 style={styles.taskCardTitle}>{task.title}</h3>
|
||||
</div>
|
||||
|
||||
{task.description && (
|
||||
<p style={styles.taskCardDescription}>
|
||||
{task.description.length > 100
|
||||
? task.description.substring(0, 100) + '...'
|
||||
: task.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div style={styles.taskCardMeta}>
|
||||
{task.assignee_name && (
|
||||
<span style={styles.taskCardAssignee}>{task.assignee_name}</span>
|
||||
)}
|
||||
{task.due_date && (
|
||||
<span style={styles.taskCardDueDate}>
|
||||
{t('fields.dueDate')}: {formatDate(task.due_date)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={styles.taskCardFooter}>
|
||||
<div
|
||||
style={{
|
||||
...styles.taskCardStatus,
|
||||
backgroundColor: task.status_color || '#e0e0e0',
|
||||
}}
|
||||
>
|
||||
{task.status_name || t('status.noStatus')}
|
||||
</div>
|
||||
{task.subtask_count > 0 && (
|
||||
<span style={styles.taskCardSubtasks}>
|
||||
{t('subtasks.count', { count: task.subtask_count })}
|
||||
</span>
|
||||
)}
|
||||
{task.time_estimate && (
|
||||
<span style={styles.taskCardEstimate}>
|
||||
{t('fields.hours', { count: task.time_estimate })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile status change action */}
|
||||
<div style={styles.taskCardActions}>
|
||||
<select
|
||||
value={task.status_id || ''}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation()
|
||||
handleStatusChange(task.id, e.target.value)
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={styles.taskCardStatusSelect}
|
||||
>
|
||||
{statuses.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
@@ -494,7 +600,7 @@ export default function Tasks() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={isMobile ? styles.containerMobile : styles.container}>
|
||||
<div style={styles.breadcrumb}>
|
||||
<span onClick={() => navigate('/spaces')} style={styles.breadcrumbLink}>
|
||||
{t('common:nav.spaces')}
|
||||
@@ -510,65 +616,70 @@ export default function Tasks() {
|
||||
<span>{project?.title}</span>
|
||||
</div>
|
||||
|
||||
<div style={styles.header}>
|
||||
<div style={isMobile ? styles.headerMobile : styles.header}>
|
||||
<div style={styles.titleContainer}>
|
||||
<h1 style={styles.title}>{t('title')}</h1>
|
||||
<h1 style={isMobile ? styles.titleMobile : styles.title}>{t('title')}</h1>
|
||||
{isConnected ? (
|
||||
<span style={styles.liveIndicator} title={t('common:labels.active')}>
|
||||
● Live
|
||||
{'\u25CF'} {t('common:labels.live')}
|
||||
</span>
|
||||
) : projectId ? (
|
||||
<span style={styles.offlineIndicator} title={t('common:labels.inactive')}>
|
||||
○ Offline
|
||||
{'\u25CB'} {t('common:labels.offline')}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div style={styles.headerActions}>
|
||||
<div style={isMobile ? styles.headerActionsMobile : styles.headerActions}>
|
||||
{/* View Toggle */}
|
||||
<div style={styles.viewToggle}>
|
||||
<div style={isMobile ? styles.viewToggleMobile : styles.viewToggle}>
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
style={{
|
||||
...styles.viewButton,
|
||||
...(isMobile ? styles.viewButtonMobile : {}),
|
||||
...(viewMode === 'list' ? styles.viewButtonActive : {}),
|
||||
}}
|
||||
aria-label={t('views.list')}
|
||||
>
|
||||
{t('views.list')}
|
||||
{isMobile ? '\u2630' : t('views.list')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('kanban')}
|
||||
style={{
|
||||
...styles.viewButton,
|
||||
...(isMobile ? styles.viewButtonMobile : {}),
|
||||
...(viewMode === 'kanban' ? styles.viewButtonActive : {}),
|
||||
}}
|
||||
aria-label={t('views.kanban')}
|
||||
>
|
||||
{t('views.kanban')}
|
||||
{isMobile ? '\u25A6' : t('views.kanban')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('calendar')}
|
||||
style={{
|
||||
...styles.viewButton,
|
||||
...(isMobile ? styles.viewButtonMobile : {}),
|
||||
...(viewMode === 'calendar' ? styles.viewButtonActive : {}),
|
||||
}}
|
||||
aria-label={t('views.calendar')}
|
||||
>
|
||||
{t('views.calendar')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('gantt')}
|
||||
style={{
|
||||
...styles.viewButton,
|
||||
...(viewMode === 'gantt' ? styles.viewButtonActive : {}),
|
||||
}}
|
||||
aria-label={t('views.gantt')}
|
||||
>
|
||||
{t('views.gantt')}
|
||||
{isMobile ? '\u25A1' : t('views.calendar')}
|
||||
</button>
|
||||
{!isMobile && (
|
||||
<button
|
||||
onClick={() => setViewMode('gantt')}
|
||||
style={{
|
||||
...styles.viewButton,
|
||||
...(viewMode === 'gantt' ? styles.viewButtonActive : {}),
|
||||
}}
|
||||
aria-label={t('views.gantt')}
|
||||
>
|
||||
{t('views.gantt')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* Column Visibility Toggle - only show when there are custom fields and in list view */}
|
||||
{viewMode === 'list' && customFields.length > 0 && (
|
||||
{!isMobile && viewMode === 'list' && customFields.length > 0 && (
|
||||
<div style={styles.columnMenuContainer} ref={columnMenuRef}>
|
||||
<button
|
||||
onClick={() => setShowColumnMenu(!showColumnMenu)}
|
||||
@@ -598,97 +709,119 @@ export default function Tasks() {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!isMobile && (
|
||||
<button
|
||||
onClick={() => navigate(`/projects/${projectId}/settings`)}
|
||||
style={styles.settingsButton}
|
||||
aria-label={t('common:nav.settings')}
|
||||
>
|
||||
{t('common:nav.settings')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => navigate(`/projects/${projectId}/settings`)}
|
||||
style={styles.settingsButton}
|
||||
aria-label={t('common:nav.settings')}
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
style={isMobile ? styles.createButtonMobile : styles.createButton}
|
||||
>
|
||||
{t('common:nav.settings')}
|
||||
</button>
|
||||
<button onClick={() => setShowCreateModal(true)} style={styles.createButton}>
|
||||
+ {t('createTask')}
|
||||
{isMobile ? '+' : `+ ${t('createTask')}`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conditional rendering based on view mode */}
|
||||
{viewMode === 'list' && (
|
||||
<div style={styles.taskList}>
|
||||
{tasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
style={styles.taskRow}
|
||||
onClick={() => handleTaskClick(task)}
|
||||
>
|
||||
<div style={getPriorityStyle(task.priority)} />
|
||||
<div style={styles.taskContent}>
|
||||
<div style={styles.taskTitle}>{task.title}</div>
|
||||
<div style={styles.taskMeta}>
|
||||
{task.assignee_name && (
|
||||
<span style={styles.assignee}>{task.assignee_name}</span>
|
||||
)}
|
||||
{task.due_date && (
|
||||
<span style={styles.dueDate}>
|
||||
Due: {new Date(task.due_date).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
{task.time_estimate && (
|
||||
<span style={styles.timeEstimate}>
|
||||
Est: {task.time_estimate}h
|
||||
</span>
|
||||
)}
|
||||
{task.subtask_count > 0 && (
|
||||
<span style={styles.subtaskCount}>
|
||||
{task.subtask_count} subtasks
|
||||
</span>
|
||||
)}
|
||||
{/* Display visible custom field values */}
|
||||
{task.custom_values &&
|
||||
task.custom_values
|
||||
.filter((cv) => isColumnVisible(cv.field_id))
|
||||
.map((cv) => (
|
||||
<span key={cv.field_id} style={styles.customValueBadge}>
|
||||
{cv.field_name}: {cv.display_value || cv.value || '-'}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
isMobile ? (
|
||||
// Mobile card view
|
||||
<div style={styles.taskCardList}>
|
||||
{tasks.map(renderTaskCard)}
|
||||
{tasks.length === 0 && (
|
||||
<div style={styles.empty}>
|
||||
<p>{t('empty.description')}</p>
|
||||
</div>
|
||||
<select
|
||||
value={task.status_id || ''}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation()
|
||||
handleStatusChange(task.id, e.target.value)
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
...styles.statusSelect,
|
||||
backgroundColor: task.status_color || '#f5f5f5',
|
||||
}}
|
||||
>
|
||||
{statuses.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// Desktop list view with horizontal scroll for wide tables
|
||||
<div style={styles.tableWrapper}>
|
||||
<div style={styles.taskList}>
|
||||
{tasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
style={styles.taskRow}
|
||||
onClick={() => handleTaskClick(task)}
|
||||
>
|
||||
<div style={getPriorityStyle(task.priority)} />
|
||||
<div style={styles.taskContent}>
|
||||
<div style={styles.taskTitle}>{task.title}</div>
|
||||
<div style={styles.taskMeta}>
|
||||
{task.assignee_name && (
|
||||
<span style={styles.assignee}>{task.assignee_name}</span>
|
||||
)}
|
||||
{task.due_date && (
|
||||
<span style={styles.dueDate}>
|
||||
{t('fields.dueDate')}: {formatDate(task.due_date)}
|
||||
</span>
|
||||
)}
|
||||
{task.time_estimate && (
|
||||
<span style={styles.timeEstimate}>
|
||||
{t('fields.hours', { count: task.time_estimate })}
|
||||
</span>
|
||||
)}
|
||||
{task.subtask_count > 0 && (
|
||||
<span style={styles.subtaskCount}>
|
||||
{t('subtasks.count', { count: task.subtask_count })}
|
||||
</span>
|
||||
)}
|
||||
{/* Display visible custom field values */}
|
||||
{task.custom_values &&
|
||||
task.custom_values
|
||||
.filter((cv) => isColumnVisible(cv.field_id))
|
||||
.map((cv) => (
|
||||
<span key={cv.field_id} style={styles.customValueBadge}>
|
||||
{cv.field_name}: {cv.display_value || cv.value || '-'}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<select
|
||||
value={task.status_id || ''}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation()
|
||||
handleStatusChange(task.id, e.target.value)
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
...styles.statusSelect,
|
||||
backgroundColor: task.status_color || '#f5f5f5',
|
||||
}}
|
||||
>
|
||||
{statuses.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{tasks.length === 0 && (
|
||||
<div style={styles.empty}>
|
||||
<p>{t('empty.description')}</p>
|
||||
{tasks.length === 0 && (
|
||||
<div style={styles.empty}>
|
||||
<p>{t('empty.description')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{viewMode === 'kanban' && (
|
||||
<KanbanBoard
|
||||
tasks={tasks}
|
||||
statuses={statuses}
|
||||
onStatusChange={handleStatusChange}
|
||||
onTaskClick={handleTaskClick}
|
||||
/>
|
||||
<div style={styles.kanbanWrapper}>
|
||||
<KanbanBoard
|
||||
tasks={tasks}
|
||||
statuses={statuses}
|
||||
onStatusChange={handleStatusChange}
|
||||
onTaskClick={handleTaskClick}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'calendar' && projectId && (
|
||||
@@ -700,7 +833,7 @@ export default function Tasks() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{viewMode === 'gantt' && projectId && (
|
||||
{viewMode === 'gantt' && projectId && !isMobile && (
|
||||
<GanttChart
|
||||
projectId={projectId}
|
||||
tasks={tasks}
|
||||
@@ -720,7 +853,7 @@ export default function Tasks() {
|
||||
aria-modal="true"
|
||||
aria-labelledby="create-task-title"
|
||||
>
|
||||
<div style={styles.modal}>
|
||||
<div style={isMobile ? styles.modalMobile : styles.modal}>
|
||||
<h2 id="create-task-title" style={styles.modalTitle}>{t('createTask')}</h2>
|
||||
<label htmlFor="task-title" style={styles.visuallyHidden}>
|
||||
{t('fields.title')}
|
||||
@@ -786,7 +919,7 @@ export default function Tasks() {
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.5"
|
||||
placeholder="e.g., 2.5"
|
||||
placeholder={t('fields.estimatedHours')}
|
||||
value={newTask.time_estimate}
|
||||
onChange={(e) => setNewTask({ ...newTask, time_estimate: e.target.value })}
|
||||
style={styles.input}
|
||||
@@ -860,14 +993,22 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
containerMobile: {
|
||||
padding: '16px',
|
||||
maxWidth: '100%',
|
||||
margin: '0 auto',
|
||||
},
|
||||
breadcrumb: {
|
||||
marginBottom: '16px',
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
overflowX: 'auto',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
breadcrumbLink: {
|
||||
color: '#0066cc',
|
||||
cursor: 'pointer',
|
||||
padding: '4px',
|
||||
},
|
||||
breadcrumbSeparator: {
|
||||
margin: '0 8px',
|
||||
@@ -877,6 +1018,14 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '24px',
|
||||
flexWrap: 'wrap',
|
||||
gap: '12px',
|
||||
},
|
||||
headerMobile: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
titleContainer: {
|
||||
display: 'flex',
|
||||
@@ -888,6 +1037,11 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
fontWeight: 600,
|
||||
margin: 0,
|
||||
},
|
||||
titleMobile: {
|
||||
fontSize: '20px',
|
||||
fontWeight: 600,
|
||||
margin: 0,
|
||||
},
|
||||
liveIndicator: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
@@ -915,6 +1069,14 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
headerActionsMobile: {
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
},
|
||||
viewToggle: {
|
||||
display: 'flex',
|
||||
@@ -922,14 +1084,28 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
borderRadius: '6px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
viewToggleMobile: {
|
||||
display: 'flex',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
overflow: 'hidden',
|
||||
flex: 1,
|
||||
},
|
||||
viewButton: {
|
||||
padding: '8px 16px',
|
||||
padding: '10px 16px',
|
||||
backgroundColor: 'white',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
transition: 'background-color 0.2s, color 0.2s',
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
},
|
||||
viewButtonMobile: {
|
||||
flex: 1,
|
||||
padding: '12px 8px',
|
||||
fontSize: '16px',
|
||||
},
|
||||
viewButtonActive: {
|
||||
backgroundColor: '#0066cc',
|
||||
@@ -943,6 +1119,8 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
},
|
||||
createButton: {
|
||||
padding: '10px 20px',
|
||||
@@ -953,12 +1131,38 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
},
|
||||
createButtonMobile: {
|
||||
padding: '12px 20px',
|
||||
backgroundColor: '#0066cc',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
minHeight: '48px',
|
||||
minWidth: '48px',
|
||||
},
|
||||
// Table wrapper for horizontal scroll
|
||||
tableWrapper: {
|
||||
overflowX: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
},
|
||||
taskList: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
overflow: 'hidden',
|
||||
minWidth: '600px', // Ensure minimum width for horizontal scroll
|
||||
},
|
||||
// Kanban wrapper for horizontal scroll
|
||||
kanbanWrapper: {
|
||||
overflowX: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
paddingBottom: '16px',
|
||||
},
|
||||
taskRow: {
|
||||
display: 'flex',
|
||||
@@ -968,20 +1172,26 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
gap: '12px',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.15s ease',
|
||||
minHeight: '60px',
|
||||
},
|
||||
taskContent: {
|
||||
flex: 1,
|
||||
minWidth: 0, // Enable text truncation
|
||||
},
|
||||
taskTitle: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
marginBottom: '4px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
taskMeta: {
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
assignee: {
|
||||
backgroundColor: '#f0f0f0',
|
||||
@@ -996,12 +1206,103 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
color: '#767676', // WCAG AA compliant
|
||||
},
|
||||
statusSelect: {
|
||||
padding: '6px 12px',
|
||||
padding: '8px 12px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
cursor: 'pointer',
|
||||
color: 'white',
|
||||
minHeight: '36px',
|
||||
minWidth: '100px',
|
||||
},
|
||||
// Mobile card view styles
|
||||
taskCardList: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
},
|
||||
taskCard: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
padding: '16px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
taskCardHeader: {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: '12px',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
taskCardPriority: {
|
||||
width: '4px',
|
||||
height: '24px',
|
||||
borderRadius: '2px',
|
||||
flexShrink: 0,
|
||||
},
|
||||
taskCardTitle: {
|
||||
margin: 0,
|
||||
fontSize: '16px',
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.4,
|
||||
flex: 1,
|
||||
},
|
||||
taskCardDescription: {
|
||||
margin: '0 0 12px 0',
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
lineHeight: 1.4,
|
||||
},
|
||||
taskCardMeta: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '8px',
|
||||
marginBottom: '12px',
|
||||
fontSize: '13px',
|
||||
},
|
||||
taskCardAssignee: {
|
||||
backgroundColor: '#e3f2fd',
|
||||
color: '#1565c0',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
taskCardDueDate: {
|
||||
color: '#666',
|
||||
},
|
||||
taskCardFooter: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
taskCardStatus: {
|
||||
padding: '4px 10px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 500,
|
||||
color: 'white',
|
||||
},
|
||||
taskCardSubtasks: {
|
||||
fontSize: '12px',
|
||||
color: '#767676',
|
||||
},
|
||||
taskCardEstimate: {
|
||||
fontSize: '12px',
|
||||
color: '#0066cc',
|
||||
},
|
||||
taskCardActions: {
|
||||
marginTop: '12px',
|
||||
paddingTop: '12px',
|
||||
borderTop: '1px solid #eee',
|
||||
},
|
||||
taskCardStatusSelect: {
|
||||
width: '100%',
|
||||
padding: '12px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
fontSize: '14px',
|
||||
backgroundColor: 'white',
|
||||
minHeight: '48px',
|
||||
},
|
||||
empty: {
|
||||
textAlign: 'center',
|
||||
@@ -1025,36 +1326,47 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 1000,
|
||||
padding: '16px',
|
||||
},
|
||||
modal: {
|
||||
backgroundColor: 'white',
|
||||
padding: '24px',
|
||||
borderRadius: '8px',
|
||||
width: '450px',
|
||||
maxWidth: '90%',
|
||||
maxWidth: '100%',
|
||||
maxHeight: '90vh',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
modalMobile: {
|
||||
backgroundColor: 'white',
|
||||
padding: '20px',
|
||||
borderRadius: '12px',
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
maxHeight: '85vh',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
modalTitle: {
|
||||
marginBottom: '16px',
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
padding: '12px',
|
||||
marginBottom: '12px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '16px',
|
||||
boxSizing: 'border-box',
|
||||
minHeight: '48px',
|
||||
},
|
||||
textarea: {
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
padding: '12px',
|
||||
marginBottom: '12px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
minHeight: '80px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '16px',
|
||||
minHeight: '100px',
|
||||
resize: 'vertical',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
@@ -1066,12 +1378,13 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
},
|
||||
select: {
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
padding: '12px',
|
||||
marginBottom: '12px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '16px',
|
||||
boxSizing: 'border-box',
|
||||
minHeight: '48px',
|
||||
},
|
||||
fieldSpacer: {
|
||||
height: '12px',
|
||||
@@ -1083,19 +1396,25 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
marginTop: '16px',
|
||||
},
|
||||
cancelButton: {
|
||||
padding: '10px 20px',
|
||||
padding: '12px 20px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
minHeight: '48px',
|
||||
minWidth: '80px',
|
||||
},
|
||||
submitButton: {
|
||||
padding: '10px 20px',
|
||||
padding: '12px 20px',
|
||||
backgroundColor: '#0066cc',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
minHeight: '48px',
|
||||
minWidth: '80px',
|
||||
},
|
||||
customFieldsDivider: {
|
||||
height: '1px',
|
||||
@@ -1137,6 +1456,7 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
minHeight: '44px',
|
||||
},
|
||||
columnMenuDropdown: {
|
||||
position: 'absolute',
|
||||
@@ -1163,14 +1483,15 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||
columnMenuItem: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '10px 16px',
|
||||
padding: '12px 16px',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.15s',
|
||||
gap: '10px',
|
||||
minHeight: '44px',
|
||||
},
|
||||
columnCheckbox: {
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
columnLabel: {
|
||||
|
||||
Reference in New Issue
Block a user