Proposal for UX improvements to the link dialog
Thiago KrieckDescription
Context
In an effort to standardize various aspects of XWiki, I would like to propose some improvements to the link dialog used in the CK editor.
Some problems with the current implementation:
Non-standard UI elements.
- Specially visible on button styles and rounded corners
- This might be a CK limitation, but if possible it would be good to standardize on Theme variables
- Example:
Some important controls are hidden by default
- The selection of the link type is on a drop-down
- Sometimes the icon type is clickable, sometimes it is not.
- Example:
- The flow for uploading a new file makes the user go backwards in the natural flow of reading.
Proposal
Standardization of components
The dialog and its elements should as much as possible follow all the components, fonts and color conventions from the rest of the system.
This means:
- For XS: follow the color theme and elements from Bootstrap 3
- For Cristal: follow the components and colors of the chosen Design System
Link input Icon order
To keep the input icon compact, the order of icons should be:
- Type
- Input
- Page selector
Auto complete categories
For showing different types of links on auto complete. Details below.
Input auto complete
Show a categorization label on the auto complete dropdown. Not always required but for the cases described above, it will be necessary. Should be shown even if only one category exists
Auto select link type
When the user pastes or types a link, try to have the type automatically selected. In case the type cannot be determined with 100% accuracy, present a drop down for possible choices.
For example, when typing "wiki" the type could be:
1. internal page of the wiki
2. external page (Wikipedia, for example).
In this case a dropdown should be presented, unless the user continues typing and point to a page or finish wikipedia.org
Page tree icon
The tree icon should be the same as the one in the breadcrumb
User defined target for links
Show in the dialog itself an option for defining that a link should open in a new page.
Default off
Show list of anchors for internal links
For internal pages and based on user action (Link to Anchor), parse and show subtitles inside the linked document.
Further Improvements
Based on the discussion: https://forum.xwiki.org/t/proposal-for-ux-improvements-to-the-link-dialog/14838/7
Extra features for the overall link functionality (not just the dialog)
- Rich tooltips
- Programmatic definition of attributes
- Additional customized link types
- Extension/customization of the link creation logic
