Design a UI to allow various kinds of alterations to referenced Media entities in a modal

Created on 28 February 2022, over 3 years ago
Updated 19 January 2023, over 2 years ago

Problem/Motivation

There are various requirements to be able to work with referenced Media entities from the referencing entity's form:

- ✨ Allow media items to be edited in a modal when using the field widget Postponed
- ✨ Media items translate items in modal Postponed
- ✨ Override media fields from the reference field Postponed

A single UI design is needed for all of these.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

πŸ“Œ Task
Status

Active

Version

10.1 ✨

Component
MediaΒ  β†’

Last updated about 7 hours ago

Created by

πŸ‡¬πŸ‡§United Kingdom joachim

Live updates comments and jobs are added and updated live.
  • Needs usability review

    Used to alert the usability topic maintainer(s) that an issue significantly affects (or has the potential to affect) the usability of Drupal, and their signoff is needed. When adding this tag, make it easy to review the issue. Make sure the issue summary describes the problem and the proposed solution. Screenshots usually help a lot! To get sign-off on issues with the "Needs usability review" tag, post about them in the #ux channel on Drupal Slack, and/or attend a UX meeting to demo the patch and get direct feedback from designers/UX folks/product management on next steps. If an issue represents a significant new feature, UI change, or change to the general "user experience" of Drupal, use Needs product manager review instead. See the scope of responsibilities for product managers.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡«πŸ‡·France DrDam

    #8 & #13 : will be good

  • πŸ‡§πŸ‡ͺBelgium flyke

    Hi, So if I am correct, the goal of this ticket is to:

    1. design how to edit from the media library widget
    2. design how the actual edit modal should look

    If I am not mistaken, number 1 is OK, we have concensus to use the pencil edit icon.

    So in order to get this issue fixed, we need a design with concensus for the edit modal, correct ?

  • πŸ‡¬πŸ‡§United Kingdom joachim

    > If I am not mistaken, number 1 is OK, we have concensus to use the pencil edit icon.

    Not exactly, because there can be more than one edit actions -- so far we have use cases for translate, edit, and override. Any number of these may be present at the same time.

  • πŸ‡§πŸ‡ͺBelgium flyke

    Thanks for the feedback. So for number 1, that should just be whatever the design of contextual links is ? So we have that already ?

  • πŸ‡«πŸ‡·France DrDam

    Hi,

    What's wrong with #8 proposal ?

    I'm agreed with the fact we don't need to have tabs in the modal. Those will be independent operation, so with a correct title on the modal you can check what you are doing

  • πŸ‡«πŸ‡·France duaelfr Montpellier, France

    Updated IS to get more feedback about #8's proposal.

  • πŸ‡¬πŸ‡§United Kingdom joachim

    About #8 - I think some sort of dropdown is the right way to go, as we have an extensible number of options here.

    However, I'm not sure about inventing a new icon + dropdown UI pattern, when we already have dropbuttons.

  • Status changed to Needs review 10 days ago
  • πŸ‡ΊπŸ‡ΈUnited States mlncn Minneapolis, MN, USA

    I agree with the proposals to re-use the contextual links pattern here (pencil icon in a circle plus dropdown). It may be a new pattern on the administrative theme while editing content, but it is not a new pattern for getting to editing from the front-end (edit block, edit teaser) nor for sitebuilding from the administration side (edit view). It is the right pattern to use in the media reference which by default has a preview much like what one would see on the front end.

    Note that browsing the media library as Grid also has the preview much like what one would see on the front end and it already uses the pencil icon so extending that to the contextual links style (the pencil icon opens a dropdown) is completely natural there as well, and for Table, the existing button dropdown should continue to be used.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Issue summary isn’t super clear what’s being suggested. To better help the Usability team it should be clear so they can quickly pick up

  • πŸ‡¬πŸ‡§United Kingdom joachim

    I don't see what I can add to the IS to make it clearer.

  • πŸ‡ΊπŸ‡ΈUnited States w01f

    This would be great to improve the default media options via extensible contextual links to:

    1. View
    2. Edit
    3. Translate
    4. Download β†’
    5. Delete

    I'm adding the Download one as a common use case by our users, but an extensible widget would allow a method to add additional options per use case.

Production build 0.71.5 2024