Merge lp:~zsombi/ubuntu-ui-toolkit/bottomedgehint into lp:ubuntu-ui-toolkit/staging

[Zsombor Egri]

Follow the new design in BottomEdgeHint.

[Zsombor Egri (zsombi)]

This is a prerequisite work for the BottomEdge component.

[lp:~zsombi/ubuntu-ui-toolkit/bottomedgehint]

1704. By Zsombor Egri on 2015-10-23

do not react on mouse hover while faded

1705. By Zsombor Egri on 2015-10-23

rogue print removed

1706. By Zsombor Egri on 2015-10-23

reset idle timer when entered back within the timeout period

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1703
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2413/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/1141
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1143
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1143/artifact/work/output/*zip*/output.zip
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/1140

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

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1706
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2414/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/1142
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1144
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1144/artifact/work/output/*zip*/output.zip
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/1141

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

review: Needs Fixing (continuous-integration)

[lp:~zsombi/ubuntu-ui-toolkit/bottomedgehint]

1707. By Zsombor Egri on 2015-10-23

adding Locked state and adjust tests

1708. By Zsombor Egri on 2015-10-23

doc fix

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1707
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2415/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/1143
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1145
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1145/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/1142

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

review: Approve (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1708
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2416/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/1144
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1146
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/1146/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/1143

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

review: Approve (continuous-integration)

[Tim Peeters (tpeeters)]

Mostly fine, but I don't like the names of the states. See inline comments below.

[Zsombor Egri (zsombi)]

Replied.

[Tim Peeters (tpeeters)]

Ok let's go for {Idle, Hidden, Active, Locked} for the states.

[lp:~zsombi/ubuntu-ui-toolkit/bottomedgehint]

1709. By Zsombor Egri on 2015-10-23

states renamed

[Tim Peeters (tpeeters)]

Good stuff, thanks. Happroving!

review: Approve

=== modified file 'components.api'
--- components.api	2015-10-22 13:25:33 +0000
+++ components.api	2015-10-23 16:37:58 +0000
@@ -175,7 +175,8 @@
     property var icon
     property bool iconFrame
     property bool progression
-Ubuntu.Components.BottomEdgeHint 1.3: Item
+Ubuntu.Components.BottomEdgeHint 1.3: StyledItem
+    property Flickable flickable
     property string iconName
     property url iconSource
     signal clicked()

=== renamed file 'examples/ubuntu-ui-toolkit-gallery/BottomEdgeHint.qml' => 'examples/ubuntu-ui-toolkit-gallery/BottomEdgePage.qml'
--- examples/ubuntu-ui-toolkit-gallery/BottomEdgeHint.qml	2015-08-11 14:14:50 +0000
+++ examples/ubuntu-ui-toolkit-gallery/BottomEdgePage.qml	2015-10-23 16:37:58 +0000
@@ -33,6 +33,6 @@
     BottomEdgeHint {
         iconName: "stock_message"
         text: "Compose a new message"
-        onClicked: state = "Hidden"
+        onClicked: state = "Idle"
     }
 }

=== modified file 'examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml'
--- examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml	2015-09-25 17:05:53 +0000
+++ examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml	2015-10-23 16:37:58 +0000
@@ -103,8 +103,8 @@
     }
     ListElement {
         objectName: "bottomEdgeHintElement"
-        label: "Bottom Edge Hint"
-        source: "BottomEdgeHint.qml"
+        label: "Bottom Edge"
+        source: "BottomEdgePage.qml"
     }
 
     ListElement {

=== modified file 'src/Ubuntu/Components/1.3/BottomEdgeHint.qml'
--- src/Ubuntu/Components/1.3/BottomEdgeHint.qml	2015-09-21 14:44:13 +0000
+++ src/Ubuntu/Components/1.3/BottomEdgeHint.qml	2015-10-23 16:37:58 +0000
@@ -18,20 +18,22 @@
 import Ubuntu.Components 1.3
 
 /*!
-    \qmlabstract BottomEdgeHint
+    \qmltype BottomEdgeHint
     \inqmlmodule Ubuntu.Components 1.3
     \ingroup ubuntu
+    \inherits StyledItem
     \brief The BottomEdgeHint shows the availability of extra features
     available from the bottom edge of the application.
 
     It displays either a label or an icon at the bottom of the application.
 
-    It has 2 states: hidden or visible. When hidden, part of it is still visible
-    to hint at the existence of the bottom edge.
+    It has 4 states: Hidden, Idle, Active and Locked. When Idle, part of it is
+    still visible hinting the existence of the bottom edge.
 
     When used with a mouse it acts like a button. The typical action associated
     with clicking on it should be revealing the extra features provided by the
-    bottom edge.
+    bottom edge. However, the click can only happen if the hint is in \e Locked
+    state.
 
     Example:
     \qml
@@ -42,19 +44,12 @@
     }
     \endqml
 
+    The component is styled through \b BottomEdgeHintStyle.
 */
-Item {
+StyledItem {
     id: bottomEdgeHint
 
-    anchors {
-        bottom: parent.bottom
-        bottomMargin: bottomEdgeHint.state == "Hidden" ? -bottomEdgeHint.height + units.gu(1.5) : 0
-        horizontalCenter: parent.horizontalCenter
-        Behavior on bottomMargin { UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration } }
-    }
-
-    width: label.paintedWidth + units.gu(7)
-    height: units.gu(4)
+    anchors.bottom: parent.bottom
 
     /*!
        This handler is called when there is a mouse click on the BottomEdgeHint
@@ -66,19 +61,22 @@
     Keys.onReturnPressed: clicked()
 
     /*!
+      \qmlproperty string text
       The label displayed by the BottomEdgeHint.
      */
     property string text
 
     /*!
+      \qmlproperty url iconSource
       The icon displayed by the BottomEdgeHint.
 
       This is the URL of any image file.
       If both iconSource and iconName are defined, iconName will be ignored.
      */
-    property url iconSource: iconName ? "image://theme/" + iconName : ""
+    property url iconSource
 
     /*!
+      \qmlproperty string iconName
       The icon associated with the BottomEdgeHint in the icon theme.
 
       If both iconSource and iconName are defined, iconName will be ignored.
@@ -86,70 +84,27 @@
     property string iconName
 
     /*!
-      BottomEdgeHint can take 2 states of visibility: "Hidden" and "Visible".
-
-      When "Visible", the full hint with its content is shown.
-
-      When "Hidden", only part of the hint is visible leaving more space for application content.
+      The property holds the flickable, which when flicked hides the hint.
+      \e Hidden state is reached when this property is set to a Flickable
+      which is flicking or moving. It is recommended to set the property
+      when the hint is placed above a flickable content. Defaults to null.
+      */
+    property Flickable flickable: null
+
+    /*!
+      \qmlproperty string state
+      BottomEdgeHint can take 4 states of visibility: "Hidden", "Idle", "Active"
+      and "Locked".
+
+      When \e Hidden, the hint is not shown at all. When \e Active, the full hint
+      with its content is shown. When \e Idle, only part of the hint is visible
+      leaving more space for application content. \e Idle extends the empty state.
+      \e Locked is similar to Active, except that it is a final state, meaning the
+      hint will be shown no matter of the flickable's status.
+
+      Defaults to \e Idle.
      */
-    property string state: "Visible"
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        onEntered: bottomEdgeHint.state = "Visible"
-        onClicked: {
-            Haptics.play();
-            bottomEdgeHint.clicked();
-            mouse.accepted = false;
-        }
-    }
-
-    clip: true
-
-    UbuntuShape {
-        id: background
-
-        anchors {
-            bottom: parent.bottom
-            horizontalCenter: bottomEdgeHint.horizontalCenter
-            bottomMargin: -units.gu(1)
-        }
-
-        width: bottomEdgeHint.width - 2 * hoverExpansion
-        height: bottomEdgeHint.height + units.gu(1) - hoverExpansion
-
-        property real hoverExpansion: mouseArea.containsMouse ? 0 : units.gu(0.5)
-        Behavior on hoverExpansion { UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration } }
-
-        backgroundColor: theme.palette.normal.overlay
-    }
-
-    Label {
-        id: label
-
-        anchors {
-            top: parent.top
-            horizontalCenter: parent.horizontalCenter
-        }
-        text: icon.name ? "" : bottomEdgeHint.text
-        textSize: Label.Medium
-        height: bottomEdgeHint.height
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-    }
-
-    Icon {
-        id: icon
-
-        name: bottomEdgeHint.iconName
-        anchors {
-            bottom: parent.bottom
-            bottomMargin: units.gu(0.5)
-            horizontalCenter: parent.horizontalCenter
-        }
-        width: height
-        height: units.gu(2)
-    }
+    state: "Idle"
+
+    styleName: "BottomEdgeHintStyle"
 }

=== modified file 'src/Ubuntu/Components/Styles/Styles.pro'
--- src/Ubuntu/Components/Styles/Styles.pro	2015-10-08 21:19:56 +0000
+++ src/Ubuntu/Components/Styles/Styles.pro	2015-10-23 16:37:58 +0000
@@ -13,7 +13,3 @@
 load(ubuntu_qml_module)
 
 OTHER_FILES+=qmldir
-
-
-
-

=== added file 'src/Ubuntu/Components/Themes/Ambiance/1.3/BottomEdgeHintStyle.qml'
--- src/Ubuntu/Components/Themes/Ambiance/1.3/BottomEdgeHintStyle.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/1.3/BottomEdgeHintStyle.qml	2015-10-23 16:37:58 +0000
@@ -0,0 +1,184 @@
+/*
+ * Copyright 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 1.3
+import Ubuntu.Components.ListItems 1.3
+
+Item {
+    id: bottomEdgeHintStyle
+    implicitWidth: styledItem.parent.width
+    implicitHeight: units.gu(4)
+
+    state: styledItem.state
+
+    states: [
+        State {
+            name: "Idle"
+            extend: ""
+            StateChangeScript {
+                script: turnToIdleTimer.stop()
+            }
+        },
+        State {
+            name: "Active"
+            PropertyChanges {
+                target: h1
+                anchors.verticalCenterOffset: styledItem.height / 2
+            }
+            PropertyChanges {
+                target: h2
+                anchors.topMargin: 0
+            }
+        },
+        State {
+            name: "Hidden"
+            when: styledItem.flickable && (styledItem.flickable.flicking || styledItem.flickable.moving)
+            PropertyChanges {
+                target: styledItem
+                opacity: 0.0
+            }
+            PropertyChanges {
+                target: mouseHover
+                enabled: false
+            }
+        },
+        // FIXME: locked should be set and be final if mouse is attached
+        // requires QSystemInfo support, which is ongoing work upstream
+        State {
+            name: "Locked"
+            PropertyChanges {
+                target: h1
+                anchors.verticalCenterOffset: styledItem.height / 2
+            }
+            PropertyChanges {
+                target: h2
+                anchors.topMargin: 0
+            }
+            PropertyChanges {
+                target: turnToIdleTimer
+                running: false
+
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "*"
+            to: "Active"
+            reversible: true
+            UbuntuNumberAnimation {
+                targets: [h1, h2]
+                properties: "anchors.verticalCenterOffset, anchors.topMargin"
+            }
+        },
+        Transition {
+            from: "*"
+            to: "Hidden"
+            reversible: true
+            UbuntuNumberAnimation {
+                target: styledItem
+                property: "opacity"
+                duration: UbuntuAnimation.SlowDuration
+            }
+        }
+    ]
+
+    // FIXME ZSOMBI: temporary functionality till SwipeGesture integration
+    MouseArea {
+        id: mouseHover
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+        enabled: styledItem.state != "Locked"
+        onEntered: {
+            styledItem.state = "Active";
+            turnToIdleTimer.stop();
+        }
+        onExited: if (styledItem.state == "Active") turnToIdleTimer.restart()
+    }
+
+    Timer {
+        id: turnToIdleTimer
+        interval: 800
+        repeat: false
+        onTriggered: styledItem.state = "Idle"
+    }
+
+    clip: true
+
+    Icon {
+        id: h1
+        width: units.gu(2)
+        height: width
+        anchors {
+            centerIn: parent
+            topMargin: styledItem.height
+        }
+        name: "up"
+    }
+
+    Rectangle {
+        id: h2
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            topMargin: styledItem.height
+        }
+        height: styledItem.height
+        color: theme.palette.normal.overlay
+        ThinDivider {
+            anchors.top: parent.top
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                Haptics.play();
+                styledItem.clicked();
+                mouse.accepted = false;
+            }
+        }
+
+        Row {
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                horizontalCenter: parent.horizontalCenter
+            }
+            spacing: units.gu(1)
+            Icon {
+                id: icon
+                name: styledItem.iconName
+                source: styledItem.iconSource
+                width: height
+                height: units.gu(2)
+                anchors.verticalCenter: parent.verticalCenter
+                color: theme.palette.normal.overlayText
+            }
+            Label {
+                id: label
+                text: styledItem.text
+                textSize: Label.Medium
+                color: theme.palette.normal.overlayText
+                height: styledItem.height
+                anchors.verticalCenter: parent.verticalCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+    }
+}

=== modified file 'src/Ubuntu/Components/Themes/Ambiance/Ambiance.pro'
--- src/Ubuntu/Components/Themes/Ambiance/Ambiance.pro	2015-10-02 22:48:13 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/Ambiance.pro	2015-10-23 16:37:58 +0000
@@ -113,6 +113,9 @@
              1.3/ToolbarStyle.qml \
              1.3/IconButtonStyle.qml \
 	     1.3/PageHeaderStyle.qml \
+             1.3/BottomEdgeHintStyle.qml \
     $$ARTWORK_FILES
 
 load(ubuntu_qml_module)
+
+OTHER_FILES+=qmldir

=== modified file 'tests/unit_x11/tst_components/tst_bottomedgehint.qml'
--- tests/unit_x11/tst_components/tst_bottomedgehint.qml	2015-07-24 13:29:34 +0000
+++ tests/unit_x11/tst_components/tst_bottomedgehint.qml	2015-10-23 16:37:58 +0000
@@ -40,34 +40,35 @@
 
         function cleanup() {
             bottomEdgeHint.iconName = "";
-            bottomEdgeHint.state = "Visible";
+            bottomEdgeHint.state = "Idle";
             clickSpy.clear();
         }
 
         function test_0_default_state() {
             compare(bottomEdgeHint.iconName, "");
             compare(bottomEdgeHint.text, "");
-            compare(bottomEdgeHint.state, "Visible");
-            compare(bottomEdgeHint.width, units.gu(7));
+            compare(bottomEdgeHint.state, "Idle");
+            compare(bottomEdgeHint.width, mainView.width);
             compare(bottomEdgeHint.height, units.gu(4));
             compare(bottomEdgeHint.y, mainView.height - bottomEdgeHint.height);
             compare(clickSpy.count, 0, "The BottomEdgeHint should not have received a click.");
         }
 
-        function test_with_text() {
-            bottomEdgeHint.text = "A Label";
-            compare(bottomEdgeHint.text, "A Label");
-            verify(bottomEdgeHint.width > units.gu(7));
-        }
-
         function test_hiding() {
             bottomEdgeHint.state = "Hidden";
-            tryCompare(bottomEdgeHint, "y", mainView.height - bottomEdgeHint.height + units.gu(2.5));
+            tryCompare(bottomEdgeHint, "opacity", 0.0);
         }
 
         function test_clicking() {
-            mouseClick(bottomEdgeHint, 0, 0);
-            compare(clickSpy.count, 1, "The BottomEdgeHint should have received a click.");
+            bottomEdgeHint.state = "Locked";
+            mouseClick(bottomEdgeHint, centerOf(bottomEdgeHint).x, centerOf(bottomEdgeHint).y);
+            clickSpy.wait();
+        }
+
+        function test_no_clicking_while_unlocked() {
+            mouseClick(bottomEdgeHint, centerOf(bottomEdgeHint).x, centerOf(bottomEdgeHint).y);
+            expectFail("", "No click if not Locked");
+            clickSpy.wait(200);
         }
     }
 }