New Quick Add Module option from the edit bar

[donker]

The current experience to add a module to the page is (1) cumbersome and (2) brittle. It's cumbersome because you need to wait for the popup and search for the module and then drag it to the place you want. This takes quite some time. It's brittle because any error in JS from the module or skin and the user can't add the module at all.

This PR adds a quick module add option right in the edit bar not unlike we had back before the Personabar.

The addition is almost instantaneous reducing time to add a module to a page. It is also less brittle as it doesn't require popups or dragging.

[mitchelsellers]

I like this nice and clean approach. WOuld "QuickAddModule" be a better name than AddModuleNow ?

[donker]

I tweaked the wording a bit. In the end there is not much wording people see. But what they see should be clear. Maybe the icon should reflect the "quick part" by having a lightning bolt in it?

[bdukes]

Thanks, this looks great

[thienvc]

Should we convert the EditBar into a PersonalBar menu too? It is cumbersome to have 2 bars occupy the entire screen
Future can hide / show (pin / unpin) the PersonalBar bar

[valadas]

Looks good to me, but like discussed, would be nice to move the buttons around to better isolate this new feature from the existing buttons and maybe adding a separator for clarity.

[david-poindexter]

Aside from some of my number of clicks required concerns_ this is a nice proposal to avoid the floaty thingy. This also uses a lot of real estate in the Edit Bar and I have concerns about long module names and content names.

[10PoundGorilla-ChrisBehling]

What is the strategy for tablet/mobile view? While I would argue very few administrators do or should be editing their site on mobile (let alone adding a module) we should make sure that it still displays well.

The current UI doesn't respond very well on mobile as it is and the new controls shown above looks to double the amount of content being displayed.

I'm also concerned for a long list, maybe limit the size and use scrolling instead. Or have it so only 'favorite' modules display. From a style perspective I'd like a little extra padding in each list-item, both horizontally and vertically.

I almost like the idea of starting with a lightning bolt icon using the same square icon button styles, and once clicked it expands to show the list of modules and current selected module. It then also reveals the pane you want to assign the module to and the confirm action button.

[valadas]

Yeah it currently uses floats to make the close button right and the rest left. Maybe at the base minimum we make this display: flex; and overflow-x: scroll so it's at least usable. I tried it for a little bit and there was other issues with it...

[donker]

Adding a setting:

Add option to add to top or bottom:

[SkyeHoefling]

Is this going to be an opt-in or opt-out feature?

I think this is a great idea, but think it should be turned off by default until it is a little bit more refined. I've seen a couple good questions in this thread that don't appear to be addressed yet.

• Long module names
• Screen size concerns for different form factors. I know the Persona Bar is designed to be used on desktop/laptop, but we really should take into consideration the tablet story
• Does this comply with any accessibility standards? It would be a huge accessibility win if we could use this feature by using keyboard shortcuts

Not sure if any of these concerns should hold the PR, which is why I think it should start as an opt-in feature for a couple release cycles.

[valadas]

• Does this comply with any accessibility standards? It would be a huge accessibility win if we could use this feature by using keyboard shortcuts

Well, getting to the actual edit bar now is not really accessible 😄 For accessibility the other offering of bringing back the insert buttons in the panes would be accessible (you can tab to them and activate them and the popup has focus on the search field) however from there it is again not accessible because you can actually select your module by keyboard.

That being said, I think we can improve that and it should not hold this PR. I would personally prefer if this is an opt-in feature rather than an opt-out feature.

[bizcomit]

Great idea!
I will try to make a couple of suggestions :

1- the list of modules could be in "autocomplete" mode so that it is possible to type also a part of the module name and filter the list

2- there could be a second list (or alternatively a part of the single list, with a divider in between) that shows the saved module templates: in practice, adding a module from a template, the effect would be to add that type of module and then launch the import via IPortable (provided that the module supports it, but if there is a template for that module is obviously so). As a corollary of this suggestion in the Export action of the module you would add a request "[ x ] add to templates list".

3- from admin, have the possibility to show or not a module or a template according to the user role. Obviously admin "sees all", while some users editors could for example only add templates pre organized by admin, or only certain types of modules.