Search and UX Improvements #528
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Updated border and flex properties in ListItemStyle for better readability. - Adjusted border-radius and background color in Selecter and TimelineNavWrapper for consistency. - Enhanced TimelineNavButton with improved hover and active states. - Refactored various styled components for better maintainability and visual consistency. - Updated snapshots to reflect changes in component structure and styling.
- Commented out the triangle icon rendering for conditional display. - Updated TimelineItemContentWrapper with improved box-shadow and padding for better visual hierarchy. - Adjusted margins and paddings in CardTitle and CardSubTitle for consistent spacing. - Refined TimelineContentDetailsWrapper and scrollbar styles for improved usability and aesthetics.
- Introduced search-related props and methods in TimelineToolbar for handling search queries, navigation between matches, and clearing search. - Implemented debounced search logic in the Timeline component to enhance performance. - Enhanced UI with search input and navigation buttons for previous and next matches. - Updated styles for search components to improve usability and aesthetics.
- Changed cardDetailsColor in darkTheme from '#ffff0f' to '#ffffff' for better contrast. - Added overflow: hidden to TimelineItemContentWrapper and MediaWrapper to prevent content overflow. - Introduced ImageWrapper styled component to ensure images fit within card boundaries. - Increased SVG dimensions in TimelineNavButton for improved visibility.
… new media handling - Added ButtonTexts interface to GlobalContext for customizable button text labels. - Introduced Video component for improved video handling within timeline cards. - Enhanced TimelineToolbar with additional props for active timeline item and total items. - Updated TimelineControl to include screen reader support and improved navigation accessibility. - Refactored timeline styles for better layout and usability, including new control wrappers. - Improved accessibility features across timeline components, including ARIA roles and labels.
…d type consistency - Renamed padding property to $padding in common type for clarity. - Added padding property to Content interface for backward compatibility. - Updated styled components to utilize $padding for conditional padding application. - Enhanced type definitions in TimelineCardTitleModel and TimelineContentModel to support ReactNode. - Refactored TimelineCardContent to ensure consistent handling of title and detailed text types.
- Added ripple and pulse animations to timeline point shapes for improved interactivity. - Updated TimelinePoint component to support active and disabled states with appropriate ARIA attributes. - Enhanced styling for hover and active effects in timeline shapes for better user experience. - Improved accessibility features, including focus styles and button behavior for disabled states.
- Updated README.md to include a new section on search functionality for the timeline component. - Added configuration options for search-related props, including placeholders and aria-labels for accessibility. - Provided usage examples demonstrating the integration of search features within the Chrono component.
…cleanup improvements - Updated useSlideshow hook to utilize requestAnimationFrame for smoother animations. - Improved cleanup logic to handle both timers and animation frames effectively. - Enhanced setupTimer function to account for active and slideshow states. - Added new useEffect hooks for better management of active state changes and cleanup. - Refactored timer completion handling for improved readability and functionality.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
- Removed unused imports and components from the TimelineToolbar for improved clarity and maintainability. - Added a new button text entry for 'timelinePoint' in utility tests to enhance coverage and functionality.
…lements - Removed unused imports from timeline styles and title memo components for improved clarity. - Eliminated the TriangleIconWrapper import and Video component from timeline card content to streamline the codebase.
…ne component logic - Changed the project key in .vscode/settings.json for better project identification. - Consolidated import statements in timeline-toolbar component for improved readability. - Refactored button state determination logic in timeline-toolbar for clarity. - Enhanced iframe message handling in timeline component to ensure proper target origin. - Removed unused code and comments in timeline-card-content for cleaner implementation. - Updated snapshot tests to reflect changes in rendered components.
… targeting - Introduced helper functions to find target elements and update timeline positions for better code organization. - Refactored handleTimelineItemClick to utilize the new helper functions, enhancing readability and maintainability. - Removed unused video MIME type determination function from timeline-card-content for cleaner implementation.
- Removed the mode variable and associated logic for determining triangle icon visibility in ContentFooter. - Retained theme context usage for potential future styling needs, streamlining the component's implementation.
- Eliminated unused props such as triangleDir and isNested from ContentFooter and CardMedia components for cleaner implementation. - Simplified conditional styling in TimelineItemContentWrapper by using logical AND instead of ternary operator. - Cleaned up imports and removed unnecessary role attributes in TimelinePoint and TimelineVertical components to enhance clarity and maintainability.
- Removed unused imports from subtitle-memo and content-footer components for better clarity. - Refactored play/pause handling in timeline-control to separate functions for improved readability and maintainability. - Updated role attributes in timeline-horizontal to use semantic HTML elements for better accessibility.
…tent - Updated the logic for displaying details text in the TimelineCardContent component to enhance clarity. - Consolidated conditions to improve readability while maintaining functionality.
- Updated TypeScript configurations for Cypress to specify root directory. - Removed commented-out test cases in horizontal and vertical timeline specs for clarity. - Simplified state initialization in GlobalContext to use nullish coalescing for better type safety. - Added data-testid attributes to maximize and minimize icons for improved testing capabilities. - Refactored timeline-toolbar and timeline-card components to use nullish coalescing for default values, enhancing readability and maintainability.
- Refactored timeline card media components to improve organization and readability. - Introduced new components for media handling, including ImageDisplay, VideoPlayer, and YoutubePlayer. - Created custom hooks for toggle controls and view options to streamline state management. - Updated ContentDisplay to encapsulate text rendering logic, enhancing modularity. - Cleaned up imports and removed unused code for better maintainability.
…cies - Removed deprecated stylelint processors and plugins, replacing them with updated configurations. - Added new dependencies for eslint and postcss to improve linting and styling capabilities. - Cleaned up package.json and pnpm-lock.yaml to reflect the latest versions and ensure compatibility. - Refactored timeline component styles for better readability and maintainability. - Improved code formatting and consistency across various components.
…mponents - Updated ContentDisplay component to use readonly props for improved immutability and type safety. - Refactored ContentDisplay to separate props handling into a functional component for better clarity. - Cleaned up imports and adjusted type definitions to address React 19 compatibility issues. - Added global TypeScript definitions to resolve JSX element type conflicts. - Expanded tsconfig.json to include src/types for better type management.
- Updated focus styles in timeline-horizontal-card to use nullish coalescing for better default handling. - Enhanced aria-label attributes in timeline-point and timeline-card-media components for improved accessibility. - Refactored ContentDisplay component to use a functional component structure, ensuring better type safety and clarity. - Cleaned up imports and adjusted type definitions across various components for consistency and maintainability.
- Consolidated keyboard event handling logic in the Timeline component for improved clarity and maintainability. - Introduced a switch statement for mode-specific key actions, enhancing readability. - Cleaned up imports in timeline-card-media components and adjusted type definitions for consistency. - Updated the useYouTubeDetection hook to correct regex syntax for URL validation. - Refactored timeline-point to utilize nullish coalescing for better default handling in accessible labels.
- Memoized the onElapsed handler in the Timeline component to prevent unnecessary function creation on each render, improving performance. - Simplified the useEffect logic in TimelineCardContent by removing the mounted flag, enhancing clarity and reducing complexity. - Cleaned up conditional checks for focus and slideshow activation to streamline the component's behavior.
…onent - Memoized the conversion of iconChildren to an array using useMemo to prevent unnecessary re-renders, improving performance. - Updated the prop name from iconChildColln to iconChildren for better clarity and consistency.
…ontent - Updated styled components in timeline-card-content.styles.ts to include type parameters for improved type safety. - Ensured consistent theming by specifying the Theme type in baseCardStyles, scrollbarStyles, and Mark components.
- Added a RefObject for the search input in TimelineToolbarProps to improve focus management. - Updated TimelineToolbar to utilize the passed searchInputRef, ensuring consistent focus behavior. - Enhanced the Timeline component to maintain the search query during navigation and return focus to the search input after actions. - Improved cursor positioning in the search input for better user experience.
…nality - Refactored the Timeline component to utilize custom hooks for managing timeline mode, navigation, media handling, and search functionality, improving code organization and reusability. - Introduced a new TimelineView component to encapsulate rendering logic for different timeline modes, enhancing clarity and separation of concerns. - Updated the useTimelineSearch hook to streamline search logic and improve focus management for search input. - Enhanced the useTimelineNavigation hook to optimize item navigation and keyboard handling, improving user experience. - Implemented useTimelineScroll and useTimelineMedia hooks for better scroll management and media visibility handling. - Cleaned up unused code and improved type safety across components, ensuring better maintainability and performance.
- Streamlined the logic for persisting the search query by removing unnecessary conditional checks, ensuring the search query is always set when a search is performed. - Improved focus management for the search input after navigation actions, enhancing user experience.
- Changed background and hover colors for the active state to enhance visual consistency with the theme. - Adjusted box-shadow for improved aesthetics. - Updated SVG color handling for better clarity in styling.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Refactor: Timeline Enhancements, Video Support, and Toolbar Overhaul
This PR significantly refactors timeline components, adding search support and overhauling the toolbar.
Key Changes
Enhanced Styling: Implemented a new styling system for better flexibility and theme support.
Video Support: Added a new component for embedding video in timeline cards.
Toolbar Overhaul: Revamped toolbar functionality for improved navigation and interaction.
Card Content & Media: Updated handling of media and content within timeline cards.
Search: New search box to search through the timeline contents
New Files
src/components/timeline-elements/timeline-card-media/video.tsxsrc/components/timeline-control/timeline-control.styles.tsxsrc/components/timeline/timeline.style.tsxModified Components
Timeline Card Content(Major refactor)Timeline Control(Significant updates)Timeline Horizontal(Substantial modifications)Timeline Toolbar(Major enhancement)Timeline Component(Extensive updates)Other Updates
Multiple style files updated.
Timeline models updated.
Snapshot and test files modified.
Utility functions updated.
Please review the changes, focusing on the new video feature, toolbar, and styling system.
Additional context
What is the purpose of this pull request?
Before submitting the PR, please make sure you do the following
fixes #123).