Tool dock

Tools along the end of a page, as an IDE has them: a bar of icons, each opening a zone in a column beside the page. The bar on the right of this page is one.

Two groups, one open in each

The icons at the top of the bar open their zone in the upper part of the column, those at its foot in the lower part, one open at a time in each. Alone, a zone takes the column whole; with nothing open, the column is gone. The column is dragged wider from its start edge, and what each tool was left at comes back with the page.

Lying along the top

Given orientation horizontal, the bar lies along the top and the dock is the body of a page, written in a page--fill: what the start of the bar opens stands beside what its end opens, under it. A tool drawn edge to edge and taking the zone's height — an editor — says so with fill.

Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
Line 21
Line 22
Line 23
Line 24
Line 25
Line 26
Line 27
Line 28
Line 29
Line 30
Line 31
Line 32
Line 33
Line 34
Line 35
Line 36
Line 37
Line 38
Line 39
Line 40

Usage

A page describes its tools in its page_zones_after block, and the dock draws the column, its zones, their handles and the bar. A tool shows what the page drew for it (content), or a page loaded the first time it opens (url).

{%- block page_zones_after -%}
    {{ tool_dock('board.file', [
        { name: 'outline', label: 'Outline', icon: 'ph:bold/list-bullets', content: outline },
        { name: 'detail', label: 'Detail', icon: 'ph:bold/info', group: 'end', open: true, content: detail },
        { name: 'history', label: 'History', icon: 'ph:bold/clock-counter-clockwise', group: 'end', url: path('app_file_history') },
    ]) }}
{%- endblock -%}