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.

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

Feature: Link Picker modal refactor #2477

Merged
merged 11 commits into from
Oct 23, 2024

Conversation

leekelleher
Copy link
Member

@leekelleher leekelleher commented Oct 22, 2024

Description

A refactoring of the Link Picker modal UI.

Fixes and new features include...

  • Sets the default modal size to "medium"
  • Adds hideTarget flag
  • Swaps the inline document & media trees with the corresponding input pickers (in their own modals)
  • Populates the link title (if empty) with the selected document/media name
  • Shows a media item preview; shows document uui-ref-node component
  • Uses <umb-property-layout> component for UI consistency

Fixes umbraco/Umbraco-CMS#16838
Fixes umbraco/Umbraco-CMS#16596
Fixes umbraco/Umbraco-CMS#17016

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

How to test?

Test using either the Multi-URL Picker, TinyMCE or Tiptap editors. Can you add external links, pick a document or media item? Add, edit existing data, etc.

Screenshots (if appropriate)

Recording.2024-10-22.181543.mp4

Copy link
Contributor

@madsrasmussen madsrasmussen left a comment

Choose a reason for hiding this comment

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

It looks great!

I have a few minor UX tweaks for consistency. Firstly, we can remove the "Edit" action on the reference list items since we can already click on the name to achieve the same result. Additionally, we should follow the same convention inside the link picker modal when a document is selected. We should remove the "Open" action and make it possible to click the name.

as the `uui-ref-node` link title will open the edit modal.

Refactored, so that the `uui-action-bar` isn't rendered in `readonly` mode.
as the `uui-ref-node` link title will open the edit workspace modal (if configured).

Refactored, so that the `uui-action-bar` isn't rendered in `readonly` mode.
@leekelleher
Copy link
Member Author

Thanks @madsrasmussen!

Changes made...

  • Multi-URL Picker (umb-input-multi-url), removed the "Edit" action (as the uui-ref-node link title will open the edit link modal).
  • Document Picker (umb-input-document), removed the "Open" action and added the feature to the uui-ref-node link title (to open the edit document workspace modal).
  • In both components, hidden the uui-action-bar if in readonly mode.

Copy link
Contributor

@madsrasmussen madsrasmussen left a comment

Choose a reason for hiding this comment

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

🥳

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants