WordPress.org

Make WordPress Core

#27423 closed defect (bug) (fixed)

Improve Media Modal UI at small-screen sizes

Reported by: gcorne Owned by: iseulde
Milestone: 4.0 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch
Focuses: ui, javascript Cc:

Description

The media modal has a number of issues at small screen sizes. It would be nice if we could fix them all.

  1. When there are more than a couple items in the modal menu, the menu will overlap the tabs.
  2. The select box for filtering in the browse state is too narrow.
  3. The search box is in the wrong location
  4. When an item is selected, the Attachment Details cannot be scrolled all the way to the bottom without scrolling the browse div.
  5. Scrolling in general is very clunky and in some cases almost impossible.
  6. Selecting multiple images is not possible.
  7. There is a considerable delay between when an image is tapped and when it is actually selected.
  8. Images can be reordered in the browse view (may be part of the cause for the scrolling issues)
  9. The attachment details pane gets in the way. (perhaps it could be a separated from the infinite scroll browse view)

Attachments (39)

media-modal-nexus-5.png (332.7 KB) - added by gcorne 16 months ago.
media-library-mobile.png (140.1 KB) - added by melchoyce 16 months ago.
media-library-mobile.bmml (52.6 KB) - added by melchoyce 16 months ago.
27423-01.patch (1.6 KB) - added by gcorne 12 months ago.
27423-02.patch (5.3 KB) - added by gcorne 12 months ago.
media-modal-drop-down-menu.png (144.8 KB) - added by gcorne 12 months ago.
screenshot of 27423-02.patch with drop down expanded
Screen Shot 2014-07-02 at 19.56.04.png (29.3 KB) - added by iseulde 12 months ago.
Screen Shot 2014-07-02 at 19.56.43.png (12.8 KB) - added by iseulde 12 months ago.
27423.patch (5.6 KB) - added by iseulde 12 months ago.
27423.2.patch (5.4 KB) - added by stephdau 12 months ago.
Patch refresh: 27423.path as of r28949
Screenshot_2014-07-14-12-06-22.png (86.7 KB) - added by ryan 12 months ago.
Dismissable only by selecting something other than current
Screenshot_2014-07-14-12-03-17.png (532.2 KB) - added by ryan 12 months ago.
Picker always says Insert Media. Here it should say "Set Featured Image"
27423.3.patch (1.1 KB) - added by michalzuber 12 months ago.
Polished edit inputs in media detail
27423.4.patch (3.6 KB) - added by iseulde 12 months ago.
27423.5.patch (8.6 KB) - added by iseulde 12 months ago.
27423.6.patch (9.5 KB) - added by iseulde 12 months ago.
27423.png (120.7 KB) - added by celloexpressions 12 months ago.
with .7.diff, no tabs
27423.7.patch (11.7 KB) - added by celloexpressions 12 months ago.
See forthcoming comment
27423.7.1.patch (11.1 KB) - added by celloexpressions 12 months ago.
What .7 was supposed to do, but fixing some bugs
27423.8.patch (11.7 KB) - added by celloexpressions 12 months ago.
Add improved styling of search/filter, fix alignment of title/menu-toggle.
27423.9.patch (21.1 KB) - added by celloexpressions 12 months ago.
Prevent the page from scrolling when in the modal (also applies outside of mobile). We could standardize an in-modal class to do this in all core modals, potentially (theme-details currently does).
27423.10.patch (21.8 KB) - added by celloexpressions 12 months ago.
Re-style the edit-selection mode to work better with touch.
Screen Shot 2014-07-17 at 15.47.31.png (154.0 KB) - added by iseulde 12 months ago.
Screen Shot 2014-07-17 at 15.47.53.png (47.3 KB) - added by iseulde 12 months ago.
27423.11.patch (23.1 KB) - added by iseulde 12 months ago.
27423.12.patch (23.1 KB) - added by iseulde 12 months ago.
27423.13.patch (813 bytes) - added by michalzuber 12 months ago.
Fix for mobile
27423.14.patch (23.0 KB) - added by iseulde 12 months ago.
27423.15.patch (12.8 KB) - added by iseulde 11 months ago.
27423.16.patch (14.9 KB) - added by azaozz 11 months ago.
27423.17.patch (12.8 KB) - added by azaozz 11 months ago.
27423.18.patch (14.3 KB) - added by azaozz 11 months ago.
27423.19.patch (1.4 KB) - added by iseulde 11 months ago.
27423.20.patch (12.4 KB) - added by azaozz 11 months ago.
27423.21.patch (3.2 KB) - added by iseulde 10 months ago.
27423.22.patch (2.5 KB) - added by iseulde 10 months ago.
27423.23.patch (2.8 KB) - added by iseulde 10 months ago.
27423.diff (1.5 KB) - added by wonderboymusic 10 months ago.
27423.24.patch (3.8 KB) - added by azaozz 10 months ago.

Download all attachments as: .zip

Change History (123)

comment:1 @ircbot16 months ago

This ticket was mentioned in IRC in #wordpress-ui by gcorne. View the logs.

comment:2 @melchoyce16 months ago

media-library-mobile.png is my first shot at wireframing out what a better responsive media library could look like. To save space and organize the navigation a but, I've collapsed the menu into dropdown. I'm not sure it's clear that it's the media modal's menu, so it could probably use a better label. Secondly, instead of showing both your library and the image details, the details slide out to the left when an image is selected. As per these wireframes, there still isn't a way to select multiple items at once in "insert media" mode — that's only something you can do in gallery/playlist mode. There are still some issues to smooth out, so feedback (especially UX feedback) would be appreciated. I'll also attach my Balsamiq file, if anyone wants to play around with it.

comment:3 @iseulde16 months ago

Looks good! You could save even more space by merging the 'Upload Media' and 'Media Library' together. It could have its own square in the media library.

comment:4 follow-up: @wonderboymusic12 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.0

I think we wanted to at least peruse our options here in 4.0

comment:5 in reply to: ↑ 4 @melchoyce12 months ago

Replying to wonderboymusic:

I think we wanted to at least peruse our options here in 4.0

Would definitely love to get this in for 4.0! gcorne/avryl/anyone else interested in getting involved, do you have any time to work on this in the next couple weeks?

comment:6 @iseulde12 months ago

I definitely want to work on this, not sure if I'll have much time in the next two weeks though. Might work on some mockups.

comment:7 @gcorne12 months ago

It is hard for me to make a full commitment, but I was thinking about trying to put something together for this the other day. I'll to throw something together this weekend.

@gcorne12 months ago

comment:8 @gcorne12 months ago

27423-01.patch takes the initial step of adding support for selecting multiple images when interacting via touch. Instead of toggling the selected state when toggling, when interacting via touch images are always adding to the selection when the browser is in multi-select mode. The user can remove an image from the selection by tapping the checkbox. Not sure if we want to somehow better indicate that tapping on the checkmark will remove the item from the selection or not since there is no hover when interacting with touch.

@gcorne12 months ago

comment:9 @gcorne12 months ago

27423-02.patch adds a WIP implementation of a drop down menu when hitting the 640px break point. It definitely needs some design help.

@gcorne12 months ago

screenshot of 27423-02.patch with drop down expanded

comment:10 @gcorne12 months ago

  • Keywords has-patch added; needs-patch removed

comment:11 @ryan12 months ago

4.0 needs this. I'm down with a dropdown. I would love to be using it on an iPhone right now. :-)

comment:12 @helen12 months ago

Yep, into it, just needs a little CSS attention for the dropdown - up for grabs. Piece by piece is the right thing to do here for sure.

comment:13 @ircbot12 months ago

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

@iseulde12 months ago

comment:14 @iseulde12 months ago

I think I'd be better if the menu is a lot bigger! :)
And maybe merge the title with the select button.
See screenshots and patch.

comment:15 follow-up: @iseulde12 months ago

Of course, there should be a cancel button to go back if the menu takes all the space.

It might also be better to remove the tabs, and have an "image" with a plus icon to upload images. (Which would look better if the images are properly aligned.) I'll work on some screenshots for that.

comment:16 @ircbot12 months ago

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

comment:17 @ryan12 months ago

Patch needs refresh.

2 out of 8 hunks FAILED -- saving rejects to file src/wp-includes/js/media-views.js.rej

comment:18 @DrewAPicture12 months ago

  • Keywords needs-refresh added

@stephdau12 months ago

Patch refresh: 27423.path as of r28949

comment:19 follow-up: @stephdau12 months ago

  • Keywords needs-refresh removed

Refreshed 27423.patch (as of r28949) as 27423.2.patch.

A modest thanks to avryl for helping me out with my own tickets. :)

comment:20 in reply to: ↑ 19 @stephdau12 months ago

Replying to stephdau:

Refreshed 27423.patch (as of r28949)

Errata: Not sure why svn info on http://core.svn.wordpress.org picked that one, the patch refresh is actually as of r29166 (ie: less than an hour ago). :)

@ryan12 months ago

Dismissable only by selecting something other than current

@ryan12 months ago

Picker always says Insert Media. Here it should say "Set Featured Image"

comment:21 @ircbot12 months ago

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

@michalzuber12 months ago

Polished edit inputs in media detail

comment:23 @ircbot12 months ago

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

comment:24 @ircbot12 months ago

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

comment:25 @ircbot12 months ago

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

comment:26 in reply to: ↑ 15 ; follow-up: @iseulde12 months ago

Ryan, I just added some CSS to show what if would look like. Earlier I left a comment:

Replying to avryl:

Of course, there should be a cancel button to go back if the menu takes all the space.

There's also a comment in the patch that the text inside the select bottom should change. :)
If this looks okay I can add all that.

@iseulde12 months ago

comment:27 @iseulde12 months ago

In .4: Calculate the width of the tiles with CSS instead of JS. I just added everything at the bottom for now. Still needs specific styling for the "media grid".

On mobile, we should hide the sidebar entirely and let the user edit the image details some other way. Then we could have 3/4 columns. I'd like to restyle the checkboxes so that the tiles can be close together, that way the tiles can be bigger on mobile. We could place the select box inside the image and/or give it some opacity.

comment:28 in reply to: ↑ 26 @celloexpressions12 months ago

Replying to avryl:

Replying to avryl:

Of course, there should be a cancel button to go back if the menu takes all the space.

There's also a comment in the patch that the text inside the select bottom should change. :)
If this looks okay I can add all that.

I think it would actually be better not to have a cancel button - if they want to go keep the current setting they should be able to tap the selected item again to close the menu. Simpler that way.

Per IRC, I was starting to look at options for hiding the sidebar - should I continue working on that or do you want to? I'm thinking an "Edit Details" button in the toolbar (next to the insert button) would work best in conjunction with being able to multi-select, and considering melchoyce's mockups.

comment:29 @iseulde12 months ago

No, please continue working on this. :) The more people the better.

Not sure about the image details. We could have a select mode and an edit mode, a bit like the photo app on an iPhone.

comment:30 @celloexpressions12 months ago

Cool, we can hop over to IRC if/when we run into any UI sticking points. And try to modularize patches.

Here's my list of outstanding issues here, after applying all of the existing patches here (.2.patch, .3.path, and .4.patch cover everything combined):

  • Menu-toggle: should go with @avryl's design with the menu taking over the whole screen and closing when an option is selected. Toggle label still needs to update when it changes. No need for a cancel button, and users may confuse it with the modal-closing button also.
  • Menu-toggle could use better visual hierarchy against the tabs. But, for now I think having the tabs is good, so I'll look at some options here.
  • Search should collapse to an icon and slide-out at some point, like in the admin bar (and Twenty Thriteen), similar to melchoyce's wireframes. Alternative is to stack search above/below the select filter, which gets cluttery.
  • Disable scrolling on the page when the modal takes over the entire screen (width < 640px, height < 400px). We need to add a class like in-modal to <html>, then just set overflow: hidden;.
  • Improved selection/deselection. I think that if we keep the multi-select-by-default-with-touch behavior, tapping any selected image anywhere should deselect it. Just note that having different behavior with mouse vs. touch can be super awkward, especially on devices with both (ie touch screen laptops, lots of win8 devices, etc).
  • Details sidebar really needs to be hidden by default here. I'm going to try doing a toggle that's only available when only one image is selected for now (im place of the "1 selected" stuff).
  • When pressing edit under "X Selected", the only option should be to be able to clear some items from the collection - which is currently done through an X icon displayed on hover. Always show that icon, and center it here.
  • For .4.patch, once the sidebar's hidden (which we'll probably also do at the 640/400 breakpoint), we'll definitely want to display more, smaller columns. I'd definitely start with 4 and cut down from there.
  • Only a few of the items in the library can be scrolled to currently, the rest are hidden. I've found the culprit (.media-frame .attachments-browser cannot be overflow: hidden with an arbitrary extra padding-bottom, or something inside of it can't be overflow: hidden), solution would be related to what we do with the details sidebar.

All in all, the existing patches are a good start, but we definitely have a good chunk of work to do here!

comment:31 @iseulde12 months ago

Great list.

  • We should disable scrolling the main window all the time though, when the modal is open.
  • I've said it a few times, but I just wanted to add it to the list... I'd also get rid of the tabs. We can have and "+" tile right before all the other tiles. For both big and small screens.
  • I'd have two modes with a toggle link/button somewhere. A bit like on an iPhone. A select mode, the default one, where you can select as many images as you want and then insert them, and an edit mode, where it will open the details as soon as you touch/click it. A bit like the new media grid.
Last edited 12 months ago by iseulde (previous) (diff)

@iseulde12 months ago

comment:32 @iseulde12 months ago

.5 just combines both.

@iseulde12 months ago

comment:33 @iseulde12 months ago

.6:

  • Remove the sidebar for now so we see what we're doing.
  • Fix the scrolling issue.
  • Remove the tabs.
Last edited 12 months ago by iseulde (previous) (diff)

@celloexpressions12 months ago

with .7.diff, no tabs

@celloexpressions12 months ago

See forthcoming comment

comment:34 @ircbot12 months ago

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

comment:35 @iseulde12 months ago

What's the difference between .6 and .7?

@celloexpressions12 months ago

What .7 was supposed to do, but fixing some bugs

comment:36 @celloexpressions12 months ago

27423.7.1.patch merges all previous patches (I think) and does the following:

  • Hide the sidebar by default and style it to be toggled on and off via an .active class on its container. When on, it takes over the entire modal except for the toolbar and the close button. All of the css is in place for this to animate in and out, etc., just need to make and hook up a toggle button, shown only when appropriate.
  • Fix the scrolling craziness within the attachment grid area, again.
  • Redesign the menu-toggle to match the standard media modal title, but with the dashicon arrow indicating a drop-down. Move the dashicon CSS into the styling for the title instead of using a dashicons-arrow span.
  • Clean up grid-sizing css to all use min-widths, tweak breakpoints for number of columns.
  • Display the image a bit bigger (using percentages) in the attachment details panel.

@celloexpressions12 months ago

Add improved styling of search/filter, fix alignment of title/menu-toggle.

@celloexpressions12 months ago

Prevent the page from scrolling when in the modal (also applies outside of mobile). We could standardize an in-modal class to do this in all core modals, potentially (theme-details currently does).

comment:37 @celloexpressions12 months ago

@avryl is currently working on a toggle button/method for showing the sidebar (the actual UI and animation are in place - just need to hook up with a class-toggler).

Here's what still needs to be done from the lists above:

  • Menu-toggle/modal title: label needs to update when it changes, tapping currently-active mode should close menu.
  • Improved selection/deselection. I think that if we keep the multi-select-by-default-with-touch behavior, tapping any selected image anywhere should deselect it. Just note that having different behavior with mouse vs. touch can be super awkward, especially on devices with both (ie touch screen laptops, lots of win8 devices, etc).
  • Add-new/upload tile that also lists the max upload size, triggering the browser's upload behavhior, replacing the upload tab. Also consider doing this for desktop users.
  • Ability to access the details/options sidebar somehow. @avryl is working on this
  • When pressing edit under "n selected", the only option should be to be able to clear some items from the collection - which is currently done through an X icon displayed on hover. Always show that icon, and center it here. (I have the CSS for this already - will merge into the next patch)

Here's what the current patch breaks and we need to fix (not comprehensive):

  • Media library grid - most likely related to the numbers of columns stuff, should be an easy fix.
  • No menu-toggle when there's no menu (featured image metabox, for example).
  • Media grid still needs a lot of mobile/responsive help, and the fixes in the modal create a couple new issues there.

@celloexpressions12 months ago

Re-style the edit-selection mode to work better with touch.

comment:38 @celloexpressions12 months ago

https://cloudup.com/csKaI8ctcUM is .10.patch, interacting with touch for automatic multi-select.

comment:39 follow-up: @michalzuber12 months ago

Tried the patch, but breaks the design.

Proof that I tried two times applying the patch http://i.imgur.com/e23G6BO.png

comment:40 in reply to: ↑ 39 @helen12 months ago

Replying to michalzuber:

Tried the patch, but breaks the design.

celloexpression's comment notes that it breaks the media library grid. Work so far is focusing on the media modal that's used in post edit.

comment:42 @celloexpressions12 months ago

A bunch of extraneous code got into the patch at some point, and that was causing most of the issues with media grid. @avryl is working on cleaning it all up and also addressing most of the items listed above.

comment:43 @iseulde12 months ago

Okay... The above screenshots is what I have atm. Will upload the patch in a minute... All the buttons etc. work.

@iseulde12 months ago

@iseulde12 months ago

comment:44 @iseulde12 months ago

In .12:

  • Fixed the new CSS for the tiles also for the new "media grid".
  • Added an edit button in place of the selection count that will show the details for the selected image.
  • Moved the "toggle" to the title (no extra markup required there), this now also changes when you switch to a different view.
  • Clicking on the current menu item will close the menu, and clicking anywhere else as well.
  • I added a "+" tile, which currently just send you to the upload view. I also added a button there to go back. Ideally this should send you straight to the browser uploader.

@michalzuber12 months ago

Fix for mobile

comment:46 @ircbot12 months ago

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

comment:47 @iseulde12 months ago

@michalzuber Maybe that should go to one of the media grid tickets? This ticket is for the media modal.

comment:48 @celloexpressions12 months ago

  • Keywords needs-refresh added

This is looking pretty good.

Unfortunately, as I suspected, we're going to need to refresh for [29220]. The patch mostly applies, but hits JS errors in both modal and grid.

I know we're going to need to sync the css and js for columns-per-row, as we now have arrow-key navigation that relies on that. Will also need to see how some of the auto-focusing works with this - most likely will want to auto-trigger edit mode.

Any reason for removing the animation into edit mode (the transition on .media-sidebar)? We could just toggle display instead of hiding off-screen to the right (right: 100%/0) if we don't want an animation, although I like it because it feels more in alignment with desktop view, seeing it come from the right.

comment:49 @iseulde12 months ago

I removed the animation because nothing else is currently animated...
Looking at the patch again now.

@iseulde12 months ago

comment:50 @iseulde12 months ago

  • Keywords needs-refresh removed

Just 1 hunk failed. I don't see any JS errors though?

What do you mean, columns per row?

comment:51 follow-up: @celloexpressions12 months ago

Notes:

  • keyboard-arrow-navigation added in #23560 needs to know how many attachments are displayed per row so that it can set focus appropriately when using the up/down arrows. We need to sync this from the css, since it now changes in css based on viewport. *
  • touch scrolling doesn't work at all *
  • image-edit mode needs help. Yes, people will try to edit images on mobile.
  • Should display the selection of attachments instead of the edit-mode-toggle when more than one is selected. Still need to see the selection on mobile, and be able to get to the edit-selection mode and clear all. *
  • Always show an options-toggle button toggling the sidebar in collection-edit mode. *
  • Per IRC, no animation due to CSS animation performance on mobile browsers.
  • Lots of little bugs noted by rboren in IRC, largely related to auto-focusing.
  • Media grid will need some work separately once this is done, but this does have the side effect of improving it.

. * things that should be addressed before a first-run goes in.

comment:52 @iseulde12 months ago

To solve the focus issues, we could calculate the amount of columns in JS instead of using @media queries. That would also make the CSS easier to handle. It's JS again, but performance wise this should still be a lot better than the current situation. We'd only do a simple class change when needed, instead of inserting a new style element in the DOM every 200 milliseconds.

comment:53 follow-up: @iseulde12 months ago

Do we ask really need to the edit selection and clear selection? If I select multiple images and click edit, it should be okay to just show the details of the last selected image (in blue vs. grey)?

comment:54 in reply to: ↑ 53 @celloexpressions12 months ago

Replying to avryl:

Do we ask really need to the edit selection and clear selection? If I select multiple images and click edit, it should be okay to just show the details of the last selected image (in blue vs. grey)?

It's more about being able to see how many/which items are selected at a glance, and then having a quick way to go in to remove some or clear all of them. On mobile, especially with a large library, it could be difficult to see what's selected at a glance within the attachment browser since you'd likely need to do a lot of scrolling.

If there's room to display the edit button also somewhere, I think it makes sense that it's to edit the blue/active one in the selection, but I think the other thing's more important when multiple items are selected if we can only see one.

comment:55 @ryan12 months ago

Some shots of 27423.14.patch on a Nexus 5.

https://cloudup.com/cMN1iEopYeI

comment:56 in reply to: ↑ 51 ; follow-up: @azaozz12 months ago

Replying to celloexpressions:

keyboard-arrow-navigation added in #23560 needs to know how many attachments are displayed per row so that it can set focus appropriately when using the up/down arrows. We need to sync this from the css, since it now changes in css based on viewport.

Could also be done by comparing the offsetTop/scrollTop of the attachments on the first row, and counting how many have the same. And of course this has to be disabled on touch devices.

touch scrolling doesn't work at all

Where? Seems to work here on iPad and KitKat phone.

image-edit mode needs help. Yes, people will try to edit images on mobile.

Maybe better to hide it for now? Or at least hide the Crop button (no way to crop).

Should display the selection of attachments instead of the edit-mode-toggle when more than one is selected. Still need to see the selection on mobile, and be able to get to the edit-selection mode and clear all. *

Not sure about that. Inserting several images by shift-clicking doesn't work on touch devices :) The other place this is used is when creating a gallery. That has another screen where images can be added/removed, and is easier to use.

I'm actually thinking this part is not needed anywhere... Kind of big overhead, looks weird when uploading images, quite limited usability.

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

comment:57 in reply to: ↑ 56 @celloexpressions12 months ago

Replying to azaozz:

touch scrolling doesn't work at all

Where? Seems to work here on iPad and KitKat phone.

Any browser on Windows 8, IE10 Mobile on Windows Phone, and whatever @ryan used on Android.

Should display the selection of attachments instead of the edit-mode-toggle when more than one is selected. Still need to see the selection on mobile, and be able to get to the edit-selection mode and clear all. *

Not sure about that. Inserting several images by shift-clicking doesn't work on touch devices :) The other plavce this is used is when creating a gallery. That has another screen where images can be added/removed, and is easier to use.

I'm actually thinking this part is not needed anywhere... Kind of big overhead, looks weird when uploading images, quite limited usability.

Actually, as of the patch multi-select is automatic with touch. So, if you tap on more than one item, instead of switching, both are selected. I would think that would result in more people using it, at least accidentally, and that may be a confusing experience overall if we don't show the selection.

comment:58 @iseulde12 months ago

I think the scrolling issue is actually introduced in the patch.

As for clearing/viewing/editing the selection. How does this work in the native photo apps? On an iPhone you just see # selected. That's it. No way to view the selection separately or edit it. You can do so already... Maybe a bit more scrolling, but I don't see the point of the screen. Ideally I'd like to put 4 images on a row, reducing the padding between the images and restyling a selected image (replacing the square select box that overflows the image).

comment:59 @azaozz12 months ago

Actually, as of the patch multi-select is automatic with touch. So, if you tap on more than one item, instead of switching, both are selected. I would think that would result in more people using it, at least accidentally, and that may be a confusing experience overall if we don't show the selection.

Yeah, agreed it's rather confusing. I didn't even realize this was on at first. IMHO the multi-select makes sense only when creating a gallery.

Here scrolling works (a bit choppy) on Android 4.4.4 phone and pretty well on iPad/iOS 7.1.2.

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

comment:60 follow-up: @michalzuber11 months ago

Close button is always focused https://youtu.be/g4IlcensaIQ

comment:61 in reply to: ↑ 60 @iseulde11 months ago

Replying to michalzuber:

Close button is always focused https://youtu.be/g4IlcensaIQ

This is unrelated to the ticket and patch... Maybe create a new ticket or comment on one of the media grid tickets?

comment:62 @ircbot11 months ago

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

comment:63 follow-up: @iseulde11 months ago

I'm splitting the pure css resizing to a separate patch. Patch coming soon. Once that's in we can look at the mobile stuff again.

comment:64 in reply to: ↑ 63 @stephdau11 months ago

Replying to avryl:

I'm splitting the pure css resizing to a separate patch. Patch coming soon. Once that's in we can look at the mobile stuff again.

Please! Feel free to ping me (and likely rboren) on IRC in real-time, this week, and we can crank through it together if you want.

@iseulde11 months ago

comment:65 @iseulde11 months ago

The only problem with .15, I think, is the edit gallery view. The thumbnails need to be larger, but that can be set with idealColumnWidth. I'm just not sure how to adjust that for that view. 175px should be good. The caption also need to be positioned better, but it's tricky...

comment:66 @ircbot11 months ago

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

@azaozz11 months ago

@azaozz11 months ago

@azaozz11 months ago

comment:67 @azaozz11 months ago

In 29376:

Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423.

@iseulde11 months ago

comment:68 @iseulde11 months ago

Patch above fixes arrow nav. To do: focus style & background.

comment:69 @azaozz11 months ago

In 29379:

Media modal/grid: get the proper .attachment width in arrow navigation. Props avryl, see #27423.

comment:70 @azaozz11 months ago

In 29393:

Media modal/grid: fix the position of attachment icons, restore the background, fix in ie8. See #27423.

comment:71 @ircbot11 months ago

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

@azaozz11 months ago

comment:72 @azaozz11 months ago

In [29446]:

Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423.

comment:73 @azaozz11 months ago

  • Keywords needs-testing added; has-patch removed

Needs (lots of) testing. May have changed/tweaked places that were looking better before.

comment:74 @azaozz11 months ago

In 29452:

Media at small screens:

  • Show the image details/settings as an overlay.
  • Better styling for the frame drop-down.
  • Remove the multi-select by default on the Insert frame.

See #27423

comment:75 @helen10 months ago

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

Let's go ahead and close this - new tickets for new issues or enhancements, please.

comment:76 @nacin10 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Something in this ticket made it so flipping between "Insert Media" and "Create Gallery" abruptly resizes the images, causing a flicker. I imagine this has to do with setColumns in JS. This is really jarring and not present in 3.9.

Aslo, setColumns is no longer debounced when it is attached to a resize event, which is a weird change.

comment:77 @iseulde10 months ago

Looking into it...

I removed the debouncing because it waaay less intensive than it used to be. The function only manipulates the dom if necessary after doing a calculation. But sure, we can add it back.

comment:78 @nacin10 months ago

  • Keywords needs-patch added; needs-testing removed
  • Owner set to avryl
  • Status changed from reopened to assigned

The debouncing is still probably a good idea as width() is fairly expensive: http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/. Running it 50 times when resizing a window is kinda lame.

@iseulde10 months ago

@iseulde10 months ago

comment:79 @ircbot10 months ago

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

@iseulde10 months ago

comment:80 @iseulde10 months ago

  • Keywords has-patch added; needs-patch removed

setColumns is still triggered twice when switching mode. Looks like the first time it happens before the last view is destroyed.

@wonderboymusic10 months ago

@azaozz10 months ago

comment:81 @azaozz10 months ago

27423.24.patch combines the last two patches and adds back debounce() when resizing the window.

comment:82 @iseulde10 months ago

Testing...

comment:83 @iseulde10 months ago

Looks good to me.

comment:84 @nacin10 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 29686:

Media: Avoid repeated thumbnail resizing.

props avryl, wonderboymusic, azaozz.
fixes #27423.

Note: See TracTickets for help on using tickets.