Feat: Callout admin UX improvements #146
Draft
+2,613
−1,134
Conversation
This file contains 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
JumpLink
force-pushed
the
feat/callout-admin-ux
branch
from
9cf864c to
b0aa660
Compare
JumpLink
force-pushed
the
feat/callout-admin-ux
branch
from
c4a1bf8 to
6efdd78
Compare
Moved notification back to the top because it would require form.io customisations
Refactor the function name from `convertCalloutToSteps` to `convertCalloutToTabs` for clarity and consistency. Update the function implementation to correctly structure the returned data, ensuring that `slides` and `componentText` are extracted and passed appropriately. Adjust related components and interfaces to reflect these changes, improving the overall organization of the callout data handling.
…lity Adds lifecycle hooks for resetting state and managing intervals in new callout page. Implements tab click handling and updates tab selection management in CalloutHorizontalTabs. Introduces computed properties for tab items and slide management, improving user experience in the admin interface.
…tab component Add advanced options and translations support to the ContentFormTab component. Introduce a checkbox for advanced options and integrate a FormBuilderTranslations component for managing translations. Update sidebar tab props to accommodate new data structure, enhancing the form builder's functionality and user experience.
Introduce visibility filtering for tab items in AppTabs and SidebarTabs components. Implement a default tab fallback mechanism and enhance tab click handling to switch to the default tab when the selected tab is clicked again. This improves user experience by allowing for better navigation and organization of tab content.
Introduce an intro message tab in the sidebar for callouts. This change includes the addition of a new `IntroMessageTab` component and updates to the sidebar tabs interface to accommodate the new tab. The intro text is now editable via a rich text editor, enhancing the user experience by allowing customization of introductory content.
JumpLink
force-pushed
the
feat/callout-admin-ux
branch
from
81ea3aa to
c94e50b
Compare
Adds an "intro" section to both German and English locales, providing contextual help for users. Updates the titles for the end message to "Danke!" in German and "Thank you!" in English for clarity. Removes redundant intro entries from the content structure.
Update the translation key in the DatesAndDurationTab component to reflect the correct path for the input translations. This change ensures that the application retrieves the appropriate localized strings for the dates inputs in the callout creation process.
Refactor the callout sidebar tabs to streamline the interface and remove the unused TitleAndImageTabProps. Update the breadcrumb title to correctly reference the new structure. Adjust the tab order to exclude the title and image tab, ensuring a cleaner user experience. This change enhances maintainability and aligns the code with the current design requirements.
Introduce `AppToggleSwitch` and `AppToggleField` components to enhance the UI with toggle functionality. The `AppToggleSwitch` provides a customizable switch button, while `AppToggleField` integrates the switch with labels and descriptions for better user interaction. Replace existing radio group components with `AppToggleField` for improved usability in the admin callouts section.
Adds ARIA attributes to dropdown button for improved accessibility. Refactors click handling to prevent interaction when disabled. Implements keyboard navigation for dropdowns, allowing users to close the menu with Escape and Tab keys. Updates props interface for better type safety and clarity. Ensures notification icons are properly marked for screen readers.
Add a `disabled` prop to the AppTextArea component to control textarea interactivity. Implement unique IDs for aria-labels and form associations to enhance accessibility. Update the template to reflect these changes, ensuring proper aria attributes are set for better screen reader support.
Introduce AppFormBox and AppFormField components to enhance form structure and usability. AppFormBox provides a labeled container for form elements, while AppFormField allows for help text to assist users. These components improve the overall user experience and maintain consistency in form design.
computed properties for share title and description that sync with the main title and description when not overridden. Add watchers to update share fields automatically. Enhance locale files with new labels and descriptions for better clarity.
Renames `IntroTabProps` `IntroMessageTab` and `Tabs` tosidebarTabsData` clarity. Updates`AppRadioGroup` andActionButton` to use strongly typed props. Adds arias and des for better accessibility `AppImageUpload These changes code readability, maintainability and accessibility.
Remove old sidebar tab interfaces and replace them with updated types for better clarity and maintainability. Adjust the `convertStepsToCallout` function to use the new data structure, ensuring consistency across the application. This change improves type safety and aligns the code with recent component updates.
…functions Adds new notification messages for clipboard actions and updates the AppNotification component to support different display modes. Modifies the TitleAndImageTab to improve layout with a max width class. Refines slug generation logic and updates localization files for consistency. These changes enhance user experience and provide clearer feedback in the application.
Refactor sidebar tab components to extend a common interface for better type validation. Introduce a new `SidebarTabsData` interface to consolidate data types for all sidebar tabs. Remove unused props and streamline the data structure for improved clarity and maintainability. Add TODO comments for future enhancements.
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.
The goal of this pull request is to make the callout admin UX more modern and intuitive based on the new designs: