Merge lp:~qqworini/ubuntu-rssreader-app/optimization-0 into lp:~ubuntu-shorts-dev/ubuntu-rssreader-app/trunk

[Joey Chan]

optimization for gridview, articles, input method, edit-topic

optimization:
1. dynamic loads in gridview
2. now all articles' images has max height
3. database, table article add column "media_group"
4. optimize edit-topic, now click other topics will also cancel editing
5. virtual keybroad now will hide itself automatically
6. edit-feed page, feed name and feed url are read-only now

optimization for gridview, articles, input method, edit-topic

optimization:
1. dynamic loads in gridview
2. now all articles' images has max height
3. database, table article add column "media_group"
4. optimize edit-topic, now click other topics will also cancel editing
5. virtual keybroad now will hide itself automatically
6. edit-feed page, feed name and feed url are read-only now

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:81
http://91.189.93.70:8080/job/ubuntu-rssreader-app-ci/61/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests/563
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-rssreader-app-precise-amd64-ci/61
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-rssreader-app-quantal-amd64-ci/61
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-rssreader-app-raring-amd64-ci/61
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-rssreader-app-saucy-amd64-ci/61

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-rssreader-app-ci/61/rebuild

review: Needs Fixing (continuous-integration)

[Roman Shchekin (mrqtros)]

Wow, Joey, works pretty fine, and consumes only ~60 mb of memory in start (empty app ~40).

[Roman Shchekin (mrqtros)]

I want to use "top approve" of course, but someone from Canonical may want take a look too :)

review: Approve

[Roman Shchekin (mrqtros)]

This merge fixes slow image loading too (because if all components are created simultaneously they are simultaneously too trying too download their image, even components in background. And user must w8)

[Joey Chan (qqworini)]

I added a simple algorithm, lets the gridview only loads 10 articles at the beginning, then loads more when it detect about to reach the edge.

> This merge fixes slow image loading too (because if all components are created
> simultaneously they are simultaneously too trying too download their image,
> even components in background. And user must w8)

[Roman Shchekin (mrqtros)]

Yes, programming must be simple to reach prefect results ;)
App now starts much faster and uses less memory =)

30.09.13 10:44 Joey Chan написал(а):

I added a simple algorithm, lets the gridview only loads 10 articles at the beginning, then loads more when it detect about to reach the edge.

> This merge fixes slow image loading too (because if all components are created
> simultaneously they are simultaneously too trying too download their image,
> even components in background. And user must w8)

--
https://code.launchpad.net/~qqworini/ubuntu-rssreader-app/optimization-0/+merge/188259

You are reviewing the proposed merge of lp:~qqworini/ubuntu-rssreader-app/optimization-0 into lp:ubuntu-rssreader-app.

[David Planella (dpm)]

On Mon, Sep 30, 2013 at 7:47 AM, Roman Shchekin <email address hidden> wrote:

> Review: Approve
>
> I want to use "top approve" of course, but someone from Canonical may want
> take a look too :)
>
>
Feel free to top-approve if you think the changes make sense and there is
nothing to fix, no need to block on approval from Canonical folks (unless
you explicitly want someone to review it). These apps are all
community-driven and meritocracy-driven, so you should think of Canonical
employees as reviewers with the same status as you guys, we're all Ubuntu
community members :)

Cheers,
David.

[Roman Shchekin (mrqtros)]

Thanks, David, I can do it in evening only, can you please approve? =)

Btw, I've got device today =)

30.09.13 13:30 David Planella написал(а):

On Mon, Sep 30, 2013 at 7:47 AM, Roman Shchekin <email address hidden> wrote:

> Review: Approve
>
> I want to use "top approve" of course, but someone from Canonical may want
> take a look too :)
>
>
Feel free to top-approve if you think the changes make sense and there is
nothing to fix, no need to block on approval from Canonical folks (unless
you explicitly want someone to review it). These apps are all
community-driven and meritocracy-driven, so you should think of Canonical
employees as reviewers with the same status as you guys, we're all Ubuntu
community members :)

Cheers,
David.

--
https://code.launchpad.net/~qqworini/ubuntu-rssreader-app/optimization-0/+merge/188259

You are reviewing the proposed merge of lp:~qqworini/ubuntu-rssreader-app/optimization-0 into lp:ubuntu-rssreader-app.

[David Planella (dpm)]

Sure, proxy-approving :)

[David Planella (dpm)]

Ah, sorry, I hadn't realized: tests are failing, so I can't top-approve. Joey: could you have a look at the tests that are failing and get in touch with fginther or balloons on IRC if you need help? Thanks!

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:81
http://91.189.93.70:8080/job/ubuntu-rssreader-app-ci/62/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests/572
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-rssreader-app-precise-amd64-ci/62
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-rssreader-app-quantal-amd64-ci/62
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-rssreader-app-raring-amd64-ci/62
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-rssreader-app-saucy-amd64-ci/62

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-rssreader-app-ci/62/rebuild

review: Needs Fixing (continuous-integration)

[Joey Chan (qqworini)]

I asked balloons, he said that is the same problem (add feed toolbar missing) happened, but I can't reproduce it ...

[Nicholas Skaggs (nskaggs)]

Let me update my device quickly and run again. The tests pass on the desktop, but fail to open the toolbar on the device.

[Nicholas Skaggs (nskaggs)]

On the latests phone build, the tests still fail to open the toolbar. The current tests don't have this issue, so this is definitely a regression that needs fixed before merging this.

(The current trunk tests suffer from the missing 'next' button on the 'add feeds' screen)

review: Needs Fixing

[Joey Chan (qqworini)]

Could somebody help try this branch, I still can't reproduce the "miss-toolbar-bug", thanks

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

review: Approve (continuous-integration)

[Nicholas Skaggs (nskaggs)]

As there are pending sdk issues with the application, and this merge fixes one of those issues, I approved despite the failing tests. This brings us closer to the tests completely working (because the app is working properly with these changes)

=== modified file 'OrganicGrid.qml'
--- OrganicGrid.qml	2013-09-22 15:38:03 +0000
+++ OrganicGrid.qml	2013-09-30 04:16:05 +0000
@@ -14,6 +14,14 @@
     property bool isAll: false
     property var feedArray: []
 
+    // Initial values for the starting column of items
+    property int xEdge : 0
+    property int lastColumnX : 0
+    property int itemY : randomMargin()
+    property var sequence : [0,1,0,1,2,1,0,0,2,1,0,1,0,0]
+
+    property int currentLoadedIndex: 0
+
     Component.onCompleted: {
         prepareComponents()
     }
@@ -77,6 +85,7 @@
       */
     function reload() {
         console.time("reload_grid")
+//        connFlickable.target = null
         clear()
         // Decide if we should load all articles in our database or a subset.
         if (!isAll)
@@ -105,16 +114,18 @@
         }
 
         // Initial values for the starting column of items
-        var xEdge = 0;
-        var lastColumnX = 0;
-        var y = randomMargin();
+        xEdge = 0;
+        lastColumnX = 0;
+        itemY = randomMargin();
 
         // A hard-coded sequence that gives an organic look, but is not
         // completely random
-        var sequence = [0,1,0,1,2,1,0,0,2,1,0,1,0,0];
+//        var sequence = [0,1,0,1,2,1,0,0,2,1,0,1,0,0];
         // var componentsPath = "article_items/" + "Article"
 
-        for(var i = 0; i < articleModel.count; i++) {
+        currentLoadedIndex = 0
+        var numAdd = articleModel.count > 10 ? 10 : articleModel.count
+        for(var i = 0; i < numAdd /*articleModel.count*/; i++) {
             var article = articleModel.get(i);
 //            var imageArray = ImageSeparator.separate(article.content)
             var imageArray = [article.image]
@@ -172,8 +183,8 @@
             // This is the actual item that will be on display
             var articleItem = component.createObject(itemContainer /*organicFlickable.contentItem*/, properties);
 
-            if(y + articleItem.height > organicGridRoot.height)  {
-                y = randomMargin();
+            if(itemY + articleItem.height > organicGridRoot.height)  {
+                itemY = randomMargin();
                 xEdge = lastColumnX;
             }
 
@@ -185,9 +196,9 @@
             x += randomMargin();
 
             articleItem.x = x
-            articleItem.y = y
+            articleItem.y = itemY
 
-            // Check for collisions with all other items
+            // Check for collisions with all other itemsy
             // mrqtros: Now we are look only at 0xA last items.
             //for(var j = 0; j < rectangleList.length; j++) { // mrqtros
             for(var j = Math.max(0, rectangleList.length - 0xA); j < rectangleList.length; j++) {
@@ -202,15 +213,124 @@
 
             rectangleList.push(articleItem)
 
-            // Increment y for the next item
-            y += articleItem.height + randomMargin();
+            // Increment itemY for the next item
+            itemY += articleItem.height + randomMargin();
         }
 
         organicFlickable.scrollToStart()
+        currentLoadedIndex += numAdd
+//        connFlickable.target = organicFlickable
         console.timeEnd("reload_grid")
     }
 
     /*!
+      * dynamic loads others articles in organic view.
+      */
+    function loadMore () {
+        console.time("loadmore")
+        var numAdd
+        var tempAdd = articleModel.count - currentLoadedIndex
+        if (tempAdd > 20) {
+            numAdd = 20
+        }
+        else if (tempAdd > 0) {
+            numAdd = tempAdd
+        }
+        else
+            return
+
+        for(var i = currentLoadedIndex; i < currentLoadedIndex + numAdd /*articleModel.count*/; i++) {
+            var article = articleModel.get(i);
+//            var imageArray = ImageSeparator.separate(article.content)
+            var imageArray = [article.image]
+//            console.log("imageArray: ", imageArray)
+            var hasImage = (article.image !== "");
+
+            // Pick the type of size we will use for this item from the sequence
+            var sizeType = sequence[i % sequence.length];
+            var alignType = Math.round(Math.random())
+
+            //var alignName
+            var alignIndex
+
+            if(!hasImage) {
+                switch(alignType) {
+                case 0:
+                    //alignName = "TextA"
+                    alignIndex = 0
+                    break;
+                case 1:
+                    //alignName = "TextB"
+                    alignIndex = 1
+                    break;
+                }
+                //noImageName += "NoImage";
+                sizeType = 0;
+            }
+            else {
+                switch(alignType) {
+                case 0:
+                    //alignName = "OneImgA"
+                    alignIndex = 2
+                    break;
+                case 1:
+                    //alignName = "FullImg"
+                    alignIndex = 3
+                    break;
+                }
+            }
+
+            var component = delegateComponents[alignIndex] //Qt.createComponent(componentName);
+
+            var properties = {
+                "modelItem": article,
+                "imageArray": imageArray,
+                "rssModel": articleModel,
+                "modelIndex": article.modelIndex
+            }
+
+            // This is the actual item that will be on display
+            var articleItem = component.createObject(itemContainer /*organicFlickable.contentItem*/, properties);
+
+            if(itemY + articleItem.height > organicGridRoot.height)  {
+                itemY = randomMargin();
+                xEdge = lastColumnX;
+            }
+
+            // The xEdge is where the last "column" of items were placed last
+            // This keeps us moving forward in x-direction
+            var x = xEdge + randomMargin();
+
+            // We add some extra random margin to make it look a bit more organic
+            x += randomMargin();
+
+            articleItem.x = x
+            articleItem.y = itemY
+
+            // Check for collisions with all other itemsy
+            // mrqtros: Now we are look only at 0xA last items.
+            //for(var j = 0; j < rectangleList.length; j++) { // mrqtros
+            for(var j = Math.max(0, rectangleList.length - 0xA); j < rectangleList.length; j++) {
+                var rect2 = rectangleList[j]
+                if(checkCollision(articleItem, rect2)) {
+                    articleItem.x = rect2.x + rect2.width + randomMargin();
+                }
+            }
+
+            // Did we move the x-edge value further to the right than before?
+            lastColumnX = Math.max(articleItem.x, lastColumnX);
+
+            rectangleList.push(articleItem)
+
+            // Increment itemY for the next item
+            itemY += articleItem.height + randomMargin();
+        }
+        currentLoadedIndex += numAdd
+        organicFlickable.canAdd = true
+        console.timeEnd("loadmore")
+    }
+
+    /*!
       * use Flickable as articles container
       */
     Flickable {
@@ -221,7 +341,6 @@
 
         Item {
             id: itemContainer
-            //            color: "white"
             anchors {
                 left: parent.left
                 top: parent.top
@@ -231,12 +350,17 @@
             height: parent.height
         }
 
-//        Behavior on contentX {
-//            NumberAnimation {
-//                duration: 600
-//                easing.type: Easing.InOutQuart
-//            }
-//        }
+        /*!
+          * use onContentXChanged signal to detect if user is about to flick to edge
+          * then load more articles
+          */
+        property bool canAdd: true
+        onContentXChanged: {
+            if ((visibleArea.xPosition > (1 - visibleArea.widthRatio * 1.5)) && canAdd ) {
+                canAdd = false
+                loadMore()
+            }
+        }
 
         function scrollToStart() {
             contentX = 0

=== modified file 'article_items/ArticleFullImg.qml'
--- article_items/ArticleFullImg.qml	2013-09-22 15:05:33 +0000
+++ article_items/ArticleFullImg.qml	2013-09-30 04:16:05 +0000
@@ -38,6 +38,7 @@
             width: parent.width
             height: pic.height > (articleFullImg.height - units.gu(1.5)) ? (articleFullImg.height - units.gu(1.5)) : pic.height
             radius: "medium"
+            opacity: height
             image: Image {
                 id: pic
                 width: {
@@ -48,6 +49,9 @@
                 source: imageArray[0]
                 sourceSize.width: uPic.width
             }
+
+            Behavior on height { UbuntuNumberAnimation{} }
+            Behavior on opacity { NumberAnimation{} }
         }
     }
 

=== modified file 'article_items/ArticleOneImgA.qml'
--- article_items/ArticleOneImgA.qml	2013-09-22 15:05:33 +0000
+++ article_items/ArticleOneImgA.qml	2013-09-30 04:16:05 +0000
@@ -26,28 +26,39 @@
         }
     }
 
-    UbuntuShape {
-        id: uPic
-
+    Item {
+        id: shapeClipper
         width: parent.width
-        height: pic.height /*> units.gu(12) ? pic.height : units.gu(12)*/
-        radius: "medium"
-        image: Image {
-            id: pic
-            width: {
-                if (implicitHeight < 50 || implicitWidth < 50) return 0
-                else return uPic.width
+        height: uPic.height > (articleOneImgA.height * 0.75) ? (articleOneImgA.height * 0.75) : uPic.height
+        clip: true
+
+        UbuntuShape {
+            id: uPic
+
+            width: parent.width
+            height: pic.height /*> units.gu(12) ? pic.height : units.gu(12)*/
+            radius: "medium"
+            opacity: height
+            image: Image {
+                id: pic
+                width: {
+                    if (implicitHeight < 50 || implicitWidth < 50) return 0
+                    else return uPic.width
+                }
+                height: width * implicitHeight / implicitWidth
+                source: imageArray[0]
+                sourceSize.width: uPic.width
             }
-            height: width * implicitHeight / implicitWidth
-            source: imageArray[0]
-            sourceSize.width: uPic.width
+
+            Behavior on height { UbuntuNumberAnimation{} }
+            Behavior on opacity { NumberAnimation{} }
         }
     }
 
     Column {
         anchors {
             left: parent.left; right: parent.right;
-            top: uPic.bottom; bottom: parent.bottom
+            top: shapeClipper.bottom; bottom: parent.bottom
             topMargin: units.gu(2); bottomMargin: units.gu(1.5);
             leftMargin: units.gu(1); rightMargin: units.gu(1.5)
         }

=== modified file 'databasemodule_v2.js'
--- databasemodule_v2.js	2013-09-28 14:30:29 +0000
+++ databasemodule_v2.js	2013-09-30 04:16:05 +0000
@@ -23,10 +23,10 @@
 // I am currently working with 190 symbols length strings, all is ok :)
 function checkTableExists(transaction /* and additional string keys */) {
     transaction.executeSql('PRAGMA foreign_keys = ON;')   // enable foreign key support
-    transaction.executeSql("CREATE TABLE IF NOT EXISTS feed  (id  INTEGER  NOT NULL PRIMARY KEY AUTOINCREMENT,source  TEXT  NULL,title  TEXT  NULL,link  TEXT  NULL, description  TEXT  NULL, status  char(1)  NULL DEFAULT '0', pubdate  INTEGER  NULL,image  TEXT  NULL, count INTEGER NULL DEFAULT 0);") // add "count", count user click
+    transaction.executeSql("CREATE TABLE IF NOT EXISTS feed  (id  INTEGER  NOT NULL PRIMARY KEY AUTOINCREMENT,source  TEXT  NULL,title  TEXT  NULL,link  TEXT  NULL, description  TEXT  NULL, status  char(1)  NULL DEFAULT '0', pubdate  INTEGER  NULL,image  TEXT  NULL, count INTEGER NULL DEFAULT 0);")
     transaction.executeSql("CREATE TABLE IF NOT EXISTS tag  (id  INTEGER  NOT NULL PRIMARY KEY AUTOINCREMENT,name  TEXT  NOT NULL UNIQUE );")
     transaction.executeSql("CREATE TABLE IF NOT EXISTS feed_tag  (id  INTEGER  NOT NULL PRIMARY KEY AUTOINCREMENT,feed_id  INTEGER  NULL,tag_id  INTEGER  NULL,FOREIGN KEY(feed_id) REFERENCES feed(id) on delete cascade);")
-    transaction.executeSql("CREATE TABLE IF NOT EXISTS article ( id  INTEGER  PRIMARY KEY AUTOINCREMENT NOT NULL, title  TEXT  NULL, content TEXT NULL, link  TEXT  NULL, description  TEXT  NULL, pubdate  INTEGER  NULL, status  char(1)  NULL DEFAULT '0', favourite  char(1)  NULL DEFAULT '0', image  TEXT  NULL, guid TEXT NULL, feed_id  INTEGER  NULL,count INTEGER NULL DEFAULT 0);")
+    transaction.executeSql("CREATE TABLE IF NOT EXISTS article ( id  INTEGER  PRIMARY KEY AUTOINCREMENT NOT NULL, title  TEXT  NULL, content TEXT NULL, link  TEXT  NULL, description  TEXT  NULL, pubdate  INTEGER  NULL, status  char(1)  NULL DEFAULT '0', favourite  char(1)  NULL DEFAULT '0', image  TEXT  NULL, guid TEXT NULL, feed_id  INTEGER  NULL,count INTEGER NULL DEFAULT 0, media_groups TEXT NULL);")
     transaction.executeSql("CREATE TABLE IF NOT EXISTS settings  ( id INTEGER, current_database_version TEXT NULL, database_last_updated  TEXT  NULL, view_mode char(1) NULL DEFAULT '0', update_interval INTEGER NULL DEFAULT 0, network_mode char(1) NULL DEFAULT '0');")
     var rs = transaction.executeSql("select * from settings")
     if (rs.rows.length == 0)

=== modified file 'feeds/AppendFeedPage.qml'
--- feeds/AppendFeedPage.qml	2013-09-27 09:49:16 +0000
+++ feeds/AppendFeedPage.qml	2013-09-30 04:16:05 +0000
@@ -184,6 +184,7 @@
             }
 
             onAccepted: {
+                Qt.inputMethod.hide()
                 var userInput = text
 
                 if (userInput == "")

=== modified file 'feeds/ChooseTopicPage.qml'
--- feeds/ChooseTopicPage.qml	2013-09-27 09:49:16 +0000
+++ feeds/ChooseTopicPage.qml	2013-09-30 04:16:05 +0000
@@ -119,6 +119,7 @@
                 }
 
                 onAccepted: {
+                    Qt.inputMethod.hide()
                     if (text.replace(/^\s+|\s+$/g, '') != "") { // Check that text contains only spaces.
                         var tagName = text
 

=== modified file 'feeds/EditFeed.qml'
--- feeds/EditFeed.qml	2013-09-21 09:27:59 +0000
+++ feeds/EditFeed.qml	2013-09-30 04:16:05 +0000
@@ -11,19 +11,14 @@
     objectName: "editfeedpage"
     title: i18n.tr("Edit Feed")
     flickable: null/*content*/
-    tools: ToolbarItems {
+    tools: null
+
+    ToolbarItems {
         id: toolbar
 
         opened: true
         locked: true
 
-//        ToolbarButton {
-//            id: actionsButton
-//            text: i18n.tr("Reads")
-//            iconSource: Qt.resolvedUrl("avatar.png")
-//            onTriggered: ;
-//            visible: true
-//        }
         Button
         {
             id: btnDelete
@@ -49,7 +44,7 @@
 
             onClicked:
             {
-                DB.updateFeedByUser(feedId, feedTitle, feedURL) ;
+//                DB.updateFeedByUser(feedId, feedTitle, feedURL) ;
                 DB.deleteFeedTag(feedId, previousTopicId) ;
                 DB.addFeedTag(feedId, newTopicId) ;
                 apply(feedId, newTopicId, previousTopicId) ;
@@ -95,7 +90,7 @@
     }
 
     function reloadPageContent() {
-
+        editPage.tools = toolbar
     }
 
     Flickable {
@@ -127,6 +122,8 @@
                     text: feedTitle
                     width: parent.width - labelTitle.width - parent.spacing
                     anchors.verticalCenter: parent.verticalCenter
+                    readOnly: true
+                    hasClearButton: false
                 }
             }
 
@@ -148,6 +145,8 @@
                     text: feedURL
                     width: parent.width - labelURL.width - parent.spacing
                     anchors.verticalCenter: parent.verticalCenter
+                    readOnly: true
+                    hasClearButton: false
                 }
             }
 

=== modified file 'feeds/TopicComponent.qml'
--- feeds/TopicComponent.qml	2013-09-18 12:03:36 +0000
+++ feeds/TopicComponent.qml	2013-09-30 04:16:05 +0000
@@ -19,6 +19,7 @@
     property int modelIndex
 
     signal edit()
+    signal editCanceled()
 
 //    onClicked: isExpended = !isExpended ;
 
@@ -64,28 +65,38 @@
         id: columnContent
         anchors{ left: parent.left; right: parent.right }
 
+        /*
+          topic item
+        */
         Item
         {
             anchors{ left: parent.left; right: parent.right }
             height: units.gu(5)
 
+            /*
+              topic header for showing name and swipe remove
+            */
             ListItem.Base{
                 id: headerTopic
+                enabled: !rowTopicContent.isEditing
                 removable: true
                 height: units.gu(5)
 
-                onClicked: isExpended = !isExpended
+                onClicked: {
+                    isExpended = !isExpended
+                    editCanceled()
+                }
 
                 onItemRemoved:{
                     console.log("item about to be removed: ", topicComponent.topicId)
-//                    itemCancelDelete.startCounting()
+                    //                    itemCancelDelete.startCounting()
                     var result = DB.deleteFeedByTagId(topicComponent.topicId)
                     if (result.rowsAffected == undefined)
                     {
                         topicManagement.reloadTopics()
                     }
                     result = DB.deleteTag(topicComponent.topicId)
-//                            topicManagement.reloadTopics()
+                    //                            topicManagement.reloadTopics()
                     if (result.rowsAffected == 1)
                     {
                         topicManagement.removeModelItem(topicComponent.modelIndex)
@@ -95,105 +106,113 @@
                         topicManagement.reloadTopics()
                     }
                 }
-
-                Row{
-                    id: rowTopicContent
-                    anchors
-                    {
-                        top: parent.top; bottom: parent.bottom; left: parent.left;
-                        leftMargin: units.gu(0); topMargin: units.gu(1); bottomMargin: units.gu(1);
-                    }
-                    spacing: units.gu(2)
-
-                    property bool isEditing: false
-
-                    Image{
-                        anchors
-                        {
-                            top: parent.top; bottom: parent.bottom;
-                            topMargin: units.gu(0.5); bottomMargin: units.gu(0.5);
-                        }
-                        fillMode: Image.PreserveAspectFit
-                        source: Qt.resolvedUrl("../icons_tmp/compose.svg")
-                        smooth: true
-
-                        MouseArea{
-                            enabled: !rowTopicContent.isEditing
-                            anchors { fill: parent; margins: units.gu(-1) }
-                            onClicked:
-                            {
-                                rowTopicContent.isEditing = true
-                                topicComponent.edit()
-                            }
-                        }
-                    }
-
-                    Label{
-                        id: labelTopicName
-                        anchors.verticalCenter: parent.verticalCenter
-                        text: topicName
-                        width: rowTopicContent.isEditing ? 0 : paintedWidth
-                        opacity: rowTopicContent.isEditing ? 0 : 1
-
-    //                    Behavior on width { UbuntuNumberAnimation{} }
-                    }
-
-                    TextField{
-                        id: inputTopicName
-                        anchors.verticalCenter: parent.verticalCenter
-                        text: topicName
-                        width: rowTopicContent.isEditing ? headerTopic.width - units.gu(15) : 0
-                        opacity: rowTopicContent.isEditing ? 1 : 0
-                        hasClearButton: true
-                        activeFocusOnPress: true
-
-                        Behavior on width { UbuntuNumberAnimation{} }
-
-                        onAccepted: {
-                            Qt.inputMethod.hide()
-                        }
-
-                        Connections {
-                            target: Qt.inputMethod
-                            onVisibleChanged: {
-                                if (!Qt.inputMethod.visible) {
-                                    topicComponent.focus = true
-                                }
-                            }
-                        }
-                    }
+            }
+
+            /*
+              enable if edit mode active
+            */
+            Row{
+                id: rowTopicContent
+                anchors
+                {
+                    top: parent.top; bottom: parent.bottom; left: parent.left;
+                    leftMargin: units.gu(1); topMargin: units.gu(0.7); bottomMargin: units.gu(1);
                 }
+                spacing: units.gu(2)
+
+                property bool isEditing: false
 
                 Image{
-                    id: imgArrow
                     anchors
                     {
-                        right: parent.right; top: parent.top; bottom: parent.bottom;
-                        topMargin: units.gu(1.5); bottomMargin: units.gu(1.5); rightMargin: units.gu(2)
+                        top: parent.top; bottom: parent.bottom;
+                        topMargin: units.gu(0.5); bottomMargin: units.gu(0.5);
                     }
                     fillMode: Image.PreserveAspectFit
-                    source: Qt.resolvedUrl("../icons_tmp/go-to.svg")
+                    source: Qt.resolvedUrl("../icons_tmp/compose.svg")
                     smooth: true
 
-                    Behavior on rotation { UbuntuNumberAnimation{} }
-
-                    states: [
-                        State {
-                            name: "expended"
-                            when: topicComponent.isExpended
-
-                            PropertyChanges
-                            {
-                                target: imgArrow
-                                rotation: 90
-                            }
-                        }
-                    ]
-                }
-            }
+                    MouseArea{
+                        enabled: !rowTopicContent.isEditing
+                        anchors { fill: parent; margins: units.gu(-1) }
+                        onClicked:
+                        {
+                            rowTopicContent.isEditing = true
+                            topicComponent.edit()
+                            inputTopicName.focus = true
+                        }
+                    }
+                }
+
+                Label{
+                    id: labelTopicName
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: topicName
+                    width: rowTopicContent.isEditing ? 0 : paintedWidth
+                    opacity: rowTopicContent.isEditing ? 0 : 1
+
+                    //                    Behavior on width { UbuntuNumberAnimation{} }
+                }
+
+                TextField{
+                    id: inputTopicName
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: topicName
+                    width: rowTopicContent.isEditing ? headerTopic.width - units.gu(15) : 0
+                    opacity: rowTopicContent.isEditing ? 1 : 0
+                    hasClearButton: true
+                    activeFocusOnPress: true
+
+                    Behavior on width { UbuntuNumberAnimation{} }
+
+                    onAccepted: {
+                        console.log("accepted?")
+                        Qt.inputMethod.hide()
+                    }
+
+                    Keys.enabled: rowTopicContent.isEditing
+                    Keys.onPressed: {
+                        event.accepted = false
+                        if (event.key == Qt.Key_Return) {
+                            Qt.inputMethod.hide()
+                        }
+                    }
+                }
+            }
+
+            Image{
+                id: imgArrow
+                anchors
+                {
+                    right: parent.right; top: parent.top; bottom: parent.bottom;
+                    topMargin: units.gu(1.5); bottomMargin: units.gu(1.5); rightMargin: units.gu(2)
+                }
+                fillMode: Image.PreserveAspectFit
+                source: Qt.resolvedUrl("../icons_tmp/go-to.svg")
+                smooth: true
+
+                Behavior on rotation { UbuntuNumberAnimation{} }
+
+                states: [
+                    State {
+                        name: "expended"
+                        when: topicComponent.isExpended
+
+                        PropertyChanges
+                        {
+                            target: imgArrow
+                            rotation: 90
+                        }
+                    }
+                ]
+            }
+
 
         }
 
+        /*
+          feeds listview
+        */
         ListView
         {
             id: feedList

=== modified file 'feeds/TopicManagement.qml'
--- feeds/TopicManagement.qml	2013-09-18 12:03:36 +0000
+++ feeds/TopicManagement.qml	2013-09-30 04:16:05 +0000
@@ -40,6 +40,9 @@
 
     }
 
+    /*
+      toolbar for normal state
+    */
     ToolbarItems {
         id: toolbar
 
@@ -52,6 +55,9 @@
         }
     }
 
+    /*
+      toolbar for editing state
+    */
     ToolbarItems {
         id: editConfirm
         opened: true
@@ -87,6 +93,9 @@
         }
     }
 
+    /*
+      main content
+    */
     Flickable {
         id: content
         anchors.fill: parent
@@ -96,6 +105,9 @@
         Column{
             anchors{ left: parent.left; right: parent.right }
 
+            /*
+              add topic button
+            */
             Item {
                 id: itemAddTopic
                 objectName: "addTopic"
@@ -135,6 +147,9 @@
                 }
             }
 
+            /*
+              topic listview
+            */
             ListView {
                 id: topicList
                 anchors{ left: parent.left; right: parent.right }
@@ -190,6 +205,14 @@
                                 editConfirm.visible = true
                                 topicList.currentIndex = index
                             }
+
+                            onEditCanceled: {
+                                if (topicList.currentItem)
+                                    topicList.currentItem.cancelEdit()
+                                topicManagement.state = ""
+                                editConfirm.visible = false
+                                topicList.currentIndex = -1
+                            }
                         }
 
                         DropArea {