✨ Redesign Document Editor Sidebar with Improved UX#181
Merged
Conversation
- Updated versions of various dependencies in pnpm-lock.yaml for improved stability and security. - Added new CSS styles for the image gallery in document-editor.css to enhance layout and responsiveness. - Modified App.tsx to set a fixed sidebar width for better user experience. - Refactored DocumentEditor.tsx to ensure consistent thumbnail dimensions and improved layout for page organization.
…nctionality - Upgraded Baseline UI dependencies in package.json and pnpm-lock.yaml to version 0.48.5 for improved features and performance. - Adjusted CSS styles in document-editor.css for better layout and responsiveness of the image gallery. - Refactored DocumentEditor.tsx to implement a new toolbar layout, improve action button functionality, and ensure consistent thumbnail dimensions for document pages.
- Added a notification tag to indicate unsaved changes in the Document Editor. - Adjusted layout styles for better positioning of the notification. - Imported theme variables for improved styling consistency.
- Replaced existing icons with new ones for better clarity and functionality. - Swapped the rotate action icons and updated their corresponding aria-labels. - Introduced new actions for importing documents, moving pages left and right, and exporting selected pages. - Enhanced the toolbar layout for improved user experience.
- Added a ResizeObserver to dynamically adjust the toolbar's maximum width based on the container size. - Updated CSS to enhance spacing in the toolbar layout for improved visual consistency. - Introduced a new state variable to manage the maximum width of the toolbar.
- Updated CSS for the toolbar to improve button padding and alignment. - Adjusted the DocumentEditor component to include a reference for the toolbar container and refined layout properties for better responsiveness. - Enhanced the styling of menu triggers for improved visual consistency.
- Centered toolbar items in the CSS for better alignment. - Introduced container queries for responsive header layout in the Document Editor. - Refactored thumbnail dimensions to use constants for consistency. - Removed unused state and effects related to toolbar resizing for cleaner code.
ritz078
changed the title
- Modified CSS for the toolbar to improve button layout and responsiveness. - Replaced toolbar icon with a new design for better clarity. - Introduced state management for unsaved changes, allowing users to dismiss the unsaved changes notification. - Adjusted action button labels and sizes for improved user experience.
Contributor
Author
miguelcalderon
approved these changes
Feb 2, 2026
Contributor
miguelcalderon
left a comment
miguelcalderon
left a comment
There was a problem hiding this comment.
I've had an initial glance at the demo and I like the new UI very much. Things that I'd improve, but no deal breakers:
- Cannot drag and drop to move pages around.
- Personally I don't like flexible icon spacing, but that may be just me.
Thank you for this update!
Contributor
Author
|
Thank you for the review.
Intentionally cut the scope. If ever required, it can be easily added.
That was a design requirement: https://pspdfkit.slack.com/archives/C08U3KQ5TAQ/p1770020956600179?thread_ts=1766756481.913789&cid=C08U3KQ5TAQ |
- Replaced the inline definition of the document editor toolbar item with a dedicated function to improve readability and maintainability. - Added a `selected` property to the toolbar item for better state management. - Updated the toolbar items dynamically based on the current view state to enhance user experience.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
User problem
The Document Editor sidebar in the UI customization example had an outdated design that didn't align with modern UX patterns. The toolbar was not responsive, making it difficult to use on smaller screen sizes. Additionally, users had no visual indication when they had unsaved changes, which could lead to accidental data loss.
How it is solved
The sidebar has been completely redesigned with a new layout structure featuring a proper header, collapsible toolbar with icon buttons, and responsive behavior using CSS container queries. An "unsaved changes" notification badge now appears when users have pending operations. The toolbar automatically adapts to narrower widths by switching from a 3-column to 2-column layout.
What this enables
How to test
Manual QA steps
Risks / notes
@ts-expect-errorfor a privatelayoutTransitionAPI on ImageGallery - may need updates if Baseline UI changes