UiLocation

Locations at which UI components can be inserted.

Extensions can extend MindDrop's UI by inserting UI elemnts throughout different locations. This is done using the app.extendUi method, which takes a UiLocation as its first parameter, and a UiComponentConfig or React element as its second parameter.

Locations are referenced in a hierarchical fashion, generally in the form:

[Section]:[Subsection?]:[Container]:[Target]

For example, to add an item to the sidebar's primary navigation menu:

Sidebar:PrimaryNav:Item

Sidebar being the section, PrimaryNav the container, and Item the target. In this case there is no subsection.

Sections

The MindDrop UI features two primary sections: Sidebar and [Content]. The [Content] section is referenced using a name based on the view, such as Topic when targetting the topic view.

Subsections

Some sections contain subsections, such as Header and Footer.

Containers

Containers generally contain similar UI elements, such as a menu containing navigation items.

Targets

Inside containers

• Content: add content into a container.

• Item: add an item into a menu or list container.

• Top: add content before other content in a vertical container.

• Bottom: add content after other content in a vertical container.

• Start: add content before other content in a horizontal container.

• End: add content after other content in a horizontal container.

Outside containers

• Above: the space directly above the container.

• Below: the space directly below the container.

• Before: the space directly to the left (or right in RTL languages) of the container.

• After: the space directly to the right (or left in RTL languages) of the container.

Notes

Not all containers offer every target keyword. For example, toolbars can be extended using Item, but not Top or Bottom as they are intended to be a single row.

The load order of extensions determines the order in which elements are inserted. If multiple extensions add content Above into a container, the content added by the extension loaded last will come out on top.

The sidebar allows the user to navigate to any view within the app and launch app related actions from it's bottom toolbar.

The topic content view is displayed when the user opens a topic.