Description

WIP

• General Macro Usag
  • Adding
  • Configuration
  • Empty Macro
  • Configured Macro
  • Hovering and Selecting
  • Moving
    • Drag and Drop
    • By Buttons
• 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.

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

By Buttons

As an accessibility feature, it's also important to allow moving the macro via other means rather than relying only on drag-and-drop.

The right most buttons in the proposal are for that, when clicking each the macro block should me moved on block above or below.

All Widget States

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