Skip to content

Latest commit

 

History

History
198 lines (182 loc) · 6.79 KB

ROADMAP.md

File metadata and controls

198 lines (182 loc) · 6.79 KB

Django Material Development Roadmap

This file tracks the development progress of the Django Material project. As items are completed, mark them with [x].

Core Components

  • Base HTML templates
  • Button component
    • Basic implementation (filled button)
    • Text button
    • Outlined button
    • Elevated button
    • Icon button
    • Segmented button
    • Floating action button
  • Form controls
    • Input fields
      • text.html - Basic text input
      • textarea.html - Multiline text input
      • email.html - Email input with validation
      • password.html - Secure password input
      • number.html - Numeric input
      • search.html - Search input
      • url.html - URL input with validation
      • tel.html - Telephone number input
      • color.html - Color picker
      • date.html - Date picker
      • time.html - Time picker
      • datetime.html - Combined date and time
      • file.html - File upload
      • clearable_file_input.html - File upload with clear option
      • hidden.html - Hidden input
      • multiple_hidden.html - Multiple hidden inputs
      • multiple_input.html - Multiple text inputs
      • attrs.html - Attributes helper
    • Selection controls
      • select.html - Dropdown select
      • select_date.html - Date selection widget
      • select_option.html - Individual select option
      • checkbox.html - Checkbox control
      • checkbox_option.html - Individual checkbox option
      • checkbox_select.html - Multiple checkbox selection
      • radio.html - Radio button control
      • radio_option.html - Individual radio option
    • Complex inputs
      • input_option.html - Input with options
      • multiwidget.html - Multiple widget container
      • splitdatetime.html - Split date and time inputs
      • splithiddendatetime.html - Split date/time with hidden
    • Advanced form components
      • autocomplete.html - Autocomplete text input
      • editor.html - Rich text editor
      • formset.html - Form set container
      • json.html - JSON data editor
      • select_dependent.html - Dependent/cascading select
      • total.html - Calculation total field
  • Card component
    • Elevated card
    • Filled card
    • Outlined card
    • Card enhancement components
      • hover_border attribute - Show border only on hover
      • card_menu.html - Card action menu
      • card_menu_item.html - Menu item for card actions
      • card_actions.html - Container for card action buttons
      • card_divider.html - Visual divider for card sections
      • card_media.html - Media container for cards
      • card_content_group.html - Group related content within card
  • Dialog/Modal
  • App bar
  • Breadcrumbs navigation
  • Navigation drawer
    • Drawer components
      • container.html - Main drawer container
      • header.html - Drawer header with logo/title
      • group.html - Group of navigation items with title
      • item.html - Navigation item with icon and label
      • divider.html - Content divider
    • Drawer variants
      • Standard drawer - Full navigation with labels
      • Rail navigation - Icon-only compact navigation
      • Modal drawer - Overlay on top of content (with backdrop)
    • Features
      • Responsive behavior - Adapt to screen size
      • Nested navigation - Expandable sections with children
      • Active state - Highlight current section
      • Icons support - Items with icon attribute for Material icons
      • Rounded corners - Custom styling for improved design
  • Tabs
  • Data table
    • Core table components
      • table.html - Main table container
      • table_header.html - Table header row
      • table_body.html - Table body container
      • table_row.html - Table row component
      • table_cell.html - Table cell component
    • Data table features
      • Sorting - Column sorting with indicators
      • Filtering - Advanced filtering options
      • Pagination - Page navigation controls
      • Row actions - Action buttons/menus for rows
      • Selection - Row selection with checkboxes
      • Expandable rows - Collapsible detail views
    • Styling and behavior
      • _table.scss - Base table styling
      • _filter.scss - Filter component styling
      • _pagination.scss - Pagination controls styling
      • _actions.scss - Row actions styling
      • sort.js - Sorting behavior implementation
      • filter.js - Filtering functionality
      • pagination.js - Pagination controls handling
      • actions.js - Row actions implementation
  • List components
    • Container component
    • List items
      • One-line item
      • Two-line item
      • Three-line item
    • Supporting elements
      • Leading icons/avatars/thumbnails
      • Trailing actions
      • Dividers
      • Subheaders
  • Snackbar/Toast notifications
  • Progress indicators

Documentation

  • Initial setup with MkDocs
  • Component usage guide
  • Installation instructions
  • Theme customization guide
  • Accessibility guidelines
  • API reference
  • Example implementations

Infrastructure

  • Project structure setup
  • Integration with django-cotton
  • Testing framework
    • Unit tests for components
    • Integration tests
    • Visual regression tests
  • CI/CD pipeline
  • Package distribution
    • PyPI publishing
    • Release process documentation

Demo Application

  • Basic Django project setup
  • Component showcase
  • Form handling examples
  • Authentication flow demo
  • CRUD operation examples
  • Responsive layout examples

Optimization & Features

  • Performance optimization
  • Responsive design improvements
  • RTL language support
  • Theme customization
    • Color schemes
    • Typography
    • Component density
  • Dark mode support
  • Accessibility compliance (WCAG 2.1 AA)

Integration

  • HTMX integration examples
  • Alpine.js integration
  • Django admin theme

Next Milestone Tasks

  1. Implement basic text input components (text.html, email.html, password.html)
  2. Create checkbox and radio button components
  3. Develop select dropdown components
  4. Implement date/time input components
  5. Add remaining card enhancement components
    • Card actions container
    • Card media support
  6. Begin data table implementation with core components
    • Basic table structure
    • Sorting functionality
    • Pagination controls
  7. Implement app bar component
    • Top navigation bar
    • Search functionality
    • Responsive collapsing
  8. Finish installation documentation
  9. Add unit tests for existing components
  10. Create form controls, enhanced cards, and data table showcase pages in demo app