✨(backend) Added new page extension 'IndexPage'

[sveetch]

Purpose

This new extension cover the need of some options for pages in main menu. These options are:

• Enable to show a dropdown of children page;
• Add a custom color class for the page on hover event in menu;

Proposal

The only proper way to carry these option data on a CMS page is through a page extension.

However we can not add these options to the existing page extensions since they are not used on the pages listed on the main menu because these pages are just some index to list children pages (like categories, news, courses, etc..) and so these index pages don't have any extension yet.

So we would add this new extension 'MainMenuEntry' that will carry new options and we would create this extension on pages that are listed in the main menu, commonly these pages are on level 0 of the CMS tree.

Includes

• A new model MainMenuEntry with its migration;
• A toolbar class MainMenuEntryExtensionToolbar to display (or not) the toolbar menu entry to create or edit the extension on a page;
• An admin class MainMenuEntryAdmin use by the related wizard;
• A new factory class MainMenuEntryFactory to create a page with the new extension;
• A menu modifier class MenuWithMainMenuEntry to patch menu to include the new extension data (since on default the menu node are not page objects and lack of many page attributes);
• New settings to manage MainMenuEntry behaviors in toolbar and menu;
• Modified the main menu template to implement usage of MainMenuEntry options;
• Modified the main menu Sass component to start implementation of menu entry hover color;
• Some tests around toolbar to cover its specific behavior (compared to other toolbar classes);

Notices

Settings and defaults

We use three settings and only a single default from defaults module because this module is loaded too early which avoid us to change their value in tests. But as a setting we can still override these settings on the fly inside tests.

• Default variable INDEX_MENU_COLOR_CLASSES manage the choice list for color class variant names that can be selected from MainMenuEntry extension. Default is empty but you can override it from setting RICHIE_INDEX_MENU_COLOR_CLASSES;
• Setting RICHIE_MAINMENUENTRY_ALLOW_CREATION has no default variable since we need to override it from test. This settings define if granted users can add this extension on existing page or not. If true, this will be possible and if false users will only be able to add this extension when creating a new page with the related wizard form. When migrating a project to a Richie version with MainMenuEntry feature, developer would set it to true temporarily and then set it to false when finished so it follow the common Richie rule to only add extension through wizard creation;
• Setting RICHIE_MAINMENUENTRY_MENU_ALLOWED_LEVEL define allowed level to see the toolbar entry for the MainMenuEntry extension form and is also used in menu modifier to avoid working on too many nodes. This is because we commonly build main menu from pages at root level (level 0) but some users may build main menu from pages under the Home page so the pages to process would be at level 1. And finally we want to restrict using this extension everywhere in the CMS tree;

Sass source for main menu

During development i've setted some dummy class variants on menu entry to be able to check and implement layout changes. And now the hover event for the menu entry use a CSS variable --r--menu--item--hover--color to define the background color, this should help you with your Cunningham system. The variable name is temporary, we can rename to whatever you want.

Menu modifier

The menu modifier has been developed with performance in focus so it should never add more than a single more queryset to get extensions for all pages.

Menu dropdown

The current layout implementation for menu entries which allow to list children page is ugly since we don't have any real dropdown menu in Richie because we don't include any Bootstrap component and we can not correctly and quickly implement it in vanilla JavaScript since it need to have behavior for desktop mode (a simple dropdown open on hover event) and another one in mobile mode (an accordion alike opening on click event).

For this point i just don't know how we could properly manage it.

Model migration

Included migration to initialize new model MainMenuEntry has been altered so the color choices are not hardcoded in migration, this allow to change the add or remove color from settings without to create a new migration each time. This could add a drawback (if removing used color, Django won't say nothing and you can not know to append a data migration for this change) that you don't want, we can them turn back to the legacy Django behavior (keep hardcoded list on field migration).

[jbpenrath]

As a first review, it looks to work great!

About the look'n feel of the menu, as there is a need of interaction I think we should manage those menus through a React component.