Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added UI enhancements to the preview page #6221

Closed
wants to merge 7 commits into from
Closed

Added UI enhancements to the preview page #6221

wants to merge 7 commits into from

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Sep 4, 2023 •
edited by ghost
Loading

WHAT

🤖 Generated by Copilot at dd1b719

This file enhances the file preview dialog component by using a custom button, a smoother transition, and a better close button. These changes improve the user interface and experience of viewing files in the app.

Proposed Changes

  • Fixes Improve File Preview UI #4246
  • Added ButtonV2 Care UI components to make the design look consistent.
  • Gave the close button a modern look.
  • Removed the old school ease animation and added an aesthetic bottom to top moving, translate-y animation to make more sense from UI's perspective.

An image of the new tested solution.
image

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

  • Add specs that demonstrate bug / test a new feature.
  • Update product documentation.
  • Ensure that UI text is kept in I18n files.
  • Prep screenshot or demo video for changelog entry, and attach it to issue.
  • Request for Peer Reviews
  • Completion of QA

HOW

🤖 Generated by Copilot at dd1b719

  • Replace native button elements with custom ButtonV2 component in file preview dialog (link, link, link)
  • Modify transition and style of file preview dialog to slide up from bottom and have rounded top border and shadow (link)
  • Remove backdrop blur and black overlay from file preview dialog (link)

@yogeshbhutkar yogeshbhutkar requested a review from a team September 4, 2023 16:04
@yogeshbhutkar yogeshbhutkar requested a review from a team as a code owner September 4, 2023 16:04
@vercel
Copy link

vercel bot commented Sep 4, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
care-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 17, 2023 3:44pm

@netlify
Copy link

netlify bot commented Sep 4, 2023 •
edited
Loading

✅ Deploy Preview for care-egov-staging ready!

Name Link
🔨 Latest commit 4ee5122
🔍 Latest deploy log https://app.netlify.com/sites/care-egov-staging/deploys/65071e5bad646800080c50f3
😎 Deploy Preview https://deploy-preview-6221--care-egov-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

rithviknishad
rithviknishad requested changes Sep 4, 2023
View reviewed changes
Copy link
Member

@rithviknishad rithviknishad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. There are two shadows!
  2. The buttons make sense to be placed center bottom maybe?

@rithviknishad
Copy link
Member

@yogeshbhutkar consider using the Slideover component itself and pass slideFrom prop with "bottom" to re-use existing components!

@yogeshbhutkar
Copy link
Contributor Author

Patch 1

  • Removed duplicate shadows.
  • Centered the buttons.

Related Screenshot:
image

@rithviknishad
Copy link
Member

@yogeshbhutkar is this ready for review?

Just curious to know, was there a reason why you haven't reused the existing slideover component?

@rithviknishad
Copy link
Member

Also, you'll have to untrack ur package-lock.json changes as you are not changing any dependencies voluntarily

@yogeshbhutkar
Copy link
Contributor Author

Here's a SS for the newly migrated to SlideOver component preview page.

image

rithviknishad
rithviknishad requested changes Sep 17, 2023
View reviewed changes
Copy link
Member

@rithviknishad rithviknishad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything else LGTM! Nice work!

src/Components/Common/FilePreviewDialog.tsx Outdated Show resolved Hide resolved
src/Components/Common/FilePreviewDialog.tsx Outdated Show resolved Hide resolved
package-lock.json Outdated Show resolved Hide resolved
@yogeshbhutkar yogeshbhutkar mentioned this pull request Sep 17, 2023
Closed
6 tasks
@github-actions
Copy link

Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions.

@github-actions github-actions bot added the stale label Sep 25, 2023
@rithviknishad
Copy link
Member

Closed in favour of #6296

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rithviknishad rithviknishad rithviknishad requested changes

@mathew-alex mathew-alex Awaiting requested review from mathew-alex

Assignees
No one assigned
Labels
changes required stale
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Improve File Preview UI
3 participants
@yogeshbhutkar @rithviknishad @nihal467