Symphony 2.4: UI changes

sym24_ui-changes.md

User Interface

The Symphony UI has been simplified and most animations have been moved from script functions to style definitions. Overall the backend should handle large data sets much better and should be more responsive.

As of Symphony 2.4 we are using Grunt to merge and compress assets. Please see the readme for more information on Grunt. This is new assets folder structure:

• /css
  • /src
  • minified sources
• /js
  • /lib – external libraries
  • /src
  • minified sources
• /xml

Symphony now bundles the following external libraries:

• jQuery, http://jquery.com (for DOM interactions)
• Crossroads, http://millermedeiros.github.io/crossroads.js/ (for routing)
• Selectize, http://brianreavis.github.io/selectize.js/ (for selectboxes)

Features

• [Changed] The Data Source editor has been overhauled completely, it now makes use of the symphonyPickable plugin. Please not that each fieldset now has to declare its context in a data-context attribute, see remote_datasource/commit/332422f1ba0505186b6ca0f37e0007c5e47269d3 for example.
• [Added] Data Sources no offer a forbidden parameter as a counterpart to the required parameter.
• [Added] Data Sources editor now offers a page connection interface
• [Removed] Dynamic Data Source have been removed from the Data Source editor, use the Remote Data Sources extension instead
• [Removed] All XSLT editors have been removed
• [Changed] Layouts and labels have been unified across all blueprint areas
• [Changed] Event documentation is now fetched and updated dynamically using AJAX, see below.
• [Added] Read-only data sources now display their source in the backend
• [Added] Handles for sections
• [Added] Publish filtering
• [Added] Automatically add a note if index tables are orderable
• [Added] ATAG2.0, WCAG2.0 and WAI ARIA support
• [Changed] Extended information on extension page (links to Github, better visualisation of statuses)
• [Changed] Unified core field layouts
• [Changed] ID is no longer an allowed field name or label

CSS

• [Changed] Sizes are now defined in `rem
• [Added] Table row statuses: .status-notice (yellow), .status-error (red) and .status-ok (green)
• [Changed] Reduced selector specifity, this should make overriding core styles much easier
• [Removed] Legacy styles, /symphony/assets/css/symphony.legacy.css
• [Changed] Vertical drawer positioning and sizing has been fixed, due to this the html and body height is no longer set to 100%
• [Changed] Error styling has been unified, use #error insted of `#fatalerror

JavaScript

• [Removed] Old duplicator API: make sure you wrap your item list in a div.frame and that you apply the duplicator to this element, e. g. $('div.frame').symphonyDuplicator(), see 2eb601ab0fea10b976479e8360753cb7c9624033
• [Added] AJAX page providing event documentation, /symphony/ajax/event-documentation/?section=x&filters=y&name=z
• [Changed] Backend interactions ar now organised in views, using `Symphony.View, see code documentation
• [Updated] jQuery to 2.1.0