Improve Media Modal UI at small-screen sizes

[gcorne]

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)

[melchoyce]

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.

[iseulde]

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.

[wonderboymusic]

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

[melchoyce]

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?

[iseulde]

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.

[gcorne]

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.

[gcorne]

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.

[gcorne]

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

[gcorne]

screenshot of 27423-02.patch with drop down expanded

[ryan]

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

[helen]

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.

[iseulde]

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.

[iseulde]

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.

[ryan]

Patch needs refresh.

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

[stephdau]

Patch refresh: 27423.path as of r28949

[stephdau]

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

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

[stephdau]

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). :)

[ryan]

Dismissable only by selecting something other than current

[ryan]

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

[michalzuber]

Polished edit inputs in media detail

[michalzuber]

Result of 27432.3.patch => ​http://i.imgur.com/OqjSV0o.png

[iseulde]

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.

[iseulde]

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.

[celloexpressions]

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.

[iseulde]

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.

[celloexpressions]

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!

[iseulde]

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.

[iseulde]

.5 just combines both.

[iseulde]

.6:

• Remove the sidebar for now so we see what we're doing.
• Fix the scrolling issue.
• Remove the tabs.

[celloexpressions]

with .7.diff, no tabs

[celloexpressions]

See forthcoming comment

[iseulde]

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

[celloexpressions]

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

[celloexpressions]

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.

[celloexpressions]

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

[celloexpressions]

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).

[celloexpressions]

@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.

[celloexpressions]

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

[celloexpressions]

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

[michalzuber]

Tried the patch, but breaks the design.

• ​http://i.imgur.com/2UWMHwk.png
• ​http://i.imgur.com/cFJhWrU.jpg
• ​http://i.imgur.com/9Qk8x5s.png

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

[helen]

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.

[ryan]

27423.10.patch, Nexus 5

​https://cloudup.com/cKHc7Gh8QNv

[celloexpressions]

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.

[iseulde]

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

[iseulde]

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.

[michalzuber]

Fix for mobile

[michalzuber]

27423.13.patch from ​http://i.imgur.com/enkenJu.png to ​http://i.imgur.com/9ZLdszm.png

[iseulde]

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

[celloexpressions]

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.

[iseulde]

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

[iseulde]

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

What do you mean, columns per row?

[celloexpressions]

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.

[iseulde]

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.

[iseulde]

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)?

[celloexpressions]

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.

[ryan]

Some shots of 27423.14.patch on a Nexus 5.

​https://cloudup.com/cMN1iEopYeI

[azaozz]

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.

[celloexpressions]

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.

[iseulde]

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).

[azaozz]

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.

[michalzuber]

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

[iseulde]

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?

[iseulde]

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.

[stephdau]

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.

[iseulde]

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...

[azaozz]

In 29376:

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

[iseulde]

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

[azaozz]

In 29379:

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

[azaozz]

In 29393:

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

[azaozz]

In [29446]:

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

[azaozz]

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

[azaozz]

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

[helen]

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

[nacin]

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.

[iseulde]

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.

[nacin]

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.

[iseulde]

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

[azaozz]

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

[iseulde]

Testing...

[iseulde]

Looks good to me.

[nacin]

In 29686:

Media: Avoid repeated thumbnail resizing.

props avryl, wonderboymusic, azaozz.
fixes #27423.