UI improvements following the release JS@v5.0.0
Following the last release which concerned the migration to Material UI4, here are some adjustments and improvements.
JS development
-
Apply the API icon in the toolbar -
Apply the grid of the pages -
Update the drop down box in the Customise feature -
Update the Input boxes specifically the Highlights ones and the Label Inset ones -
The Font size of the buttons in the toolbar of the visualisation page should be the default one 14px instead of 13px -
Homepage facet texts should not be bold and not be transformed to uppercase (anymore) -
Harmonise the spinner colour: white in blue background and blue in white background -
Pagination font size should be the default one -
Replace the 20% darker colour of the facets buttons and the free-text search bar by the fixed colour (primary-dark colour) -
Apply the new focus design (when done in the UI documentation area) -
The cancel icon for the search/spotlight input boxes should be the icon-small-cross -
Rename English de.search.datasourceId
to "Data source" (with space) - see linked merge request -
Tooltip display in the table: display the tooltip up to the cell for any footnotes or flags (mouse hover and wen accessibility focus). -
Change the pinned facets icon and its place (DE #278 (closed)) -
theme font table
UI documentation
-
Add in the UI documentation the Toolbar grid and review the Grid of the search result page and visualisation page to leave more space fr the filters column -
Adjust the UI documentation and the mockups (Download and Customise) to take into account the correct font and the font-size in the Action boxes (API, Share, Customise). Roboto Slab+17px is used for the titles while Helvetica Neue+14px is used for the other content. (see the attached document which details where to apply appropriate fonts in the table Action boxes.) -
Detail the button with a font icon: icon size and font size (Core and exception if any, cross-icon) -
The default colour of the drop down box with an arrow is not consistent with the overall design. This has to be adjusted and defined in the UI documentation. (Is dark blue color correct choice as it is not visible in the Columns area of the customise action box) -
Details the behaviour of the Input boxes specifically the "Highlights" one, the "Width" one and the spotlight one (Filter) with the small-cross icon to cancel the entry. -
Change the transform text to upper case for the home facets buttons to Transform the first letter of the text to upper case. -
Define the focus design which will replace the implemented ripple effect. -
The proposal with upper-script footnotes(as star) and flags is the preferable option (see #267 (closed)). The comments are for this proposal: - to find a lighter colour of showing these flags and footnotes (proposals: same without bold and one with a lighter grey such as #444444 which is only acceptable with a certain font size)
- to check the alignment of the values: When there is the upper-script footnote or flag attached to a cell, the values of the row are not anymore aligned between each other and also with the row title\s.
-
Add in the UI documentation the upper-script footnotes details -
Add in the UI documentation the focus details
Edited by Mike Velluet