Toolbars

Canvas toolbar versus Patterns toolbar

Markup

Every Canvas toolbar (<div class="canvas-toolbar">) is, or will be, replaced by a Patterns toolbar (<div class="pat-toolbar">). The structure of the new Patterns toolbar is similar to that of the Canvas toolbar, with the key difference that pat-toolbar sections are nested inside an extra div.

A typical canvas-toolbar structure like this:

<div
    id="unique-id"
    class="
        canvas-toolbar">
    <div 
        class="
            canvas-toolbar-section
            view-options">
        …
    </div>
    <div 
        class="
            canvas-toolbar-section
            navigation">
        …
    </div>
    <div 
        class="
            canvas-toolbar-section 
            quick-functions">
        <div 
            class="functions">
            …
        </div>
    </div>
</div>

… would as a pat-toolbar have a markup structure similar to this (example is simplified):

<div
    id="unique-id"
    class="
        pat-toolbar">
    <div
        id="unique-id-navigation"
        class="
            toolbar-area
            navigation">
        <div 
            class="
                toolbar-section
                navigation">
            …
        </div>
    </div>
    <div
        id="unique-id-functions"
        class="
            toolbar-area
            functions">
        <div 
            class="
                toolbar-functions
                view-options">
            …
        </div>
        <div 
            class="
                toolbar-section 
                quick-functions">
            …
        </div>
    </div>
</div>

IDs are not usually essential for styling, though they can sometimes simplify pat-injection statements. Typically, items in the navigation area inject content into an area visually below the toolbar, whilst simultaneously re-injecting the functions area of the toolbar. This allows view options such as grouping and sorting to be tuned per section of an application or portal page.

Toolbar configuration

Patterns toolbars are typically generated in proto by the component /_includes/patterns/toolbar.html.

A typical pat-toolbar instance in proto looks like this in the template:

{% include patterns/toolbar.html
    source=layout.toolbar %}

The source attribute specifies the location of YAML-structured data that defines the toolbar. The YAML may live in the front matter of a page or layout, or in a separate YAML file:

• source="layout.something"
• source="page.something"
• source="site.data.some-yaml-file"

Use the optional root attribute to wrap the toolbar in a <form> tag by setting root='form'. The default value is div, which adds no wrapper element.

All pat-toolbar injections use sub-form and pat-auto-submit, allowing the toolbar to function within existing forms regardless of the parent form’s action or injection configuration.

Icons

Icons on a toolbar receive the class icon, regardless of whether they use a link or button element. Alongside the icon class, there is always a modifier class such as edit, more, or visibility. In some cases the modifier is a Fontello icon class such as icon-something. The class iconified is gradually being phased out.

Pat-button also supports icon-button behaviour by adding the modifier class no-label. This option is only used outside pat-toolbars.

Examples

Typical toolbar in the document area of an app: https://proto.quaivecloud.com/apps/bookmarks/