Description

WIP

• General Macro Usag
  • Adding
  •  
  • Macro Browser
  • Configuration
  • Empty Macro
  • Configured Macro
  • Hovering and Selecting
  • Moving
    • Drag and Drop
• All Widget States

General Macro Usag

Adding

Adding a macro should be done via the slash menu  or by using a fixed menu button.

The slash menu should contain a search box for quick access.
 An advanced search is not necessary as macro selection usually does not involve a combination of filters, orders, etc.

• Each macro should
  • Have an icon
  • A name
  • A short description
• If a macro leads automatically to a config page, then the name should also include the ellipsis character after it.
• In the pop-up base there should be a link pointing to the Macro Browser

Macro Browser

The Macro Browser is an expanded view of all macros available to an instance.

The macro browser can be opened via:

• A link at the bottom of the command menu (if doable without hacking Block Note code)
  • Or a fixed first option on the menu list, as it was a macro itself.
• A button on the toolbar (icon and position to be defined.)

The Dialog should:

• Have a sidebar for category navigation
• One of the categories should be "All" listing all macros 
• Each macro should have
  • Name
  • Description
  • Add button
    • If the macro has a required configuration step, then the Add label should have the ellipsis character after it.
  • A preview image
    • The preview should be accessed by hovering or touching the "Preview" link and should be presented as a hovering image
  • If the macro doesn't have any preview, then the Preview button should be hidden.

Configuration

Some macros might require some configuration fields to be filled before being shown, in this case the config dialog should appear automatically.

In this dialog, it's important that the scrolling is made only on the contents of the dialog, the buttons should always be visible.

Empty Macro

A macro can be in an empty state when it has been selected by the user but never really filled with content. In these cases, we should show the macro with its name and icon to help the user differentiate between each one.

Configured Macro

With the macro configured, its content should be visible without extra UI elements. As seen in the code macro below.

Hovering and Selecting

When the mouse passes over the element, a hover style should appear. This indicates that there's further interaction available here.

To further configure, change, delete or move the macro it should be selected. This selection can be done by clicking, touching or focusing the element with the cursor.
With the selection made, contextual interface elements are shown describing the above actions. This interface element should be *floating* above the page content. IE it shouldn't move the content up or below out of place to be visible.

Moving

Drag and Drop

The macro can be moved by drang-and-drop on devices that support it. To indicate this, a drag handle should be available.

Dragging is started by holding on the handle, from this point forward the contents of the macro is hidden, only the macro name is displayed. This is for space purposes, very big items as images could be difficult to move if everything was shown during the drag action.

The destination of the move should be very visible. Indicated here by a 2px blue line

All Widget States

Here we can see most changes from the current XWiki Standard configuration and behavior.