All views in Drupal admin pages require a set of tools that are presented to the user with a consistent visual style and page architecture.

The tools should include

  • actions, (usually, but not always, adding a new item)
  • filtering
  • sorting
  • searching
  • (filtering on a keyword using an autocomplete text field)
  • paging
  • bulk operations.

Since all of these things are tools to manipulate a view, they should be designed as a single toolset so we can improve discoverability, reduce anti-patterns and increase user efficiency.

This issue is a "meta, meta" issue since it references other meta issues. Not sure what the implications of that are but there it is.

The following prototype shows the functionality http://invis.io/R8F4K2BC

And here is a partial overview design of tables with the unified interaction pattern applied and anti-patterns removed

image

Files: 
CommentFileSizeAuthor
#9 main.jpg264.61 KBtkoleary
#3 main.jpg264.08 KBtkoleary

Comments

Issue summary:View changes

Added links

Issue summary:View changes

linked links

Issue summary:View changes

relinked

Issue summary:View changes

removed duplicate descriptions

Issue summary:View changes

added 1475204

Issue summary:View changes

added 1910896

Issue summary:View changes

added image caption

Issue summary:View changes

image

Issue summary:View changes

image

StatusFileSize
new264.08 KB

Issue summary:View changes

editied

Issue summary:View changes

edited image

Issue summary:View changes

Issue summary:View changes

added 2005166

Issue summary:View changes

added 2022297

Issue tags:+VDC

I have to say, swapping the sides of the operations and VBO checkboxes is one of the most disorienting things I've ever seen in a view.
Otherwise, I think it looks great.

I completely agree with tim. Checkboxes on the left is a standard used through pretty much every web app I could find which has a listing where individual rows can be selected (most notably email apps but also in others.) Swap that an operations back and I've got nothing bad to say.

I was following Bojhan on that. I was under the impression that it had been changed in another issue. I personally prefer them (bulk) on the left as well.

+1 for swapping the operations and checkboxes back. That's really disorienting.

@dawehner

Linking in the description.

BTW my base for this was work we did at Bad Camp.

Issue summary:View changes

added 1823608

Issue summary:View changes

added #1210980: Move pager above the page

StatusFileSize
new264.61 KB

Issue summary:View changes

removed #1210980: Move pager above the page (issue linked to itself!)

@heyrocker @cweagans @dawehner @tim.plunkett

Updated description image with operations swapped to current position.

One thing to note. The Pinterest style image grid in the grid view in files offers a great advantage to the user in that for images or videos with a variety of aspect ratios no part of the image is cropped, while a consistent look is also maintained.

This effect would require masonry.js. I am *not* suggesting that we add another library dependency to core. The reason I show it is that I think it's important to write the markup in such a way that plugging something like Masonry into the grid view is simple for someone creating an alternate admin theme or a module that leverages core admin views.

Related to #1903746: Replace the views grid table template with one using divs

Issue summary:View changes

updated image

@klonos

Right! Missed that. Adding to the designs.

Tagging with theme component library per Jenlampton

Issue tags:+styleguide

We will need to consolidate these designs into the Seven styleguide

@LewisNyman

We will need to consolidate these designs into the Seven styleguide

Right. I pulled from the existing work to put this together but there are a couple of new patterns as well as the overall layout.

I think what's new is:

  • "Table" header for a grid view
  • List view/grid view toggle
  • Borrowing "removable pill" style from tags as a pattern for filters
  • Using the "small" button style for action links
  • Using masonry.js in media thumbnail grids (possible since views grids now use divs)
  • Operations on hover over image in media thumbnail view
  • Checkbox absolutely positioned in media thumbnails

The last three seem like they should be issues for media module though, and theme agnostic.

What do you think?

We haven't had a chance to discuss the future of the Seven style guide beyond this initial implementation but the intention was to have the style guide become a constantly evolving resource of administrative components. After this initial phase the plan is to add more components in order to consolidate patterns found in contrib. I think anything that affects the administrative interface should be placed within the Seven style guide, we don't want these UI patterns to carry into front end themes.

Everything I see here fits really well with this vision, I think it completely belongs under the style guide initiative.

Issue summary:View changes

...adding #2020449