Plugin front-end editing suggestion

[Anton Naumenko]

Hi all,

    I want to talk about relatively old feature - plugin management. That is, when you press "Edit" button on the page, and then "Structure". That page is always been a little buggy. Starting from incorrect displaying, up to suspicious 300 ms redraw delay. And so on. But the problem becomes even more urgent as soon as you remember about nested plugins. And that potentially each plugin could (and should) contain placeholders. Current view cannot correctly display this case, though all other subsystems handle it correctly.

    Please, sorry for such long negative talk. Let's now think about what this plugins-placeholders system from point of view of administrator is? Answer is obvious, it is tree. Simple tree, where plugins and placeholders could be viewed as nodes. So, we could use any jquery tree with drag'n'drop support, which will provide much better user experience.

    I do know, that current system tries to place placeholders not in simple list, but position them on the page where it would be placed in real world. But this approach has one big problem: not all placeholders are visible (display!=none) when I press "Edit->Structure" buttons. My placeholder could be hidden due to some login off application. Moreover, there's a problem with "width". Current system uses Math.min(150, placeholder.width) logic. But is not very convenient to edit plugins inside 150px width placeholder. Of could, it could be solved by increasing min-width. But again, what about mobile platforms? Currently, it is almost impossible to change anything on site from smart-phone. Good third party tree component could solve all this. 

    What do you think?

[Angelo Dini]

Hello Anton

thank you for your criticism which is rightfully placed. We think a lot about the implementation and how to make it easier for the end-user to handle. First of all we need to clarify that we have there two goals in mind: speed and usability. Speed wise things like the 300 ms redraw (which is to ensure that the positions match when resizing the window or AJAX might affect their positions) is just not efficient. The browser gets heavily effected and FPS rendering just lowers. Usability wise, as you mentioned, placeholders get to small, menus cannot be reached or the distance between them is too large for an efficient dragging experience.

For this reason we created an intermediate solution (https://github.com/divio/django-cms/pull/4185) which you can check out and give us even further feedback. Keep in mind that we cannot to huge changes as we have to keep backwards compatibility in mind. Changing the UI drastically can also confuse the user. We want to move away from this "automated placement" method and provide static solutions. There are also other thoughts around integrating the structure into the sidebar within later stages and there is also aldryn-blueprint which will be released soonish. All those tools will help improving the user experience.

Additionally we are working greatly on speed improvements as blogged recently (http://www.django-cms.org/en/blog/2015/05/18/content-management-performance-focus/). There are also internal branches where we optimize the frontend (https://github.com/FinalAngel/django-cms/tree/feature/3.2).

Thank You

Angelo