Merge lp:~ibelieve/ubuntu-filemanager-app/improved-ui into lp:ubuntu-filemanager-app

[Michael Spencer]

Improved UI

This improves the UI in several ways, including:

* Converts the icons to using the Humanity theme & uses correct size
* Fixes the margins in the file details popover
* Adds a better page title and location header
* Uses ubuntu-mobile icons for the toolbar

This also replaces usage of ToolbarActions with ToolbarItems.

[Arto Jalkanen (ajalkane)]

Thank you for the excellent changes!

review: Approve

[Arto Jalkanen (ajalkane)]

As a side note to your previous merge request, by your tests it seems that the memory consumption is not a big issue. So if you see some advantage in using page stack for navigation I'm not opposed to approving such a merge.

[Michael Spencer (ibelieve)]

I sent a message to the ubuntu-phone mailing asking for input about what would be the best navigation model to represent a hierarchy of data such as the file system. For now though, I decided to take out the page stack because I have some ideas for a flat tab-based layout, such as being able to open multiple tabs (useful , etc. Depending on what designers say, I might submit a merge request for a page stack-based layout.

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

review: Approve (continuous-integration)

=== modified file 'FileDetailsPopover.qml'
--- FileDetailsPopover.qml	2013-04-17 17:55:41 +0000
+++ FileDetailsPopover.qml	2013-06-27 14:24:25 +0000
@@ -23,6 +23,8 @@
     id: root
     property var model
 
+    contentHeight: contents.height + 2 * contents.anchors.margins
+
     function dateTimeFormat(dateTime) {
         return Qt.formatDateTime(dateTime, Qt.DefaultLocaleShortDate)
     }
@@ -52,19 +54,29 @@
     }
 
     Column {
-        anchors.margins: units.gu(2)
+        id: contents
+        spacing: units.gu(1)
+        anchors {
+            margins: units.gu(2)
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+
         Row {
+            spacing: units.gu(1)
             Image {
                 // TODO: how to get proper icon?
                 source: model.isDir
-                        ? "/usr/share/icons/gnome/48x48/apps/file-manager.png"
-                        : "/usr/share/icons/gnome/48x48/mimetypes/text-x-preview.png"
+                        ? "/usr/share/icons/Humanity/places/48/folder.svg"
+                        : "/usr/share/icons/Humanity/mimes/48/empty.svg"
             }
             Label {
                 text: model.fileName
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
+
         Grid {
             columns: 2
             spacing: units.gu(1)

=== modified file 'FolderListDelegate.qml'
--- FolderListDelegate.qml	2013-05-31 12:23:54 +0000
+++ FolderListDelegate.qml	2013-06-27 14:24:25 +0000
@@ -23,12 +23,12 @@
 ListItem.Subtitled {
     objectName: "folder" + index
     text: model.fileName
-    subText: Qt.formatDateTime(model.modifiedDate, Qt.DefaultLocaleShortDate) + (!model.isDir ? " " + fileSize : "")
+    subText: Qt.formatDateTime(model.modifiedDate, Qt.DefaultLocaleShortDate) + (!model.isDir ? ", " + fileSize : "")
     // FIXME: hard coded path for icon, assumes Ubuntu desktop icon available.
     // Nemo mobile has icon provider. Have to figure out what's the proper way
     // to get "system wide" icons in Ubuntu Touch, or if we have to use
     // icons packaged into the application. Both folder and individual
     // files will need an icon.
-    icon: model.isDir ? "/usr/share/icons/gnome/22x22/apps/file-manager.png" : ""
+    icon: model.isDir ? "/usr/share/icons/Humanity/places/48/folder.svg" : "/usr/share/icons/Humanity/mimes/48/empty.svg"
     progression: model.isDir
 }

=== modified file 'FolderListPage.qml'
--- FolderListPage.qml	2013-06-14 05:20:24 +0000
+++ FolderListPage.qml	2013-06-27 14:24:25 +0000
@@ -24,9 +24,25 @@
     id: root
     anchors.fill: parent
 
+    property string folder
+    title: folderName(pageModel.path)
+    property string homeFolder: pageModel.homePath()
+
+    function folderName(folder) {
+        if (folder === pageModel.homePath()) {
+            return "Home"
+        } else if (folder === "/") {
+            return folder
+        } else {
+            return folder.substr(folder.lastIndexOf('/') + 1)
+        }
+    }
+
+    property bool loading: pageModel.awaitingResults
+
     FolderListModel {
         id: pageModel
-        path: homePath()
+        path: root.folder
     }
 
     Component {
@@ -46,22 +62,21 @@
         }
     }
 
-    tools: ToolbarActions {
+    tools: ToolbarItems {
         id: toolbar
-        lock: true
-        active: true
+        locked: true
+        opened: true
 
-        back: Action {
-            text: i18n.tr("Up")
-            // TODO: temporary
-            iconSource: "/usr/share/icons/Humanity/actions/48/up.svg"
+        back: ToolbarButton {
+            text: "Up"
+            iconSource: "/usr/share/icons/ubuntu-mobile/actions/scalable/keyboard-caps.svg"
+            visible: folder != "/"
             onTriggered: {
-                pageModel.path = pageModel.parentPath
-                console.log("Up triggered")
+                goTo(pageModel.parentPath)
             }
-            visible: pageModel.path != "/"
         }
-        Action {
+
+        ToolbarButton {
             text: i18n.tr("Paste" + " (" + pageModel.clipboardUrlsCounter + ")")
             // TODO: temporary
             iconSource: "/usr/share/icons/Humanity/actions/48/edit-paste.svg"
@@ -83,22 +98,24 @@
 
         // IMPROVE: would rather have this as more hidden, in a separate menu that has
         // file manipulation operations
-        Action {
+        ToolbarButton {
             text: i18n.tr("Create folder")
             // TODO: temporary
-            iconSource: "/usr/share/icons/Humanity/actions/48/folder-new.svg"
+            iconSource: "/usr/share/icons/ubuntu-mobile/actions/scalable/add.svg"
             onTriggered: {
                 print(text)
                 PopupUtils.open(createFolderDialog, root)
             }
         }
 
-        Action {
+        ToolbarButton {
             text: i18n.tr("Home")
             // TODO: temporary
-            iconSource: "/usr/share/icons/Humanity/actions/48/go-home.svg"
+            iconSource: "/usr/share/icons/ubuntu-mobile/actions/scalable/go-to.svg"
             onTriggered: {
-                pageModel.path = pageModel.homePath()
+                goHome()
+
+                //pageModel.path = pageModel.homePath()
                 console.log("Home triggered")
             }
         }
@@ -120,10 +137,6 @@
 
     FolderListView {
         id: folderListView
-        header: Label {
-            text: pageModel.path
-            fontSize: "large"
-        }
 
         clip: true
 

=== modified file 'FolderListView.qml'
--- FolderListView.qml	2013-05-16 19:45:36 +0000
+++ FolderListView.qml	2013-06-27 14:24:25 +0000
@@ -17,6 +17,7 @@
  */
 import QtQuick 2.0
 import Ubuntu.Components 0.1
+import Ubuntu.Components.ListItems 0.1
 import Ubuntu.Components.Popups 0.1
 import org.nemomobile.folderlistmodel 1.0
 
@@ -24,16 +25,22 @@
     id: root
 
     property FolderListModel folderListModel
-    property string path: folderListModel.path
+    property string folderPath: folderListModel.path
     model: folderListModel
 
+    header: Caption {
+        objectName: "directoryHeader"
+        text: (root.count == 1 ? i18n.tr("%1 (%2 file)").arg(root.folderPath).arg(root.count) :
+                                 i18n.tr("%1 (%2 files)").arg(root.folderPath).arg(root.count))
+    }
+
     Component {
         id: confirmSingleDeleteDialog
         ConfirmDialog {
             property string filePath
             property string fileName
-            title: i18n.tr("Delete?")
-            text: i18n.tr("Are you sure you want to permanently delete") + " '" + fileName + "'?"
+            title: i18n.tr("Delete")
+            text: i18n.tr("Are you sure you want to permanently delete '%1'?").arg(fileName)
 
             onAccepted: {
                 console.log("Delete accepted for filePath, fileName", filePath, fileName)
@@ -88,6 +95,8 @@
 
     ActionSelectionPopover {
         id: actionSelectionPopover
+        objectName: "fileActionsPopover"
+
         property var model
         actions: ActionList {
             Action {
@@ -166,7 +175,7 @@
             if (model.isDir) {
                 if (model.isReadable && model.isExecutable) {
                     console.log("Changing to dir", model.filePath)
-                    folderListModel.path = model.filePath
+                    goTo(model.filePath)
                 } else {
                     PopupUtils.open(Qt.resolvedUrl("NotifyDialog.qml"), delegate,
                                     {

=== modified file 'filemanager.qmlproject'
--- filemanager.qmlproject	2013-02-12 16:28:09 +0000
+++ filemanager.qmlproject	2013-06-27 14:24:25 +0000
@@ -3,7 +3,7 @@
 import QmlProject 1.1
 
 Project {
-    mainFile: "filemanager.qml"
+    mainFile: "ubuntu-filemanager-app.qml"
 
     /* Include .qml, .js, and image files from current directory and subdirectories */
     QmlFiles {

=== modified file 'tests/autopilot/ubuntu_filemanager_app/emulators/main_window.py'
--- tests/autopilot/ubuntu_filemanager_app/emulators/main_window.py	2013-06-14 05:49:28 +0000
+++ tests/autopilot/ubuntu_filemanager_app/emulators/main_window.py	2013-06-27 14:24:25 +0000
@@ -21,10 +21,9 @@
         return self.app.select_many("Subtitled")[index]
 
     def get_action_popover(self):
-        return self.app.select_single("ActionSelectionPopover")
+        # Returns all instances, but with current one as first index
+        return self.app.select_many("ActionSelectionPopover")[0]
 
     def get_current_folder_name(self):
-        # XXX the label with the folder name doesn't have an objectName.
-        # See bug #1190855.
-        return self.app.select_single('FolderListView').select_many(
-            'Label')[0].text
+        return self.app.select_single('FolderListView').folderPath
+

=== modified file 'tests/autopilot/ubuntu_filemanager_app/emulators/ubuntusdk.py'
--- tests/autopilot/ubuntu_filemanager_app/emulators/ubuntusdk.py	2013-06-14 05:20:24 +0000
+++ tests/autopilot/ubuntu_filemanager_app/emulators/ubuntusdk.py	2013-06-27 14:24:25 +0000
@@ -69,12 +69,10 @@
         if not toolbar.opened:
             self.open_toolbar()
         row = toolbar.select_single("QQuickRow")
-        loaderList = row.select_many("QQuickLoader")
-        for loader in loaderList:
-            buttonList = loader.select_many("Button")
-            for button in buttonList:
-                if button.text == buttonLabel:
-                    return button
+        buttonList = row.select_many("ActionItem")
+        for button in buttonList:
+            if button.text == buttonLabel:
+                return button
 
     def click_toolbar_button(self, buttonLabel):
         """Clicks the toolbar button with buttonLabel"""

=== modified file 'tests/autopilot/ubuntu_filemanager_app/tests/test_filemanager.py'
--- tests/autopilot/ubuntu_filemanager_app/tests/test_filemanager.py	2013-06-14 05:51:37 +0000
+++ tests/autopilot/ubuntu_filemanager_app/tests/test_filemanager.py	2013-06-27 14:24:25 +0000
@@ -52,6 +52,8 @@
         # created one. See bug #1190676.
         # TODO when the bug is fixed, remove the next line.
         self.ubuntusdk.click_toolbar_button('Home')
+        while self.app.select_single('FolderListPage').loading:
+            pass
         return path
 
     def test_open_directory(self):

=== modified file 'ubuntu-filemanager-app.qml'
--- ubuntu-filemanager-app.qml	2013-05-16 19:45:36 +0000
+++ ubuntu-filemanager-app.qml	2013-06-27 14:24:25 +0000
@@ -33,19 +33,22 @@
     width: units.gu(50)
     height: units.gu(75)
     
-    Tabs {
-        id: tabs
-        anchors.fill: parent
-        
-        // First tab begins here
-        Tab {
-            objectName: "folderListPage"
-            
-            title: i18n.tr("File Manager")
-            
-            // Tab content begins here
-            page: FolderListPage {
-            }
-        }        
+    FolderListPage {
+        objectName: "folderPage"
+        id: folderPage
+
+        folder: homeFolder
+
+        function goHome() {
+            // FIXME: Get the user's home folder without requiring an instance
+            // of a FolderListModel
+            goTo(homeFolder)
+        }
+
+        function goTo(location) {
+            // FIXME: Why is this needed? Folder doesn't seem to refresh without it
+            folder = ""
+            folder = location
+        }
     }
 }