WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#28844 closed enhancement (fixed)

Media Grid: Better Attachment Details modal UI

Reported by: ericlewis Owned by: helen
Milestone: 4.0 Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: ui Cc:
PR Number:

Description

As we spoke about in dev chat today, the edit media modal is currently split in half, giving up a lot of real estate for images.

Let's fine tune the view styles here.

Attachments (11)

28844.diff (7.2 KB) - added by ericlewis 5 years ago.
28844.diff.jpg (442.3 KB) - added by ericlewis 5 years ago.
28844.2.diff (1.8 KB) - added by ericlewis 5 years ago.
28844.3.diff (13.9 KB) - added by ericlewis 5 years ago.
28844.4.diff (22.9 KB) - added by helen 5 years ago.
28844.5.diff (23.3 KB) - added by ericlewis 5 years ago.
28844.6.diff (23.4 KB) - added by helen 5 years ago.
attachment-details-modal-2.png (1.2 MB) - added by melchoyce 5 years ago.
28844.7.diff (10.5 KB) - added by ryelle 5 years ago.
28844.8.diff (10.7 KB) - added by helen 5 years ago.
28844.9.diff (3.1 KB) - added by ocean90 5 years ago.

Download all attachments as: .zip

Change History (30)

@ericlewis
5 years ago

@ericlewis
5 years ago

#1 @ericlewis
5 years ago

See attachment:28844.diff.jpg for a sample of attachment:28844.diff.

  • Remove the modal padding, taking over the entire screen
  • Shrink attachment info column down, let the image breathe
  • Move all details to the right column
  • Make the "Saved." and spinner work

#2 @ocean90
5 years ago

  • Milestone changed from Awaiting Review to 4.0
  • Summary changed from In media grid, show more of an image attachment to Media grid: Show more of an image attachment

Question related to this: Why is the modal by default so huge? I think the size of the Edit Image modal should be enough here too. For more space we still have the Post UI for attachments.

Looking at the screenshot: There should be a line between details and meta.

This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.


5 years ago

This ticket was mentioned in IRC in #wordpress-dev by ericandrewlewis. View the logs.


5 years ago

@ericlewis
5 years ago

@ericlewis
5 years ago

#5 @ericlewis
5 years ago

Ignore attachment:28844.2.diff.

In attachment 28844.3.diff,

  • Bring back the modal padding so it's a real modal.
  • Remove router (i.e. tabs)
  • Add a title to the modal for parity with the Post edit image modal
  • Move pagination to upper right, to be styled by someone else :)
  • Add an "actually edit" link, exact wording TBD.

#6 @helen
5 years ago

#28918 was marked as a duplicate.

#7 @DrewAPicture
5 years ago

Related-ish: #28915

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

@helen
5 years ago

@ericlewis
5 years ago

@helen
5 years ago

#9 @helen
5 years ago

  • Summary changed from Media grid: Show more of an image attachment to Media Grid: Better Attachment Details modal UI

#10 @helen
5 years ago

In 29204:

Media Grid Attachment Details modal UI improvements:

  • Align better visually with the existing media modal and the post image edit modal.
  • Add back a link to the full attachment edit screen (post.php).
  • Add a title to the modal and move prev/next buttons next to the more-consistent close button.
  • Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button.

Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup.

props ericlewis, helen, melchoyce. see #28844. fixes #28915.

#11 @melchoyce
5 years ago

attachment-details-modal-2.png is the most recent mockup we're working off of. Note: there may have been some design changes since then, such as deciding to not make each section collapsible.

#12 @michalzuber
5 years ago

Deleting last image with link in modal (detail) the dialog should close. I thought in didn't remove the image, because it still showed it to me.
Screencast: https://youtu.be/KLg_41otGJk

Checking element count in deleteAttachment media-views.js#L6350 might help.

Last edited 5 years ago by michalzuber (previous) (diff)

@ryelle
5 years ago

#13 @ryelle
5 years ago

28844.7.diff implements Mel's mockup. In addition to the CSS, there's some markup changes made to the template, and I also duplicated the onToggleAdvanced/ToggleAdvanced functions from the ImageDetails modal to collapse the attachment meta.

#14 @wonderboymusic
5 years ago

In 29289:

Media Grid: UI improvements to Attachment modal.

Props ryelle.
See #28844.

@helen
5 years ago

@ocean90
5 years ago

#15 @helen
5 years ago

I am reverting the last set of styling + expand/collapse changes - I understand the desire to align with the single image details modal when editing post content, but that modal was made slightly different because it is a totally different context, and in this case I think we are better off staying more aligned with the media modal. I also find it to be visually heavy, and far too tall. ocean90 experimented with tightening it up a bit, but as I kept pushing on it, we ended up essentially where we started before the re-styling.

#16 @helen
5 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 29436:

Revert styling changes to the Attachment Details modal from [29289]. fixes #28844.

#17 @helen
5 years ago

In 29496:

Small screen responsive for attachment details modal. see #28844.

#18 @ocean90
5 years ago

In 29499:

Autoprefixer for [29496].

see #28844.

#19 @SergeyBiryukov
5 years ago

In 29537:

Don't display an empty "Uploaded To" link in the media modal after [29436].

see #28844.

Note: See TracTickets for help on using tickets.