Showcase App alterations
There is a requirement to add information about the fields etc. that are available in the showcase app:
- The information should be succinct, descriptive but not contain any coding information or any detail beyond a brief usage description for each item.
- For further information the user needs to look to official documentation. For this reason there needs to be a link to official documentation from within Magnolia CMS 5.
Currently there are three tabs in the showcase app:
- Form fields - Magnolia specific fields.
- Vaadin fields - Vaadin fields that can be used with Magnolia.
- Unsupported fields - Not clear why we specify what Vaadin fields NOT to use. Suggest adding information on what is wrong with each field (i.e. - why it should not be used). That or simply removing this tab.
All three tabs require changes. To summarize - make it more tabular. Classic table with header, columns and rows (albeit these are invisible). Keep things nicely spaced.
General suggestion valid for all three tabs is to add a link to official documentation, where users can find detailed information on using fields. The link could be by the line "Showcase apps......." above the tabs. Or, link to a more specific page from each tab. See Mockup proposal.
Form fields tab changes
Suggest making a few alterations to the Showcase App: Form fields tab:
- Increase real estate for the fields (i.e make the grey area bigger - stretch it to the left and right).
- Add three columns with headings:
- Field name
- Appearance - Show the actual field, item, 'thing'.
- Function (or Description) - Add a short usage description per field. Say, max 140 characters. (Use this for... Can also be used for... etc.) Where, why, how. (Use on x pages to describe....Try not to use more than x times per page.)
- Left align everything in each column.
- To accommodate the About text (Function? Description?) increase space between each row so that 140 characters can fit comfortably in the third column, spread over 2/3 lines at standard browsing settings.
- Consider adding visible lines as column or row indicators (i.e grey vertical lines). Am not 100% convinced of this. There appear to be semi row indicators in the Vaadin fields tab. Not to great effect though.
- Remove references to 'in a form' in field name. So, 'Commit button in a form' is just called 'Commit button'.
Current look
Proposal mockup
Field | Description |
---|---|
Static text | |
Commit button in a form | |
Reset button in a form | |
Link | |
Text field | |
Text area | |
Password fields | |
Checkbox | |
Radio button group | |
Checkbox group | |
Select | |
Date field |
Vaadin fields tab changes
Suggest making a few alterations to the Showcase App: Vaadin fields tab:
- Increase real estate for the fields (i.e make the light grey area bigger - stretch it to the left and right).
- Add three columns:
- Field name
- Appearance - show the field
- Function (or Description) - description
- Left align everything in each column.
- For the Field names:
- Use sentence case for headings (First word capitalized only.) At present there we have 'Magnolia icons' but 'Progress Indicator'. 'Progress indicator' is better.
- Perhaps BOLD the highest level of heading (the category - for example Magnolia icons) not secondary headings.
- Label each item, field, 'thing' individually, either as an independent thing or as a member of a category.
- Name each field separately. Currently there is 'Magnolia table and tree table'. This should be:
- Magnolia table
- Tree table
- Consider adding visible lines (grey) as column indicators.
Field | Description |
---|---|
Static text | |
Commit button in a form | |
Reset button in a form | |
Link | |
Text field | |
Text area | |
Password fields | |
Checkbox | |
Radio button group | |
Checkbox group | |
Select | |
Date field |