Description

Objective

To map the appearance, functions, and behaviors of the Cristal toolbar.

Description

The Cristal toolbar is inspired by the XWiki Standard toolbar but includes modifications and different groupings. It features a cleaner design with a white background and icons sourced from the Bootstrap Project. The icons are 20px in size within a 24px bounding box and are spaced with a 4px margin on each side.

Each button on the Cristal toolbar should have a hover state and a tooltip.

Grouping of Toolbar Sections

The sections in the Cristal toolbar are organized differently from XWiki to improve usability, though the actions themselves remain identical to those on XWiki.

Toolbar Sections

1. Undo/Redo
2. Paragraph / Block Styles / Inline Styles
3. Text Modifications / Formats
4. Block Elements / Macros
5. Dynamic Spacer
6. Editor Functions

Key Differences

• Text Styles Grouping: Paragraph, block, and inline styles are grouped under a single "Style" option for better organization.
• Macros Label: The "+" icon is labeled "Macros" for clarity.
• Editor Functions Placement: Editor functions are placed at the end of the toolbar to separate them from text functions, making content-related functions more accessible.
• Undo/Redo Placement: Unlike other editor functions, undo and redo are prominently placed at the start to emphasize their importance.

Text Styles Grouping

On XS there are two dropdowns that deals with text styles. One at the beginning, only for paragraph styles, and another one close to the macros buttons. 

But their function is very related, so I am proposing to unify them under the same dropdown at the beginning. 

On Restricted Viewports

For mobile viewports, the toolbar should be able to truncate its contents. If there isn't enough space for the entire toolbar, some actions should be grouped under a Vertical Ellipsis button. Here are two examples illustrating this approach: