panel-chrome

This package is responsible for the panel layout in campaign buddy. It renders components in a resizable grid layout where each cell in the grid is a tabbed panel that contains one or more panes and renders the active pane.

TODO

• [ ] Drop zones
• [ ] Tab overflow logic
• [ ] Actual pane rendering (and URI format)
• [ ] Blank tab logic
• [ ] Closing tabs
• [ ] Fixing default sizing logic for new panels

In scope for this component

• Rendering a grid layout
• Providing a model that represents a panel layout
• Providing an API for manipulating a layout at arbitrary levels in the consumer's render tree (within our outside of the panel layout component e.g. a top level app toolbar)
• Rendering a tabbed layout in each grid cell with default tab rendering that can be extended by consumers for more complex tab use cases (e.g. tabs with app specific hover behaviors)
• Providing an API for pane components to update the text of the tab
• Providing width/height to pane components
• Providing a standard pattern/API for serializing pane state in saved layouts via URIs
• Resizing and drag and drop logic

Out of scope for this component

• Rendering specific panes
• Campaign buddy or other consumer specific logic

Definitions

• Panel layout: A grid of resizable panels
• Panel: A cell within the panel layout grid which can be resized horizontally or vertically. It renders a tab bar at the top and the active pane (the component for which is defined by the consumer)
• Pane: A consumer supplied component that can be rendered into the grid when it is active in a panel. Panes can be dragged into other panels by dragging they're associated tab.

Pane uris

• Panes are identified via URIs that take the following