Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/payloadcms/payload/discussions/3217 below:

2.0 Admin UI Design Updates · payloadcms/payload · Discussion #3217 · GitHub

Ahead of some big features shipping soon in Payload 2.0, we need to overhaul the general navigation within Payload's admin panel. This is primarily to make room for a new Live Preview interface, but this is also an opportunity to make serious UX gains in other areas too, and to fix all of the common pain points raised by content editors.

Here is a quick list of the design goals:

• Maximize usage of horizontal space to allow for live preview
• Improve visibility of localization features
• Lay groundwork for best-in-class editing experience
• Prepare for additional views
• Minimize breaking changes
• Prioritize UI elements with the most value to editors
• Explore top-level navigation sub-panes

Here is a list of the features covered:

• Introduce the Live Preview interface
• Surface the Localization controls for easy switching
• Dedicate an entire view to Versions with more space to compare differences
• Introduce a new Relationships view to help coordinate multi-document / cascading publication
• Introduce a new References view to help identify all instances of a document and their exact reference points
• Create a new API view for testing, querying, and filtering REST endpoints
• Support the ability to add custom views to the edit screen

Here are the potential breaking changes as a result of this work (there isn't much):

• Custom draft / publish buttons may need some CSS love
• If you’re overriding / customizing the entire Edit view, you may need to migrate
• Sidebar positioning hacks / custom nav elements may need CSS love

OK let's get to the good stuff. There are two main directions that could be taken here, the first being dubbed "multiple toolbars". This is probably the strongest direction of the two, although everything shown here is subject to change (and likely will).

The pros of this direction are mostly related to information hierarchy. UI elements are given a much stronger reasoning for their placement on the screen based on the needs of most content editors. The navigation is much more visually digestible and its very clear exactly what you're editing at any given time. Document meta and controls are deliberately placed according to their usage within a typical editing workflow. For instance, status and modified dates are prominent near the top of the screen, but duplicate, create new, and delete are nested within a dropdown. Users will typically edit documents, and these actions can also be made from elsewhere within the app, although still available on the document itself.

This setup does take up more vertical space, though, at least before scroll. The second navigation is sticky, which is super nice for those who are editing deeply nested fields, but this means that the top of the document may appear more intimidating for some.

Default:

Default (Scrolled):

Live Preview:

Live Preview (Scrolled):

Versions:

Relationships:

References:

Probably the biggest advantage to this approach is a much simpler top area. When users land here they are not overwhelmed with tools and controls, although no controls are left-behind. This also means that the sticky menu is complete. There are no other controls that scroll away. So when editing deeply nested fields, you can still perform all document-level actions. But while this may render less and feel more digestible, non-tech users may find it harder to understand because most things are hidden away and everything is jammed together.

Default:

Default (Views Menu Open):

Default (Locales Menu Open):

Everything here is public, feel free to take a closer look or leave a comment directly in our Figma document.

Everything designed here will not be built right away. We're going to implement this new UI strategy alongside Live Preview first. Here's what's to come at a high-level:

• Rich text editor overhaul
• Blocks within rich text
• Dramatically improved editor UX
• Better versions diff view(s)
• Interactive API view
• Relationships / References views

Everything here was discussed today in a live stream with our Discord community. I will post a recording of that stream to this thread as soon as possible. But let's keep the conversation going! If you have any thoughts about any of this stuff I'd love to hear about it. Leave a comment or two or three and let's talk about it.

For more conversation around Live Preview specifically, there's a separate, ongoing discussion for that here: #3061.

We've got a bit of work yet to do around localization. Specifically, we need to:

1. Visually differentiate localized fields from non-localized fields
2. Allow editing multiple locales at once.

For more on that work, follow along with this discussion: #1234

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4