>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #2721807. --> Reported by: [yoroy](https://www.drupal.org/user/41502) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The UI for filters and bulk operations on listings (content, files, comments, users and more) are inconsistent and not very pretty.</p> <h4>Content:</h4> <p><img src="https://www.drupal.org/files/issues/filters-operations-content.png"></p> <h4>Comments:</h4> <p><img src="https://www.drupal.org/files/issues/filters-operations-comments.png" alt=""></p> <h4>Users:</h4> <p><img src="https://www.drupal.org/files/issues/filters-operations-users.png" alt=""></p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <h4>1. View with filters + actions</h4> <p>By default, the only view with both filters and actions is People page:<br> - People (/admin/people): <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-1"><a href="https://www.drupal.org/project/drupal/issues/2023683" title="Status: Active">#2023683: Improve the layout and usability of the admin/people exposed filters and actions</a></span></p> <p>Proposed design:<br> <img src="https://www.drupal.org/files/issues/1filters.png" alt=""></p> <h4>2. View with filters.</h4> <p>The rest of the views that have several filters in a fieldset. The proposed design follows the style guide (<a href="https://groups.drupal.org/node/283223#Fieldset">https://groups.drupal.org/node/283223#Fieldset</a>).<br> - @TODO: Decide label for the field set to suit both filters and sort options.<br> List of places in core where it can be found:<br> - Content (/admin/content) <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-17"><a href="https://www.drupal.org/project/drupal/issues/2521808" title="Status: Closed (outdated)">#2521808: Visually encapsulate the content listing filter to distinguish it from the 'add content' action link</a></span><br> - Files (/admin/content/files)<br> - Custom block library (/admin/structure/block/block-content)</p> <p><img src="https://www.drupal.org/files/issues/2filters.png" alt=""></p> <p>In case there are several lines of filters, they should be nicely placed in several lines: <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-3"><a href="https://www.drupal.org/project/drupal/issues/2711337" title="Status: Closed (duplicate)">#2711337: Too many exposed filters and operators create weird view</a></span>.</p> <p><img src="https://www.drupal.org/files/issues/22filters.png" alt=""></p> <h4>3. Single text filters (filtering in-page).</h4> <p>This one is a single filter used to filter elements in the current page. A new design have been created with a bigger input and a magnifying glass to make it clear what is its purpose. List of places in core where it can be found:<br> - Views (/admin/structure/views)<br> - Extend (/admin/modules)<br> - Uninstall (/admin/modules/uninstall)</p> <p><img src="https://www.drupal.org/files/issues/3filters.png" alt=""></p> <h4>4. Single filters with button (paged list).</h4> <p>A single filter appearing used to filter elements in several pages. In this case the single filter should be envolved in a fieldset and a button will be placed inline, following the current design in the styleguide (<a href="https://groups.drupal.org/node/283223#Fieldset">https://groups.drupal.org/node/283223#Fieldset</a>).</p> <p>List of places in core where it can be found:<br> - URL aliases (/admin/config/search/path)</p> <p><img src="https://www.drupal.org/files/issues/4filters.png" alt=""></p> <h4>5. Only actions.</h4> <p>The design to use should be the same used for People view page.<br> List of places in core where it can be found:<br> - Comments (/admin/content/comment)<br> - Unapproved comments (/admin/content/comment/approval)</p> <ol> <li><del>Explore visual design options</del></li> <li><del>Decide on a direction</del></li> <li><strong>You are here:</strong> Implement: <ul> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-1"><a href="https://www.drupal.org/project/drupal/issues/2023683" title="Status: Active">#2023683: Improve the layout and usability of the admin/people exposed filters and actions</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-17"><a href="https://www.drupal.org/project/drupal/issues/2521808" title="Status: Closed (outdated)">#2521808: Visually encapsulate the content listing filter to distinguish it from the 'add content' action link</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-3"><a href="https://www.drupal.org/project/drupal/issues/2711337" title="Status: Closed (duplicate)">#2711337: Too many exposed filters and operators create weird view</a></span></li> <li>@TODO: Create issue for single filter in-page (Filters 3)</li> <li>@TODO: Create issue to fix styles in URL aliases (Filters 4)</li> <li>@TODO: Find related issues or create a new one for styling system actions in comments (not views) (Filters 5)</li> </ul> </li> </ol> <h3 id="summary-ui-changes">User interface changes</h3> <p>Pretty &amp; consistent UI pattern and design for filters and bulk operations on listing pages.</p> <h3 id="summary-api-changes">API changes</h3> <p>?</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>?</p> > Related issue: [Issue #2023683](https://www.drupal.org/node/2023683) > Related issue: [Issue #355820](https://www.drupal.org/node/355820) > Related issue: [Issue #1475204](https://www.drupal.org/node/1475204) > Related issue: [Issue #2022297](https://www.drupal.org/node/2022297) > Related issue: [Issue #2001922](https://www.drupal.org/node/2001922) > Related issue: [Issue #2809299](https://www.drupal.org/node/2809299) > Related issue: [Issue #2566827](https://www.drupal.org/node/2566827)