Create a functional prototype of the new top contextual bar

Gonna work on it.

Hello all!

I created few new components and did small modifications with existing one.

1. Created toolbar-dropdown. Floating UI based js. Button with links list. Js later need to be updated with close on click outside. For now only simplest script.

2. Created admin-extra-toolbar. It should not appear on all pages. So separated library. Same script as in main navigation wrapper but simplified. Displace supported. RTL need to be checked.

3. Updated Navigation Button to make it universal. Reverted icon logic. Also removed few styles which were same with this button. Added few new icons.

4. Updated Control-top bar styles to support fixed position + Drupal Displace.

5. Located new components twig logic in dummy twig sources directory. templates/temp-components.

6. Fixed js script. We definetly need to rework it.

IMO looks good: https://gyazo.com/cb14eafb91fe1737b83e0d8d9b21d979

Please review!

Mentioned in Slack: This looks really great. The only thing I would change in a component perspective is trying to separate the breadcrumb component from the “back to site” link, so styles will be easier and won’t be that difficult.
As an idea, maybe separate left and right regions:

• Left: contextual navigation
  • “go back” button
  • breadcumb

• Right: contextual controls?
  • the rest

Apart from this small detail, just to mention that the expectation from the work here is to have a "functional" prototype to run user tests. For example:

• The content should change based the page we are. This is key to test if users find it useful to have different elements based on the context.
• The right sidebar should get the content from the node edit form sidebar, and the Claro one shouldn't appear. Even a display: none can work in a prototype. :)

Gonna manage it now.

Added some conditions based on route.
Add content/media/block works.
Breadcrumbs are also ok.

Cool! Things I've noticed:

• When creating new content, the sidebar doesn’t appear
• When editing exiting content or viewing a node on the front-end, old local tasks below the title shouldn’t be visible. And the values under the dropdown should be those local tasks.
• The Preview when editing a node should take you to the preview page, same as the preview item on the
• When editing content, the left top bar should say “Edit + [content-title]”
• When viewing a node on the front-end, instead of the “Go back to Administration” it should say “Edit + [content-title]”
• The “Edit” on the front-end should be the Edit that exists nowadays on the Toolbar

.

Made right sidebar scrollable. Fixed its height

Also do we need to have preview of sidebar on mobile display? Currently it's hidden. I'm thinking if we have to move on mobile display some toggling button?

Also `Edit` link in top toolbar now is a real link to edit page. Same for preview

Thanks @kostyashupenko!! And sorry it took me a while to review :)

Here's what I've found testing it:

1. There should be only the breadcrumb from the top bar on the admin UI.
   
2. The separator between items from the real breadcrumb should be a caret as the one we have in the admin UI. I’ve added an example in Figma
   
3. When it’s a full node view (for example this) the content in the left space should be “Edit [node-title] as in this design page
4. When it’s a full node view, the value of the dropdown should be the list of the local tasks. And if they could keep the real link it would be great because we want to test if they are useful with content users :)
5. When you’re on the edit form, the value of the dropdown should be the list of the local tasks too.
6. The text on the left side that replaces the breadcrumb shouldn’t be a link, maybe I didn’t explain myself properly. It should be plain text saying “Edit + [bundle]”.
   
7. The preview is working fine now, but it looks like the preview bar(id=node-preview-form-select) doesn’t show up anymore? Not a big deal for the tests but to keep in mind when we move forward with the final implementation.

I've left feedback, but the work happening in here is great. Thanks!!

Uploading the correct image.

Everything should be fixed now except of 7.

About preview - you have to create node first, then you will be able to click Preview button in top toolbar (this is how it works now, not sure if have to provide some extra logic).

Also @ckrina can you add also https://www.drupal.org/u/yurkinpark → to credit list? He helped me a bit with services

ckrina → credited YurkinPark → .

This is almost ready, good that we have the test almost ready too :)

Just 2 more things:

1. On the front-end viewing a node, there shouldn’t be any extra info apart of the “Edit + nodetitle”.
   
2. When viewing a node in the front-end, the Edit button is pointing to edit the node, but it should be the button to inline editing. I know that button really doesn’t make sense and it’s actually confusing, so let’s change the label from “Edit” to “Turn on In Place Editing”. And it should actually be the button we have in the Toolbar nowadays, with its current functionality: when you click on it, it enables the in place editing and the icons appear everywhere. Thanks to this confusion we might actually improve something else :D
   

About the preview, let's forget about it for now. It's not important for the user tests and when we implement this beyond the prototype when can invest the time it needs.

Also, credits given. Thanks @YurkinPark!

ckrina → credited Ana Barcelona → .

ckrina → credited baluv3 → .

ckrina → credited dead_arm → .

ckrina → credited jponch → .

ckrina → credited jwitkowski79 → .

Actually, I will use this issue to credit everybody that participated on the design part for this top contextual bar.

@kostyashupenko thank you for the changes!

I just realized of 2 more things. Sorry I didn't catch them earlier:

1. The save button from the top bar on the edit form doesn't work. It should behave as the one at the bottom.
2. The "turn on in place editing" item appear on all front-end pages (the same it appears nowadays)

This is great!!! Thanks both @kostyashupenko and @finnsky for all the work here! I'm leaving this as RTBC for now instead of merging to discuss the strategy to convert this into code ready for an alpha release of the module. Meanwhile we'll start testing this hopefully next week on 📌 Toolbar Prototype Usability Testing Phase 4 Active .

Gonna rebase it with current 1.x

Testing the script for the user tests I've found this error on the top bar: when you are in the front-end, if you click in the "more options" dropdow, it triggers the Inline edit too. See:

Thanks for the fix @kostyashupenko! Moving back to RTBC.

I've applied MR123, one detail I've noticed if you try to tab through the interface on for example /admin/config/media/image-styles after the visible "Skip to main content" link, you have four invisible focus states equal to the "Go back to Site", "Administration", "Configuration", and "Media" links. According to WCAG 2.2 SC2.4.7 the user should know which element has keyboard focus.

@rkoller hi!

Thank you for review! but in this MR we only added rude prototype for just usability testing.
It has a lot of hardcode and weird solutions :)

Real work is planned here:
https://www.drupal.org/project/navigation/issues/3401826 🌱 [PLAN] Top contextual bar Active

And first MR with real component:
https://www.drupal.org/project/navigation/issues/3402046 ✨ Create the Top Bar Needs review

Marking this as Fixed after the results from 📌 Toolbar Prototype Usability Testing Phase 4 Active . Thanks everybody that make it possible to see what worked and what didn't from this initial idea. We've learned a lot!

Automatically closed - issue fixed for 2 weeks with no activity.