Merge lp:~verzegnassi-stefano/quick-memo/new-theme into lp:quick-memo

[Stefano Verzegnassi]

Use the new header style with a colored background and the origami style

Use the new header style with a colored background and the origami style

[lp:~verzegnassi-stefano/quick-memo/new-theme]

68. By Stefano Verzegnassi on 2015-08-03

* Use icon for bottomEdge tip
* Small fixes

=== modified file 'app/common/ColorDialog.qml'
--- app/common/ColorDialog.qml	2015-04-13 21:03:47 +0000
+++ app/common/ColorDialog.qml	2015-08-03 11:33:33 +0000
@@ -24,7 +24,7 @@
 
     title: i18n.tr("Pick a color")
 
-    property var colors: ["#fdfdfd", "#e9674d", "#f0a250", "#eec34f", "#aea79f", "#95c253", "#8bbee2", "#e46f8e"]
+    property var colors: ["#95c253", "#e9674d", "#f0a250", "#eec34f", "#aea79f", "#8bbee2", "#e46f8e"]
     property color selectedColor: colors[0]
 
     property bool showTick: true
 
=== removed file 'app/common/PageBackground.qml'
--- app/common/PageBackground.qml	2015-04-13 21:03:47 +0000
+++ app/common/PageBackground.qml	1970-01-01 00:00:00 +0000
@@ -1,25 +0,0 @@
-import QtQuick 2.0
-
-// Background
-Rectangle {
-    id: bg
-    anchors.fill: parent
-    z: -10; opacity: 0.5
-
-    property bool __parentPageAboutToBeClosed: false
-
-    /* MainView clips its content, so that it does not overlap the header.
-       We need to bypass this, using another Rectangle that specifically overlap the header. */
-    Rectangle {
-        parent: root.header
-        z: -10; opacity: 0.5
-
-        width: root.width
-        height: root.header.height
-        color: bg.color
-
-        // FIXME: Header background should progressively change opacity to 0.0 when the BottomEdge page is dismissed.
-        visible: !bg.__parentPageAboutToBeClosed
-    }
-}
-
 
=== modified file 'app/common/PageWithBottomEdge.qml'
--- app/common/PageWithBottomEdge.qml	2015-04-13 21:03:47 +0000
+++ app/common/PageWithBottomEdge.qml	2015-08-03 11:33:33 +0000
@@ -71,6 +71,9 @@
     property alias bottomEdgePageComponent: edgeLoader.sourceComponent
     property alias bottomEdgePageSource: edgeLoader.source
     property alias bottomEdgeTitle: tipLabel.text
+    property alias bottomEdgeIconName: tipIcon.name
+    property alias bottomEdgeIconSource: tipIcon.source
+    property alias bottomEdgeColor: tip.color
     property bool bottomEdgeEnabled: true
     property int bottomEdgeExpandThreshold: page.height * 0.2
     property int bottomEdgeExposedArea: bottomEdge.state !== "expanded" ? (page.height - bottomEdge.y - bottomEdge.tipHeight) : _areaWhenExpanded
@@ -183,6 +186,27 @@
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignHCenter
             opacity: tip.hidden ? 0.0 : 1.0
+            color: ColorUtils.luminance(tip.color) >= 0.85 ? UbuntuColors.darkGrey : "#FFFFFF"
+            visible: text
+
+            Behavior on opacity {
+                UbuntuNumberAnimation {
+                    duration: UbuntuAnimation.SnapDuration
+                }
+            }
+        }
+        Icon {
+            id: tipIcon
+            anchors {
+                top: parent.top
+                horizontalCenter: parent.horizontalCenter
+                topMargin: units.gu(0.5)
+            }
+            height: bottomEdge.tipHeight - units.gu(0.5)
+            visible: source.length > 0 || name.length > 0
+            opacity: tip.hidden ? 0.0 : 1.0
+            color: ColorUtils.luminance(tip.color) >= 0.85 ? UbuntuColors.darkGrey : "#FFFFFF"
+
             Behavior on opacity {
                 UbuntuNumberAnimation {
                     duration: UbuntuAnimation.SnapDuration
 
=== modified file 'app/main.qml'
--- app/main.qml	2015-04-13 21:06:51 +0000
+++ app/main.qml	2015-08-03 11:33:33 +0000
@@ -34,6 +34,9 @@
 
     anchorToKeyboard: true
 
+    property color headerBackgroundColor: "#95c253"
+    readonly property color defaulteaderBackgroundColor: "#95c253"
+
     // Use GridView to display data. This setting is used by any page that provides data from models.
     property bool useGridView: true
 
@@ -54,6 +57,10 @@
         var toast = component.createObject(root, {"text" : text});
     }
 
+    Component.onCompleted: {
+        header.style = Qt.createComponent(Qt.resolvedUrl("theme/PageHeadStyle.qml"))
+    }
+
 /*
  Not now, but in the future:
  TODO: Layout convergence
 
=== added directory 'app/theme'
=== added file 'app/theme/OverflowPanel.qml'
--- app/theme/OverflowPanel.qml	1970-01-01 00:00:00 +0000
+++ app/theme/OverflowPanel.qml	2015-08-03 11:33:33 +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.3
+import Ubuntu.Components.Popups 1.0
+
+Popover {
+    property bool square: true
+}
 
=== added file 'app/theme/PageHeadButton.qml'
--- app/theme/PageHeadButton.qml	1970-01-01 00:00:00 +0000
+++ app/theme/PageHeadButton.qml	2015-08-03 11:33:33 +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.3
+import Ubuntu.Components 1.1
+
+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 'app/theme/PageHeadStyle.qml'
--- app/theme/PageHeadStyle.qml	1970-01-01 00:00:00 +0000
+++ app/theme/PageHeadStyle.qml	2015-08-03 11:33:33 +0000
@@ -0,0 +1,552 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ * Copyright 2015 Stefano Verzegnassi <[e-mail]>
+ *
+ * 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.3
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0
+import Ubuntu.Components.ListItems 1.0 as ListItem
+import Ubuntu.Components.Styles 1.1 as Style
+
+Style.PageHeadStyle {
+    id: headerStyle
+
+    contentHeight: units.gu(7)
+    fontWeight: Font.Light
+    fontSize: "x-large"
+    textLeftMargin: units.gu(2)
+    maximumNumberOfActions: 3
+
+    property color buttonColor: ColorUtils.luminance(bg.color) >= 0.85 ? UbuntuColors.darkGrey : "#FFFFFF"
+    property color titleColor: ColorUtils.luminance(bg.color) >= 0.85 ? UbuntuColors.darkGrey : "#FFFFFF"
+    property color panelBackgroundColor: UbuntuColors.orange
+    property color panelHighlightColor: Theme.palette.selected.background
+    property color panelForegroundColor: ColorUtils.luminance(bg.color) >= 0.85 ? UbuntuColors.darkGrey : "#FFFFFF"
+    property color sectionColor: ColorUtils.luminance(bg.color) >= 0.85 ? UbuntuColors.darkGrey : "#FFFFFF"
+    property color sectionHighlightColor: Theme.palette.selected.background
+
+    implicitHeight: headerStyle.contentHeight + divider.height
+
+    Rectangle {
+        id: bg
+        anchors.fill: parent
+        color: root.headerBackgroundColor
+
+        Image {
+            anchors {
+                right: parent.right
+                top: parent.top
+                bottom: parent.bottom
+            }
+            width: units.gu(20)
+
+            fillMode: Image.PreserveAspectCrop
+            source: Qt.resolvedUrl("origami.png")
+        }
+    }
+
+    Item {
+        id: divider
+        anchors {
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+
+        height: sectionsRow.visible ? units.gu(3) : 0
+        property PageHeadSections sections: styledItem.config.sections
+
+        Row {
+            id: sectionsRow
+
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left; right: parent.right
+                leftMargin: units.gu(2)
+                rightMargin: units.gu(2)
+            }
+
+            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
+                delegate: SectionButton {}
+            }
+        }
+    }
+
+    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: headerStyle.panelForegroundColor
+            }
+
+            PageHeadButton {
+                id: backButton
+                objectName: "backButton"
+
+                iconName: "back"
+                visible: styledItem.pageStack !== null &&
+                         styledItem.pageStack !== undefined &&
+                         styledItem.pageStack.depth > 1 &&
+                         !styledItem.config.backAction
+
+                text: "back"
+                color: headerStyle.panelForegroundColor
+
+                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 'app/theme/SectionButton.qml'
--- app/theme/SectionButton.qml	1970-01-01 00:00:00 +0000
+++ app/theme/SectionButton.qml	2015-08-03 11:33:33 +0000
@@ -0,0 +1,52 @@
+/* Copyright (C) 2014-2015 Dan Chapman <[e-mail]>
+   Copyright (C) 2015 Stefano Verzegnassi <[e-mail]>
+
+   This file is part of Dekko email client for Ubuntu Devices/
+
+   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; either version 2 of
+   the License or (at your option) 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.3
+import Ubuntu.Components 1.1
+
+AbstractButton {
+    id: sectionButton
+
+    width: sectionsRow.width / sectionsRepeater.count
+    height: divider.height
+
+    anchors.verticalCenter: parent ? parent.verticalCenter : undefined
+    enabled: sectionsRow.enabled
+
+    property bool selected: index === divider.sections.selectedIndex
+    onClicked: divider.sections.selectedIndex = index;
+
+    Label {
+        text: modelData
+        color: headerStyle.sectionColor
+        opacity: sectionButton.selected ? 1.0 : 0.65
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+    }
+
+    Rectangle {
+        color: headerStyle.sectionColor
+        opacity: sectionButton.selected ? 1.0 : 0.65
+
+        height: units.gu(0.3)
+        width: parent.width
+        anchors.bottom: parent.bottom
+    }
+}
 
=== added file 'app/theme/origami.png'
 Binary files app/theme/origami.png	1970-01-01 00:00:00 +0000 and app/theme/origami.png	2015-08-03 11:33:33 +0000 differ
=== added file 'app/theme/parent_theme'
--- app/theme/parent_theme	1970-01-01 00:00:00 +0000
+++ app/theme/parent_theme	2015-08-03 11:33:33 +0000
@@ -0,0 +1,1 @@
+Ubuntu.Components.Themes.Ambiance
 
=== modified file 'app/ui/EditMemoPage.qml'
--- app/ui/EditMemoPage.qml	2015-04-13 21:03:47 +0000
+++ app/ui/EditMemoPage.qml	2015-08-03 11:33:33 +0000
@@ -44,9 +44,6 @@
     head.backAction: editMemo ? backEditMemo : backNewMemo
     head.actions: [colorToolAction, deleteMemo, saveMemo]
 
-    // Background
-    PageBackground { id: bg }
-
     // flickable property needs to be explicitly set, to avoid a binding loop for memoPage.height
     flickable: flickable
     Flickable {
@@ -138,7 +135,7 @@
 
         title.text = memoObj.contents.title
         desc.text = memoObj.contents.text
-        bg.color = memoObj.contents.color
+        root.headerBackgroundColor = memoObj.contents.color
 
         // Append list items provided by NoteModel
         listManager.model.clear()
@@ -157,7 +154,7 @@
         desc.textReallyChanged.connect(updateNote)
         listManager.listChanged.connect(updateNote)
         picsView.picsModelChanged.connect(updateNote)
-        bg.colorChanged.connect(updateNote)
+        root.headerBackgroundColorChanged.connect(updateNote)
 
         updateLabel.refresh()
     }
@@ -172,7 +169,7 @@
         obj.contents.title = title.text
         obj.contents.text = desc.text
         // The char '#' from the hex color is not correctly parse by JSON. We add an empty string, so that it works well.
-        obj.contents.color = "" +  bg.color
+        obj.contents.color = "" +  root.headerBackgroundColor
         obj.contents.list = listManager.exportModel()
         obj.contents.pictures = picsView.exportModel()
 
@@ -185,7 +182,7 @@
     function addNote() {
         notes.addNote(title.text,
                       desc.text,
-                      "" + bg.color,    // The char '#' from the hex color is not correctly parse by JSON. We add an empty string, so that it works well.
+                      "" + root.headerBackgroundColor,    // The char '#' from the hex color is not correctly parse by JSON. We add an empty string, so that it works well.
                       listManager.exportModel(),
                       picsView.exportModel())
         pageStack.pop()
@@ -270,7 +267,7 @@
             text: i18n.tr("Cancel")
             gradient: UbuntuColors.greyGradient
             onClicked: deleteDialog.hide()
-            visible: !emptyMemo
+            visible: !deleteDialog.emptyMemo
         }
         Button {
             text: i18n.tr("Delete")
@@ -278,7 +275,7 @@
             onClicked: {
                 deleteDialog.hide()
                 pageStack.pop();
-                pageStack.push(mainPage)
+                pageStack.push(Qt.resolvedUrl("MainPage.qml"))
                 notes.deleteNote(index)
 
                 root.showNotification(i18n.tr("Memo deleted!"))
@@ -316,10 +313,10 @@
         ColorDialog {
             id: colorDialog
 
-            selectedColor: bg.color
+            selectedColor: root.headerBackgroundColor
             onColorPicked: {
                 if (isChanged)
-                    bg.color = selectedColor
+                    root.headerBackgroundColor = selectedColor
 
                 PopupUtils.close(colorDialog)
             }
 
=== modified file 'app/ui/MainPage.qml'
--- app/ui/MainPage.qml	2015-04-26 17:08:56 +0000
+++ app/ui/MainPage.qml	2015-08-03 11:33:33 +0000
@@ -278,8 +278,17 @@
         }
     }
 
-    bottomEdgeTitle: i18n.tr("New memo")
+    //bottomEdgeTitle: i18n.tr("New memo")
+    bottomEdgeIconName: "note-new"
+    bottomEdgeColor: "#95c253"
     bottomEdgePageComponent: EditMemoPage {}
     // Disable bottomEdge when MultiSelectionHandler is active
     bottomEdgeEnabled: mainPage.state !== "multiSelection"
+
+    onVisibleChanged: {
+        if (visible) {
+            // Restore default color
+            root.headerBackgroundColor = root.defaulteaderBackgroundColor
+        }
+    }
 }
 
=== modified file 'copyright'
--- copyright	2015-01-17 20:25:00 +0000
+++ copyright	2015-08-03 11:33:33 +0000
@@ -7,30 +7,50 @@
 Copyright: 2014-2015, Stefano Verzegnassi
 License: GPL-3
 
-Files: components/PageWithBottomEdge.qml
+Files: app/components/PageWithBottomEdge.qml
 Copyright: 2014, Canonical Ltd.
 License: GPL-3
 
-Files: ubuntucomponents/TextInputPopover.qml
-       ubuntucomponents/TextCursor.qml
+Files: app/ubuntucomponents/TextInputPopover.qml
+       app/ubuntucomponents/TextCursor.qml
 Copyright: 2012, Canonical Ltd.
 License: LGPL-3
 
-Files: ubuntucomponents/TextField.qml
+Files: app/ubuntucomponents/TextField.qml
 Copyright: 2012, Canonical Ltd.
 License: LGPL-3
 Note: There are some changed to this file
 
-Files: ubuntucomponents/InputHandler.qml
+Files: app/ubuntucomponents/InputHandler.qml
 Copyright: 2014, Canonical Ltd.
 License: LGPL-3
 Note: There are some changed to this file
 
-Files: components/HorizontalFlowListView.qml
+Files: app/components/HorizontalFlowListView.qml
 Copyright: 2012, Ruediger Gad
            2014, Stefano Verzegnassi
 License: LGPL-3+
 
+Files: app/theme/*
+Copyright: 2014, Canonical Ltd.
+License: LGPL-3
+
+Files: app/theme/PageHeadStyle.qml
+Copyright: 2014, Canonical Ltd.
+           2015, Stefano Verzegnassi
+License: LGPL-3
+
+Files: app/theme/SectionButton.qml
+Copyright: 2014-2015 Dan Chapman
+           2015 Stefano Verzegnassi
+License: GPL-2 or GPL-3
+
+Files: app/theme/origami.png
+Copyright: 2015 Stefano Verzegnassi
+License: GPL-2+
+Note: This is a derivative work of "Ubuntu-UI-Toolkit" from Kevin Feyder, released under the terms of GNU GPL v2 (or later).
+See https://github.com/halfsail/Ubuntu-UI-Tookit for further informations.
+
 Files: img/palette.svg
 Copyright: 2014, Stefano Verzegnassi
 License: CC-BY-SA-3.0
@@ -73,6 +93,20 @@
  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/>.
 
+License: GPL-2 or GPL-3
+ 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; either version 2 of
+ the License or (at your option) 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/>.
+
 License: CC-BY-SA-3.0
  This work is licensed under the Creative Commons Attribution-ShareAlike 3.0
  Unported License. To view a copy of this license, visit
 
=== modified file 'po/quick-memo.pot'
--- po/quick-memo.pot	2015-04-26 17:08:56 +0000
+++ po/quick-memo.pot	2015-08-03 11:33:33 +0000
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2015-04-26 19:07+0200\n"
+"POT-Creation-Date: 2015-06-16 01:23+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -27,8 +27,8 @@
 msgstr ""
 
 #: ../app/common/ColorDialog.qml:151
-#: ../app/mainPage/MultiSelectionHandler.qml:33 ../app/ui/EditMemoPage.qml:270
-#: ../app/ui/EditMemoPage.qml:298 ../app/ui/MainPage.qml:263
+#: ../app/mainPage/MultiSelectionHandler.qml:33 ../app/ui/EditMemoPage.qml:267
+#: ../app/ui/EditMemoPage.qml:295 ../app/ui/MainPage.qml:263
 msgid "Cancel"
 msgstr ""
 
@@ -47,7 +47,7 @@
 
 #. TRANSLATORS: This is a custom text for the "enter" key of
 #. the on-screen keyboard (max 4 char, so it's not elided)
-#: ../app/editPage/ListManager.qml:289 ../app/ui/EditMemoPage.qml:85
+#: ../app/editPage/ListManager.qml:289 ../app/ui/EditMemoPage.qml:82
 msgid "Next"
 msgstr ""
 
@@ -113,79 +113,79 @@
 msgid "Add a new memo"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:79
+#: ../app/ui/EditMemoPage.qml:76
 msgid "No title"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:93
+#: ../app/ui/EditMemoPage.qml:90
 msgid "No description"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:114
+#: ../app/ui/EditMemoPage.qml:111
 #, qt-format
 msgid "Last update: %1"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:193
+#: ../app/ui/EditMemoPage.qml:190
 msgid "Memo saved!"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:199
+#: ../app/ui/EditMemoPage.qml:196
 msgid "Save"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:208 ../app/ui/EditMemoPage.qml:266
+#: ../app/ui/EditMemoPage.qml:205 ../app/ui/EditMemoPage.qml:263
 #: ../app/ui/MainPage.qml:220 ../app/ui/MainPage.qml:259
 msgid "Delete memo"
 msgid_plural "Delete memos"
 msgstr[0] ""
 msgstr[1] ""
 
-#: ../app/ui/EditMemoPage.qml:215 ../app/ui/MainPage.qml:213
+#: ../app/ui/EditMemoPage.qml:212 ../app/ui/MainPage.qml:213
 msgid "Change memo color"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:240 ../app/ui/MainPage.qml:248
+#: ../app/ui/EditMemoPage.qml:237 ../app/ui/MainPage.qml:248
 msgid "Memo updated!"
 msgid_plural "Memos updated!"
 msgstr[0] ""
 msgstr[1] ""
 
-#: ../app/ui/EditMemoPage.qml:255
+#: ../app/ui/EditMemoPage.qml:252
 msgid "Memo aborted!"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:266
+#: ../app/ui/EditMemoPage.qml:263
 msgid "Empty memo"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:267
+#: ../app/ui/EditMemoPage.qml:264
 msgid "This memo has no content."
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:267 ../app/ui/MainPage.qml:260
+#: ../app/ui/EditMemoPage.qml:264 ../app/ui/MainPage.qml:260
 msgid "Are you sure?"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:276 ../app/ui/MainPage.qml:268
+#: ../app/ui/EditMemoPage.qml:273 ../app/ui/MainPage.qml:268
 msgid "Delete"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:284 ../app/ui/MainPage.qml:275
+#: ../app/ui/EditMemoPage.qml:281 ../app/ui/MainPage.qml:275
 msgid "Memo deleted!"
 msgid_plural "Memos deleted!"
 msgstr[0] ""
 msgstr[1] ""
 
-#: ../app/ui/EditMemoPage.qml:294
+#: ../app/ui/EditMemoPage.qml:291
 msgid "Discard changes?"
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:295
+#: ../app/ui/EditMemoPage.qml:292
 msgid "Your memo will be PERMANENTLY lost."
 msgstr ""
 
-#: ../app/ui/EditMemoPage.qml:303
+#: ../app/ui/EditMemoPage.qml:300
 msgid "Go back!"
 msgstr ""