Merge lp:~tpeeters/ubuntu-ui-toolkit/littleSwitch into lp:ubuntu-ui-toolkit/staging

[Tim Peeters]

Various tweaks to SwitchStyle:
- Scaling of icons when changing the size of the Switch
- Smaller default Switch size
- Use icons from theme
- Make check/uncheck animation faster
- Prevent animations on width change (during initialization)
- Expose SwitchStyle in Themes.Ambience
- Add all visualization parameters as properties to SwitchStyle.

[lp:~tpeeters/ubuntu-ui-toolkit/littleSwitch]

1331. By Tim Peeters on 2014-11-06

optimize iconSize computation

[Tim Peeters (tpeeters)]

old switch: https://www.dropbox.com/s/shcqnvrt4qm287q/Screenshot%202014-11-06%2022.07.40.png?dl=0
new switch: https://www.dropbox.com/s/n5llhd5qj4o4nzn/Screenshot%202014-11-06%2022.06.21.png?dl=0

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1330
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1204/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/6503
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/1037
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/1036
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/1036/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/1036
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/6085
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/7755
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/7755/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/15523

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

review: Approve (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1331
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1205/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/6504
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/1038
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/1037
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/1037/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/1037
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/6086
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/7756
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/7756/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/15527

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

review: Needs Fixing (continuous-integration)

[Cris Dywan (kalikiana)]

52 + property color uncheckedThumbColor: Qt.rgba(0, 0, 0, 0.2)

Please don't do this. See bug 1389991 for why.

review: Needs Fixing

[Tim Peeters (tpeeters)]

It is the same color that we have now (and had for ages):

151 - color: styledItem.checked ? UbuntuColors.green
152 - : Qt.rgba(0, 0, 0, 0.2)

It is not the background color, but the unchecked thumb color, which goes on top of the background color, which is not transparent:

42 + property color backgroundColor: Theme.palette.normal.base

[Cris Dywan (kalikiana)]

Also, is the looks expected to be the same or different? Right now it's visibly changed.

[Tim Peeters (tpeeters)]

> Also, is the looks expected to be the same or different? Right now it's
> visibly changed.

See the linked bugs. The new switch must be smaller, the icons are updated, and the animation speed is faster.

[Tim Peeters (tpeeters)]

> > Also, is the looks expected to be the same or different? Right now it's
> > visibly changed.
>
> See the linked bugs. The new switch must be smaller, the icons are updated,
> and the animation speed is faster.

Also see the commit message :)

[Cris Dywan (kalikiana)]

Thanks for the clarifications. Looks very sweet!

review: Approve

[PS Jenkins bot (ps-jenkins)]

review: Approve (continuous-integration)

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml	2014-07-21 11:44:25 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml	2014-11-06 21:04:28 +0000
@@ -20,37 +20,124 @@
 Item {
     id: switchStyle
 
-    property real thumbPadding: units.gu(0.5)
-
-    /* FIXME: setting the width and height is required because in the case no width
-       is set on the Switch, then even though the width is set eventually to
-       implicitWidth, it still goes through the value 0.0 which triggers an
-       undesired animation if the Switch is checked.
-
-       Example, values of width at instantiation:
-         width = 0.0 (before SwitchStyle is loaded)
-         width = implicitWidth (after SwitchStyle is loaded)
-    */
-    width: implicitWidth
-    height: implicitHeight
-    implicitWidth: units.gu(8)
-    implicitHeight: units.gu(4)
+    /*!
+      The padding between the thumb and the outside border of the switch.
+     */
+    property real thumbPadding: units.gu(0.33)
+
+    /*!
+      The padding between the icon and the border of the thumb.
+     */
+    property real iconPadding: thumbPadding
+
+    implicitWidth: units.gu(6)
+    implicitHeight: units.gu(3)
     opacity: styledItem.enabled ? 1.0 : 0.5
     LayoutMirroring.enabled: false
     LayoutMirroring.childrenInherit: true
 
+    /*!
+      The background color of the switch.
+     */
+    property color backgroundColor: Theme.palette.normal.base
+
+    /*!
+      The background color of the thumb when the switch is checked.
+     */
+    property color checkedThumbColor: UbuntuColors.green
+
+    /*!
+      The background color of the thumb when the switch is not checked.
+     */
+    property color uncheckedThumbColor: Qt.rgba(0, 0, 0, 0.2)
+
+    /*!
+      The foreground color of the icon that is currently selected.
+     */
+    property color selectedIconColor: Theme.palette.normal.foregroundText
+
+   /*!
+     The color of the icon that is not currently selected.
+    */
+    property color unselectedIconColor: Theme.palette.normal.backgroundText
+
+    /*!
+      The source of the selected icon when the switch is checked.
+     */
+    property url checkedIconSource: "image://theme/tick"
+
+    /*!
+      The source of the selected icon when the switch is not checked.
+     */
+    property url uncheckedIconSource: "image://theme/close"
+
     UbuntuShape {
         id: background
         anchors.fill: parent
-        color: Theme.palette.normal.base
+        color: switchStyle.backgroundColor
         clip: true
 
         UbuntuShape {
             id: thumb
+            states: [
+                State {
+                    name: "checked"
+                    when: styledItem.checked
+                    PropertyChanges {
+                        target: thumb
+                        x: rightThumbPosition.x
+                        color: switchStyle.checkedThumbColor
+                    }
+                },
+                State {
+                    name: "unchecked"
+                    when: !styledItem.checked
+                    PropertyChanges {
+                        target: thumb
+                        x: leftThumbPosition.x
+                        color: switchStyle.uncheckedThumbColor
+                    }
+                }
+            ]
+
+            transitions: [
+                // Avoid animations on width changes (during initialization)
+                // by explicitly setting from and to for the Transitions.
+                Transition {
+                    from: "unchecked"
+                    to: "checked"
+                    UbuntuNumberAnimation {
+                        target: thumb
+                        properties: "x"
+                        duration: UbuntuAnimation.FastDuration
+                        easing: UbuntuAnimation.StandardEasing
+                    }
+                    ColorAnimation {
+                        target: thumb
+                        properties: "color"
+                        duration: UbuntuAnimation.FastDuration
+                        easing: UbuntuAnimation.StandardEasing
+                    }
+                },
+                Transition {
+                    from: "checked"
+                    to: "unchecked"
+                    UbuntuNumberAnimation {
+                        target: thumb
+                        properties: "x"
+                        duration: UbuntuAnimation.FastDuration
+                        easing: UbuntuAnimation.StandardEasing
+                    }
+                    ColorAnimation {
+                        target: thumb
+                        properties: "color"
+                        duration: UbuntuAnimation.FastDuration
+                        easing: UbuntuAnimation.StandardEasing
+                    }
+                }
+            ]
 
             width: (background.width - switchStyle.thumbPadding * 3.0) / 2.0
-            x: styledItem.checked ? rightThumbPosition.x : leftThumbPosition.x
-
             anchors {
                 top: parent.top
                 bottom: parent.bottom
@@ -58,31 +145,21 @@
                 bottomMargin: switchStyle.thumbPadding
             }
 
-            color: styledItem.checked ? UbuntuColors.green
-                                      : Qt.rgba(0, 0, 0, 0.2)
-
-            Behavior on x {
-                UbuntuNumberAnimation {
-                    duration: UbuntuAnimation.BriskDuration
-                    easing: UbuntuAnimation.StandardEasing
-                }
-            }
-            Behavior on color {
-                ColorAnimation {
-                    duration: UbuntuAnimation.BriskDuration
-                    easing: UbuntuAnimation.StandardEasing
-                }
-            }
+            property real iconSize: Math.min(width, height) - 2*switchStyle.iconPadding
 
             PartialColorize {
                 anchors {
                     verticalCenter: parent.verticalCenter
                     right: parent.left
-                    rightMargin: switchStyle.thumbPadding * 3.0
+                    rightMargin: switchStyle.iconPadding + switchStyle.thumbPadding
                 }
-                rightColor: Theme.palette.normal.backgroundText
+                rightColor: switchStyle.unselectedIconColor
                 source: Image {
-                    source: "artwork/cross.png"
+                    source: switchStyle.uncheckedIconSource
+                    sourceSize {
+                        width: thumb.iconSize
+                        height: thumb.iconSize
+                    }
                 }
             }
 
@@ -90,11 +167,15 @@
                 anchors {
                     verticalCenter: parent.verticalCenter
                     left: parent.right
-                    leftMargin: switchStyle.thumbPadding * 2.0
+                    leftMargin: switchStyle.iconPadding + switchStyle.thumbPadding
                 }
-                rightColor: Theme.palette.normal.backgroundText
+                rightColor: switchStyle.unselectedIconColor
                 source: Image {
-                    source: "artwork/tick.png"
+                    source: switchStyle.checkedIconSource
+                    sourceSize {
+                        width: thumb.iconSize
+                        height: thumb.iconSize
+                    }
                 }
             }
         }
@@ -113,11 +194,15 @@
             PartialColorize {
                 anchors.centerIn: parent
                 source: Image {
-                    source: "artwork/cross.png"
+                    source: switchStyle.uncheckedIconSource
+                    sourceSize {
+                        width: thumb.iconSize
+                        height: thumb.iconSize
+                    }
                 }
                 progress: MathUtils.clamp((thumb.x - parent.x - x) / width, 0.0, 1.0)
                 leftColor: "transparent"
-                rightColor: Theme.palette.normal.foregroundText
+                rightColor: switchStyle.selectedIconColor
             }
         }
 
@@ -135,10 +220,14 @@
             PartialColorize {
                 anchors.centerIn: parent
                 source: Image {
-                    source: "artwork/tick.png"
+                    source: switchStyle.checkedIconSource
+                    sourceSize {
+                        width: thumb.iconSize
+                        height: thumb.iconSize
+                    }
                 }
                 progress: MathUtils.clamp((thumb.x + thumb.width - parent.x - x) / width, 0.0, 1.0)
-                leftColor: Theme.palette.normal.foregroundText
+                leftColor: switchStyle.selectedIconColor
                 rightColor: "transparent"
             }
         }

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/qmldir'
--- modules/Ubuntu/Components/Themes/Ambiance/qmldir	2014-10-24 13:13:11 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/qmldir	2014-11-06 21:04:28 +0000
@@ -13,7 +13,6 @@
 internal SelectionCursorStyle SelectionCursorStyle.qml
 internal SheetForegroundStyle SheetForegroundStyle.qml
 internal SliderStyle SliderStyle.qml
-internal SwitchStyle SwitchStyle.qml
 TabBarStyle 0.1 TabBarStyle.qml
 TextAreaStyle 0.1 TextAreaStyle.qml
 internal TextCursorStyle TextCursorStyle.qml
@@ -47,6 +46,7 @@
 PullToRefreshStyle 1.1 PullToRefreshStyle.qml
 PageHeadStyle 1.1 PageHeadStyle.qml
 Palette 1.1 Palette.qml
+SwitchStyle 1.1 SwitchStyle.qml
 
 internal TextSelectionStartCursorStyle TextSelectionStartCursorStyle.qml
 internal TextSelectionEndCursorStyle TextSelectionEndCursorStyle.qml