Merge lp:~rpadovani/ubuntu-calculator-app/delegateImprovement141203 into lp:ubuntu-calculator-app

[Riccardo Padovani]

Added swipe to delete action, improved delegates

Added swipe to delete action, improved delegates

[Bartosz Kosiorek (gang65)]

Nice work Riccardo!

Instead of storing text to display, we should store formula. It will allow us to edit calculations.

We could also consider (for performance reasons) to store both "formula" and "text to display". But it needs to be tested on device/phone.

review: Needs Fixing

[Bartosz Kosiorek (gang65)]

During run the warning :
"ShaderEffect: Property 'source' is not assigned a valid texture provider (QQuickImage*)."
is displayed.

There is an issue with formula, which exceed screen width. Currently it is not possible scroll it, and check what it contains. Maybe we should contact with User Interface team?

In my opinion equation mark should be the same size as formula.
From user perspective, the most important is result. That's why the size of result should be bigger, and the rest should be smaller.

review: Needs Fixing

[Bartosz Kosiorek (gang65)]

Please update "pot" and resolve conflict in "app/ubuntu-calculator-app.qml"

review: Needs Fixing

[lp:~rpadovani/ubuntu-calculator-app/delegateImprovement141203]

24. By Riccardo Padovani on 2014-12-08

Merged from upstream

25. By Riccardo Padovani on 2014-12-08

Addressed some bugs

[Riccardo Padovani (rpadovani)]

> Instead of storing text to display, we should store formula. It will allow us to edit calculations.

Done

> We could also consider (for performance reasons) to store both "formula" and "text to display". But it needs to be tested on device/phone.

I think we could address that in another branch

> During run the warning : "ShaderEffect: Property 'source' is not assigned a valid texture provider (QQuickImage*)." is displayed.

I'm investigating on this. Anyway, I think could be addressed in another branch because it's only a warning

> There is an issue with formula, which exceed screen width. Currently it is not possible scroll it, and check what it contains. Maybe we should contact with User Interface team?

Yes, as soon as this branch is merged I create a click package and send it to gventuri of Design team

> In my opinion equation mark should be the same size as formula.

Done

> Please update "pot" and resolve conflict in "app/ubuntu-calculator-app.qml"

Done

> Can we just increase "spacing" to "spacing: units.gu(3)"?

The result is a bit different, I prefer this one because is smaller, but if you want I can modify it

[Bartosz Kosiorek (gang65)]

Works great!

review: Approve

=== modified file 'app/CMakeLists.txt'
--- app/CMakeLists.txt	2014-11-28 00:01:50 +0000
+++ app/CMakeLists.txt	2014-12-08 13:30:38 +0000
@@ -14,6 +14,7 @@
 
 add_subdirectory(engine)
 add_subdirectory(ui)
+add_subdirectory(upstreamcomponents)
 
 # Make the autpilot files visible in qtcreator
 file(GLOB_RECURSE AUTOPILOT_TEST_FILES *.py)

=== modified file 'app/engine/CalculationHistory.qml'
--- app/engine/CalculationHistory.qml	2014-12-03 22:51:38 +0000
+++ app/engine/CalculationHistory.qml	2014-12-08 13:30:38 +0000
@@ -44,7 +44,7 @@
         id: sortedHistory
         model: query
         sort.property: "docId"
-        sort.order: Qt.DescendingOrder
+        sort.order: Qt.AscendingOrder
     }
 
     function addCalculationToDatabase(formula, result) {

=== modified file 'app/ubuntu-calculator-app.qml'
--- app/ubuntu-calculator-app.qml	2014-12-04 22:51:08 +0000
+++ app/ubuntu-calculator-app.qml	2014-12-08 13:30:38 +0000
@@ -226,7 +226,7 @@
             return;
         }
 
-        calculationHistory.addCalculationToDatabase(returnFormulaToDisplay(longFormula), displayedInputText);
+        calculationHistory.addCalculationToDatabase(longFormula, result);
         longFormula = result;
         shortFormula = result;
         numberOfOpenedBrackets = 0;
@@ -274,8 +274,86 @@
             model: calculationHistory.getContents()
             interactive: false
 
+            property var _currentSwipedItem: null
+
             delegate: Screen {
+                id: screenDelegate
                 width: parent.width
+
+                property var removalAnimation
+                function remove() {
+                    removalAnimation.start();
+                }
+
+                onSwippingChanged: {
+                    formulaView._updateSwipeState(screenDelegate);
+                }
+
+                onSwipeStateChanged: {
+                    formulaView._updateSwipeState(screenDelegate);
+                }
+
+                leftSideAction: Action {
+                    iconName: "delete"
+                    text: i18n.tr("Delete")
+                    onTriggered: {
+                        screenDelegate.remove();
+                    }
+                }
+
+                ListView.onRemove: ScriptAction {
+                    script: {
+                        if (formulaView._currentSwipedItem === screenDelegate) {
+                            formulaView._currentSwipedItem = null;
+                        }
+                    }
+                }
+
+                removalAnimation: SequentialAnimation {
+                    alwaysRunToEnd: true
+
+                    PropertyAction {
+                        target: screenDelegate
+                        property: "ListView.delayRemove"
+                        value: true
+                    }
+
+                    UbuntuNumberAnimation {
+                        target: screenDelegate
+                        property: "height"
+                        to: 0
+                    }
+
+                    PropertyAction {
+                        target: screenDelegate
+                        property: "ListView.delayRemove"
+                        value: false
+                    }
+
+                    ScriptAction {
+                        script: {
+                            calculationHistory.deleteCalc(docId);
+                        }
+                    }
+                }
+            }
+
+            function _updateSwipeState(item) {
+                if (item.swipping) {
+                    return
+                }
+
+                if (item.swipeState !== "Normal") {
+                    if (formulaView._currentSwipedItem !== item) {
+                        if (formulaView._currentSwipedItem) {
+                            formulaView._currentSwipedItem.resetSwipe()
+                        }
+                        formulaView._currentSwipedItem = item
+                    } else if (item.swipeState !== "Normal"
+                        && formulaView._currentSwipedItem === item) {
+                        formulaView._currentSwipedItem = null
+                    }
+                }
             }
         }
     }

=== modified file 'app/ui/Screen.qml'
--- app/ui/Screen.qml	2014-12-04 22:32:31 +0000
+++ app/ui/Screen.qml	2014-12-08 13:30:38 +0000
@@ -15,26 +15,58 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import QtQuick 2.3
 import Ubuntu.Components 1.1
-import Ubuntu.Components.ListItems 1.0 as ListItem
-
-ListItem.Standard {
+
+import "../upstreamcomponents"
+
+ListItemWithActions {
     id: root
+
+    color: "white"
     Row {
         id: row
+        width: parent.width
+        anchors.right: parent.right
+
         layoutDirection: Qt.RightToLeft
         spacing: units.gu(1)
-        Text {
-            text: contents.result
-            font.bold: true
-        }
-        Text {
-            text: "=";
-        }
-        Text {
-            text: contents.formula
+
+        Text {
+            id: result
+
+            anchors.bottom: formula.bottom
+
+            text: Number(model.contents.result).toLocaleString(Qt.locale(), "f", 0)
+            font.pixelSize: units.gu(4)
+            lineHeight: units.gu(2)
+            lineHeightMode: Text.FixedHeight
+        }
+
+        Text {
+            id: equal
+
+            anchors.bottom: formula.bottom
+
+            text: " = "
+            font.pixelSize: units.gu(3)
+            lineHeight: units.gu(1) + 1
+            lineHeightMode: Text.FixedHeight
+        }
+
+        Text {
+            id: formula
+
+            width: parent.width - equal.width - result.width
+            anchors.bottom: parent.bottom
+
+            text: returnFormulaToDisplay(model.contents.formula)
+            font.pixelSize: units.gu(3)
+            lineHeight: units.gu(1) + 1
+            lineHeightMode: Text.FixedHeight
+
+            elide: Text.ElideLeft
+            horizontalAlignment: Text.AlignRight
         }
     }
 }

=== added directory 'app/upstreamcomponents'
=== added file 'app/upstreamcomponents/CMakeLists.txt'
--- app/upstreamcomponents/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/upstreamcomponents/CMakeLists.txt	2014-12-08 13:30:38 +0000
@@ -0,0 +1,6 @@
+file(GLOB UPSTREAMCOMPONENTS_QML_JS_FILES *.qml *.js)
+
+# Make the files visible in the qtcreator tree
+add_custom_target(ubuntu-calculator-app_upstreamcomponents_QMlFiles ALL SOURCES ${UPSTREAMCOMPONENTS_QML_JS_FILES})
+
+install(FILES ${UPSTREAMCOMPONENTS_QML_JS_FILES} DESTINATION ${UBUNTU-CALCULATOR-APP_DIR}/upstreamcomponents)

=== added file 'app/upstreamcomponents/ListItemWithActions.qml'
--- app/upstreamcomponents/ListItemWithActions.qml	1970-01-01 00:00:00 +0000
+++ app/upstreamcomponents/ListItemWithActions.qml	2014-12-08 13:30:38 +0000
@@ -0,0 +1,453 @@
+/*
+ * Copyright (C) 2012-2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.1
+
+Item {
+    id: root
+
+    property Action leftSideAction: null
+    property list<Action> rightSideActions
+    property double defaultHeight: units.gu(8)
+    property bool locked: false
+    property Action activeAction: null
+    property var activeItem: null
+    property bool triggerActionOnMouseRelease: false
+    property color color: Theme.palette.normal.background
+    property color selectedColor: "#E6E6E6"
+    property bool selected: false
+    property bool selectionMode: false
+    property alias internalAnchors: mainContents.anchors
+    default property alias contents: mainContents.children
+
+    readonly property double actionWidth: units.gu(4)
+    readonly property double leftActionWidth: units.gu(10)
+    readonly property double actionThreshold: actionWidth * 0.4
+    readonly property double threshold: 0.4
+    readonly property string swipeState: main.x == 0 ? "Normal" : main.x > 0 ? "LeftToRight" : "RightToLeft"
+    readonly property alias swipping: mainItemMoving.running
+    readonly property bool _showActions: mouseArea.pressed || swipeState != "Normal" || swipping
+
+    /* internal */
+    property var _visibleRightSideActions: filterVisibleActions(rightSideActions)
+
+    signal itemClicked(var mouse)
+    signal itemPressAndHold(var mouse)
+
+    function returnToBoundsRTL(direction)
+    {
+        var actionFullWidth = actionWidth + units.gu(2)
+
+        // go back to normal state if swipping reverse
+        if (direction === "LTR") {
+            updatePosition(0)
+            return
+        } else if (!triggerActionOnMouseRelease) {
+            updatePosition(-rightActionsView.width + units.gu(2))
+            return
+        }
+
+        var xOffset = Math.abs(main.x)
+        var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
+        var newX = 0
+      if (index === _visibleRightSideActions.length) {
+            newX = -(rightActionsView.width - units.gu(2))
+        } else if (index >= 1) {
+            newX = -(actionFullWidth * index)
+        }
+        updatePosition(newX)
+    }
+
+    function returnToBoundsLTR(direction)
+    {
+        var finalX = leftActionWidth
+        if ((direction === "RTL") || (main.x <= (finalX * root.threshold)))
+            finalX = 0
+        updatePosition(finalX)
+    }
+
+    function returnToBounds(direction)
+    {
+        if (main.x < 0) {
+            returnToBoundsRTL(direction)
+        } else if (main.x > 0) {
+            returnToBoundsLTR(direction)
+        } else {
+            updatePosition(0)
+        }
+    }
+
+    function contains(item, point, marginX)
+    {
+        var itemStartX = item.x - marginX
+        var itemEndX = item.x + item.width + marginX
+        return (point.x >= itemStartX) && (point.x <= itemEndX) &&
+               (point.y >= item.y) && (point.y <= (item.y + item.height));
+    }
+
+    function getActionAt(point)
+    {
+        if (contains(leftActionView, point, 0)) {
+            return leftSideAction
+        } else if (contains(rightActionsView, point, 0)) {
+            var newPoint = root.mapToItem(rightActionsView, point.x, point.y)
+            for (var i = 0; i < rightActionsRepeater.count; i++) {
+                var child = rightActionsRepeater.itemAt(i)
+                if (contains(child, newPoint, units.gu(1))) {
+                    return i
+                }
+            }
+        }
+        return -1
+    }
+
+    function updateActiveAction()
+    {
+        if (triggerActionOnMouseRelease &&
+            (main.x <= -(root.actionWidth + units.gu(2))) &&
+            (main.x > -(rightActionsView.width - units.gu(2)))) {
+            var actionFullWidth = actionWidth + units.gu(2)
+            var xOffset = Math.abs(main.x)
+            var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
+            index = index - 1
+            if (index > -1) {
+                root.activeItem = rightActionsRepeater.itemAt(index)
+                root.activeAction = root._visibleRightSideActions[index]
+            }
+        } else {
+            root.activeAction = null
+        }
+    }
+
+    function resetSwipe()
+    {
+        updatePosition(0)
+    }
+
+    function filterVisibleActions(actions)
+    {
+        var visibleActions = []
+        for(var i = 0; i < actions.length; i++) {
+            var action = actions[i]
+            if (action.visible) {
+                visibleActions.push(action)
+            }
+        }
+        return visibleActions
+    }
+
+    function updatePosition(pos)
+    {
+        if (!root.triggerActionOnMouseRelease && (pos !== 0)) {
+            mouseArea.state = pos > 0 ? "RightToLeft" : "LeftToRight"
+        } else {
+            mouseArea.state = ""
+        }
+        main.x = pos
+    }
+
+    states: [
+        State {
+            name: "select"
+            when: selectionMode || selected
+            PropertyChanges {
+                target: selectionIcon
+                source: Qt.resolvedUrl("ListItemWithActionsCheckBox.qml")
+                anchors.leftMargin: units.gu(2)
+            }
+            PropertyChanges {
+                target: root
+                locked: true
+            }
+            PropertyChanges {
+                target: main
+                x: 0
+            }
+        }
+    ]
+
+    height: defaultHeight
+    clip: height !== defaultHeight
+
+    Rectangle {
+        id: leftActionView
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            right: main.left
+        }
+        width: root.leftActionWidth + actionThreshold
+        visible: leftSideAction
+        color: UbuntuColors.red
+
+        Icon {
+            anchors {
+                centerIn: parent
+                horizontalCenterOffset: actionThreshold / 2
+            }
+            name: leftSideAction && _showActions ? leftSideAction.iconName : ""
+            color: Theme.palette.selected.field
+            height: units.gu(3)
+            width: units.gu(3)
+        }
+    }
+
+    Rectangle {
+       id: rightActionsView
+
+       anchors {
+           top: main.top
+           left: main.right
+           bottom: main.bottom
+       }
+       visible: _visibleRightSideActions.length > 0
+       width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + root.actionThreshold + units.gu(2) : 0
+       color: "white"
+       Row {
+           anchors{
+               top: parent.top
+               left: parent.left
+               leftMargin: units.gu(2)
+               right: parent.right
+               rightMargin: units.gu(2)
+               bottom: parent.bottom
+           }
+           spacing: units.gu(2)
+           Repeater {
+               id: rightActionsRepeater
+
+               model: _showActions ? _visibleRightSideActions : []
+               Item {
+                   property alias image: img
+
+                   height: rightActionsView.height
+                   width: root.actionWidth
+
+                   Icon {
+                       id: img
+
+                       anchors.centerIn: parent
+                       width: units.gu(3)
+                       height: units.gu(3)
+                       name: modelData.iconName
+                       color: root.activeAction === modelData ? UbuntuColors.lightAubergine : UbuntuColors.lightGrey
+                   }
+              }
+           }
+       }
+    }
+
+
+    Rectangle {
+        id: main
+        objectName: "mainItem"
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        width: parent.width
+        color: root.selected ? root.selectedColor : root.color
+
+        Loader {
+            id: selectionIcon
+
+            anchors {
+                left: main.left
+                verticalCenter: main.verticalCenter
+            }
+            width: (status === Loader.Ready) ? item.implicitWidth : 0
+            visible: (status === Loader.Ready) && (item.width === item.implicitWidth)
+            Behavior on width {
+                NumberAnimation {
+                    duration: UbuntuAnimation.SnapDuration
+                }
+            }
+        }
+
+
+        Item {
+            id: mainContents
+
+            anchors {
+                left: selectionIcon.right
+                leftMargin: units.gu(2)
+                top: parent.top
+                topMargin: units.gu(1)
+                right: parent.right
+                rightMargin: units.gu(2)
+                bottom: parent.bottom
+                bottomMargin: units.gu(1)
+            }
+        }
+
+        Behavior on x {
+            UbuntuNumberAnimation {
+                id: mainItemMoving
+
+                easing.type: Easing.OutElastic
+                duration: UbuntuAnimation.SlowDuration
+            }
+        }
+        Behavior on color {
+           ColorAnimation {}
+        }
+    }
+
+    SequentialAnimation {
+        id: triggerAction
+
+        property var currentItem: root.activeItem ? root.activeItem.image : null
+
+        running: false
+        ParallelAnimation {
+            UbuntuNumberAnimation {
+                target: triggerAction.currentItem
+                property: "opacity"
+                from: 1.0
+                to: 0.0
+                duration: UbuntuAnimation.SlowDuration
+                easing {type: Easing.InOutBack; }
+            }
+            UbuntuNumberAnimation {
+                target: triggerAction.currentItem
+                properties: "width, height"
+                from: units.gu(3)
+                to: root.actionWidth
+                duration: UbuntuAnimation.SlowDuration
+                easing {type: Easing.InOutBack; }
+            }
+        }
+        PropertyAction {
+            target: triggerAction.currentItem
+            properties: "width, height"
+            value: units.gu(3)
+        }
+        PropertyAction {
+            target: triggerAction.currentItem
+            properties: "opacity"
+            value: 1.0
+        }
+        ScriptAction {
+            script: {
+                root.activeAction.triggered(root)
+                mouseArea.state = ""
+            }
+        }
+        PauseAnimation {
+            duration: 500
+        }
+        UbuntuNumberAnimation {
+            target: main
+            property: "x"
+            to: 0
+
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        property bool locked: root.locked || ((root.leftSideAction === null) && (root._visibleRightSideActions.count === 0))
+        property bool manual: false
+        property string direction: "None"
+        property real lastX: -1
+
+        anchors.fill: parent
+        drag {
+            target: locked ? null : main
+            axis: Drag.XAxis
+            minimumX: rightActionsView.visible ? -(rightActionsView.width) : 0
+            maximumX: leftActionView.visible ? leftActionView.width : 0
+            threshold: root.actionThreshold
+        }
+
+        states: [
+            State {
+                name: "LeftToRight"
+                PropertyChanges {
+                    target: mouseArea
+                    drag.maximumX: 0
+                }
+            },
+            State {
+                name: "RightToLeft"
+                PropertyChanges {
+                    target: mouseArea
+                    drag.minimumX: 0
+                }
+            }
+        ]
+
+        onMouseXChanged: {
+            var offset = (lastX - mouseX)
+            if (Math.abs(offset) <= root.actionThreshold) {
+                return
+            }
+            lastX = mouseX
+            direction = offset > 0 ? "RTL" : "LTR";
+        }
+
+        onPressed: {
+            lastX = mouse.x
+        }
+
+        onReleased: {
+            if (root.triggerActionOnMouseRelease && root.activeAction) {
+                triggerAction.start()
+            } else {
+                root.returnToBounds(direction)
+                root.activeAction = null
+            }
+            lastX = -1
+            direction = "None"
+        }
+        onClicked: {
+            if (main.x === 0) {
+                root.itemClicked(mouse)
+            } else if (main.x > 0) {
+                var action = getActionAt(Qt.point(mouse.x, mouse.y))
+                if (action && action !== -1) {
+                    action.triggered(root)
+                }
+            } else {
+                var actionIndex = getActionAt(Qt.point(mouse.x, mouse.y))
+                if (actionIndex !== -1) {
+                    root.activeItem = rightActionsRepeater.itemAt(actionIndex)
+                    root.activeAction = root._visibleRightSideActions[actionIndex]
+                    triggerAction.start()
+                    return
+                }
+            }
+            root.resetSwipe()
+        }
+
+        onPositionChanged: {
+            if (mouseArea.pressed) {
+                updateActiveAction()
+            }
+        }
+        onPressAndHold: {
+            if (main.x === 0) {
+                root.itemPressAndHold(mouse)
+            }
+        }
+        z: -1
+    }
+}

=== added file 'app/upstreamcomponents/ListItemWithActionsCheckBox.qml'
--- app/upstreamcomponents/ListItemWithActionsCheckBox.qml	1970-01-01 00:00:00 +0000
+++ app/upstreamcomponents/ListItemWithActionsCheckBox.qml	2014-12-08 13:30:38 +0000
@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2012-2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.1
+
+CheckBox {
+    checked: root.selected
+    width: implicitWidth
+    // disable item mouse area to avoid conflicts with parent mouse area
+    __mouseArea.enabled: false
+}

=== modified file 'po/ubuntu-calculator-app.pot'
--- po/ubuntu-calculator-app.pot	2014-12-04 22:51:08 +0000
+++ po/ubuntu-calculator-app.pot	2014-12-08 13:30:38 +0000
@@ -21,6 +21,10 @@
 msgid "NaN"
 msgstr ""
 
+#: ../app/ubuntu-calculator-app.qml:296
+msgid "Delete"
+msgstr ""
+
 #: ../app/ui/LandscapeKeyboard.qml:19 ../app/ui/PortraiKeyboard.qml:39
 msgid "log"
 msgstr ""
@@ -28,15 +32,3 @@
 #: ../app/ui/LandscapeKeyboard.qml:26 ../app/ui/PortraiKeyboard.qml:42
 msgid "mod"
 msgstr ""
-
-#: /tmp/tmp.rKpWslWyww/po/ubuntu-calculator-app.desktop.in.h:1
-msgid "Calculator"
-msgstr ""
-
-#: /tmp/tmp.rKpWslWyww/po/ubuntu-calculator-app.desktop.in.h:2
-msgid "A calculator for Ubuntu."
-msgstr ""
-
-#: /tmp/tmp.rKpWslWyww/po/ubuntu-calculator-app.desktop.in.h:3
-msgid "math;addition;subtraction;multiplication;division;"
-msgstr ""