Skip to content

[4.x] Redesign the Entry Listing UI/UX - #7668

Merged
jackmcdade merged 19 commits into
more-ui-improvementsfrom
new-listing-ui
Mar 7, 2023
Merged

[4.x] Redesign the Entry Listing UI/UX#7668
jackmcdade merged 19 commits into
more-ui-improvementsfrom
new-listing-ui

Conversation

@jackmcdade

@jackmcdadejackmcdade commented Mar 7, 2023

Copy link
Copy Markdown
Member

Now with better use of space, more intuitive UX, and responsive friendly.

Default State

CleanShot 2023-03-07 at 09 55 08@2x

Filtering

CleanShot 2023-03-07 at 09 55 41@2x

Now with better use of space, more intuitive UX, and responsive friendly
@what-the-diff

Copy link
Copy Markdown
  • Changed the tabs to pills
  • Added a border around badges and changed their color scheme
  • Removed focus outline from buttons, added ring-2 instead (outline is still there)
  • Made table headers smaller and removed rounded corners on first/last header cells in mobile viewport size only
  • Updated column picker button icon to be more consistent with other icons used throughout app; also updated padding for consistency with other components that use this component as well as made it flex so text can wrap if needed without breaking layout of surrounding elements
  • Added a new svg icon for the filter button
  • Changed the search input to be more flexible and allow custom placeholders
  • Moved some of the filters into their own component, which is now shown/hidden by clicking on an icon in the header bar instead of being always visible below it (this was done because we want to add another section above this one)
  • Removed column picker from table headers as they are not needed there anymore since we have them in our global toolbar already

@jackmcdadejackmcdade changed the title Redesign the Entry Listing UI/UX[4.x] Redesign the Entry Listing UI/UXMar 7, 2023
@jackmcdade
jackmcdade marked this pull request as ready for review March 7, 2023 17:31
@jackmcdade
jackmcdade merged commit dcc538a into more-ui-improvementsMar 7, 2023
@jackmcdade
jackmcdade deleted the new-listing-ui branch March 7, 2023 20:27
jackmcdade added a commit that referenced this pull request Mar 13, 2023
* Better Markdown fieldtype in small containers
* Let parent/global components handle body overflow
* Better contrast on a few icons
* Fix weird visual glitching on User fieldtype drag interaction
* Use proper data type
* Redesign the List Fieldtype
* [4.x] Redesign the Entry Listing UI/UX (#7668)
* Redesign the Entry Listing UI/UX
Now with better use of space, more intuitive UX, and responsive friendly
* Ensure query changes to a filter will refresh the view properly
* Wire up Terms Listing
* Wire up Users Listing (filters not working on the PHP side yet)
* Don't need this check for allowColumnPicker here
* Adjust bulk actions height
* Make role queryable like user groups currently are.
* Fix user role and group filter class queries (stache only atm).
* Allow fields to be filtered on users listing.
* Pass tests again.
* Responsive improvements
* Autofocus search when showing filters
* nextTick to the rescue
* Bind `f` to show filters (which autofocuses search).
* Fix errors on listings that don’t have search filter (ie. collections listing).
* Remove `$pinned` property from filters in php.
* Remove `$pinned` property from new filter stub.
* Remove pinned filter concept from Filters component.
---------
Co-authored-by: Jesse Leite <jesseleite@gmail.com>
* Ensure you can delete a select option
* [4.x] Way Better Listings (DataTables) (#7676)
* Make Status its own column
Co-Authored-By: Jason Varga <jason@pixelfear.com>
* Greatly improve the data-tables UI in every way
- titles will wrap to 2 lines max, will show the status dot if there's no status field shown
- relationship fields have a new little badge style and will truncate to each on one line
- content fields get smaller text and wrap to 2 lines max
- new status column
- title fields have a reasonable min-width set because they're important
- title fields will still show the status dot if the status column isn't visible
- date fields will no longer wrap to two lines
- wide tables will scroll horizontally instead of overflow, keeping the checkbox and actions columns in view at all times
* Refresh the ColumnPicker UI
* Apply fixes from StyleCI
---------
Co-authored-by: Jason Varga <jason@pixelfear.com>
Co-authored-by: StyleCI Bot <bot@styleci.io>
* Show (F) shortcut on Show Filter Controls tooltip
* Refresh Green with Tailwind Green
* temp color move from red to rose (actually tailwind red)
* Rename rose back to red
* Apply fixes from StyleCI
* Give buttons ever slightly more depth
* Add config option to always show Listing Filters
* Set it to false
* Horizontal scroll for asset listing, fix overflow issue w/ selected rows
* Differentiate between new btn-sm and btn-xs (old btn-sm)
* Better h1-h6 icons (new from Streamline)
* Add prop to disable Popover Clickaway behavior
* Refactor Bard Link to Popover, improve UX, and remove Sticky Toolbars
Sticky toolbars were pretty problematic in lots of edge cases. I feel like it's better to just stick to full screening or using the floating toolbar for editing lots of text and not relying on the sticky toolbar.
* Set new h1-h6 icons to currentColor
* reindent to remove unnecessary outdenting of entire file
* the html too
* teeny tiny unnecessary diff change
* Better date fields in tight quarters
* Fix Bard typography in Fullscreen Mode
* Fix some fullscreen editor issues
* Better replicator toolbar
* Only show asset folders on the first page of results
Closes#2829.
* Make Markdown keyboard shortcuts work on windows.
Closes#6024.
---------
Co-authored-by: Jesse Leite <jesseleite@gmail.com>
Co-authored-by: Jason Varga <jason@pixelfear.com>
Co-authored-by: StyleCI Bot <bot@styleci.io>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@jackmcdade@jesseleite