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

CommentFileSizeAuthor
#9 main.jpg264.61 KBtkoleary
#3 main.jpg264.08 KBtkoleary
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

tkoleary’s picture

Issue summary: View changes

Added links

tkoleary’s picture

Issue summary: View changes

linked links

tkoleary’s picture

Issue summary: View changes

relinked

tkoleary’s picture

Issue summary: View changes

removed duplicate descriptions

tkoleary’s picture

Issue summary: View changes

added 1475204

tkoleary’s picture

Issue summary: View changes

added 1910896

tkoleary’s picture

Issue summary: View changes

added image caption

tkoleary’s picture

Issue summary: View changes

image

tkoleary’s picture

Issue summary: View changes

image

tkoleary’s picture

FileSize
264.08 KB
tkoleary’s picture

Issue summary: View changes

editied

tkoleary’s picture

Issue summary: View changes

edited image

tkoleary’s picture

Issue summary: View changes
tkoleary’s picture

Issue summary: View changes

added 2005166

tkoleary’s picture

Issue summary: View changes

added 2022297

tim.plunkett’s picture

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.

gdd’s picture

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.

cweagans’s picture

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

dawehner’s picture

tkoleary’s picture

@dawehner

Linking in the description.

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

tkoleary’s picture

Issue summary: View changes

added 1823608

tkoleary’s picture

Issue summary: View changes

added #1210980: Move pager above the page

tkoleary’s picture

FileSize
264.61 KB
tkoleary’s picture

Issue summary: View changes

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

tkoleary’s picture

@heyrocker @cweagans @dawehner @tim.plunkett

Updated description image with operations swapped to current position.

tkoleary’s picture

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

klonos’s picture

klonos’s picture

Issue summary: View changes

updated image

tkoleary’s picture

@klonos

Right! Missed that. Adding to the designs.

tkoleary’s picture

Tagging with theme component library per Jenlampton

LewisNyman’s picture

Issue tags: +styleguide

We will need to consolidate these designs into the Seven styleguide

tkoleary’s picture

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

LewisNyman’s picture

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.

LewisNyman’s picture

Issue summary: View changes

...adding #2020449

LewisNyman’s picture

Issue tags: +Usability, +frontend, +CSS
tkoleary’s picture

Both filters and actions could probably use select 2 and in doing so be much more compact, efficient and usable.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

giorgio79’s picture

Version: 8.4.x-dev » 8.6.x-dev

Maybe 8.6?

joachim’s picture

Priority: Normal » Major

I think this is a major, and I also think it's going to need way more work before it's ready.

Also, recent comments have been focussing too much on theme and front-end. The issue summary seems to be suggesting we build a new type of thing in Views to automatically get the same set of sorts, filters, bulk ops, and so on.

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

That to me is not just about theming. It's suggesting that when you build a view, you get an option for a standard set of sorts + filters + bulk ops, and that is something that's defined in one single place.

It's a very interesting idea, but it would be a LOT of work to add this to Views. For one thing, what looks like the 'same' sort or filter is actually a completely different thing for each entity type, so there'd be a new abstraction layer involved.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

dqd’s picture

deleted ... Ooops .. wrong issue. My points better fit into this one: #1823450: [Meta] Convert core listings to Views

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.