Merge lp:~verzegnassi-stefano/quick-memo/fix-1360869-1366076 into lp:quick-memo/trunk

[Stefano Verzegnassi]

Transition to new header API and minor UX fixes

PageHeadConfiguration is used to provided MultiSelection. (#1360869)
Minor UX fixes (bottomEdge and Header behaviour). (#1366069 and #1366076)
Remove "Add image" menu option from MemoPage. (#1374148)

[Stefano Verzegnassi (verzegnassi-stefano)]

review: Approve

=== modified file 'components/AddMemo.qml'
--- components/AddMemo.qml	2014-08-29 03:30:43 +0000
+++ components/AddMemo.qml	2014-09-27 18:44:34 +0000
@@ -70,10 +70,7 @@
         onTriggered: colorDialog.show()
     }
 
-    tools: ToolbarItems {
-        ToolbarButton { action: colorToolAction }
-        ToolbarButton { action: saveMemo }
-    }
+    head.actions: [colorToolAction, saveMemo]
 
     // Background
     Rectangle {
 
=== modified file 'components/MainPage.qml'
--- components/MainPage.qml	2014-09-04 15:12:38 +0000
+++ components/MainPage.qml	2014-09-27 18:44:34 +0000
@@ -23,28 +23,9 @@
 PageWithBottomEdge {
     id: mainPage
     title: i18n.tr("Overview")
-    flickable: useGridView ? null : viewLoader.item
-
-    // TODO: Switch to PageHeads. Do it also for MultiSelectionHandler
-
-    Action {
-        id: openAbout
-        text: i18n.tr("About...")
-        iconName: "help"
-        onTriggered: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
-    }
-
-    Action {
-        id: switchView
-        text: useGridView ? i18n.tr("Switch to one-column list") : i18n.tr("Switch to grid")
-        iconName: useGridView ? "view-list-symbolic" : "view-grid-symbolic"
-        onTriggered: useGridView = !useGridView
-    }
-
-    tools: ToolbarItems {
-        ToolbarButton { action: openAbout }
-        ToolbarButton { action: switchView }
-    }
+    flickable: mainPage.state === "multiSelection" ? null
+                                                   : useGridView ? null
+                                                                 : viewLoader.item
 
     // Used for switching from HorizontalFlowListView to ListView, and vice versa.
     Loader {
@@ -115,7 +96,7 @@
                 width: (memoView.width * 0.5) - (memoView.spacing * 3)
 
                 onClicked: {
-                    if (multiSelection.active) {
+                    if (mainPage.state === "multiSelection") {
                         selected = multiSelection.selectUnselectItem(model.index)
                     } else {
                         /* Workaround: clear the pageStack before pushing memoPage.
@@ -130,14 +111,14 @@
                 }
 
                 onPressAndHold: {
-                    if (!multiSelection.active) {
-                        multiSelection.active = true
+                    if (mainPage.state !== "multiSelection") {
+                        mainPage.state = "multiSelection"
                         selected = multiSelection.selectUnselectItem(model.index)
                     }
                 }
                 Connections {
-                    target: multiSelection
-                    onActiveChanged: viewDelegate.selected = false
+                    target: mainPage
+                    onStateChanged: if (mainPage.state !== "multiSelection") viewDelegate.selected = false
                 }
             }
         }
@@ -149,7 +130,13 @@
 
         ListView {
             id: memoView
-            anchors { fill: parent; margins: units.gu(2) }
+            anchors {
+                fill: parent
+                margins: units.gu(2)
+                // Fix wrong topMargin when switching to multiSelection state.
+                topMargin: (mainPage.state === "multiSelection") ? (units.gu(2) - mainPage.header.height)
+                                                                 : units.gu(2)
+            }
             clip: false
 
             spacing: units.gu(1)
@@ -160,7 +147,7 @@
                 width: memoView.width
 
                 onClicked: {
-                    if (multiSelection.active) {
+                    if (mainPage.state === "multiSelection") {
                         selected = multiSelection.selectUnselectItem(model.index)
                     } else {
                         /* Workaround: clear the pageStack before pushing memoPage.
@@ -175,21 +162,21 @@
                 }
 
                 onPressAndHold: {
-                    if (!multiSelection.active) {
-                        multiSelection.active = true
+                    if (mainPage.state !== "multiSelection") {
+                        mainPage.state = "multiSelection"
                         selected = multiSelection.selectUnselectItem(model.index)
                     }
                 }
                 Connections {
-                    target: multiSelection
-                    onActiveChanged: viewDelegate.selected = false
+                    target: mainPage
+                    onStateChanged: if (mainPage.state !== "multiSelection") viewDelegate.selected = false
                 }
 
                 /* According to Qt-Project docs, "delegates are instantiated as needed and may be destroyed at any time".
                    We need to restore 'selected' property when this happens. (this issue does not affect FlowListView,
                    since Repeater does not destroy delegates). */
                 Component.onCompleted: {
-                    if (multiSelection.active) {
+                    if (mainPage.state === "multiSelection") {
                         for (var i=0; i<multiSelection.indexes.length; i++) {
                             if (multiSelection.indexes[i] === index) {
                                 selected = true
@@ -201,91 +188,101 @@
         }
     }
 
-    // Used to manage multi-selection in ListViews
-    MultiSelectionHandler {
-        id: multiSelection
-
-        target: mainPage
-        title: (multiSelection.count == 1) ? i18n.tr("%1 item selected").arg(multiSelection.count)
-                                           : i18n.tr("%1 items selected").arg(multiSelection.count)
-        tools: ToolbarItems {
-            back: ToolbarButton {
-                action: Action {
-                    text: i18n.tr("Cancel")
-                    iconName: "back"
-                    onTriggered: multiSelection.active = false
-                }
-            }
-
-            ToolbarButton {
-                id: colorToolBtn
-                action: Action {
-                    text: i18n.tr("Change note color")
-                    iconSource: "../img/palette.svg"
-                    onTriggered: PopupUtils.open(colorNotePopover, colorToolBtn)
-                }
-            }
-
-            ToolbarButton {
-                action: Action {
-                    id: deleteMemo
-                    text: i18n.tr("Delete note")
-                    iconName: "delete"
-                    onTriggered: {
-                        PopupUtils.open(deleteDialog)
-                    }
-                }
-            }
-        }
-
-        onIndexAdded: console.log("Added index:", index)
-        onIndexRemoved: console.log("Index removed:", index)
-
-        Component {
-            id: colorNotePopover
-
-            ColorDialog {
-                id: colorDialog
-                showTick: false
-                // A color not listed in 'colors' property, just to avoid that oldColor and selectedColor result the same.
-                // TODO: If there's just a single element selected, we can import the right color of the memo.
-                selectedColor: "#ababab"
-
-                onColorPicked: {
-                    if (isChanged) {
-                        for (var i=0; i<multiSelection.indexes.length; i++) {
-                            notes.setNoteProperty(multiSelection.indexes[i], "color", selectedColor)
-                        }
-                    } else {
-                        console.log("Color not changed")
-                    }
-
-                    multiSelection.active = false
-                    PopupUtils.close(colorDialog)
-                }
-            }
-        }
-
-        Component {
-            id: deleteDialog
-            Dialog {
-                id: deleteDialogue
-                title: i18n.tr("Delete note(s)")
-                text: i18n.tr("Are you sure?")
-
-                Button {
-                    text: i18n.tr("Cancel")
-                    gradient: UbuntuColors.greyGradient
-                    onClicked: PopupUtils.close(deleteDialogue)
-                }
-                Button {
-                    text: i18n.tr("Delete")
-                    color: UbuntuColors.orange
-                    onClicked: {
-                        notes.deleteNotes(multiSelection.indexes)
-                        multiSelection.active = false
-                        PopupUtils.close(deleteDialogue)
-                    }
+    state: "default"
+    states: [
+        PageHeadState {
+            name: "default"
+            head: mainPage.head
+            actions: [openAbout, switchView]
+        },
+
+        // Used to manage multi-selection in ListViews
+        MultiSelectionHandler {
+            id: multiSelection
+
+            name: "multiSelection"
+            targetPage: mainPage
+
+            actions: [changeNoteColor, deleteMemo]
+        }
+    ]
+
+    // DEFAULT PAGEHEAD ACTIONS
+    Action {
+        id: openAbout
+        text: i18n.tr("About...")
+        iconName: "help"
+        onTriggered: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
+    }
+
+    Action {
+        id: switchView
+        text: useGridView ? i18n.tr("Switch to one-column list") : i18n.tr("Switch to grid")
+        iconName: useGridView ? "view-list-symbolic" : "view-grid-symbolic"
+        onTriggered: useGridView = !useGridView
+    }
+
+    // MULTISELECTIONHANDLER ACTIONS
+    Action {
+        id: changeNoteColor
+        text: i18n.tr("Change note color")
+        iconSource: "../img/palette.svg"
+        onTriggered: PopupUtils.open(colorNotePopover)
+    }
+
+    Action {
+        id: deleteMemo
+        text: i18n.tr("Delete note")
+        iconName: "delete"
+        onTriggered: {
+            PopupUtils.open(deleteDialog)
+        }
+    }
+
+    Component {
+        id: colorNotePopover
+
+        ColorDialog {
+            id: colorDialog
+            showTick: false
+            // A color not listed in 'colors' property, just to avoid that oldColor and selectedColor result the same.
+            // TODO: If there's just a single element selected, we can import the right color of the memo.
+            selectedColor: "#ababab"
+
+            onColorPicked: {
+                if (isChanged) {
+                    for (var i=0; i<multiSelection.indexes.length; i++) {
+                        notes.setNoteProperty(multiSelection.indexes[i], "color", selectedColor)
+                    }
+                } else {
+                    console.log("Color not changed")
+                }
+
+                mainPage.state = "default"
+                PopupUtils.close(colorDialog)
+            }
+        }
+    }
+
+    Component {
+        id: deleteDialog
+        Dialog {
+            id: deleteDialogue
+            title: i18n.tr("Delete note(s)")
+            text: i18n.tr("Are you sure?")
+
+            Button {
+                text: i18n.tr("Cancel")
+                gradient: UbuntuColors.greyGradient
+                onClicked: PopupUtils.close(deleteDialogue)
+            }
+            Button {
+                text: i18n.tr("Delete")
+                color: UbuntuColors.orange
+                onClicked: {
+                    notes.deleteNotes(multiSelection.indexes)
+                    mainPage.state = "default"
+                    PopupUtils.close(deleteDialogue)
                 }
             }
         }
@@ -293,4 +290,6 @@
 
     bottomEdgeTitle: i18n.tr("New memo")
     bottomEdgePageComponent: AddMemo {}
+    // Disable bottomEdge when MultiSelectionHandler is active
+    bottomEdgeEnabled: mainPage.state !== "multiSelection"
 }
 
=== modified file 'components/MemoPage.qml'
--- components/MemoPage.qml	2014-08-29 03:30:43 +0000
+++ components/MemoPage.qml	2014-09-27 18:44:34 +0000
@@ -60,17 +60,10 @@
     }
 
     Action {
-        id: addImage
-        text: i18n.tr("Add image")
-        iconName: "insert-image"
-        onTriggered: picsView.importImageFromContentHub()
-    }
-
-    Action {
         id: colorToolAction
         text: i18n.tr("Change note color")
         iconSource: "../img/palette.svg"
-        onTriggered: PopupUtils.open(colorNotePopover, colorToolBtn)
+        onTriggered: PopupUtils.open(colorNotePopover)
     }
     Component {
         id: colorNotePopover
@@ -89,32 +82,26 @@
         }
     }
 
-    tools: ToolbarItems {
-        back: ToolbarButton {
-            action: Action {
-                iconName: "back"
-                onTriggered: {
-                    // Check if a saveNote request was made. If so, stop the timer and save before exiting the page.
-                    if (autoSaveTimer.running) {
-                        console.log("It's ok. Saving the note before closing the page...")
-                        autoSaveTimer.running = false
-                        saveNote()
-                    }
-
-                    pageStack.pop()
-
-                    /* Workaround: see MainPage.qml, comment for mainView.delegate.onClicked().
+    head.backAction: Action {
+        iconName: "back"
+        onTriggered: {
+            // Check if a saveNote request was made. If so, stop the timer and save before exiting the page.
+            if (autoSaveTimer.running) {
+                console.log("It's ok. Saving the note before closing the page...")
+                autoSaveTimer.running = false
+                saveNote()
+            }
+
+            pageStack.pop()
+
+            /* Workaround: see MainPage.qml, comment for mainView.delegate.onClicked().
                         We simply re-push in the stack what we removed earlier.*/
-                    pageStack.push(mainPage)
-                }
-            }
+            pageStack.push(mainPage)
         }
-
-        ToolbarButton { id: colorToolBtn; action: colorToolAction }
-        ToolbarButton { action: addImage }
-        ToolbarButton { action: deleteMemo }
     }
 
+    head.actions: [colorToolAction, deleteMemo]
+
     // Background
     Rectangle {
         id: bg
 
=== modified file 'components/MultiSelectionHandler.qml'
--- components/MultiSelectionHandler.qml	2014-08-31 22:11:24 +0000
+++ components/MultiSelectionHandler.qml	2014-09-27 18:44:34 +0000
@@ -18,58 +18,55 @@
 import QtQuick 2.0
 import Ubuntu.Components 1.1
 
-Item {
+PageHeadState {
     id: rootItem
 
-    property bool active: false
-
-    property Page target
-    property ToolbarItems tools
     property string title
 
     property var indexes: []
     property int count: rootItem.indexes.length
-
-    QtObject {
-        id: d
-        property ToolbarItems tools
-        property string title
-    }
-
-    // Provide a visual feedback when active
-    Rectangle {
-        id: headerBg
-        parent: target.header
-        z: -10
-
-        width: target.width
-        height: target.header.height
-        color: "#19B6EE"   // Cyan
-        visible: rootItem.active
-    }
-
-    onActiveChanged: {
-        if(active) {
-            // Copy current toolbar and title
-            d.tools = target.tools
-            d.title = target.title
-
-            // Show new header
-            target.tools = rootItem.tools
-            target.title = rootItem.title
-
-        } else {
-            target.tools = d.tools
-            target.title = d.title
-
-            // Clean the model
-            rootItem.indexes = []
-        }
-    }
-
-    Connections {
-        target: rootItem.target
-        onActiveChanged: rootItem.active = false
+    property Page targetPage
+
+    head: targetPage.head
+
+    backAction: Action {
+        text: i18n.tr("Cancel")
+        iconName: "back"
+        onTriggered: targetPage.state = "default"
+    }
+
+    contents: Item {
+        anchors.fill: parent
+
+        Connections {
+            target: targetPage
+            onStateChanged: {
+                if (targetPage.state !== "multiSelection") {
+                    // Clean the model
+                    rootItem.indexes = []
+                }
+            }
+        }
+
+        Label {
+            fontSize: "x-large"
+            text: (rootItem.count == 0) ? i18n.tr("No item selected")
+                                        : (rootItem.count == 1) ? i18n.tr("%1 item selected").arg(rootItem.count)
+                                                                : i18n.tr("%1 items selected").arg(rootItem.count)
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        // Provide a visual feedback when active
+        Rectangle {
+            id: headerBg
+            parent: targetPage.header
+            z: -10
+
+            width: targetPage.width
+            height: targetPage.header.height
+            color: "#19B6EE"   // Cyan
+            visible: mainPage.state == "multiSelection"
+        }
     }
 
     signal indexAdded(var index)
@@ -84,8 +81,6 @@
 
                 // Update count and header
                 rootItem.count = rootItem.indexes.length
-                target.tools = rootItem.tools
-                target.title = rootItem.title
 
                 // Return false if the index is removed.
                 rootItem.indexRemoved(index)
@@ -98,13 +93,10 @@
 
         // Update count
         rootItem.count = rootItem.indexes.length
-        target.tools = rootItem.tools
-        target.title = rootItem.title
 
         // Sort indexes, so they're processed ascending if requested. This simplify the code of the functions that use this array.
         indexes.sort(function(a,b) {return a-b})
 
-
         // Return true if the index is added
         rootItem.indexAdded(index)
         return true