Merge lp:~zsombi/ubuntu-ui-toolkit/theming-engine-versioner into lp:ubuntu-ui-toolkit/staging

[Zsombor Egri]

Provide versioning for theme loading. Each toolkit must be released with a well defined system theme version, and theme modules must have the same version as the toolkit.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1511
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1702/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2434/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/430/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/432/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/429/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2432/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1702/rebuild

review: Needs Fixing (continuous-integration)

[lp:~zsombi/ubuntu-ui-toolkit/theming-engine-versioner]

1512. By Zsombor Egri on 2015-04-25

API updated

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1512
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1703/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2440/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/431/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/433/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/430/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2438/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1703/rebuild

review: Needs Fixing (continuous-integration)

[lp:~zsombi/ubuntu-ui-toolkit/theming-engine-versioner]

1513. By Zsombor Egri on 2015-04-25

change theme version lookup to minimum minor version 2

1514. By Zsombor Egri on 2015-04-25

Ubuntu namespace tests

1515. By Zsombor Egri on 2015-04-25

theme version loading tests added

1516. By Zsombor Egri on 2015-04-25

documentation fixes

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1515
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1704/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2442/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/432/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/434/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/431/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2440/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1704/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1516
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1705/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2443
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/433
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/435
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/435/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/432/console
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/2123
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2441
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2441/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/19911

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1705/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

review: Approve (continuous-integration)

=== modified file 'components.api'
--- components.api	2015-04-17 07:44:17 +0000
+++ components.api	2015-04-25 07:11:10 +0000
@@ -622,11 +622,28 @@
     function undo()
     function remove(start, end)
     function getText(start, end)
-Palette 0.1 1.0
-QtObject
-    property PaletteValues normal
-    property PaletteValues selected
-PaletteValues 0.1 1.0
+Palette 0.1
+QtObject
+    property PaletteValues normal
+    property PaletteValues selected
+PaletteValues 0.1
+QtObject
+    property color background
+    property color backgroundText
+    property color base
+    property color baseText
+    property color foreground
+    property color foregroundText
+    property color overlay
+    property color overlayText
+    property color field
+    property color fieldText
+    property color selection
+Palette 1.3
+QtObject
+    property PaletteValues normal
+    property PaletteValues selected
+PaletteValues 1.3
 QtObject
     property color background
     property color backgroundText
@@ -1022,6 +1039,16 @@
     prototype: "QObject"
     exports: ["Ubuntu 1.2"]
     name: "CaptionsStyle"
+    name: "UCNamespaceV13"
+    prototype: "UCNamespace"
+    exports: ["Ubuntu 1.3"]
+    Property { name: "toolkitVersion"; type: "ushort"; isReadonly: true }
+    Property { name: "toolkitVersionMajor"; type: "ushort"; isReadonly: true }
+    Property { name: "toolkitVersionMinor"; type: "ushort"; isReadonly: true }
+    Method {
+    name: "version"
+    Parameter { name: "major"; type: "uchar" }
+    Parameter { name: "minor"; type: "uchar" }
     name: "UCQQuickImageExtension"
     prototype: "QQuickImageBase"
     exports: ["QQuickImageBase 0.1", "QQuickImageBase 1.0"]
@@ -1075,6 +1102,7 @@
     Property { name: "parentTheme"; type: "UCTheme"; isReadonly: true; isPointer: true }
     Property { name: "name"; type: "string" }
     Property { name: "palette"; type: "QObject"; isPointer: true }
+    Property { name: "version"; type: "ushort" }
     Method {
     name: "createStyleComponent"
     Parameter { name: "styleName"; type: "string" }

=== added file 'documentation/images/surudark-theme-13.png'
Binary files documentation/images/surudark-theme-13.png	1970-01-01 00:00:00 +0000 and documentation/images/surudark-theme-13.png	2015-04-25 07:11:10 +0000 differ
=== modified file 'documentation/images/surudark-theme.png'
Binary files documentation/images/surudark-theme.png	2015-04-15 07:16:01 +0000 and documentation/images/surudark-theme.png	2015-04-25 07:11:10 +0000 differ
=== modified file 'documentation/ubuntu-theming.qdoc'
--- documentation/ubuntu-theming.qdoc	2015-04-20 11:23:33 +0000
+++ documentation/ubuntu-theming.qdoc	2015-04-25 07:11:10 +0000
@@ -231,6 +231,13 @@
  * typically there to configure the style itself, or to turn on/off features provided by styles
  * in derived themes.
  *
+ * Starting with Ubuntu Components version 1.3, themes must provide versioned styles. This means
+ * that themes must store the styles in subfolders, meaning that toolkit version 1.3 must have
+ * the version specific styles under the theme's 1.3/ subfolder. The styling engine will look
+ * for the styles based on the theme version used by the component. If the style is not found
+ * with the requested version, it will fall back to the previous version of that style.
+ * \image surudark-theme-13.png
+ *
  * \section3 Standalone theme
  * A standalone theme is a theme which defines all style documents and theme palette,
  * and it is not derived from any theme. The only standalone theme UI Toolkit provides is
@@ -259,12 +266,12 @@
  *
  * SuruDark theme overrides the Ambiance theme's MainViewStyle, therefore declares the
  * MainViewStyle.qml document, with the following content:
- * \snippet Themes/SuruDark/MainViewStyle.qml 0
+ * \snippet Themes/SuruDark/1.3/MainViewStyle.qml 0
  *
  * The style imports the Ambiance theme module, and extends the Ambiance MainViewStyle
  * component. The same is done in the other style components. However, Palette defines
  * own values, and does not re-use Ambiance palette values.
- * \snippet Themes/SuruDark/Palette.qml 0
+ * \snippet Themes/SuruDark/1.3/Palette.qml 0
  *
  * The same is done with TabBarStyle and OptionSelectorStyle components.
  *
@@ -276,7 +283,7 @@
  * \qml
  * import QtQuick 2.4
  * import Ubuntu.Components 1.3
- * import Ubuntu.Components.Themes.Ambiance 1.2 as Ambiance
+ * import Ubuntu.Components.Themes.Ambiance 1.3 as Ambiance
  * Ambiance.SwitchStyle {
  *     // [...]
  * }
@@ -308,6 +315,11 @@
  *
  * The application can use its own theme in the following way:
  * \snippet customtheme/main.qml 0
+ *
+ * \note An application, which overrides multiple shared theme versions must provide separate
+ * style versions in its theme so the styling engine can identify the proper styles for the
+ * components. Note however that this is not mandatory, and it is up to the application developer
+ * to decide whether the application should support multiple style versions or not.
  */
 
 /*!
@@ -374,7 +386,7 @@
  * \qml
  * import QtQuick 2.4
  * import Ubuntu.Components 1.3
- * import Ubuntu.Components.Themes 1.0
+ * import Ubuntu.Components.Themes 1.3
  *
  * MainView {
  *     width: units.gu(40)
@@ -444,6 +456,66 @@
  * foregroundText and \c overlayText of \c normal, as well as \c fieldText, \c foregroundText,
  * \c overlayText and \c foreground on \c selected groups.
  *
+ * There may be cases when a subset of components wants to use different style versions
+ * than the one provided by the module version. Remember, using earlier minor versions
+ * of the theme is perfectly fine while using newer versions may not work, as component
+ * styles may use newer APIs of the component which is not present in the component, thus
+ * the style will fail.
+ *
+ * Let's take the example above, and assume that we want to show the Dialog with the same
+ * theme as the application but with an earlier version. We can do this by specifying the
+ * theme version with \l {Ubuntu::version}{Ubuntu.version()} as follows:
+ * \qml
+ * import QtQuick 2.4
+ * import Ubuntu.Components 1.3
+ * import Ubuntu.Components.Themes 1.3
+ *
+ * MainView {
+ *     width: units.gu(40)
+ *     height: units.gu(71)
+ *
+ *     applicationName: "subthemed"
+ *
+ *     Component {
+ *         id: dialogComponent
+ *         Dialog {
+ *             id: dialog
+ *             title: "Input dialog"
+ *             // make sure the dialog and its children will use the same
+ *             // theme as the rest of the application
+ *             theme: ThemeSettings {
+ *                 name: parentTheme.name
+ *                 // use version 1.2 of the theme
+ *                 version: Ubuntu.version(1, 2)
+ *             }
+ *             TextField {
+ *                 placeholderText: "enter text"
+ *             }
+ *             Button {
+ *                 text: "Close"
+ *                 onClicked: PopupUtils.close(dialog)
+ *             }
+ *         }
+ *     }
+ *
+ *     Column {
+ *         spacing: units.gu(1)
+ *         Button {
+ *             text: "Set Ambiance theme"
+ *             onClicked: theme.name = "Ubuntu.Components.Themes.Ambiance"
+ *         }
+ *         Button {
+ *             text: "Set SuruDark theme"
+ *             onClicked: theme.name = "Ubuntu.Components.Themes.SuruDark"
+ *         }
+ *         Button {
+ *             text: "Open dialog"
+ *             onClicked: PopupUtils.open(dialogComponent)
+ *         }
+ *     }
+ * }
+ * \endqml
+ *
  * \section1 That's it
  * By now you should have learned what the styling means, what are the themes, what
  * kind of themes the toolkit has, how can you create shared or application themes, where should

=== modified file 'modules/Ubuntu/Components/10/Button.qml'
--- modules/Ubuntu/Components/10/Button.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/10/Button.qml	2015-04-25 07:11:10 +0000
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.4
-import Ubuntu.Components 1.3
+import Ubuntu.Components 1.2
 
 /*!
    \internal
@@ -32,5 +32,5 @@
 
     property string iconPosition: "left"
 
-    style: theme.createStyleComponent("ButtonStyle.qml", button)
+    style: Theme.createStyleComponent("ButtonStyle.qml", button)
 }

=== modified file 'modules/Ubuntu/Components/11/Button.qml'
--- modules/Ubuntu/Components/11/Button.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/11/Button.qml	2015-04-25 07:11:10 +0000
@@ -121,5 +121,6 @@
     */
     property string iconPosition: "left"
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("ButtonStyle.qml", button)
 }

=== modified file 'modules/Ubuntu/Components/AbstractButton.qml'
--- modules/Ubuntu/Components/AbstractButton.qml	2015-03-03 13:47:48 +0000
+++ modules/Ubuntu/Components/AbstractButton.qml	2015-04-25 07:11:10 +0000
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.4
-import Ubuntu.Components 1.2
+import Ubuntu.Components 1.3
 
 /*!
     \qmlabstract AbstractButton

=== modified file 'modules/Ubuntu/Components/ActionItem.qml'
--- modules/Ubuntu/Components/ActionItem.qml	2015-03-03 13:47:48 +0000
+++ modules/Ubuntu/Components/ActionItem.qml	2015-04-25 07:11:10 +0000
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.4
-import Ubuntu.Components 1.2
+import Ubuntu.Components 1.3
 
 /*!
     \qmlabstract ActionItem

=== modified file 'modules/Ubuntu/Components/AnimatedItem.qml'
--- modules/Ubuntu/Components/AnimatedItem.qml	2015-04-10 06:52:20 +0000
+++ modules/Ubuntu/Components/AnimatedItem.qml	2015-04-25 07:11:10 +0000
@@ -33,5 +33,6 @@
       \deprecated
       Specifies whether the component is on the visible area of the Flickable or not.
     */
+    theme.version: Toolkit.Ubuntu.toolkitVersion
     property bool onScreen: true
 }

=== modified file 'modules/Ubuntu/Components/AppHeader.qml'
--- modules/Ubuntu/Components/AppHeader.qml	2015-04-10 06:52:20 +0000
+++ modules/Ubuntu/Components/AppHeader.qml	2015-04-25 07:11:10 +0000
@@ -342,6 +342,7 @@
         }
     }
 
+    theme.version: Components.Ubuntu.toolkitVersion
     style: header.useDeprecatedToolbar ? theme.createStyleComponent("HeaderStyle.qml", header) :
                                          theme.createStyleComponent("PageHeadStyle.qml", header)
 }

=== modified file 'modules/Ubuntu/Components/CheckBox.qml'
--- modules/Ubuntu/Components/CheckBox.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/CheckBox.qml	2015-04-25 07:11:10 +0000
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.4
-
+import Ubuntu.Components 1.3
 /*!
     \qmltype CheckBox
     \inqmlmodule Ubuntu.Components 1.1
@@ -49,5 +49,6 @@
      */
     onTriggered: checked = !checked
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("CheckBoxStyle.qml", checkBox)
 }

=== modified file 'modules/Ubuntu/Components/ListItems/ItemSelector.qml'
--- modules/Ubuntu/Components/ListItems/ItemSelector.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/ListItems/ItemSelector.qml	2015-04-25 07:11:10 +0000
@@ -216,6 +216,7 @@
                 right: parent.right
             }
             state: itemSelector.expanded ? "expanded" : "collapsed"
+            theme.version: Ubuntu.toolkitVersion
             style: theme.createStyleComponent("ListItemOptionSelectorStyle.qml", listContainer)
 
             states: [ State {

=== modified file 'modules/Ubuntu/Components/ListItems/ProgressionVisual.qml'
--- modules/Ubuntu/Components/ListItems/ProgressionVisual.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/ListItems/ProgressionVisual.qml	2015-04-25 07:11:10 +0000
@@ -25,5 +25,6 @@
     property bool showSplit: false
     property real splitMargin
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("ProgressionVisualStyle.qml", progressionVisual)
 }

=== modified file 'modules/Ubuntu/Components/MainViewBase.qml'
--- modules/Ubuntu/Components/MainViewBase.qml	2015-04-10 06:52:20 +0000
+++ modules/Ubuntu/Components/MainViewBase.qml	2015-04-25 07:11:10 +0000
@@ -35,6 +35,7 @@
     Toolkit.StyledItem {
         id: background
         anchors.fill: parent
+        // theme is inherited from PageTreeNode, no need to update versioning
         style: theme.createStyleComponent("MainViewStyle.qml", background)
 
         property color headerColor: backgroundColor

=== modified file 'modules/Ubuntu/Components/OptionSelector.qml'
--- modules/Ubuntu/Components/OptionSelector.qml	2015-04-10 06:52:20 +0000
+++ modules/Ubuntu/Components/OptionSelector.qml	2015-04-25 07:11:10 +0000
@@ -225,6 +225,7 @@
                 right: parent.right
             }
             state: optionSelector.expanded ? "expanded" : "collapsed"
+            theme.version: Toolkit.Ubuntu.toolkitVersion
             style: theme.createStyleComponent("OptionSelectorStyle.qml", listContainer)
             states: [ State {
                     name: "expanded"

=== modified file 'modules/Ubuntu/Components/PageTreeNode.qml'
--- modules/Ubuntu/Components/PageTreeNode.qml	2015-04-10 06:52:20 +0000
+++ modules/Ubuntu/Components/PageTreeNode.qml	2015-04-25 07:11:10 +0000
@@ -155,4 +155,6 @@
             node.parentNode = internal.getParentPageTreeNode(node);
         }
     }
+
+    theme.version: Toolkit.Ubuntu.toolkitVersion
 }

=== modified file 'modules/Ubuntu/Components/Pickers/DatePicker.qml'
--- modules/Ubuntu/Components/Pickers/DatePicker.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/Pickers/DatePicker.qml	2015-04-25 07:11:10 +0000
@@ -420,6 +420,7 @@
         }
     }
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("DatePickerStyle.qml", datePicker)
     Binding {
         target: __styleInstance

=== modified file 'modules/Ubuntu/Components/Pickers/Dialer.qml'
--- modules/Ubuntu/Components/Pickers/Dialer.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/Pickers/Dialer.qml	2015-04-25 07:11:10 +0000
@@ -145,6 +145,7 @@
     implicitHeight: size
     activeFocusOnPress: true
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("DialerStyle.qml", dialer)
 
     Item {

=== modified file 'modules/Ubuntu/Components/Pickers/DialerHand.qml'
--- modules/Ubuntu/Components/Pickers/DialerHand.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/Pickers/DialerHand.qml	2015-04-25 07:11:10 +0000
@@ -143,6 +143,7 @@
     width: parent.width
     height: parent.height
     activeFocusOnPress: true
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("DialerHandStyle.qml", dialerHand)
 
     /*! \internal */

=== modified file 'modules/Ubuntu/Components/Pickers/Picker.qml'
--- modules/Ubuntu/Components/Pickers/Picker.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/Pickers/Picker.qml	2015-04-25 07:11:10 +0000
@@ -159,6 +159,7 @@
     implicitHeight: units.gu(20)
     activeFocusOnPress: true
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("PickerStyle.qml", picker)
 
     /*! \internal */

=== modified file 'modules/Ubuntu/Components/Pickers/PickerDelegate.qml'
--- modules/Ubuntu/Components/Pickers/PickerDelegate.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/Pickers/PickerDelegate.qml	2015-04-25 07:11:10 +0000
@@ -47,6 +47,7 @@
         internal.itemList.currentIndex = index;
     }
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("PickerDelegateStyle.qml", pickerDelegate)
 
     QtObject {

=== modified file 'modules/Ubuntu/Components/Popups/Dialog.qml'
--- modules/Ubuntu/Components/Popups/Dialog.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/Popups/Dialog.qml	2015-04-25 07:11:10 +0000
@@ -213,6 +213,7 @@
             }
         }
 
+        theme.version: Ubuntu.toolkitVersion
         style: theme.createStyleComponent("DialogForegroundStyle.qml", foreground)
     }
 }

=== modified file 'modules/Ubuntu/Components/Popups/Popover.qml'
--- modules/Ubuntu/Components/Popups/Popover.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/Popups/Popover.qml	2015-04-25 07:11:10 +0000
@@ -237,6 +237,7 @@
         signal showCompleted()
         signal hideCompleted()
 
+        theme.version: Ubuntu.toolkitVersion
         style: theme.createStyleComponent("PopoverForegroundStyle.qml", foreground)
     }
 

=== modified file 'modules/Ubuntu/Components/Popups/SheetBase.qml'
--- modules/Ubuntu/Components/Popups/SheetBase.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/Popups/SheetBase.qml	2015-04-25 07:11:10 +0000
@@ -109,6 +109,7 @@
             }
         }
 
+        theme.version: Ubuntu.toolkitVersion
         style: theme.createStyleComponent("SheetForegroundStyle.qml", sheet)
     }
 }

=== modified file 'modules/Ubuntu/Components/ProgressBar10.qml'
--- modules/Ubuntu/Components/ProgressBar10.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/ProgressBar10.qml	2015-04-25 07:11:10 +0000
@@ -64,5 +64,6 @@
     */
     property real value: 0.5
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("ProgressBarStyle.qml", progressBar)
 }

=== modified file 'modules/Ubuntu/Components/PullToRefresh.qml'
--- modules/Ubuntu/Components/PullToRefresh.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/PullToRefresh.qml	2015-04-25 07:11:10 +0000
@@ -222,6 +222,7 @@
       */
     signal refresh()
 
+    theme.version: Ubuntu.toolkitVersion
     style: theme.createStyleComponent("PullToRefreshStyle.qml", control)
     implicitHeight: __styleInstance.implicitHeight
     anchors {

=== modified file 'modules/Ubuntu/Components/Scrollbar.qml'
--- modules/Ubuntu/Components/Scrollbar.qml	2015-04-10 06:52:20 +0000
+++ modules/Ubuntu/Components/Scrollbar.qml	2015-04-25 07:11:10 +0000
@@ -146,5 +146,6 @@
         }
     }
 
+    theme.version: Toolkit.Ubuntu.toolkitVersion
     style: theme.createStyleComponent("ScrollbarStyle.qml", scrollbar)
 }

=== modified file 'modules/Ubuntu/Components/Slider.qml'
--- modules/Ubuntu/Components/Slider.qml	2015-04-10 06:52:20 +0000
+++ modules/Ubuntu/Components/Slider.qml	2015-04-25 07:11:10 +0000
@@ -207,5 +207,6 @@
         onLiveValueChanged: if (isPressed) slider.requestFocus(Qt.MouseFocusReason)
     }
 
+    theme.version: Toolkit.Ubuntu.toolkitVersion
     style: theme.createStyleComponent("SliderStyle.qml", slider)
 }

=== modified file 'modules/Ubuntu/Components/TabBar.qml'
--- modules/Ubuntu/Components/TabBar.qml	2015-04-10 06:52:20 +0000
+++ modules/Ubuntu/Components/TabBar.qml	2015-04-25 07:11:10 +0000
@@ -97,7 +97,7 @@
 
     implicitHeight: units.gu(7.5)
     activeFocusOnPress: true
-
+    theme.version: Toolkit.Ubuntu.toolkitVersion
     style: theme.createStyleComponent("TabBarStyle.qml", tabBar)
 
     QtObject {

=== modified file 'modules/Ubuntu/Components/TextArea.qml'
--- modules/Ubuntu/Components/TextArea.qml	2015-04-17 07:44:17 +0000
+++ modules/Ubuntu/Components/TextArea.qml	2015-04-25 07:11:10 +0000
@@ -873,5 +873,6 @@
         }
     }
 
+    theme.version: Ubuntu.Ubuntu.toolkitVersion
     style: theme.createStyleComponent("TextAreaStyle.qml", control)
 }

=== modified file 'modules/Ubuntu/Components/TextCursor.qml'
--- modules/Ubuntu/Components/TextCursor.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/TextCursor.qml	2015-04-25 07:11:10 +0000
@@ -41,6 +41,7 @@
                                            handler.main.cursorDelegate :
                                            __styleInstance.cursorDelegate
 
+    theme.version: Ubuntu.Ubuntu.toolkitVersion
     style: theme.createStyleComponent("TextCursorStyle.qml", cursorItem);
 
     objectName: "textCursor"

=== modified file 'modules/Ubuntu/Components/TextField.qml'
--- modules/Ubuntu/Components/TextField.qml	2015-04-16 15:03:56 +0000
+++ modules/Ubuntu/Components/TextField.qml	2015-04-25 07:11:10 +0000
@@ -1019,5 +1019,6 @@
         cursorPosition = 0;
     }
 
+    theme.version: Ubuntu.Ubuntu.toolkitVersion
     style: theme.createStyleComponent("TextFieldStyle.qml", control)
 }

=== modified file 'modules/Ubuntu/Components/TextInputPopover.qml'
--- modules/Ubuntu/Components/TextInputPopover.qml	2015-04-09 09:42:36 +0000
+++ modules/Ubuntu/Components/TextInputPopover.qml	2015-04-25 07:11:10 +0000
@@ -96,6 +96,7 @@
                 width: Math.max(units.gu(5), implicitWidth) + units.gu(2)
                 height: units.gu(6)
                 action: actions[modelData]
+                theme.version: Ubuntu.toolkitVersion
                 style: theme.createStyleComponent("ToolbarButtonStyle.qml", button)
             }
         }

=== added directory 'modules/Ubuntu/Components/Themes/1.2'
=== added file 'modules/Ubuntu/Components/Themes/1.2/Palette.qml'
--- modules/Ubuntu/Components/Themes/1.2/Palette.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/1.2/Palette.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+
+/*!
+    \qmltype Palette
+    \inqmlmodule Ubuntu.Components.Themes 0.1
+    \ingroup theming
+    \brief Palette of colors from the theme that widgets use to draw themselves.
+
+    Palette provides access to colors defined by the current theme. The actual
+    color palette to use depends on the state of the widget being drawn.
+
+    A color palette (\l PaletteValues) has various roles to choose from depending
+    on what part of the widget is being drawn (the base of the widget, the
+    foreground, etc.).
+
+    For each color there is a corresponding 'text' color that is guaranteed to
+    provide good legibility for text or icons placed on top of a background
+    of the corresponding color.
+
+    Example of a Text on top of a background Rectangle:
+    \qml
+    Item {
+        Rectangle {
+            color: Theme.palette.normal.base
+        }
+
+        Text {
+            color: Theme.palette.normal.baseText
+        }
+    }
+    \endqml
+*/
+QtObject {
+    /*!
+       Color palette to use when the widget is not in any particular state.
+    */
+    property PaletteValues normal
+    /*!
+       Color palette to use when the widget is selected, for example when
+       a tab is the current one.
+    */
+    property PaletteValues selected
+}

=== added file 'modules/Ubuntu/Components/Themes/1.2/PaletteValues.qml'
--- modules/Ubuntu/Components/Themes/1.2/PaletteValues.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/1.2/PaletteValues.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+
+/*!
+    \qmltype PaletteValues
+    \inqmlmodule Ubuntu.Components.Themes 0.1
+    \ingroup theming
+    \brief Color values used for a given widget state.
+*/
+QtObject {
+    /*!
+       Color applied to the background of the application.
+    */
+    property color background
+    /*!
+       Color applied to elements placed on top of the \l background color.
+       Typically used for labels and images.
+    */
+    property color backgroundText
+    /*!
+       Color applied to the background of widgets.
+    */
+    property color base
+    /*!
+       Color applied to elements placed on top of the \l base color.
+       Typically used for labels and images.
+    */
+    property color baseText
+    /*!
+       Color applied to widgets on top of the base colour.
+    */
+    property color foreground
+    /*!
+       Color applied to elements placed on top of the \l foreground color.
+       Typically used for labels and images.
+    */
+    property color foregroundText
+    /*!
+       Color applied to the background of widgets floating over other widgets.
+       For example: popovers, Toolbar.
+    */
+    property color overlay
+    /*!
+       Color applied to elements placed on top of the \l overlay color.
+       Typically used for labels and images.
+    */
+    property color overlayText
+    /*!
+       Colour applied to the backgrouhnd of text input fields.
+    */
+    property color field
+    /*!
+       Color applied to elements placed on top of the \l field color.
+       Typically used for labels and images.
+    */
+    property color fieldText
+    /*!
+       Color applied to selected text in editable components.
+    */
+    property color selection
+}

=== added directory 'modules/Ubuntu/Components/Themes/1.3'
=== renamed file 'modules/Ubuntu/Components/Themes/Palette.qml' => 'modules/Ubuntu/Components/Themes/1.3/Palette.qml'
=== renamed file 'modules/Ubuntu/Components/Themes/PaletteValues.qml' => 'modules/Ubuntu/Components/Themes/1.3/PaletteValues.qml'
=== added directory 'modules/Ubuntu/Components/Themes/Ambiance/1.2'
=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ActivityIndicatorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ActivityIndicatorStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ActivityIndicatorStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Image {
+    id: container
+
+    anchors.fill: parent
+    smooth: true
+    visible: styledItem.running
+    fillMode: Image.PreserveAspectFit
+    horizontalAlignment: Image.AlignHCenter
+    verticalAlignment: Image.AlignVCenter
+    source: Qt.resolvedUrl("../artwork/spinner.png")
+
+    RotationAnimator on rotation {
+        running: styledItem.running
+        from: 0
+        to: 360
+        loops: Animation.Infinite
+        duration: UbuntuAnimation.SleepyDuration
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/BubbleShape.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/BubbleShape.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/BubbleShape.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,172 @@
+/*
+ * Copyright 2013-2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: bubbleShape
+
+    /*!
+      Do not use an UbuntuShape but a Rectangle as the background of the BubbleShape.
+     */
+    property bool square: false
+
+    /*!
+      The background color of the bubble.
+     */
+    property color color: square ? Theme.palette.normal.background : Theme.palette.normal.overlay
+
+    property point target
+    property string direction: "down"
+    property bool clipContent: false
+    default property alias children: content.children
+    // FIXME: This should not be necessary. See
+    // https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1214978
+    property alias arrowSource: arrow.source
+
+    implicitWidth: units.gu(10)
+    implicitHeight: units.gu(8)
+
+    signal showCompleted()
+    signal hideCompleted()
+
+    opacity: 0.0
+
+    function show() {
+        hideAnimation.stop();
+        showAnimation.start();
+    }
+
+    function hide() {
+        showAnimation.stop();
+        hideAnimation.start();
+    }
+
+    ParallelAnimation {
+        id: showAnimation
+
+        NumberAnimation {
+            target: bubbleShape
+            property: "opacity"
+            from: 0.0
+            to: 1.0
+            duration: UbuntuAnimation.FastDuration
+            easing: UbuntuAnimation.StandardEasing
+        }
+        NumberAnimation {
+            target: scaleTransform
+            property: (direction === "up" || direction === "down") ? "yScale" : "xScale"
+            from: 0.91
+            to: 1.0
+            duration: UbuntuAnimation.FastDuration
+            easing: UbuntuAnimation.StandardEasing
+        }
+        onStopped: showCompleted()
+    }
+
+    NumberAnimation {
+        id: hideAnimation
+        target: bubbleShape
+        property: "opacity"
+        from: 1.0
+        to: 0.0
+        duration: UbuntuAnimation.FastDuration
+        easing: UbuntuAnimation.StandardEasing
+        onStopped: hideCompleted()
+    }
+
+    transform: Scale {
+        id: scaleTransform
+        origin.x: direction === "right" ? bubbleShape.width :
+                  direction === "left" ? 0 :
+                                          bubbleShape.width/2.0
+        origin.y: direction === "up" ? 0 :
+                  direction === "down" ? bubbleShape.height :
+                                         bubbleShape.height/2.0
+    }
+
+    BorderImage {
+        id: shadow
+        anchors.fill: parent
+        anchors.margins: square ? -units.gu(1) : -units.dp(2)
+        anchors.topMargin: square ? 0 : anchors.margins
+        source: !square ? Qt.resolvedUrl("../artwork/bubble_shadow.sci") : Qt.resolvedUrl("../artwork/header_overflow_dropshadow.sci")
+        opacity: 0.8
+    }
+
+    UbuntuShape {
+        anchors.fill: parent
+        borderSource: "none"
+        color: Theme.palette.normal.overlay
+        image: bubbleShape.clipContent ? shapeSource : null
+        visible: !square
+    }
+
+    ShaderEffectSource {
+        id: shapeSource
+        visible: bubbleShape.clipContent
+        sourceItem: bubbleShape.clipContent ? content : null
+        hideSource: !square
+        // FIXME: visible: false prevents rendering so make it a nearly
+        // transparent 1x1 pixel instead
+        opacity: 0.01
+        width: 1
+        height: 1
+    }
+
+    Item {
+        id: content
+        anchors.fill: parent
+
+        Rectangle {
+            id: colorRect
+            anchors.fill: parent
+            color: bubbleShape.color
+            visible: bubbleShape.clipContent
+        }
+    }
+
+    Item {
+        x: target.x
+        y: target.y
+
+        Image {
+            id: arrow
+
+            visible: !square && bubbleShape.direction != "none"
+
+            function directionToRotation(direction) {
+                switch (direction) {
+                case "up":
+                    return 180;
+                case "left":
+                    return 90;
+                case "right":
+                    return -90;
+                default: // "down" or "none"
+                    return 0;
+                }
+            }
+
+            x: -width / 2.0
+            y: -height
+            transformOrigin: Item.Bottom
+            rotation: directionToRotation(bubbleShape.direction)
+            source: Qt.resolvedUrl("../artwork/bubble_arrow.png")
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ButtonForeground.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ButtonForeground.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ButtonForeground.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,117 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Florian Boucault <[e-mail]>
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: buttonForeground
+
+    property alias text: label.text
+    property alias textColor: label.color
+    property alias iconSource: icon.source
+    property string iconPosition
+    property real iconSize
+    property real spacing
+    property bool hasIcon: iconSource != ""
+    property bool hasText: text != ""
+    property alias font: label.font
+
+    opacity: enabled ? 1.0 : 0.5
+    implicitHeight: Math.max(icon.height, label.height)
+    state: hasIcon && hasText ? iconPosition : "center"
+
+    Image {
+        id: icon
+        anchors.verticalCenter: parent.verticalCenter
+        fillMode: Image.PreserveAspectFit
+        width: iconSize
+        height: iconSize
+    }
+
+    Label {
+        id: label
+        anchors {
+            verticalCenter: parent.verticalCenter
+            verticalCenterOffset: units.dp(-1)
+        }
+        fontSize: "medium"
+        elide: Text.ElideRight
+    }
+
+    states: [
+        State {
+            name: "left"
+            AnchorChanges {
+                target: icon
+                anchors.left: buttonForeground.left
+            }
+            AnchorChanges {
+                target: label
+                anchors.left: icon.right
+            }
+            PropertyChanges {
+                target: label
+                anchors.leftMargin: spacing
+                width: buttonForeground.width - icon.width - spacing
+            }
+            PropertyChanges {
+                target: buttonForeground
+                implicitWidth: icon.implicitWidth + spacing + label.implicitWidth
+            }
+        },
+        State {
+            name: "right"
+            AnchorChanges {
+                target: icon
+                anchors.right: buttonForeground.right
+            }
+            AnchorChanges {
+                target: label
+                anchors.left: buttonForeground.left
+            }
+            PropertyChanges {
+                target: label
+                width: buttonForeground.width - icon.width - spacing
+            }
+            PropertyChanges {
+                target: buttonForeground
+                implicitWidth: label.implicitWidth + spacing + icon.implicitWidth
+            }
+        },
+        State {
+            name: "center"
+            AnchorChanges {
+                target: icon
+                anchors.horizontalCenter: buttonForeground.horizontalCenter
+            }
+            AnchorChanges {
+                target: label
+                anchors.horizontalCenter: buttonForeground.horizontalCenter
+            }
+            PropertyChanges {
+                target: label
+                width: Math.min(label.implicitWidth, buttonForeground.width)
+            }
+            PropertyChanges {
+                target: buttonForeground
+                implicitWidth: hasText ? label.implicitWidth : icon.implicitWidth
+            }
+        }
+    ]
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ButtonStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ButtonStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ButtonStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,177 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Florian Boucault <[e-mail]>
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: buttonStyle
+
+    property var button: styledItem
+    property real minimumWidth: units.gu(10)
+    property real horizontalPadding: units.gu(1)
+    // FIXME: Add this color to the palette
+    property color defaultColor: "#b2b2b2"
+    property font defaultFont: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium")})
+    property Gradient defaultGradient
+    property real buttonFaceOffset: 0
+    property bool stroke: button.hasOwnProperty("strokeColor") && button.strokeColor != Qt.rgba(0.0, 0.0, 0.0, 0.0)
+    /*!
+      The property overrides the button's default background with an item. This
+      item can be used by derived styles to reuse the ButtonStyle and override
+      the default coloured background with an image or any other drawing.
+      The default value is null.
+      */
+    property Item backgroundSource: null
+
+    width: button.width
+    height: button.height
+    implicitWidth: Math.max(minimumWidth, foreground.implicitWidth + 2*horizontalPadding)
+    implicitHeight: units.gu(4)
+
+    LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
+    LayoutMirroring.childrenInherit: true
+
+    /*! \internal */
+    // Color properties in a JS ternary operator don't work as expected in
+    // QML because it overwrites alpha values with 1. A workaround is to use
+    // Qt.rgba(). For more information, see
+    // https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1197802 and
+    // https://bugreports.qt-project.org/browse/QTBUG-32238.
+    function __colorHack(color) { return Qt.rgba(color.r, color.g, color.b, color.a); }
+
+
+    /* The proxy is necessary because Gradient.stops and GradientStop.color are
+       non-NOTIFYable properties. They cannot be written to so it is fine but
+       the proxy avoids the warnings.
+    */
+    property QtObject gradientProxy: gradientProxyObject
+    QtObject {
+        id: gradientProxyObject
+        property color topColor
+        property color bottomColor
+
+        function updateGradient() {
+            if (button.gradient) {
+                topColor = button.gradient.stops[0].color;
+                bottomColor = button.gradient.stops[1].color;
+            }
+        }
+
+        Component.onCompleted: {
+            updateGradient();
+            button.gradientChanged.connect(updateGradient);
+        }
+    }
+
+    // Use the gradient if it is defined and the color has not been set manually
+    // or the gradient has been set manually
+    property bool isGradient: button.gradient && (button.color == defaultColor ||
+                              button.gradient != defaultGradient)
+
+    Image {
+        id: strokeBorder
+        anchors.fill: parent
+        anchors.margins: -units.gu(0.5)
+        // FIXME: this PNG is way too big (462x108) and do not scale properly
+        // ie. the corners are visually incorrect at most sizes
+        source: stroke ? Qt.resolvedUrl("../artwork/stroke_button.png") : ""
+        visible: false
+        cache: false
+        asynchronous: true
+    }
+
+    ShaderEffect {
+        id: colorizedImage
+
+        anchors.fill: parent
+        visible: stroke && strokeBorder.status == Image.Ready
+
+        property Item source: visible ? strokeBorder : null
+        property color keyColorOut: stroke ? strokeColor : Qt.rgba(0.0, 0.0, 0.0, 0.0)
+        property color keyColorIn: Qt.rgba(1.0, 1.0, 1.0, 1.0)
+        property real threshold: 1.0
+
+        fragmentShader: "
+            varying highp vec2 qt_TexCoord0;
+            uniform sampler2D source;
+            uniform highp vec4 keyColorOut;
+            uniform highp vec4 keyColorIn;
+            uniform lowp float threshold;
+            uniform lowp float qt_Opacity;
+            void main() {
+                lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
+                gl_FragColor = mix(vec4(keyColorOut.rgb, 1.0) * sourceColor.a, sourceColor, step(threshold, distance(sourceColor.rgb / sourceColor.a, keyColorIn.rgb))) * qt_Opacity;
+            }"
+    }
+
+    UbuntuShape {
+        id: background
+        anchors.fill: parent
+        borderSource: "radius_idle.sci"
+        visible: stroke ? false : ((color.a != 0.0) || backgroundSource)
+        image: backgroundSource
+
+        color: stroke ? "" : (backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.topColor) : __colorHack(button.color)))
+        opacity: styledItem.enabled ? 1.0 : 0.6
+        gradientColor: stroke ? "" : (backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.bottomColor) : __colorHack(button.color)))
+    }
+
+    UbuntuShape {
+        id: backgroundPressed
+        anchors.fill: parent
+        color: stroke ? strokeColor : background.color
+        gradientColor: stroke ? strokeColor : background.gradientColor
+        borderSource: "radius_pressed.sci"
+        opacity: button.pressed ? 1.0 : 0.0
+        Behavior on opacity {
+            NumberAnimation {
+                duration: UbuntuAnimation.SnapDuration
+                easing.type: Easing.Linear
+            }
+        }
+        visible: stroke || background.visible
+    }
+
+    ButtonForeground {
+        id: foreground
+        width: parent.width - 2*horizontalPadding
+        anchors {
+            centerIn: parent
+            horizontalCenterOffset: buttonFaceOffset
+        }
+        text: button.text
+        /* Pick either a clear or dark text color depending on the luminance of the
+           background color to maintain good contrast (works in most cases)
+        */
+        textColor: ColorUtils.luminance(button.color) <= 0.85 && !(stroke && !pressed) ? "#FFFFFF" : "#888888"
+        iconSource: button.iconSource
+        iconPosition: button.iconPosition
+        iconSize: units.gu(3)
+        font: button.font
+        spacing: horizontalPadding
+        transformOrigin: Item.Top
+        scale: button.pressed ? 0.98 : 1.0
+        Behavior on scale {
+            NumberAnimation {
+                duration: UbuntuAnimation.SnapDuration
+                easing.type: Easing.Linear
+            }
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/CheckBoxStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/CheckBoxStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/CheckBoxStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,162 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: checkBoxStyle
+
+    /*!
+      The padding between the background shape and the outside border of the checkbox.
+     */
+    property real backgroundPadding: units.gu(0.33)
+
+    /*!
+      The background color when the checkbox is not checked.
+     */
+    property color uncheckedBackgroundColor: Qt.rgba(Theme.palette.normal.foreground.r,
+                                                     Theme.palette.normal.foreground.g,
+                                                     Theme.palette.normal.foreground.b, 0.2)
+
+    /*!
+      The background color when the checkbox is checked.
+     */
+    property color checkedBackgroundColor: UbuntuColors.green
+
+    /*!
+      The image to show inside the checkbox when it is checked.
+     */
+    property url iconSource: "image://theme/tick"
+
+    /*!
+      The color of the icon.
+     */
+    property color iconColor: Theme.palette.normal.foregroundText
+
+    /*!
+      The padding between the icon and the border of the thumb.
+     */
+    property real iconPadding: backgroundPadding
+
+    opacity: enabled ? 1.0 : 0.5
+
+    implicitWidth: units.gu(3)
+    implicitHeight: units.gu(3)
+
+    UbuntuShape {
+        id: background
+        anchors {
+            fill: parent
+            margins: checkBoxStyle.backgroundPadding
+        }
+        property real iconSize: Math.min(width, height) - 2*checkBoxStyle.iconPadding
+
+        Icon {
+            color: checkBoxStyle.iconColor
+            width: background.iconSize
+            height: background.iconSize
+            id: tick
+            anchors.centerIn: parent
+            smooth: true
+            source: checkBoxStyle.iconSource
+            visible: styledItem.checked || transitionToChecked.running || transitionToUnchecked.running
+        }
+
+        state: styledItem.checked ? "checked" : "unchecked"
+        states: [
+            State {
+                name: "checked"
+                PropertyChanges {
+                    target: tick
+                    anchors.verticalCenterOffset: 0
+                }
+                PropertyChanges {
+                    target: background
+                    color: checkBoxStyle.checkedBackgroundColor
+                }
+            },
+            State {
+                name: "unchecked"
+                PropertyChanges {
+                    target: tick
+                    anchors.verticalCenterOffset: checkBoxStyle.height
+                }
+                PropertyChanges {
+                    target: background
+                    color: checkBoxStyle.uncheckedBackgroundColor
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                id: transitionToUnchecked
+                to: "unchecked"
+                ColorAnimation {
+                    target: background
+                    duration: UbuntuAnimation.FastDuration
+                    easing: UbuntuAnimation.StandardEasingReverse
+                }
+                SequentialAnimation {
+                    PropertyAction {
+                        target: background
+                        property: "clip"
+                        value: true
+                    }
+                    NumberAnimation {
+                        target: tick
+                        property: "anchors.verticalCenterOffset"
+                        duration: UbuntuAnimation.FastDuration
+                        easing: UbuntuAnimation.StandardEasingReverse
+                    }
+                    PropertyAction {
+                        target: background
+                        property: "clip"
+                        value: false
+                    }
+                }
+            },
+            Transition {
+                id: transitionToChecked
+                to: "checked"
+                ColorAnimation {
+                    target: background
+                    duration: UbuntuAnimation.FastDuration
+                    easing: UbuntuAnimation.StandardEasing
+                }
+                SequentialAnimation {
+                    PropertyAction {
+                        target: background
+                        property: "clip"
+                        value: true
+                    }
+                    NumberAnimation {
+                        target: tick
+                        property: "anchors.verticalCenterOffset"
+                        duration: UbuntuAnimation.FastDuration
+                        easing: UbuntuAnimation.StandardEasing
+                    }
+                    PropertyAction {
+                        target: background
+                        property: "clip"
+                        value: false
+                    }
+                }
+            }
+        ]
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ComboButtonStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ComboButtonStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ComboButtonStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,197 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+import Ubuntu.Components.Styles 1.2 as Style
+
+Style.ComboButtonStyle {
+    id: comboStyle
+
+    // configurations
+    dropDownWidth: units.gu(5)
+    dropDownSeparatorWidth: units.dp(2)
+    comboListMargin: units.gu(0.8)
+    comboListHolder: comboListContent
+    comboListPanel: panelItem
+    defaultColor: mainButton.defaultColor
+    defaultGradient: mainButton.defaultGradient
+    defaultDropdownColor: combo.expanded ? Qt.rgba(0, 0, 0, 0.05) : defaultColor
+    defaultFont: mainButton.defaultFont
+
+
+    width: combo.width
+    height: combo.collapsedHeight
+
+    property ComboButton combo: styledItem
+
+    implicitWidth: mainButton.implicitWidth
+    implicitHeight: mainButton.implicitHeight
+
+    LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
+    LayoutMirroring.childrenInherit: true
+
+    ButtonStyle {
+        id: mainButton
+        anchors {
+            left: parent.left
+            top: parent.top
+            right: parent.right
+        }
+        height: combo.collapsedHeight
+        // overrides
+        backgroundSource: comboFace
+        buttonFaceOffset: -dropDownWidth/2 - dropDownSeparatorWidth
+        horizontalPadding: units.gu(4) - dropDownSeparatorWidth
+        minimumWidth: units.gu(36)
+
+        // FIXME: use hardcoded color while we get the theme palette updated
+        defaultColor: "#b2b2b2"
+        defaultGradient: null
+
+        // button face
+        ShaderEffectSource {
+            id: comboFace
+            sourceItem: content
+            hideSource: true
+            // FIXME: visible: false prevents rendering so make it a nearly
+            // transparent 1x1 pixel instead
+            opacity: 0.01
+            width: 1
+            height: 1
+        }
+
+        Item {
+            id: content
+            width: mainButton.width
+            height: mainButton.height
+
+            Rectangle {
+                anchors {
+                    fill: parent
+                    rightMargin: comboStyle.dropDownSeparatorWidth + comboStyle.dropDownWidth
+                }
+                color: combo.color
+                gradient: mainButton.isGradient ? combo.gradient : null
+            }
+
+            // distancer
+            Item {
+                anchors {
+                    right: dropDownButton.right
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                width: comboStyle.dropDownSeparatorWidth
+            }
+
+            Rectangle {
+                id: dropDownButton
+                objectName: "combobutton_dropdown_visuals"
+                anchors {
+                    right: parent.right
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                width: comboStyle.dropDownWidth
+                color: mainButton.__colorHack(combo.dropdownColor)
+                Image {
+                    source: Qt.resolvedUrl("../artwork/chevron.png")
+                    anchors.centerIn: parent
+                    rotation: combo.expanded ? -90 : 90
+                }
+            }
+        }
+    }
+
+    Item {
+        id: panelItem
+        objectName: "combobutton_combopanel"
+        anchors {
+            left: parent.left
+            top: mainButton.bottom
+            right: parent.right
+        }
+        opacity: combo.expanded && (combo.comboList.length > 0)? 1.0 : 0.0
+
+        ShaderEffectSource {
+            id: listContent
+            sourceItem: comboListContent
+            hideSource: true
+            // FIXME: visible: false prevents rendering so make it a nearly
+            // transparent 1x1 pixel instead
+            opacity: 0.01
+            width: 1
+            height: 1
+        }
+        Rectangle {
+            id: comboListContent
+            anchors {
+                fill: parent
+                topMargin: comboListMargin
+            }
+            clip: true
+            color: mainButton.__colorHack(combo.dropdownColor)
+        }
+
+        BorderImage {
+            id: shadow
+            anchors {
+                fill: parent
+                leftMargin: -units.gu(0.5)
+                topMargin: comboListMargin - units.gu(0.5)
+                rightMargin: -units.gu(0.5)
+                bottomMargin: -units.gu(0.5)
+            }
+            source: Qt.resolvedUrl("../artwork/bubble_shadow.sci")
+        }
+        UbuntuShape {
+            id: shape
+            anchors {
+                fill: parent
+                topMargin: comboListMargin
+            }
+            visible: true
+            borderSource: "radius_idle.sci"
+            image: listContent
+        }
+
+        Image {
+            source: Qt.resolvedUrl("../artwork/bubble_arrow.png")
+            rotation: 180
+            anchors {
+                bottom: shape.top
+                bottomMargin: -1
+                right: parent.right
+                rightMargin: dropDownWidth / 2 - units.gu(0.5)
+            }
+
+        }
+
+        Behavior on height {
+            NumberAnimation {
+                duration: UbuntuAnimation.FastDuration
+                easing: UbuntuAnimation.StandardEasing
+            }
+        }
+        Behavior on opacity {
+            NumberAnimation {
+                duration: UbuntuAnimation.FastDuration
+                easing: UbuntuAnimation.StandardEasing
+            }
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/DatePickerStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/DatePickerStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/DatePickerStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,164 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+import Ubuntu.Components.ListItems 1.0
+
+Item {
+    id: control
+    // style properties
+    /*!
+      Specifies the background color
+      */
+    property color backgroundColor: "#0A000000"
+    /*!
+      Background color for highlight.
+      */
+    property color highlightBackgroundColor: "#ffffffff"
+    /*!
+      Highlight color.
+      */
+    property color highlightColor: UbuntuColors.orange
+    /*!
+      Scale of the highlight item
+      */
+    property real highlightScaleFactor: 1.2
+    /*!
+      Thickness of the highlight component
+      */
+    property real highlightThickness: units.gu(5)
+
+    /*!
+      The content holder exposed to the Picker so tumbler list can be reparented to it.
+      */
+    property alias tumblerHolder: content
+
+    /*!
+      The property holds the separator to be shown between date and time units
+      */
+    property string unitSeparator: ""
+
+    property Item view: Item {}
+    property ListModel pickerModels: ListModel{}
+
+    anchors.fill: parent
+
+    // frame
+    UbuntuShape {
+        anchors.fill: parent
+        radius: "medium"
+        image: shapeSource
+    }
+
+    ShaderEffectSource {
+        id: shapeSource
+        sourceItem: background
+        hideSource: true
+        // FIXME: visible: false prevents rendering so make it a nearly
+        // transparent 1x1 pixel instead
+        opacity: 0.01
+        width: 1
+        height: 1
+    }
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+
+        MouseArea {
+            anchors.fill: parent
+        }
+        // background
+        color: backgroundColor
+
+        Item {
+            id: content
+            anchors.fill: parent
+        }
+
+        // highlight
+        Rectangle {
+            id: highlightItem
+            y: (content.height - control.highlightThickness) / 2
+            anchors {
+                left: content.left
+                right: content.right
+            }
+            height: control.highlightThickness
+            color: highlightBackgroundColor
+        }
+        ThinDivider {
+            anchors {
+                left: content.left
+                right: content.right
+                bottom: highlightItem.top
+            }
+        }
+        ThinDivider {
+            anchors {
+                left: content.left
+                right: content.right
+                top: highlightItem.bottom
+            }
+        }
+
+        ShaderEffectSource {
+            id: effectSource
+            visible: false
+            sourceItem: view
+
+            property real sourceRectMultiplier: 2.0
+            // XXX: This works because the parent of magnifier is the same as sourceItem
+            //  in this case. Otherwise coordinate transformations will be needed.
+            sourceRect: Qt.rect(highlightItem.x, highlightItem.y, highlightItem.width, highlightItem.height)
+            textureSize: Qt.size(highlightItem.width*sourceRectMultiplier, highlightItem.height*sourceRectMultiplier)
+        }
+
+        Row {
+            id: magnifierRow
+            anchors {
+                top: highlightItem.top
+                bottom: highlightItem.bottom
+                horizontalCenter: highlightItem.horizontalCenter
+            }
+
+            Repeater {
+                model: pickerModels
+                HighlightMagnifier {
+                    anchors {
+                        top: magnifierRow.top
+                        bottom: magnifierRow.bottom
+                    }
+                    width: pickerModel.pickerWidth
+                    scaleFactor: control.highlightScaleFactor
+                    outputColor: control.highlightColor
+                    source: effectSource
+                    texCoordRange: Qt.rect((x - source.sourceRect.x) / source.sourceRect.width, 0.0,
+                                           width / source.sourceRect.width, 1.0);
+
+                    Label {
+                        text: (index < (pickerModels.count - 1)) ? unitSeparator : ""
+                        anchors {
+                            right: parent.right
+                            verticalCenter: parent.verticalCenter
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/DialerHandStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/DialerHandStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/DialerHandStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    // style API
+    property alias handPointer: pointer
+
+    function handPreset(index, property) {
+        switch (property) {
+        case "width" :
+            return (index === 0) ? units.gu(0.8) : units.gu(0.5);
+        case "height":
+            return (index === 0) ? dialer.handSpace /2 :
+                                    (index === 2) ? dialer.handSpace + units.gu(1.5) :
+                                                    dialer.handSpace - units.gu(1.5);
+        case "z":
+            return (index === 2) ? -1 : 0;
+        case "visible":
+        case "draggable":
+            return true;
+        case "toCenterItem":
+            return false;
+        default:
+            return undefined;
+        }
+    }
+
+    // style
+    anchors.fill: parent
+    transformOrigin: Item.Center
+
+    Rectangle {
+        id: pointer
+        x: (parent.width - width) / 2
+        y: styledItem.dialer.handSpace - (styledItem.hand.toCenterItem ? 0 : styledItem.hand.height)
+        width: styledItem.hand.width
+        height: styledItem.hand.height
+        radius: units.gu(1)
+        color: styledItem.hand.visible ? Theme.palette.normal.baseText : "#00000000"
+        antialiasing: true
+    }
+
+    Behavior on rotation {
+        enabled: !styledItem.hand.draggable
+        RotationAnimation { direction: RotationAnimation.Shortest }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/DialerStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/DialerStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/DialerStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,126 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+import QtGraphicalEffects 1.0
+
+// FIXME: Replace this once UbuntuShape support for gradients and shading has landed
+Rectangle {
+    anchors.fill: parent
+    radius: width / 2
+    antialiasing: true
+
+    property real offset : units.gu(0.2)
+
+    gradient: Gradient {
+        GradientStop { position: 0.0;  color: "#512F48" }
+        GradientStop { position: 0.25; color: "#583048" }
+        GradientStop { position: 0.5;  color: "#653449" }
+        GradientStop { position: 0.75; color: "#6D384A" }
+        GradientStop { position: 1.0;  color: "#753B4A" }
+    }
+    // draws the outter shadow/highlight
+    Rectangle {
+        id: sourceOutter
+        anchors { fill: parent; margins: -offset }
+        radius: (width / 2)
+        antialiasing: true
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "black" }
+            GradientStop { position: 0.5; color: "transparent" }
+            GradientStop { position: 1.0; color: "white" }
+        }
+    }
+
+    // mask for outer 3D effect
+    Rectangle {
+        id: maskOutter
+        anchors.fill: sourceOutter
+        color: "transparent"
+        radius: (width / 2)
+        antialiasing: true
+        border { width: offset; color: "black" }
+    }
+
+    // outter effect
+    OpacityMask {
+        anchors.fill: sourceOutter
+        opacity: 0.65
+        source: ShaderEffectSource {
+            sourceItem: sourceOutter
+            hideSource: true
+        }
+        maskSource: ShaderEffectSource {
+            sourceItem: maskOutter
+            hideSource: true
+        }
+    }
+
+    // center item
+    // FIXME: Replace this once UbuntuShape support for gradients and shading has landed
+    Rectangle {
+        parent: styledItem.centerItem.parent
+        anchors.fill: parent
+        radius: width / 2;
+        antialiasing: true;
+
+        gradient: Gradient {
+            GradientStop { position: 0.0;  color: "#7A4C68" }
+            GradientStop { position: 0.25; color: "#804563" }
+            GradientStop { position: 0.5;  color: "#864660" }
+            GradientStop { position: 0.75; color: "#86465E" }
+            GradientStop { position: 1.0;  color: "#964E66" }
+        }
+
+        // draws the inner highlight / shadow
+        Rectangle {
+            id: sourceInner;
+            anchors { fill: parent; margins: -offset }
+            radius: (width / 2)
+            antialiasing: true
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "white" }
+                GradientStop { position: 0.5; color: "transparent" }
+                GradientStop { position: 1.0; color: "black" }
+            }
+        }
+
+        // mask for inner 3D effect
+        Rectangle {
+            id: maskInner
+            color: "transparent"
+            anchors.fill: sourceInner
+            radius: (width / 2)
+            antialiasing: true
+            border { width: offset; color: "black" }
+        }
+
+        // inner effect
+        OpacityMask {
+            opacity: 0.65
+            anchors.fill: sourceInner
+            source: ShaderEffectSource {
+                sourceItem: sourceInner
+                hideSource: true
+            }
+            maskSource: ShaderEffectSource {
+                sourceItem: maskInner
+                hideSource: true
+            }
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/DialogForegroundStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/DialogForegroundStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/DialogForegroundStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: dialogForegroundStyle
+
+    UbuntuShape {
+        id: background
+        anchors.fill: parent
+        color: "white"
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/HeadDividerStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/HeadDividerStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/HeadDividerStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import QtQuick 2.4
+
+Item {
+    id: dividerStyle
+
+    property color color: styledItem.backgroundColor
+
+    // Do not make the following two colors part of the style API as they may be deprecated soon.
+    property color topColor: Qt.darker(color, 1.1)
+    property color bottomColor: Qt.lighter(color, 1.2)
+
+    Rectangle {
+        anchors.fill: parent
+        color: dividerStyle.color
+
+        gradient: Gradient {
+            // top shadow
+            GradientStop {
+                position: 0.02
+                color: dividerStyle.topColor
+            }
+            // middle (background)
+            GradientStop {
+                position: 0.05
+                color: dividerStyle.color
+            }
+            GradientStop {
+                position: 0.95
+                color: dividerStyle.color
+            }
+            // bottom highlight
+            GradientStop {
+                position: 0.98
+                color: dividerStyle.bottomColor
+            }
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/HeaderStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/HeaderStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/HeaderStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,124 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: headerStyle
+    /*!
+      The height of the headercontents, which is the full height of
+      the header minus the separators shown at the bottom of it.
+     */
+    property real contentHeight: units.gu(7.5)
+
+    /*!
+      The source of the image that separates the header from the contents of a \l MainView.
+      The separator will be drawn over the contents.
+     */
+    property url separatorSource: Qt.resolvedUrl("../artwork/PageHeaderBaseDividerLight.sci")
+
+    /*!
+      The source of an additional image attached to the bottom of the separator. The contents
+      of the \l MainView will be drawn on top of the separator bottom image.
+     */
+    property url separatorBottomSource: Qt.resolvedUrl("../artwork/PageHeaderBaseDividerBottom.png")
+
+    property int fontWeight: Font.Light
+    property string fontSize: "x-large"
+    property color textColor: Theme.palette.selected.backgroundText
+    property real textLeftMargin: units.gu(2)
+
+    implicitHeight: headerStyle.contentHeight + separator.height + separatorBottom.height
+
+    /*!
+      \internal
+      Tabs needs to call sync of the TabBar
+     */
+    property TabBar __tabBar: tabBarLoader.sourceComponent ? tabBarLoader.item : null
+
+    BorderImage {
+        id: separator
+        anchors {
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+        source: headerStyle.separatorSource
+    }
+    Image {
+        id: separatorBottom
+        anchors {
+            top: separator.bottom
+            left: parent.left
+            right: parent.right
+        }
+        source: headerStyle.separatorBottomSource
+    }
+
+    Item {
+        id: foreground
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+        height: headerStyle.contentHeight
+
+        Label {
+            LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
+
+            anchors {
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+                leftMargin: headerStyle.textLeftMargin
+            }
+            text: styledItem.title
+            font.weight: headerStyle.fontWeight
+            visible: !styledItem.tabsModel && !styledItem.contents
+            fontSize: headerStyle.fontSize
+            color: headerStyle.textColor
+        }
+
+        Binding {
+            target: styledItem.contents
+            property: "anchors.fill"
+            value: foreground
+            when: styledItem.contents
+        }
+        Binding {
+            target: styledItem.contents
+            property: "parent"
+            value: foreground
+            when: styledItem.contents
+        }
+
+        Loader {
+            id: tabBarLoader
+            sourceComponent: styledItem.tabsModel && !styledItem.contents ? tabBarComponent : null
+            anchors.fill: parent
+        }
+
+        Component {
+            id: tabBarComponent
+            TabBar {
+                id: tabBar
+                anchors.fill: parent
+                model: styledItem.tabsModel
+                animate: styledItem.animate
+            }
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/HighlightMagnifier.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/HighlightMagnifier.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/HighlightMagnifier.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+
+ShaderEffect {
+    id: magnifier
+
+    property ShaderEffectSource source
+    property real scaleFactor: 1.2
+
+    // Everything in the sourceItem that is not transparent will be made this color
+    // in the output, but the transparency of the input is respected.
+    property color outputColor: "red"
+
+    // Specify the region of the sourceRect that must be enlarged as
+    // x, y, width, height in texture coordinates. (0, 0, 1, 1) is full sourceRect.
+    property rect texCoordRange: Qt.rect(0.0, 0.0, 1.0, 1.0);
+
+    vertexShader: "
+        uniform highp vec4 texCoordRange;
+        attribute highp vec4 qt_Vertex;
+        attribute highp vec2 qt_MultiTexCoord0;
+        uniform highp mat4 qt_Matrix;
+        uniform highp float scaleFactor;
+        varying highp vec2 qt_TexCoord0;
+        void main() {
+            vec2 texCoord = vec2(0.5 - 1.0 / (2.0 * scaleFactor)) + qt_MultiTexCoord0 / vec2(scaleFactor);
+            qt_TexCoord0 = texCoordRange.xy + texCoord*texCoordRange.zw;
+            gl_Position = qt_Matrix * qt_Vertex;
+        }"
+
+    fragmentShader: "
+        uniform lowp float qt_Opacity;
+        varying highp vec2 qt_TexCoord0;
+        uniform sampler2D source;
+        uniform highp vec4 outputColor;
+
+        void main() {
+            lowp vec4 tex = texture2D(source, qt_TexCoord0);
+            gl_FragColor = vec4(outputColor.rgb, outputColor.a*tex.a) * qt_Opacity;
+        }"
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ListItemOptionSelectorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ListItemOptionSelectorStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ListItemOptionSelectorStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: ambianceStyle
+
+    property url chevron: Qt.resolvedUrl("../artwork/chevron_down.png")
+    property url tick: Qt.resolvedUrl("../artwork/tick.png")
+    property bool colourComponent: true
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ListItemStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ListItemStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ListItemStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,413 @@
+/*
+ * Copyright 2014-2015 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components.Styles 1.2 as Styles
+import Ubuntu.Components 1.2
+
+Styles.ListItemStyle {
+
+    id: listItemStyle
+    /*
+     * Take over the ListItem's index context property as repeater used in panel
+     * overrides the property.
+     */
+    readonly property int listItemIndex: index
+
+    // anchoring
+    anchors {
+        top: parent ? parent.top : undefined
+        bottom: parent ? parent.bottom : undefined
+        bottomMargin: styledItem.divider.visible ? styledItem.divider.height : 0
+        left: styledItem.contentItem.left
+        leftMargin: -styledItem.contentItem.anchors.leftMargin
+        right: styledItem.contentItem.right
+        rightMargin: -styledItem.contentItem.anchors.rightMargin
+    }
+    LayoutMirroring.childrenInherit: true
+
+    // leading/trailing panels
+    Component {
+        id: panelComponent
+        Rectangle {
+            id: panel
+            objectName: "ListItemPanel" + (leading ? "Leading" : "Trailing")
+            readonly property real panelWidth: actionsRow.width
+
+            // FIXME use theme palette colors once stabilized
+            color: leading ? UbuntuColors.red : "white"
+            anchors.fill: parent
+            width: parent ? parent.width : 0
+
+            readonly property ListItemActions itemActions: leading ? styledItem.leadingActions : styledItem.trailingActions
+
+            Row {
+                id: actionsRow
+                anchors {
+                    left: leading ? undefined : parent.left
+                    right: leading ? parent.right : undefined
+                    top: parent.top
+                    bottom: parent.bottom
+                    leftMargin: spacing
+                }
+
+                readonly property real maxItemWidth: parent.width / itemActions.actions.length
+
+                Repeater {
+                    model: itemActions.actions
+                    AbstractButton {
+                        id: actionButton
+                        action: modelData
+                        enabled: action.enabled
+                        opacity: action.enabled ? 1.0 : 0.5
+                        width: MathUtils.clamp(delegateLoader.item ? delegateLoader.item.width : 0, height, actionsRow.maxItemWidth)
+                        anchors {
+                            top: parent ? parent.top : undefined
+                            bottom: parent ? parent.bottom : undefined
+                        }
+                        function trigger() {
+                            internals.selectedAction = modelData;
+                            listItemStyle.rebound();
+                        }
+
+                        Rectangle {
+                            anchors.fill: parent
+                            color: Theme.palette.selected.background
+                            visible: pressed
+                        }
+
+                        Loader {
+                            id: delegateLoader
+                            height: parent.height
+                            sourceComponent: itemActions.delegate ? itemActions.delegate : defaultDelegate
+                            property Action action: modelData
+                            property int index: index
+                            property bool pressed: actionButton.pressed
+                            onItemChanged: {
+                                // use action's objectName to identify the visualized action
+                                if (item && item.objectName === "") {
+                                    item.objectName = modelData.objectName;
+                                    actionButton.objectName = "actionbutton_" + modelData.objectName
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            Component {
+                id: defaultDelegate
+                Item {
+                    width: height
+                    Icon {
+                        width: units.gu(2.5)
+                        height: width
+                        name: action.iconName
+                        // FIXME use theme palette colors once stabilized
+                        color: leading ? "white" : UbuntuColors.darkGrey
+                        anchors.centerIn: parent
+                    }
+                }
+            }
+        }
+    }
+    // the selection/multiselection panel
+    Component {
+        id: selectionDelegate
+        Item {
+            id: selectPanel
+            objectName: "selection_panel" + listItemIndex
+            anchors.fill: parent ? parent : undefined
+
+            CheckBox {
+                id: checkbox
+                opacity: 0
+                // for unit and autopilot tests
+                objectName: "listitem_select"
+                anchors.centerIn: parent
+                // for the initial value
+                checked: styledItem.selected
+                onCheckedChanged: styledItem.selected = checked;
+            }
+
+            states: State {
+                name: "enabled"
+                when: loaded && styledItem.selectMode
+                PropertyChanges {
+                    target: checkbox
+                    opacity: 1.0
+                }
+            }
+            transitions: Transition {
+                from: ""
+                to: "*"
+                reversible: true
+                enabled: listItemStyle.animatePanels
+                OpacityAnimator {
+                    easing: UbuntuAnimation.StandardEasing
+                    duration: UbuntuAnimation.FastDuration
+                }
+            }
+        }
+    }
+    // drag panel
+    Component {
+        id: dragDelegate
+        Item {
+            id: dragPanel
+            objectName: "drag_panel" + index
+            anchors.fill: parent ? parent : undefined
+            Icon {
+                objectName: "icon"
+                id: dragIcon
+                anchors.centerIn: parent
+                width: units.gu(3)
+                height: width
+                name: "view-grid-symbolic"
+                opacity: 0.0
+                scale: 0.5
+            }
+            Binding {
+                target: listItemStyle
+                property: "dragPanel"
+                value: dragPanel
+            }
+
+            states: State {
+                name: "enabled"
+                when: loaded && styledItem.dragMode
+                PropertyChanges {
+                    target: dragIcon
+                    opacity: 1.0
+                    scale: 1.0
+                }
+            }
+            transitions: Transition {
+                from: ""
+                to: "*"
+                reversible: true
+                enabled: listItemStyle.animatePanels
+                ParallelAnimation {
+                    OpacityAnimator {
+                        easing: UbuntuAnimation.StandardEasing
+                        duration: UbuntuAnimation.FastDuration
+                    }
+                    ScaleAnimator {
+                        easing: UbuntuAnimation.StandardEasing
+                        duration: UbuntuAnimation.FastDuration
+                    }
+                }
+            }
+        }
+    }
+
+    // leading panel loader
+    Loader {
+        id: leadingLoader
+        objectName: "leading_loader"
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            right: parent.left
+        }
+        width: parent.width
+        sourceComponent: internals.swiped && styledItem.leadingActions && styledItem.leadingActions.actions.length > 0 ?
+                             panelComponent : null
+        // context properties used in delegates
+        readonly property bool leading: true
+        readonly property bool loaded: status == Loader.Ready
+
+        // panel states
+        states: [
+            State {
+                name: "selectable"
+                when: styledItem.selectMode
+                PropertyChanges {
+                    target: leadingLoader
+                    sourceComponent: selectionDelegate
+                    width: units.gu(5)
+                }
+                PropertyChanges {
+                    target: listItemStyle
+                    anchors.leftMargin: 0
+                }
+                PropertyChanges {
+                    target: styledItem.contentItem
+                    anchors.leftMargin: units.gu(5)
+                }
+            }
+        ]
+        transitions: Transition {
+            from: ""
+            to: "selectable"
+            reversible: true
+            enabled: listItemStyle.animatePanels
+            PropertyAnimation {
+                target: styledItem.contentItem
+                properties: "anchors.leftMargin"
+                easing: UbuntuAnimation.StandardEasing
+                duration: UbuntuAnimation.FastDuration
+            }
+        }
+    }
+    // trailing panel loader
+    Loader {
+        id: trailingLoader
+        objectName: "trailing_loader"
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.right
+        }
+        width: parent.width
+        sourceComponent: internals.swiped && styledItem.trailingActions && styledItem.trailingActions.actions.length > 0 ?
+                             panelComponent : null
+        // context properties used in delegates
+        readonly property bool leading: false
+        readonly property bool loaded: status == Loader.Ready
+
+        // panel states
+        states: State {
+            name: "draggable"
+            when: styledItem.dragMode
+            PropertyChanges {
+                target: trailingLoader
+                sourceComponent: dragDelegate
+                width: units.gu(5)
+            }
+            PropertyChanges {
+                target: listItemStyle
+                anchors.rightMargin: 0
+            }
+            PropertyChanges {
+                target: styledItem.contentItem
+                anchors.rightMargin: units.gu(5)
+            }
+        }
+        transitions: Transition {
+            from: ""
+            to: "*"
+            reversible: true
+            enabled: listItemStyle.animatePanels
+            PropertyAnimation {
+                target: styledItem.contentItem
+                properties: "anchors.rightMargin"
+                easing: UbuntuAnimation.StandardEasing
+                duration: UbuntuAnimation.FastDuration
+            }
+        }
+    }
+
+    // internals
+    QtObject {
+        id: internals
+        // action triggered
+        property Action selectedAction
+        // swipe handling
+        readonly property bool swiped: listItemStyle.x != styledItem.x && !styledItem.selectMode && !styledItem.dragMode
+        readonly property Item swipedPanel: leadingPanel ? leadingLoader.item : trailingLoader.item
+        readonly property bool leadingPanel: listItemStyle.LayoutMirroring.enabled ? (listItemStyle.x < 0) : (listItemStyle.x > 0)
+        readonly property real swipedOffset: (leadingPanel ? listItemStyle.x : -listItemStyle.x) *
+                                             (listItemStyle.LayoutMirroring.enabled ? -1 : 1)
+        readonly property real panelWidth: swipedPanel && swipedPanel.hasOwnProperty("panelWidth") ? swipedPanel.panelWidth : 0
+        property real prevX: 0.0
+        property real snapChangerLimit: 0.0
+        readonly property real threshold: units.gu(1.5)
+        property bool snapIn: false
+
+        // update snap direction
+        function updateSnapDirection() {
+            if (prevX < listItemStyle.x && (snapChangerLimit <= listItemStyle.x)) {
+                snapIn = (listItemStyle.LayoutMirroring.enabled !== leadingPanel);
+                snapChangerLimit = listItemStyle.x - threshold;
+            } else if (prevX > listItemStyle.x && (listItemStyle.x < snapChangerLimit)) {
+                snapIn = (listItemStyle.LayoutMirroring.enabled === leadingPanel);
+                snapChangerLimit = listItemStyle.x + threshold;
+            }
+            prevX = listItemStyle.x;
+        }
+        // perform snapIn/Out
+        function snap() {
+            var snapPos = (swipedOffset > units.gu(2) && snapIn) ? panelWidth : 0.0;
+            snapPos *= leadingPanel ? 1 : -1;
+            // invert snapPos on RTL
+            snapPos *= listItemStyle.LayoutMirroring.enabled ? -1 : 1;
+            snapAnimation.snapTo(snapPos);
+        }
+        // handle elasticity on overshoot
+        function overshoot(event) {
+            var offset = event.content.x - styledItem.contentItem.anchors.leftMargin;
+            offset *= leadingPanel ? 1 : -1;
+            // invert offset on RTL
+            offset *= listItemStyle.LayoutMirroring.enabled ? -1 : 1;
+            if (offset > panelWidth) {
+                // do elastic move
+                event.content.x = styledItem.contentItem.x + (event.to.x - event.from.x) / 2;
+            }
+        }
+    }
+    snapAnimation: SmoothedAnimation {
+        objectName: "snap_animation"
+        target: styledItem.contentItem
+        property: "x"
+        // use 50GU/second velocity
+        velocity: units.gu(60)
+        onStopped: {
+            // trigger action
+            if (to == styledItem.contentItem.anchors.leftMargin && internals.selectedAction) {
+                internals.selectedAction.trigger(listItemIndex);
+                internals.selectedAction = null;
+            }
+        }
+        // animated snapping
+        function snapTo(pos) {
+            if (pos == to && styledItem.contentItem.x == to) {
+                return;
+            }
+
+            stop();
+            from = styledItem.contentItem.x;
+            if (!pos) {
+                pos = styledItem.contentItem.anchors.leftMargin;
+            }
+            to = pos;
+            start();
+        }
+    }
+
+    // simple drop animation
+    dropAnimation: SmoothedAnimation {
+        properties: "y"
+        velocity: units.gu(60)
+    }
+
+    onXChanged: internals.updateSnapDirection()
+    // overriding default functions
+    function swipeEvent(event) {
+        if (event.status == SwipeEvent.Started) {
+            internals.prevX = x;
+            snapAnimation.stop();
+        } else if (event.status == SwipeEvent.Finished) {
+            internals.snap();
+        } else if (event.status == SwipeEvent.Updated) {
+            // handle elasticity when overshooting
+            internals.overshoot(event)
+        }
+    }
+    function rebound() {
+        snapAnimation.snapTo(0);
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/MainViewStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/MainViewStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/MainViewStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    // styling properties
+    anchors.fill: parent
+    z: -1
+    id: mainViewStyle
+
+    /*!
+      The background texture of the main view. The image will be drawn over the background color,
+      so if it has (semi-)transparent pixels, in those pixels the background color will be visible.
+     */
+    property url backgroundSource: Qt.resolvedUrl("../artwork/background_paper.png")
+
+    Gradient {
+        id: backgroundGradient
+        GradientStop { position: 0.0; color: styledItem.headerColor }
+        GradientStop { position: 0.83; color: styledItem.backgroundColor }
+        GradientStop { position: 1.0; color: styledItem.footerColor }
+    }
+
+    Rectangle {
+        id: backgroundColor
+        anchors.fill: parent
+        color: styledItem.backgroundColor
+        gradient: internals.isGradient ? backgroundGradient : null
+    }
+
+    Image {
+        id: backgroundTexture
+        anchors.fill: parent
+        source: mainViewStyle.backgroundSource
+        fillMode: Image.Tile
+        asynchronous: true
+        cache: false
+    }
+
+    QtObject {
+        id: internals
+        property bool isGradient: styledItem.backgroundColor != styledItem.headerColor ||
+                                  styledItem.backgroundColor != styledItem.footerColor
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/OptionSelectorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/OptionSelectorStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/OptionSelectorStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: ambianceStyle
+
+    property url chevron: Qt.resolvedUrl("../artwork/chevron_down.png")
+    property url tick: Qt.resolvedUrl("../artwork/tick.png")
+    property bool colourComponent: true
+
+    UbuntuShape {
+        id: background
+
+        width: styledItem.width
+        height: styledItem.height
+        radius: "medium"
+
+        color: Qt.rgba(0, 0, 0, 0.05)
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/OverflowPanel.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/OverflowPanel.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/OverflowPanel.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components.Popups 1.0
+
+Popover {
+    property bool square: true
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/PageHeadButton.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/PageHeadButton.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/PageHeadButton.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+AbstractButton {
+    id: button
+
+    property real iconWidth: units.gu(2.5)
+    property real iconHeight: iconWidth
+
+    width: visible ? units.gu(5) : 0
+    height: parent ? parent.height : undefined
+
+    property alias color: icon.color
+
+    Rectangle {
+        visible: button.pressed
+        anchors.fill: parent
+        color: Theme.palette.selected.background
+    }
+
+    Icon {
+        id: icon
+        anchors {
+            centerIn: parent
+        }
+        // prevent trying to render the icon with an invalid source
+        // when the button is invisible by setting width and height to 0
+        width: visible ? button.iconWidth : 0
+        height: visible ? button.iconHeight : 0
+        source: button.iconSource
+        color: Qt.rgba(0, 0, 0, 0)
+        opacity: button.enabled ? 1.0 : 0.3
+    }
+
+    Component {
+        id: labelComponent
+        Label {
+            id: label
+            objectName: button.objectName + "_label"
+            color: button.color
+            opacity: button.enabled ? 1.0 : 0.3
+            text: button.text
+            fontSize: "xx-small"
+        }
+    }
+    Loader {
+        anchors {
+            top: icon.bottom
+            topMargin: units.gu(0.5)
+            horizontalCenter: parent.horizontalCenter
+        }
+        sourceComponent: button.state === "IconAndLabel" ? labelComponent : null
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/PageHeadStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/PageHeadStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/PageHeadStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,628 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+import Ubuntu.Components.Popups 1.0
+import Ubuntu.Components.ListItems 1.0 as ListItem
+import Ubuntu.Components.Styles 1.2 as Style
+
+Style.PageHeadStyle {
+    id: headerStyle
+    objectName: "PageHeadStyle" // used in unit tests
+    contentHeight: units.gu(7)
+    fontWeight: Font.Light
+    fontSize: "x-large"
+    textLeftMargin: units.gu(2)
+    maximumNumberOfActions: 3
+
+    /*!
+      The color of the buttons in the header.
+     */
+    property color buttonColor: styledItem.config.foregroundColor
+
+    /*!
+      The color of the title text.
+     */
+    property color titleColor: styledItem.config.foregroundColor
+
+    /*!
+      The background color of the tabs panel and the actions overflow panel.
+     */
+    property color panelBackgroundColor: styledItem.panelColor
+
+    /*!
+      The background color of the tapped item in the panel.
+     */
+    property color panelHighlightColor: Theme.palette.selected.background
+
+    /*!
+      The foreground color (icon and text) of actions in the panel.
+     */
+    property color panelForegroundColor: Theme.palette.selected.backgroundText
+
+    /*!
+      The text color of unselected sections and the section divider.
+     */
+    property color sectionColor: Theme.palette.selected.backgroundText
+
+    /*!
+      The text color of the selected section.
+     */
+    property color selectedSectionColor: UbuntuColors.orange
+
+    /*!
+      The background color of the pressed section.
+     */
+    property color sectionHighlightColor: Theme.palette.selected.background
+
+    implicitHeight: headerStyle.contentHeight + divider.height
+
+    // FIXME: Workaround to get sectionsRepeater.count in autopilot tests,
+    //  see also FIXME in AppHeader where this property is used.
+    property alias __sections_repeater_for_autopilot: sectionsRepeater
+
+    // Used by unit tests and autopilot tests to wait for animations to finish
+    readonly property bool animating: headerStyle.state == "OUT"
+                                      || leftAnchor.anchors.leftMargin < 0
+
+    // for Unity8
+    // FIXME: Remove this property when we introduce a header preset that does not
+    //  have a separator.
+    property alias __separator_visible: divider.visible
+
+    StyledItem {
+        id: divider
+        anchors {
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+
+        height: sectionsRow.visible ? units.gu(3) : units.gu(2)
+
+        // separatorSource and separatorBottomSource are needed for the deprecated
+        // HeadSeparatorImageStyle.
+        property url separatorSource: headerStyle.separatorSource
+        property url separatorBottomSource: headerStyle.separatorBottomSource
+
+        // backgroundColor is used in the new HeadDividerStyle
+        property color backgroundColor: styledItem.dividerColor
+
+        style: Theme.createStyleComponent("HeadDividerStyle.qml", divider)
+
+        property PageHeadSections sections: styledItem.config.sections
+
+        Row {
+            id: sectionsRow
+            anchors.centerIn: parent
+            width: childrenRect.width
+            height: parent.height
+            enabled: divider.sections.enabled
+            visible: divider.sections.model !== undefined
+            opacity: enabled ? 1.0 : 0.5
+
+            Repeater {
+                id: sectionsRepeater
+                model: divider.sections.model
+                objectName: "page_head_sections_repeater"
+                AbstractButton {
+                    id: sectionButton
+                    anchors.verticalCenter: parent ? parent.verticalCenter : undefined
+                    objectName: "section_button_" + index
+                    enabled: sectionsRow.enabled
+                    width: label.width + units.gu(4)
+                    height: sectionsRow.height + units.gu(2)
+                    property bool selected: index === divider.sections.selectedIndex
+                    onClicked: divider.sections.selectedIndex = index;
+
+                    Rectangle {
+                        visible: parent.pressed
+                        anchors {
+                            verticalCenter: parent.verticalCenter
+                            left: parent.left
+                            right: parent.right
+                            rightMargin: verticalDividerLine.width
+                        }
+                        height: sectionsRow.height
+                        color: headerStyle.sectionHighlightColor
+                    }
+
+                    Label {
+                        id: label
+                        text: modelData
+                        fontSize: "small"
+                        anchors.centerIn: sectionButton
+                        horizontalAlignment: Text.AlignHCenter
+                        color: sectionButton.selected ?
+                                   headerStyle.selectedSectionColor :
+                                   headerStyle.sectionColor
+                    }
+
+                    // vertical divider line
+                    Rectangle {
+                        id: verticalDividerLine
+                        anchors {
+                            verticalCenter: parent.verticalCenter
+                            right: parent.right
+                        }
+                        height: units.dp(10)
+                        width: units.dp(1)
+                        visible: index < sectionsRepeater.model.length - 1
+                        color: headerStyle.sectionColor
+                        opacity: 0.2
+                    }
+                }
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "IN"
+            PropertyChanges {
+                target: allContents
+                opacity: 1.0
+            }
+        },
+        State {
+            name: "OUT"
+            PropertyChanges {
+                target: allContents
+                opacity: 0.0
+            }
+        }
+    ]
+
+    function animateOut() {
+        state = "OUT";
+    }
+    function animateIn() {
+        state = "IN";
+    }
+
+    signal animateOutFinished()
+    signal animateInFinished()
+
+    transitions: [
+        Transition {
+            id: transitionOut
+            from: "IN"
+            to: "OUT"
+            SequentialAnimation {
+                ParallelAnimation {
+                    UbuntuNumberAnimation {
+                        target: allContents
+                        property: "opacity"
+                        from: 1.0
+                        to: 0.0
+                    }
+                    UbuntuNumberAnimation {
+                        target: leftAnchor
+                        properties: "anchors.leftMargin"
+                        from: 0.0
+                        to: -units.gu(5)
+                    }
+                    UbuntuNumberAnimation {
+                        target: rightAnchor
+                        properties: "anchors.rightMargin"
+                        from: 0
+                        to: -units.gu(5)
+                    }
+                }
+                ScriptAction {
+                    script: headerStyle.animateOutFinished()
+                }
+            }
+        },
+        Transition {
+            id: transitionIn
+            from: "OUT"
+            to: "IN"
+            SequentialAnimation {
+                ParallelAnimation {
+                    UbuntuNumberAnimation {
+                        target: allContents
+                        property: "opacity"
+                        from: 0.0
+                        to: 1.0
+                    }
+                    UbuntuNumberAnimation {
+                        target: leftAnchor
+                        properties: "anchors.leftMargin"
+                        from: -units.gu(5)
+                        to: 0
+                    }
+                    UbuntuNumberAnimation {
+                        target: rightAnchor
+                        properties: "anchors.rightMargin"
+                        from: -units.gu(5)
+                        to: 0
+                    }
+                }
+                ScriptAction {
+                    script: headerStyle.animateInFinished()
+                }
+            }
+        }
+    ]
+
+    Item {
+        id: allContents
+        anchors.fill: parent
+
+        Item {
+            id: leftAnchor
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                left: parent.left
+                leftMargin: 0
+            }
+            width: 0
+        }
+        Item {
+            id: rightAnchor
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                right: parent.right
+                rightMargin: 0
+            }
+            width: 0
+        }
+
+        Item {
+            id: leftButtonContainer
+            anchors {
+                left: leftAnchor.right
+                top: parent.top
+                leftMargin: width > 0 ? units.gu(1) : 0
+            }
+            width: childrenRect.width
+            height: headerStyle.contentHeight
+
+            PageHeadButton {
+                id: customBackButton
+                objectName: "customBackButton"
+                action: styledItem.config.backAction
+                visible: null !== styledItem.config.backAction &&
+                         styledItem.config.backAction.visible
+                color: styledItem.config.foregroundColor
+            }
+
+            PageHeadButton {
+                id: backButton
+                objectName: "backButton"
+
+                iconName: "back"
+                visible: styledItem.pageStack !== null &&
+                         styledItem.pageStack !== undefined &&
+                         styledItem.pageStack.depth > 1 &&
+                         !styledItem.config.backAction
+
+                text: "back"
+                color: styledItem.config.foregroundColor
+
+                onTriggered: {
+                    styledItem.pageStack.pop();
+                }
+            }
+
+            PageHeadButton {
+                id: tabsButton
+                objectName: "tabsButton"
+
+                iconName: "navigation-menu"
+                visible: styledItem.tabsModel !== null &&
+                         styledItem.tabsModel !== undefined &&
+                         !backButton.visible &&
+                         !customBackButton.visible
+                text: visible ? styledItem.tabsModel.count + " tabs" : ""
+                color: headerStyle.buttonColor
+
+                onTriggered: PopupUtils.open(tabsPopoverComponent, tabsButton)
+
+                Component {
+                    id: tabsPopoverComponent
+
+                    OverflowPanel {
+                        id: tabsPopover
+                        objectName: "tabsPopover"
+                        callerMargin: -units.gu(1) + units.dp(4)
+                        contentWidth: units.gu(20)
+
+                        Binding {
+                            target: tabsPopover.__foreground.__styleInstance
+                            property: "color"
+                            value: headerStyle.panelBackgroundColor
+                            when: tabsPopover.__foreground &&
+                                  tabsPopover.__foreground.__styleInstance
+                        }
+
+                        Column {
+                            anchors {
+                                left: parent.left
+                                top: parent.top
+                                right: parent.right
+                            }
+                            Repeater {
+                                model: styledItem.tabsModel
+                                AbstractButton {
+                                    objectName: "tabButton" + index
+                                    onClicked: {
+                                        styledItem.tabsModel.selectedIndex = index;
+                                        tabsPopover.hide();
+                                    }
+                                    implicitHeight: units.gu(6) + bottomDividerLine.height
+                                    width: parent ? parent.width : units.gu(31)
+
+                                    Rectangle {
+                                        visible: parent.pressed
+                                        anchors {
+                                            left: parent.left
+                                            right: parent.right
+                                            top: parent.top
+                                        }
+                                        height: parent.height - bottomDividerLine.height
+                                        color: headerStyle.panelHighlightColor
+                                    }
+
+                                    Label {
+                                        anchors {
+                                            verticalCenter: parent.verticalCenter
+                                            verticalCenterOffset: units.dp(-1)
+                                            left: parent.left
+                                            leftMargin: units.gu(2)
+                                            right: parent.right
+                                        }
+                                        fontSize: "medium"
+                                        elide: Text.ElideRight
+                                        text: tab.title // FIXME: only "title" doesn't work with i18n.tr(). Why not?
+                                        color: headerStyle.panelForegroundColor
+                                    }
+
+                                    ListItem.ThinDivider {
+                                        id: bottomDividerLine
+                                        anchors.bottom: parent.bottom
+                                        visible: index < styledItem.tabsModel.count - 1
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Item {
+            id: foreground
+            anchors {
+                left: leftButtonContainer.right
+                top: parent.top
+                // don't keep a margin if there is already a button with spacing
+                leftMargin: leftButtonContainer.width > 0 ? 0 : headerStyle.textLeftMargin
+            }
+            width: parent.width - anchors.leftMargin
+                   - leftButtonContainer.anchors.leftMargin - leftButtonContainer.width
+                   - actionsContainer.anchors.rightMargin - actionsContainer.width
+            height: headerStyle.contentHeight
+
+            Label {
+                objectName: "header_title_label"
+                LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
+                visible: !contentsContainer.visible && styledItem.config.preset === ""
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                }
+                text: styledItem.title
+                font.weight: headerStyle.fontWeight
+                fontSize: headerStyle.fontSize
+                color: headerStyle.titleColor
+                elide: Text.ElideRight
+            }
+
+            Item {
+                // This Item is used to make the custom header item invisible
+                // when styledItem.contents is unset and its parent is not updated
+                // when the bindings below is no longer active
+                id: contentsContainer
+                anchors.fill: parent
+                visible: styledItem.contents || styledItem.config.contents
+            }
+            Binding {
+                target: styledItem.contents
+                property: "anchors.fill"
+                value: contentsContainer
+                when: styledItem.contents
+            }
+            Binding {
+                target: styledItem.contents
+                property: "parent"
+                value: contentsContainer
+                when: styledItem.contents
+            }
+            Binding {
+                target: styledItem.config.contents
+                property: "parent"
+                value: contentsContainer
+                when: styledItem.config.contents && !styledItem.contents
+            }
+        }
+
+        Row {
+            id: actionsContainer
+
+            property var visibleActions: getVisibleActions(styledItem.config.actions)
+            function getVisibleActions(actions) {
+                var visibleActionList = [];
+                for (var i in actions) {
+                    var action = actions[i];
+                    if (action && action.hasOwnProperty("visible") && action.visible) {
+                        visibleActionList.push(action);
+                    }
+                }
+                return visibleActionList;
+            }
+
+            QtObject {
+                id: numberOfSlots
+                property int requested: actionsContainer.visibleActions.length
+                property int left: tabsButton.visible || backButton.visible ||
+                                   customBackButton.visible ? 1 : 0
+                property int right: headerStyle.maximumNumberOfActions - left
+                property int overflow: actionsOverflowButton.visible ? 1 : 0
+                property int used: Math.min(right - overflow, requested)
+            }
+
+            anchors {
+                top: parent.top
+                right: rightAnchor.left
+                rightMargin: actionsContainer.width > 0 ? units.gu(1) : 0
+            }
+            width: childrenRect.width
+            height: headerStyle.contentHeight
+
+            Repeater {
+                model: numberOfSlots.used
+                PageHeadButton {
+                    id: actionButton
+                    objectName: action.objectName + "_header_button"
+                    action: actionsContainer.visibleActions[index]
+                    color: headerStyle.buttonColor
+                    state: styledItem.config.preset === "select" ?
+                               "IconAndLabel" : ""
+                }
+            }
+
+            PageHeadButton {
+                id: actionsOverflowButton
+                objectName: "actions_overflow_button"
+                visible: numberOfSlots.requested > numberOfSlots.right
+                // Ensure resetting of X when this button is not visible to avoid
+                // miscalculation of actionsContainer.width. Fixes bug #1408481.
+                onVisibleChanged: if (!visible) x = 0
+                iconName: "contextual-menu"
+                color: headerStyle.buttonColor
+                height: actionsContainer.height
+                onTriggered: PopupUtils.open(actionsOverflowPopoverComponent, actionsOverflowButton)
+
+                Component {
+                    id: actionsOverflowPopoverComponent
+
+                    OverflowPanel {
+                        id: actionsOverflowPopover
+                        objectName: "actions_overflow_popover"
+                        callerMargin: -units.gu(1) + units.dp(4)
+                        contentWidth: units.gu(20)
+
+                        Binding {
+                            target: actionsOverflowPopover.__foreground.__styleInstance
+                            property: "color"
+                            value: headerStyle.panelBackgroundColor
+                            when: actionsOverflowPopover.__foreground &&
+                                  actionsOverflowPopover.__foreground.__styleInstance
+                        }
+
+                        // Ensure the popover closes when actions change and
+                        // the list item below may be destroyed before its
+                        // onClicked is executed. See bug
+                        // https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1326963
+                        Connections {
+                            target: styledItem.config
+                            onActionsChanged: {
+                                actionsOverflowPopover.hide();
+                            }
+                        }
+                        Connections {
+                            target: styledItem
+                            onConfigChanged: {
+                                actionsOverflowPopover.hide();
+                            }
+                        }
+
+                        Column {
+                            anchors {
+                                left: parent.left
+                                top: parent.top
+                                right: parent.right
+                            }
+                            Repeater {
+                                id: overflowRepeater
+                                model: numberOfSlots.requested - numberOfSlots.used
+                                AbstractButton {
+                                    action: actionsContainer.visibleActions[numberOfSlots.used + index]
+                                    objectName: action.objectName + "_header_overflow_button"
+                                    onClicked: actionsOverflowPopover.hide()
+                                    implicitHeight: units.gu(6) + bottomDividerLine.height
+                                    width: parent ? parent.width : units.gu(31)
+
+                                    Rectangle {
+                                        visible: parent.pressed
+                                        anchors {
+                                            left: parent.left
+                                            right: parent.right
+                                            top: parent.top
+                                        }
+                                        height: parent.height - bottomDividerLine.height
+                                        color: headerStyle.panelHighlightColor
+                                    }
+
+                                    Icon {
+                                        id: actionIcon
+                                        source: action.iconSource
+                                        color: headerStyle.panelForegroundColor
+                                        anchors {
+                                            verticalCenter: parent.verticalCenter
+                                            verticalCenterOffset: units.dp(-1)
+                                            left: parent.left
+                                            leftMargin: units.gu(2)
+                                        }
+                                        width: units.gu(2)
+                                        height: units.gu(2)
+                                        opacity: action.enabled ? 1.0 : 0.5
+                                    }
+
+                                    Label {
+                                        anchors {
+                                            verticalCenter: parent.verticalCenter
+                                            verticalCenterOffset: units.dp(-1)
+                                            left: actionIcon.right
+                                            leftMargin: units.gu(2)
+                                            right: parent.right
+                                        }
+                                        fontSize: "small"
+                                        elide: Text.ElideRight
+                                        text: action.text
+                                        color: headerStyle.panelForegroundColor
+                                        opacity: action.enabled ? 1.0 : 0.5
+                                    }
+
+                                    ListItem.ThinDivider {
+                                        id: bottomDividerLine
+                                        anchors.bottom: parent.bottom
+                                        visible: index !== overflowRepeater.count - 1
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/Palette.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/Palette.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/Palette.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+import Ubuntu.Components.Themes 0.1
+
+Palette {
+    normal: PaletteValues {
+        background: "#EDEDED"
+        backgroundText: "#81888888"
+        base: Qt.rgba(0, 0, 0, 0.1)
+        baseText: UbuntuColors.lightGrey
+        foreground: UbuntuColors.lightGrey
+        foregroundText: "#FFFFFF"
+        overlay: "#FDFDFD"
+        overlayText: UbuntuColors.lightGrey
+        field: "#FAFAFA"
+        fieldText: UbuntuColors.darkGrey
+    }
+    selected: PaletteValues {
+        background: Qt.rgba(0, 0, 0, 0.05)
+        backgroundText: UbuntuColors.darkGrey
+        selection: foreground // unused
+        foreground: Qt.rgba(UbuntuColors.blue.r, UbuntuColors.blue.g, UbuntuColors.blue.b, 0.2)
+        foregroundText: UbuntuColors.darkGrey
+        field: "#FFFFFF"
+        fieldText: UbuntuColors.darkGrey
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/PartialColorize.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/PartialColorize.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/PartialColorize.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+
+ShaderEffect {
+    id: partialColorize
+
+    implicitWidth: source.implicitWidth
+    implicitHeight: source.implicitHeight
+    visible: source != null && source.visible
+
+    property Item sourceItem
+    property var source: ShaderEffectSource {
+        hideSource: true
+        sourceItem: partialColorize.sourceItem
+        visible: sourceItem != null
+    }
+    property color leftColor
+    property color rightColor
+    property real progress
+    property bool mirror: false
+    property string texCoord: mirror ? "1.0 - qt_TexCoord0.x" : "qt_TexCoord0.x"
+
+    fragmentShader: "
+            varying highp vec2 qt_TexCoord0;
+            uniform sampler2D source;
+            uniform lowp vec4 leftColor;
+            uniform lowp vec4 rightColor;
+            uniform lowp float progress;
+            uniform lowp float qt_Opacity;
+
+            void main() {
+                lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
+                lowp vec4 newColor = mix(leftColor, rightColor, step(progress, " + texCoord + "));
+                gl_FragColor = newColor * sourceColor.a * qt_Opacity;
+            }"
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/PickerDelegateStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/PickerDelegateStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/PickerDelegateStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    property real minFade: 0.2
+    property real maxFade: 0.95
+    property bool fadingEnabled: true
+
+    property bool inListView: styledItem.parent && (QuickUtils.className(styledItem.parent) !== "QQuickPathView")
+    property Item itemList: inListView ? styledItem.ListView.view : styledItem.PathView.view
+    property Item picker: styledItem.picker
+    property Item highlightItem: itemList.highlightItem
+
+    Binding {
+        target: styledItem
+        when: fadingEnabled
+        property: "opacity"
+        value: opacityCalc()
+    }
+
+    function opacityCalc() {
+        if (!picker || !highlightItem || (index === itemList.currentIndex)) return 1.0;
+        var highlightY = highlightItem.y;
+        var delegateY = styledItem.y;
+        if (inListView) {
+            highlightY -= itemList.contentY;
+            delegateY -= itemList.contentY;
+        }
+        var midY = delegateY + styledItem.height / 2;
+        if (delegateY < highlightY)  {
+            return MathUtils.clamp(MathUtils.projectValue(midY, 0, highlightY, minFade, maxFade), minFade, maxFade);
+        }
+        var highlightH = highlightY + highlightItem.height;
+        if (delegateY >= highlightH) {
+            delegateY -= highlightH;
+            midY = delegateY + styledItem.height / 2;
+            return MathUtils.clamp(1.0 - MathUtils.projectValue(midY, 0, highlightY, minFade, maxFade), minFade, maxFade);
+        }
+        return 1.0;
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/PickerStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/PickerStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/PickerStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,136 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+import Ubuntu.Components.ListItems 1.0
+
+Item {
+    id: control
+    // style properties
+    /*!
+      Specifies the background color
+      */
+    property color backgroundColor: "#0A000000"
+    /*!
+      Background color for highlight.
+      */
+    property color highlightBackgroundColor: "#ffffffff"
+    /*!
+      Highlight color.
+      */
+    property color highlightColor: UbuntuColors.orange
+    /*!
+      Scale of the highlight item
+      */
+    property real highlightScaleFactor: 1.2
+    /*!
+      Thickness of the highlight component
+      */
+    property real highlightThickness: units.gu(5)
+
+    /*!
+      The content holder exposed to the Picker so tumbler list can be reparented to it.
+      */
+    property alias tumblerHolder: content
+
+    /*!
+      \internal
+      View instance listing the model
+      */
+    property Item view: Item{}
+
+    anchors.fill: parent
+
+    // frame
+    UbuntuShape {
+        anchors.fill: parent
+        radius: "medium"
+        color: Theme.palette.normal.overlay
+        image: shapeSource
+    }
+
+    ShaderEffectSource {
+        id: shapeSource
+        sourceItem: background
+        hideSource: true
+        // FIXME: visible: false prevents rendering so make it a nearly
+        // transparent 1x1 pixel instead
+        opacity: 0.01
+        width: 1
+        height: 1
+    }
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+
+        MouseArea {
+            anchors.fill: parent
+        }
+        // background
+        color: backgroundColor
+
+        Item {
+            id: content
+            anchors.fill: parent
+        }
+
+        // highlight
+        Rectangle {
+            id: highlightItem
+            y: (content.height - control.highlightThickness) / 2
+            anchors {
+                left: content.left
+                right: content.right
+            }
+            height: control.highlightThickness
+            color: highlightBackgroundColor
+        }
+        ThinDivider {
+            anchors {
+                left: content.left
+                right: content.right
+                bottom: highlightItem.top
+            }
+        }
+        ThinDivider {
+            anchors {
+                left: content.left
+                right: content.right
+                top: highlightItem.bottom
+            }
+        }
+
+        ShaderEffectSource {
+            id: effectSource
+            visible: false
+            sourceItem: view
+
+            property real sourceRectMultiplier: 2.0
+            // XXX: This works because the parent of magnifier is the same as sourceItem
+            //  in this case. Otherwise coordinate transformations will be needed.
+            sourceRect: Qt.rect(highlightItem.x, highlightItem.y, highlightItem.width, highlightItem.height)
+            textureSize: Qt.size(highlightItem.width*sourceRectMultiplier, highlightItem.height*sourceRectMultiplier)
+        }
+        HighlightMagnifier {
+            anchors.fill: highlightItem
+            scaleFactor: control.highlightScaleFactor
+            outputColor: control.highlightColor
+            source: effectSource
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/PopoverForegroundStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/PopoverForegroundStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/PopoverForegroundStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+
+BubbleShape {
+    property alias contentItem: content
+
+    target: styledItem.target
+    direction: styledItem.direction
+    clipContent: styledItem.clipContent
+    square: styledItem.square
+
+    onShowCompleted: styledItem.showCompleted()
+    onHideCompleted: styledItem.hideCompleted()
+
+    Item {
+        id: content
+        anchors.fill: parent
+
+        Connections {
+            target: styledItem
+            onShow: show()
+            onHide: hide()
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ProgressBarStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ProgressBarStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ProgressBarStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: progressBarStyle
+
+    property color foregroundColor: UbuntuColors.orange
+    property color foregroundTextColor: '#FFFFFF'
+    property color backgroundColor: Theme.palette.normal.base
+    property color backgroundTextColor: Theme.palette.normal.baseText
+
+    property var progressBar: styledItem
+
+    implicitWidth: units.gu(38)
+    implicitHeight: units.gu(4)
+
+    UbuntuShapeOverlay {
+        id: background
+        anchors.fill: parent
+        backgroundColor: progressBarStyle.backgroundColor
+        overlayColor: foregroundColor
+        overlayRect: Qt.application.layoutDirection == Qt.LeftToRight ?
+            Qt.rect(0.0, 0.0, progressBarStyle.progress, 1.0) :
+            Qt.rect(1.0 - progressBarStyle.progress, 0.0, 1.0, 1.0)
+    }
+
+    property real progress: progressBar.indeterminate ? 0.0
+                            : progressBar.value / (progressBar.maximumValue - progressBar.minimumValue)
+
+    Label {
+        id: valueLabel
+        anchors.centerIn: background
+        fontSize: "medium"
+        color: backgroundTextColor
+        text: progressBar.indeterminate ? i18n.dtr("ubuntu-ui-toolkit", "In Progress")
+              : "%1%".arg(Number(progressBarStyle.progress * 100.0).toFixed(0))
+        visible: !progressBar.hasOwnProperty("showProgressPercentage") || progressBar.showProgressPercentage
+
+        SequentialAnimation on opacity {
+            loops: Animation.Infinite
+            running: progressBar.indeterminate
+            UbuntuNumberAnimation {
+                to: 0.2; duration: UbuntuAnimation.BriskDuration
+            }
+            UbuntuNumberAnimation {
+                to: 1.0; duration: UbuntuAnimation.BriskDuration
+            }
+        }
+    }
+
+    PartialColorize {
+        anchors.fill: valueLabel
+        sourceItem: progressBar.indeterminate ? null : valueLabel
+        leftColor: foregroundTextColor
+        rightColor: backgroundTextColor
+        progress: (progressBarStyle.progress * background.width - valueLabel.x) / valueLabel.width
+        mirror: Qt.application.layoutDirection == Qt.RightToLeft
+        visible: !progressBar.hasOwnProperty("showProgressPercentage") || progressBar.showProgressPercentage
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ProgressionVisualStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ProgressionVisualStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ProgressionVisualStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: progressionVisualStyle
+
+    property url progressionDividerSource: Qt.resolvedUrl("../artwork/progression_divider.png")
+    property url progressionIconSource: Qt.resolvedUrl("../artwork/chevron.png")
+
+    implicitWidth: progressIcon.width + (styledItem.showSplit ? styledItem.splitMargin + progressionDivider.width : 0)
+
+    Image {
+        id: progressIcon
+        source: progressionIconSource
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+        }
+
+        opacity: enabled ? 1.0 : 0.5
+        mirror: Qt.application.layoutDirection == Qt.RightToLeft
+    }
+
+    Image {
+        id: progressionDivider
+        visible: styledItem.showSplit
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            right: progressIcon.left
+            rightMargin: styledItem.splitMargin
+        }
+        source: progressionDividerSource
+        opacity: enabled ? 1.0 : 0.5
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/PullToRefreshStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/PullToRefreshStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/PullToRefreshStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,251 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+import Ubuntu.Components.Styles 1.2 as Style
+
+Style.PullToRefreshStyle {
+    id: style
+    implicitHeight: refreshIndicatorItem.height + units.gu(5)
+
+    defaultContent: Label {
+        id: labelComponent
+        visible: control.enabled
+        text: releaseToRefresh ? i18n.tr("Release to refresh...") : i18n.tr("Pull to refresh...")
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        Behavior on text {
+            SequentialAnimation {
+                UbuntuNumberAnimation {
+                    target: labelComponent
+                    property: "opacity"
+                    from: 1.0
+                    to: 0.0
+                }
+                UbuntuNumberAnimation {
+                    target: labelComponent
+                    property: "opacity"
+                    from: 0.0
+                    to: 1.0
+                }
+            }
+        }
+    }
+
+    // additional configuration properties provided by the Ambiance theme
+    // these properties can be used by the deriving themes to configure the label
+    // and the activity indicator
+    property Item label: contentLoader.item
+    property alias refreshIndicator: refreshIndicatorItem
+
+    /*
+      Local properties
+      */
+    readonly property PullToRefresh control: styledItem
+    // property to store Flickable's toipMargin at the time the pull or auto-refresh is started
+    property real flickableTopMargin: 0.0
+    // store when the drag has happened at the beginning of the Flickable's content
+    property bool wasAtYBeginning: false
+    // initial contentY value when pull started
+    property real initialContentY: 0.0
+    // drives the refreshing state
+    property bool refreshing: false
+    // point of release used in rebind animation between the ready-to-refresh and refreshing states
+    property real pointOfRelease
+    // specifies the component completion
+    property bool ready: false
+    // root item
+    property Item rootItem: QuickUtils.rootItem(control)
+
+    anchors.fill: parent
+
+    Component.onCompleted: {
+        /*
+          When the model attached to the component is refreshing during initialization,
+          this refresh will happen after the style gets completed. This refresh will
+          cause the style to enter in refreshing state, which alters the topMargin.
+          However in the same time the MainView Header will be also updated, so that
+          will also alter the topMargin. But when refreshing completes, the topMargin
+          will be restored to the default value before the animation, and the content
+          will be pushed under the header. We need to connect to the header changes
+          so we can reset the state and the topMargin.
+          */
+        if (rootItem && rootItem.__propagated && rootItem.__propagated.header) {
+            rootItem.__propagated.header.visibleChanged.connect(fixTopMargin);
+            rootItem.__propagated.header.heightChanged.connect(fixTopMargin);
+        }
+        ready = true;
+    }
+    function fixTopMargin() {
+        if (style.state === "refreshing") {
+            /*
+              Fetch the topMargin, force state to disabled (idle will be turned on
+              automatically when refreshing completes) and set the topMargin from
+              the header change.
+              */
+            var topMargin = control.target.topMargin;
+            style.state = "disabled";
+            control.target.topMargin = topMargin;
+        }
+    }
+
+    // visuals
+    Loader {
+        id: contentLoader
+        sourceComponent: control.content
+        onItemChanged: {
+            if (item) {
+                item.parent = style;
+                item.anchors.fill = style;
+            }
+        }
+        asynchronous: false
+    }
+
+    ActivityIndicator {
+        id: refreshIndicatorItem
+        running: false
+        anchors.centerIn: parent
+    }
+
+    // state and content controlling
+    Connections {
+        target: control
+        onRefreshingChanged: {
+            if (!ready || !control.enabled) {
+                return;
+            }
+            if (!style.releaseToRefresh && target.refreshing) {
+                // not a manual refresh, update flickable's starting topMargin
+                style.flickableTopMargin = control.target.topMargin;
+                style.wasAtYBeginning = control.target.atYBeginning;
+            }
+            /*
+              We cannot bind refreshing state activation clause with the
+              control.refreshing property dirrectly as when the model is
+              refreshed automatically (not manually via the component), we
+              need to remember the flickable's topMargin in order to proceed
+              with a proper Flickable rebinding. If we use property binding,
+              the Connections' onRefreshingChanged will update the flickableTopMargin
+              only after the binding is evaluated.
+              */
+            style.refreshing = target.refreshing;
+        }
+    }
+    Connections {
+        target: control.target
+        onMovementStarted: {
+            style.wasAtYBeginning = control.target.atYBeginning;
+            style.initialContentY = control.target.contentY;
+            style.refreshing = false;
+            style.releaseToRefresh = false;
+        }
+        onMovementEnded: style.wasAtYBeginning = control.target.atYBeginning
+
+        // catch when to initiate refresh
+        onDraggingChanged: {
+            if (!control.parent.dragging && style.releaseToRefresh) {
+                pointOfRelease = -(control.target.contentY - control.target.originY)
+                style.flickableTopMargin = control.target.topMargin;
+                style.refreshing = true;
+                style.releaseToRefresh = false;
+            }
+        }
+        onContentYChanged: {
+            if (style.wasAtYBeginning && control.enabled && control.target.dragging) {
+                style.releaseToRefresh = ((style.initialContentY - control.target.contentY) > style.activationThreshold);
+            }
+        }
+    }
+
+    onStateChanged: {
+        /*
+           Label might not be ready when the component enters in refreshing
+           state, therefore the visible property will not be properly returned to
+           true. Because of the same reason we cannot have a PropertyChanges either
+           as the target is not yet ready at that point.
+           */
+        if (label) {
+            label.visible = (state === "idle" || state === "ready-to-refresh");
+        }
+    }
+    states: [
+        State {
+            name: "disabled"
+            when: !control.enabled
+        },
+        State {
+            name: "idle"
+            extend: ""
+            when: ready && control.enabled && !style.refreshing && !style.releaseToRefresh
+        },
+        State {
+            name: "ready-to-refresh"
+            when: ready && control.enabled && style.releaseToRefresh && !style.refreshing
+        },
+        State {
+            name: "refreshing"
+            when: ready && control.enabled && style.wasAtYBeginning && style.refreshing
+            PropertyChanges {
+                target: refreshIndicatorItem
+                running: true
+            }
+            PropertyChanges {
+                target: control.target
+                topMargin: style.flickableTopMargin + control.height
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "ready-to-refresh"
+            to: "refreshing"
+            SequentialAnimation {
+                UbuntuNumberAnimation {
+                    target: control.target
+                    property: "topMargin"
+                    from: style.pointOfRelease
+                    to: style.flickableTopMargin + control.height
+                }
+                ScriptAction {
+                    script: control.refresh()
+                }
+            }
+        },
+        // transition to be applied when the model is auto-updating
+        Transition {
+            from: "idle"
+            to: "refreshing"
+            UbuntuNumberAnimation {
+                target: control.target
+                property: "contentY"
+                from: -style.flickableTopMargin
+                to: -style.flickableTopMargin - control.height
+            }
+        },
+        Transition {
+            from: "refreshing"
+            to: "idle"
+            UbuntuNumberAnimation {
+                target: control.target
+                property: "topMargin"
+            }
+        }
+    ]
+}
+

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/ScrollbarStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/ScrollbarStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/ScrollbarStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,490 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+/*
+  The visuals handle both active and passive modes. This behavior is driven yet by
+  the styledItem's __inactive property, however should be detected upon runtime based on
+  the device type.
+  On active scrollbars, positioning is handled so that the logic updates the flickable's
+  X/Y content positions, which is then synched with the contentPosition by the main
+  element.
+
+  Style properties used:
+    - interactive: bool - drives the interactive behavior of the scrollbar
+    - minimumSliderSize: real - specifies the minimum size of the slider
+    * overlay
+        - overlay: bool - true if the scrollbar is overlay type
+        - overlayOpacityWhenHidden: opacity when hidden
+        - overlayOpacityWhenShown: opacity when shown
+    * animations - where duration and easing properties are used only
+        - scrollbarFadeInAnimation: PropertyAnimation - animation used when fade in
+        - scrollbarFadeOutAnimation: PropertyAnimation - animation used when fade out
+        - scrollbarFadeOutPause: int - miliseconds to pause before fade out
+    * behaviors - animations are used as declared
+        - sliderAnimation: PropertyAnimation - animation for the slider size
+        - thumbConnectorFading: PropertyAnimation - animation for the thumb connector
+        - thumbFading: PropertyAnimation - animation for the thumb fading
+    * other styling properties
+        - color sliderColor: color for the slider
+        - color thumbConnectorColor: thumb connector color
+        - url forwardThumbReleased: forward thumb image when released
+        - url forwardThumbPressed: forward thumb image when pressed
+        - url backwardThumbReleased: backward thumb image when released
+        - url backwardThumbPressed: backward thumb image when pressed
+        - real scrollAreaThickness: scrollbar area thickness, the area where the
+                                    slider, thumb and thumb-connector appear
+        - real thumbConnectorMargin: margin of the thumb connector aligned to the
+                                    thumb visuals
+  */
+
+Item {
+    id: visuals
+    // styling properties
+    property bool interactive: false
+    property real minimumSliderSize: units.gu(2)
+
+    property bool overlay: !interactive
+    property real overlayOpacityWhenShown: 0.6
+    property real overlayOpacityWhenHidden: 0.0
+
+    property PropertyAnimation scrollbarFadeInAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
+    property PropertyAnimation scrollbarFadeOutAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
+    property int scrollbarFadeOutPause: 300
+    property PropertyAnimation sliderAnimation: UbuntuNumberAnimation {}
+    property PropertyAnimation thumbConnectorFading: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
+    property PropertyAnimation thumbFading: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
+
+    property color sliderColor: Theme.palette.normal.base
+    property real sliderRadius: units.gu(0.5)
+    property color thumbConnectorColor: "white"
+    property url forwardThumbReleased: (styledItem.align === Qt.AlignLeading || styledItem.align === Qt.AlignTrailing) ? Qt.resolvedUrl("../artwork/ScrollbarBottomIdle.png") : Qt.resolvedUrl("../artwork/ScrollbarRightIdle.png")
+    property url forwardThumbPressed: (styledItem.align === Qt.AlignLeading || styledItem.align === Qt.AlignTrailing) ? Qt.resolvedUrl("../artwork/ScrollbarBottomPressed.png") : Qt.resolvedUrl("../artwork/ScrollbarRightPressed.png")
+    property url backwardThumbReleased: (styledItem.align === Qt.AlignLeading || styledItem.align === Qt.AlignTrailing) ? Qt.resolvedUrl("../artwork/ScrollbarTopIdle.png") : Qt.resolvedUrl("../artwork/ScrollbarLeftIdle.png")
+    property url backwardThumbPressed: (styledItem.align === Qt.AlignLeading || styledItem.align === Qt.AlignTrailing) ? Qt.resolvedUrl("../artwork/ScrollbarTopPressed.png") : Qt.resolvedUrl("../artwork/ScrollbarLeftPressed.png")
+
+    property real scrollAreaThickness: units.gu(0.5)
+    property real thumbConnectorMargin: units.dp(3)
+
+    // helper properties to ease code readability
+    property Flickable flickableItem: styledItem.flickableItem
+    property bool isScrollable: styledItem.__private.scrollable && pageSize > 0.0
+                                && contentSize > 0.0 && contentSize > pageSize
+    property bool isVertical: ScrollbarUtils.isVertical(styledItem)
+    property bool frontAligned: (styledItem.align === Qt.AlignLeading)
+    property bool rearAligned: (styledItem.align === Qt.AlignTrailing)
+    property bool topAligned: (styledItem.align === Qt.AlignTop)
+    property bool bottomAligned: (styledItem.align === Qt.AlignBottom)
+
+    property real pageSize: (isVertical) ? styledItem.height : styledItem.width
+    property real contentSize: (isVertical) ? styledItem.flickableItem.contentHeight : styledItem.flickableItem.contentWidth
+
+    /*****************************************
+      Visuals
+     *****************************************/
+    anchors.fill: parent
+
+    opacity: overlayOpacityWhenHidden
+    state: {
+        if (!isScrollable)
+            return '';
+        else if (overlay) {
+            if (flickableItem.moving)
+                return 'overlay';
+            else
+                return 'stopped';
+        } else
+            return 'shown';
+    }
+
+    states: [
+        State {
+            name: 'stopped'
+            extend: ''
+            PropertyChanges {
+                target: visuals
+                opacity: overlayOpacityWhenHidden
+            }
+        },
+        State {
+            name: "shown"
+            PropertyChanges {
+                target: visuals
+                opacity: overlayOpacityWhenShown
+            }
+        },
+        State {
+            name: 'overlay'
+            PropertyChanges {
+                target: visuals
+                opacity: overlayOpacityWhenShown
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: ''
+            to: 'shown'
+            NumberAnimation {
+                target: visuals
+                property: "opacity"
+                duration: scrollbarFadeInAnimation.duration
+                easing: scrollbarFadeInAnimation.easing
+            }
+        },
+        Transition {
+            from: '*'
+            to: 'overlay'
+            NumberAnimation {
+                target: visuals
+                property: "opacity"
+                duration: scrollbarFadeInAnimation.duration
+                easing: scrollbarFadeInAnimation.easing
+            }
+        },
+        Transition {
+            from: "overlay"
+            to: "stopped"
+            SequentialAnimation {
+                PauseAnimation { duration: scrollbarFadeOutPause }
+                NumberAnimation {
+                    target: visuals
+                    property: "opacity"
+                    duration: scrollbarFadeOutAnimation.duration
+                    easing: scrollbarFadeOutAnimation.easing
+                }
+            }
+        }
+    ]
+
+    function mapToPoint(map)
+    {
+        return Qt.point(map.x, map.y)
+    }
+
+    SmoothedAnimation {
+        id: scrollAnimation
+
+        duration: 200
+        easing.type: Easing.InOutQuad
+        target: styledItem.flickableItem
+        property: (isVertical) ? "contentY" : "contentX"
+    }
+
+    // represents the visible area of the scrollbar where slider and thumb connector are placed
+    Item {
+        id: scrollbarArea
+
+        property real thickness: scrollAreaThickness
+        property real proximityThickness: (isVertical) ? styledItem.width - thickness : styledItem.height - thickness
+        anchors {
+            fill: parent
+            leftMargin: (!isVertical || frontAligned) ? 0 : proximityThickness
+            rightMargin: (!isVertical || rearAligned) ? 0 : proximityThickness
+            topMargin: (isVertical || topAligned) ? 0 : proximityThickness
+            bottomMargin: (isVertical || bottomAligned) ? 0 : proximityThickness
+        }
+    }
+    // The thumb appears whenever the mouse gets close enough to the scrollbar
+    // and disappears after being for a long enough time far enough of it
+    MouseArea {
+        id: proximityArea
+
+        anchors {
+            fill: parent
+            leftMargin: (!isVertical)  ? 0 : (frontAligned ? scrollbarArea.thickness : 0)
+            rightMargin: (!isVertical) ? 0 : (rearAligned ? scrollbarArea.thickness : 0)
+            topMargin: (isVertical) ? 0 : (topAligned ? scrollbarArea.thickness : 0)
+            bottomMargin: (isVertical) ? 0 : (bottomAligned ? scrollbarArea.thickness : 0)
+        }
+        propagateComposedEvents: true
+        enabled: isScrollable && interactive
+        hoverEnabled: true
+        onEntered: thumb.show();
+
+        onPressed: mouse.accepted = false
+        onClicked: mouse.accepted = false
+        onReleased: mouse.accepted = false
+    }
+
+    // The presence of a mouse enables the interactive thumb
+    // FIXME: Should use form factor hints
+    InverseMouse.onEntered: interactive = true
+
+    // The slider's position represents which part of the flickable is visible.
+    // The slider's size represents the size the visible part relative to the
+    // total size of the flickable.
+    Item {
+        id: scrollCursor
+        x: (isVertical) ? 0 : ScrollbarUtils.sliderPos(styledItem, 0.0, styledItem.width - scrollCursor.width)
+        y: (!isVertical) ? 0 : ScrollbarUtils.sliderPos(styledItem, 0.0, styledItem.height - scrollCursor.height)
+        width: (isVertical) ? scrollbarArea.thickness : ScrollbarUtils.sliderSize(styledItem, 0.0, flickableItem.width)
+        height: (!isVertical) ? scrollbarArea.thickness : ScrollbarUtils.sliderSize(styledItem, 0.0, flickableItem.height)
+
+        function drag() {
+            ScrollbarUtils.dragAndClamp(styledItem, scrollCursor, contentSize, pageSize);
+        }
+    }
+
+    Rectangle {
+        id: slider
+
+        color: visuals.sliderColor
+
+        anchors {
+            left: (isVertical) ? scrollbarArea.left : undefined
+            right: (isVertical) ? scrollbarArea.right : undefined
+            top: (!isVertical) ? scrollbarArea.top : undefined
+            bottom: (!isVertical) ? scrollbarArea.bottom : undefined
+        }
+
+        x: (isVertical) ? 0 : ScrollbarUtils.sliderPos(styledItem, 0.0, styledItem.width - slider.width)
+        y: (!isVertical) ? 0 : ScrollbarUtils.sliderPos(styledItem, 0.0, styledItem.height - slider.height)
+        width: (isVertical) ? scrollbarArea.thickness : ScrollbarUtils.sliderSize(styledItem, minimumSliderSize, flickableItem.width)
+        height: (!isVertical) ? scrollbarArea.thickness : ScrollbarUtils.sliderSize(styledItem, minimumSliderSize, flickableItem.height)
+        radius: visuals.sliderRadius
+
+        Behavior on width {
+            enabled: (!isVertical)
+            NumberAnimation {
+                duration: visuals.sliderAnimation.duration
+                easing: visuals.sliderAnimation.easing
+            }
+        }
+        Behavior on height {
+            enabled: (isVertical)
+            NumberAnimation {
+                duration: visuals.sliderAnimation.duration
+                easing: visuals.sliderAnimation.easing
+            }
+        }
+
+        function scroll(amount) {
+            scrollAnimation.to = ScrollbarUtils.scrollAndClamp(styledItem, amount, 0.0, contentSize - pageSize);
+            scrollAnimation.restart();
+        }
+    }
+
+    // The sliderThumbConnector ensures a visual connection between the slider and the thumb
+    Rectangle {
+        id: sliderThumbConnector
+
+        property real thumbConnectorMargin: visuals.thumbConnectorMargin
+        property bool isThumbAboveSlider: (isVertical) ? thumb.y < slider.y : thumb.x < slider.x
+        anchors {
+            left: (isVertical) ? scrollbarArea.left : (isThumbAboveSlider ? thumb.left : slider.right)
+            right: (isVertical) ? scrollbarArea.right : (isThumbAboveSlider ? slider.left : thumb.right)
+            top: (!isVertical) ? scrollbarArea.top : (isThumbAboveSlider ? thumb.top : slider.bottom)
+            bottom: (!isVertical) ? scrollbarArea.bottom : (isThumbAboveSlider ? slider.top : thumb.bottom)
+
+            leftMargin : (isVertical) ? 0 : (isThumbAboveSlider ? thumbConnectorMargin : 0)
+            rightMargin : (isVertical) ? 0 : (isThumbAboveSlider ? 0 : thumbConnectorMargin)
+            topMargin : (!isVertical) ? 0 : (isThumbAboveSlider ? thumbConnectorMargin : 0)
+            bottomMargin : (!isVertical) ? 0 : (isThumbAboveSlider ? 0 : thumbConnectorMargin)
+        }
+        color: visuals.thumbConnectorColor
+        opacity: thumb.shown ? 1.0 : 0.0
+        Behavior on opacity {
+            NumberAnimation {
+                duration: visuals.thumbConnectorFading.duration
+                easing: visuals.thumbConnectorFading.easing
+            }
+        }
+    }
+
+    MouseArea {
+        id: thumbArea
+
+        property point thumbPoint: mapToPoint(thumb.mapFromItem(thumbArea, mouseX, mouseY))
+        property point thumbTopPoint: mapToPoint(thumbTop.mapFromItem(thumb, thumbPoint.x, thumbPoint.y))
+        property point thumbBottomPoint: mapToPoint(thumbBottom.mapFromItem(thumb, thumbPoint.x, thumbPoint.y))
+        property bool inThumbTop: thumbTop.contains(thumbTopPoint)
+        property bool inThumbBottom: thumbBottom.contains(thumbBottomPoint)
+
+        anchors {
+            fill: scrollbarArea
+            // set margins adding 2 dp for error area
+            leftMargin: (!isVertical || frontAligned) ? 0 : units.dp(-2) - thumb.width
+            rightMargin: (!isVertical || rearAligned) ? 0 : units.dp(-2) - thumb.width
+            topMargin: (isVertical || topAligned) ?  0 : units.dp(-2) - thumb.height
+            bottomMargin: (isVertical || bottomAligned) ?  0 : units.dp(-2) - thumb.height
+        }
+        enabled: isScrollable && interactive
+        hoverEnabled: true
+        onEntered: thumb.show()
+        onPressed: {
+            if (isVertical) {
+                if (mouseY < thumb.y) {
+                    thumb.placeThumbForeUnderMouse(mouse)
+                } else if (mouseY > (thumb.y + thumb.height)) {
+                    thumb.placeThumbRearUnderMouse(mouse)
+                }
+            } else {
+                if (mouseX < thumb.x) {
+                    thumb.placeThumbForeUnderMouse(mouse)
+                } else if (mouseX > (thumb.x + thumb.width)) {
+                    thumb.placeThumbRearUnderMouse(mouse)
+                }
+            }
+        }
+        onClicked: {
+            if (inThumbBottom)
+                slider.scroll(pageSize)
+            else if (inThumbTop)
+                slider.scroll(-pageSize)
+        }
+
+        // Dragging behaviour
+        function resetDrag() {
+            thumbYStart = thumb.y
+            thumbXStart = thumb.x
+            dragYStart = drag.target.y
+            dragXStart = drag.target.x
+        }
+
+        property int thumbYStart
+        property int dragYStart
+        property int dragYAmount: thumbArea.drag.target.y - thumbArea.dragYStart
+        property int thumbXStart
+        property int dragXStart
+        property int dragXAmount: thumbArea.drag.target.x - thumbArea.dragXStart
+        drag {
+            target: scrollCursor
+            axis: (isVertical) ? Drag.YAxis : Drag.XAxis
+            minimumY: 0
+            maximumY: flickableItem.height - scrollCursor.height
+            minimumX: 0
+            maximumX: flickableItem.width - scrollCursor.width
+            onActiveChanged: {
+                if (drag.active) resetDrag()
+            }
+        }
+        // update thumb position
+        onDragYAmountChanged: {
+            if (drag.active) {
+                thumb.y = MathUtils.clamp(thumbArea.thumbYStart + thumbArea.dragYAmount, 0, thumb.maximumPos);
+            }
+        }
+        onDragXAmountChanged: {
+            if (drag.active) {
+                thumb.x = MathUtils.clamp(thumbArea.thumbXStart + thumbArea.dragXAmount, 0, thumb.maximumPos);
+            }
+        }
+
+        // drag slider and content to the proper position
+        onPositionChanged: {
+            if (pressedButtons == Qt.LeftButton) {
+                scrollCursor.drag()
+            }
+        }
+    }
+
+    Timer {
+        id: autohideTimer
+
+        interval: 1000
+        repeat: true
+        onTriggered: if (!proximityArea.containsMouse && !thumbArea.containsMouse && !thumbArea.pressed) thumb.hide()
+    }
+
+    Item {
+        id: thumb
+        objectName: "interactiveScrollbarThumb"
+
+        enabled: interactive
+
+        anchors {
+            left: frontAligned ? slider.left : undefined
+            right: rearAligned ? slider.right : undefined
+            top: topAligned ? slider.top : undefined
+            bottom: bottomAligned ? slider.bottom : undefined
+        }
+
+        width: childrenRect.width
+        height: childrenRect.height
+
+        property bool shown
+        property int maximumPos: (isVertical) ? styledItem.height - thumb.height : styledItem.width - thumb.width
+
+        /* Show the thumb as close as possible to the mouse pointer */
+        onShownChanged: {
+            if (shown) {
+                if (isVertical) {
+                    var mouseY = proximityArea.containsMouse ? proximityArea.mouseY : thumbArea.mouseY;
+                    y = MathUtils.clamp(mouseY - thumb.height / 2, 0, thumb.maximumPos);
+                } else {
+                    var mouseX = proximityArea.containsMouse ? proximityArea.mouseX : thumbArea.mouseX;
+                    x = MathUtils.clamp(mouseX - thumb.width / 2, 0, thumb.maximumPos);
+                }
+            }
+        }
+
+        function show() {
+            autohideTimer.restart();
+            shown = true;
+        }
+
+        function hide() {
+            autohideTimer.stop();
+            shown = false;
+        }
+
+        function placeThumbForeUnderMouse(mouse) {
+            var diff = (isVertical) ? mouse.y - height / 4 : mouse.x - width / 4;
+            positionAnimation.to = MathUtils.clamp(diff, 0, maximumPos);
+            positionAnimation.restart();
+        }
+
+        function placeThumbRearUnderMouse(mouse) {
+            var diff = (isVertical) ? mouse.y - height * 3 / 4 : mouse.x - width * 3 / 4;
+            positionAnimation.to = MathUtils.clamp(diff, 0, maximumPos);
+            positionAnimation.restart();
+        }
+
+        NumberAnimation {
+            id: positionAnimation
+
+            duration: 100
+            easing.type: Easing.InOutQuad
+            target: thumb
+            property: (isVertical) ? "y" : "x"
+        }
+
+        opacity: shown ? (thumbArea.containsMouse || thumbArea.drag.active ? 1.0 : 0.5) : 0.0
+        Behavior on opacity {
+            NumberAnimation {
+                duration: visuals.thumbFading.duration
+                easing: visuals.thumbFading.easing
+            }
+        }
+
+        Flow {
+            // disable mirroring as thumbs are placed in the same way no matter of RTL or LTR
+            LayoutMirroring.enabled: false
+            flow: (isVertical) ? Flow.TopToBottom : Flow.LeftToRight
+            Image {
+                id: thumbTop
+                source: thumbArea.inThumbTop && thumbArea.pressed ? visuals.backwardThumbPressed : visuals.backwardThumbReleased
+            }
+            Image {
+                id: thumbBottom
+                source: thumbArea.inThumbBottom && thumbArea.pressed ? visuals.forwardThumbPressed : visuals.forwardThumbReleased
+            }
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/SheetForegroundStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/SheetForegroundStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/SheetForegroundStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+Item {
+    id: visuals
+    // styling properties
+    property color backgroundColor: "lightgray"
+    property color headerColor: "darkgray"
+    property real headerHeight: units.gu(8)
+    property real buttonContainerWidth: units.gu(14)
+
+    implicitWidth: MathUtils.clamp(styledItem.contentsWidth, styledItem.minWidth, styledItem.maxWidth)
+    implicitHeight: header.height + containerItem.height
+
+    property alias contentItem: containerItem
+
+    Rectangle {
+        id: header
+        color: visuals.headerColor
+        height: visuals.headerHeight
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+
+        Label {
+            id: headerText
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: leftButtonContainer.right
+                right: rightButtonContainer.left
+            }
+            width: headerText.implicitWidth + units.gu(4)
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            text: styledItem.title
+        }
+
+        Item {
+            id: leftButtonContainer
+            anchors {
+                left: parent.left
+                top: parent.top
+                bottom: parent.bottom
+            }
+            width: styledItem.leftButton ? visuals.buttonContainerWidth : 0
+            Component.onCompleted: header.updateButton(styledItem.leftButton, leftButtonContainer)
+        }
+
+        Item {
+            id: rightButtonContainer
+            anchors {
+                right: parent.right
+                top: parent.top
+                bottom: parent.bottom
+            }
+            width: styledItem.rightButton ? visuals.buttonContainerWidth : 0
+            Component.onCompleted: header.updateButton(styledItem.rightButton, rightButtonContainer)
+        }
+
+        function updateButton(button, container) {
+            if (!button) return;
+            button.parent = container;
+            button.anchors.left = container.left;
+            button.anchors.right = container.right;
+            button.anchors.verticalCenter = container.verticalCenter;
+            button.anchors.margins = units.gu(1);
+        }
+
+        Connections {
+            target: styledItem
+            onLeftButtonChanged: header.updateButton(styledItem.leftButton, leftButtonContainer)
+            onRightButtonChanged: header.updateButton(styledItem.rightButton, rightButtonContainer)
+        }
+    }
+
+    Rectangle {
+        id: containerItem
+        color: visuals.backgroundColor
+        height: MathUtils.clamp(styledItem.contentsHeight, styledItem.minHeight - header.height, styledItem.maxHeight - header.height)
+        anchors {
+            top: header.bottom
+            left: parent.left
+            right: parent.right
+        }
+    }
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.2/SliderStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.2/SliderStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.2/SliderStyle.qml	2015-04-25 07:11:10 +0000
@@ -0,0 +1,123 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.2
+
+/*
+  The default slider style consists of a bar and a thumb shape.
+
+  This style is themed using the following properties:
+  - thumbSpacing: spacing between the thumb and the bar
+*/
+Item {
+    id: sliderStyle
+
+    property color foregroundColor: UbuntuColors.orange
+    property color backgroundColor: Theme.palette.normal.base
+
+    property real thumbSpacing: units.gu(0)
+    property Item bar: background
+    property Item thumb: thumb
+
+    implicitWidth: units.gu(38)
+    implicitHeight: units.gu(5)
+
+    UbuntuShapeOverlay {
+        id: background
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            left: parent.left
+        }
+        height: units.dp(4)
+        backgroundColor: sliderStyle.backgroundColor
+        overlayColor: sliderStyle.foregroundColor
+        overlayRect: Qt.application.layoutDirection == Qt.LeftToRight ?
+            Qt.rect(0.0, 0.0, thumb.x / thumb.barMinusThumbWidth, 1.0) :
+            Qt.rect(1.0 - (thumb.x / thumb.barMinusThumbWidth), 0.0, 1.0, 1.0)
+    }
+
+    UbuntuShape {
+        id: thumb
+
+        anchors {
+            verticalCenter: parent.verticalCenter
+            topMargin: thumbSpacing
+            bottomMargin: thumbSpacing
+        }
+
+        property real barMinusThumbWidth: background.width - (thumb.width + 2.0*thumbSpacing)
+        property real position: thumbSpacing + SliderUtils.normalizedValue(styledItem) * barMinusThumbWidth
+        property bool pressed: SliderUtils.isPressed(styledItem)
+        property bool positionReached: x == position
+        x: position
+
+        /* Enable the animation on x when pressing the slider.
+           Disable it when x has reached the target position.
+        */
+        onPressedChanged: if (pressed) xBehavior.enabled = true;
+        onPositionReachedChanged: if (positionReached) xBehavior.enabled = false;
+
+        Behavior on x {
+            id: xBehavior
+            SmoothedAnimation {
+                duration: UbuntuAnimation.FastDuration
+            }
+        }
+        width: units.gu(2)
+        height: units.gu(2)
+        opacity: 0.97
+        color: Theme.palette.normal.overlay
+    }
+
+    BubbleShape {
+        id: bubbleShape
+
+        property real minimumWidth: units.gu(8)
+        property real horizontalPadding: units.gu(1)
+
+        width: Math.max(minimumWidth, label.implicitWidth + 2*horizontalPadding)
+        height: units.gu(6)
+
+        // FIXME: very temporary implementation
+        property real minX: 0.0
+        property real maxX: background.width - width
+        property real pointerSize: units.dp(6)
+        property real targetMargin: units.gu(1)
+        property point globalTarget: Qt.point(thumb.x + thumb.width / 2.0, thumb.y - targetMargin)
+
+        x: MathUtils.clamp(globalTarget.x - width / 2.0, minX, maxX)
+        y: globalTarget.y - height - pointerSize
+        target: Qt.point(globalTarget.x - x, globalTarget.y - y)
+
+        property bool pressed: SliderUtils.isPressed(styledItem)
+        property bool shouldShow: pressed && label.text != ""