In Sailfish 2.0, we've redesigned the appearance and behaviour of a variety of Silica UI components. We've also made API changes to provide more customization abilities and make it easier to scale UI layouts for different screen sizes.

Here is a summary of the Silica changes in Sailfish 2.0.

Significant UX changes

UI component design updates

Various UI components have been redesigned or tweaked; here are the most noticeable changes.

• Cover actions
  • Cover actions are now invoked by "tap" rather than "drag" actions. This is to avoid interference with the horizontal-swipe gestures on the Home and Events screens.
• PullDownMenu, PushUpMenu and ContextMenu
  • Pulley menus are now revealed with a smoother look and feel: the response to the drag action has been improved and menus now open with a smooth gradient at the opened edge.
  • Pulley menus and context menus now indicate the current selection with a larger rectangular background, similar to the effect of pressing on a ListItem. For pulley menus, the selection background now blinks briefly to indicate an option has been selected.
• RemorseItem and RemorsePopup
  • The countdown animation is now visually segmented and has a darker background. Remorse pop-ups now slide upwards when closed.
• Button
  • Buttons now have a rectangular background with rounded corners, rather than an underline.
• DatePickerDialog
  • The dialog now shows the days of the week above the grid of dates.
  • The selected date is no longer used as the acceptText and is shown beneath the dialog header instead.
• TimePickerDialog
  • The selected time is no longer used as the acceptText and is shown in the center of the clock instead.

Recommended UX patterns

• Theme.horizontalPageMargin should now be used instead of Theme.paddingLarge for the spacing between the left and right edges of a page and its content.
• A dialog header's acceptText should no longer be used to indicate the user-selected value in a dialog. This is reflected by the changes to DatePickerDialog and TimePickerDialog, which now show the selected date and time elsewhere in the dialog.

Notable implementation changes

• Theme values have been updated to scale for different screen sizes.
• Theme.highlightText() now returns styled text rather than rich text.
• ContextMenu can now be used without any MenuItem children.

API additions and changes

New QML types and C++ library updates

• FadeAnimator added
  • This is a a non-blocking version of FadeAnimation that animates in the render thread. Use this in preference to FadeAnimation.
• The Screen object is now available from the C++ sailfishsilica library. (Note that Theme is also available from this library.)

API changes to existing types

Singleton objects

• Theme
  • Theme values have been updated to scale for different screen sizes.
  • Theme.highlightText() now returns styled text rather than rich text.
  • Theme.horizontalPageMargin added for applying left and right edge page margins
  • Additional icon sizes: Theme.iconSizeExtraSmall, Theme.iconSizeSmallPlus, Theme.iconSizeExtraLarge
  • Button sizes introduced: Theme.buttonWidthSmall, Theme.buttonWidthMedium, Theme.buttonWidthLarge
• Screen
  • New Screen.sizeCategory property to represent the device screen size

UI components

• ApplicationWindow
  • defaultAllowedOrientations added for device-specific default orientations
• Button
  • preferredWidth added for controlling button width
  • highlightBackgroundColor added
• BusyIndicator
  • BusyIndicatorSize.ExtraSmall added for size configuration
• ContextMenu
  • hasContent added as context menus no longer require MenuItem children
• CoverActionList
  • window property added for changing the window of the cover actions
• DatePicker
  • leftMargin and rightMargin added for content margin configuration
  • daysVisible, weeksVisible and monthYearVisible for UI configuration
  • dateCellSize replaced by cellWidth and cellHeight
  • DetailItem
    • leftMargin and rightMargin added for content margin configuration
  • DialogHeader
    • cancelText and defaultCancelText added for header text configuration
    • leftMargin and rightMargin added for content margin configuration
  • PageHeader
    • leftMargin and rightMargin added for content margin configuration
  • RemorseItem
    • leftMargin and rightMargin added for content margin configuration
  • RemorsePopup
    • leftMargin and rightMargin added for content margin configuration
  • ValueButton
    • leftMargin and rightMargin added for content margin configuration
  • ViewPlaceholder
    • textFormat added
    • leftMargin and rightMargin added for content margin configuration