WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 8 months ago

#30154 assigned defect (bug)

Improve Media Modal UI at small-screen sizes: Redux

Reported by: mor10 Owned by: wonderboymusic
Milestone: Future Release Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords: good-first-bug has-patch
Focuses: ui, javascript Cc:

Description

Whereas various issues were resolved in #27423, the Image Flow group proposes a realignment of the approach regarding the Media Modal UI, and in particular the Edit Image modal on small screen sizes.

The following relates to current behaviour in 4.1-alpha-30080 as it appears in the flow on small screens (tested on vertical Nexus 4 and iPhone 5):

The Edit Image modal is by and large not functional on small screens. The crop function does not work and the remaining buttons (rotate, flip, etc) as well as the preview image are largely covered by the right-hand tool panel.

Considering the current work being done on Image Flow and the fact that the cropping will not work in mobile our proposal is to make the Edit Image function unavailable on smaller screens by hiding the link / button that takes the user to the modal. The guiding philosophy here is that we provide only tools that can actually be used to the user. Since editing for all practical purposes is non-functional it is disabled when appropriate.

Alternatively the design pattern from the Image Details modal can be carried over: Leave the button row and image preview at the top (image scaled to fit available screen space, crop button removed) and move the right-hand panel down below.

In relation to other issues referenced in #27423 on single-image selection from the library:

  • On selecting an image to add the metadata panel slides in from the right. Once the panel is visible it cannot be collapsed making the images on right hand column unavailable.
  • When closing and re-opening the modal the pane remains extended.
  • To regain access to the full grid the post must be closed and reopened.

Attachments (8)

Screenshot_2014-10-28-17-04-35.png (179.2 KB) - added by mor10 3 years ago.
Once image meta panel is displayed it covers the gallery. Meta panel can not be closed.
Screenshot_2014-10-28-17-04-58.png (180.2 KB) - added by mor10 3 years ago.
Image editor panel covers most buttons and preview image. Crop is non-functional.
Screenshot_2014-10-28-17-04-20.png (363.1 KB) - added by mor10 3 years ago.
Edit Media modal drops meta panel down below image to allow for small screen use.
image-edit-30154-1.diff (7.5 KB) - added by HristoK 3 years ago.
Diff for wp-admin/includes/image-edit.php
media-views-30154-1.diff (796 bytes) - added by HristoK 3 years ago.
Diff for wp-includes/css/media-views.css
Screenshot_2015-05-07-18-44-07.png (261.1 KB) - added by HristoK 3 years ago.
Preview of the changes.
Screenshot_2015-05-07-18-44-12.png (126.3 KB) - added by HristoK 3 years ago.
Preview of the changes.
30154.diff (18.9 KB) - added by certainstrings 12 months ago.
Responsive Modal Views

Download all attachments as: .zip

Change History (20)

This ticket was mentioned in Slack in #feature-imageflow by mor10. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by teamadesign. View the logs.


3 years ago

@mor10
3 years ago

Once image meta panel is displayed it covers the gallery. Meta panel can not be closed.

@mor10
3 years ago

Image editor panel covers most buttons and preview image. Crop is non-functional.

@mor10
3 years ago

Edit Media modal drops meta panel down below image to allow for small screen use.

#3 @iseulde
3 years ago

  • Version changed from trunk to 4.0

This ticket was mentioned in Slack in #feature-imageflow by mor10. View the logs.


3 years ago

#5 @wonderboymusic
3 years ago

  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to 4.3

#6 @wonderboymusic
3 years ago

#32216 was marked as a duplicate.

@HristoK
3 years ago

Diff for wp-admin/includes/image-edit.php

@HristoK
3 years ago

Diff for wp-includes/css/media-views.css

@HristoK
3 years ago

Preview of the changes.

@HristoK
3 years ago

Preview of the changes.

#7 @HristoK
3 years ago

I've submitted patches that hide the crop button and crop options and moved the right-hand panel below.

#8 @obenland
3 years ago

  • Owner set to wonderboymusic
  • Status changed from new to assigned

This ticket was mentioned in Slack in #core by jorbin. View the logs.


2 years ago

#10 @jorbin
2 years ago

  • Milestone changed from 4.3 to Future Release

With no Activity in the past 8 weeks and Beta1 starting very soon, punting this back to future release.

#11 @certainstrings
12 months ago

I've ran through the supplied patch and adjusted conflicts with current core code. I believe a fix for @mor10's media details image, Screenshot_2014-10-28-17-04-35.png, should go into another ticket.

FYI, cleaned up this ticket at WordCamp US 2016.

Last edited 12 months ago by certainstrings (previous) (diff)

@certainstrings
12 months ago

Responsive Modal Views

#12 @welcher
8 months ago

  • Keywords has-patch added
Note: See TracTickets for help on using tickets.