Merge lp:~verzegnassi-stefano/ubuntu-docviewer-app/reboot-uitk13-listitemlayout into lp:~verzegnassi-stefano/ubuntu-docviewer-app/reboot-uitk13

[Stefano Verzegnassi]

Use UITK 1.3 ListItemLayout

Use ListItemLayout to provide a proper layouting inside ListItem.

*** REFERENCES
ListItemLayout example:
http://bazaar.launchpad.net/~ubuntu-sdk-team/ubuntu-ui-toolkit/staging/view/1665/examples/ubuntu-ui-toolkit-gallery/ListItemLayouts.qml

UI/UX ListItem slots specifications: (Ask James for the authorization to view the document)
https://docs.google.com/document/d/1rNxpbyA0rDd6fQ6cgNmonQXysCH002q9W9pUOP4ozj4/edit?usp=sharing_eid&ts=561fb6a2

[lp:~verzegnassi-stefano/ubuntu-docviewer-app/reboot-uitk13-listitemlayout]

198. By Stefano Verzegnassi on 2015-10-27

Fixing ZoomSelector pt.1

199. By Stefano Verzegnassi on 2015-10-27

Fixed Autopilot 'test_toc' test

200. By Stefano Verzegnassi on 2015-10-27

Added a comment about PDFView's 'GoToPage' dialog test failing

201. By Stefano Verzegnassi on 2015-10-28

Reverted Autopilot tests fixes - they have been moved in another branch

202. By Stefano Verzegnassi on 2015-10-28

Merged prerequisite 'reboot-uitk13' branch

203. By Stefano Verzegnassi on 2015-11-13

Merged prerequisite branch

[Roman Shchekin (mrqtros)]

Looks ok for me!
(But "slots" API looks little bit weird)

review: Approve

[Stefano Verzegnassi (verzegnassi-stefano)]

> (But "slots" API looks little bit weird)

Yep.

The 'SlotsLayout.position' attached property is not that bad though, since it's still intuitive enough.

What really scares me is:

    'y: listItemLayout.mainSlot.y + listItemLayout.title.y +
    listItemLayout.title.baselineOffset - baselineOffset'

Which is definitely a strange way to define a 'Column' layout inside a slot.

=========================
For reference, the code I studied comes from the UI Toolkit examples:

http://bazaar.launchpad.net/~ubuntu-sdk-team/ubuntu-ui-toolkit/trunk/view/head:/examples/ubuntu-ui-toolkit-gallery/ListItemLayouts.qml

Unmerged revisions

203. By Stefano Verzegnassi on 2015-11-13

Merged prerequisite branch

202. By Stefano Verzegnassi on 2015-10-28

Merged prerequisite 'reboot-uitk13' branch

201. By Stefano Verzegnassi on 2015-10-28

Reverted Autopilot tests fixes - they have been moved in another branch

200. By Stefano Verzegnassi on 2015-10-27

Added a comment about PDFView's 'GoToPage' dialog test failing

199. By Stefano Verzegnassi on 2015-10-27

Fixed Autopilot 'test_toc' test

198. By Stefano Verzegnassi on 2015-10-27

Fixing ZoomSelector pt.1

197. By Stefano Verzegnassi on 2015-10-23

Updated to ListItemLayout. Still some TODO/FIXME task.

=== modified file 'src/app/qml/common/SubtitledListItem.qml'
--- src/app/qml/common/SubtitledListItem.qml	2015-10-23 11:23:43 +0000
+++ src/app/qml/common/SubtitledListItem.qml	2015-11-13 21:35:42 +0000
@@ -19,23 +19,16 @@
 
 ListItem {
     id: listItemSubtitled
-    property alias text: mainLabel.text
-    property alias subText: subLabel.text
-
-    Column {
-        anchors {
-            left: parent.left; right: parent.right
-            margins: units.gu(2)
-            verticalCenter: parent.verticalCenter
-        }
-
-        Label {
-            id: mainLabel
-            color: UbuntuColors.midAubergine
-        }
-        Label {
-            id: subLabel
-            textSize: Label.Small
-        }
+    property string text
+    property string subText
+
+    height: listItemLayout.height
+
+    ListItemLayout {
+        id: listItemLayout
+
+        title.text: listItemSubtitled.text
+        title.color: UbuntuColors.midAubergine
+        subtitle.text: listItemSubtitled.subText
     }
 }

=== modified file 'src/app/qml/documentPage/DocumentDelegateActions.qml'
--- src/app/qml/documentPage/DocumentDelegateActions.qml	2015-10-23 11:19:19 +0000
+++ src/app/qml/documentPage/DocumentDelegateActions.qml	2015-11-13 21:35:42 +0000
@@ -18,8 +18,6 @@
 import Ubuntu.Components 1.3
 import Ubuntu.Components.Popups 1.3
 
-// TODO: Probably requires some change in order to work with latest ListItem 1.2
-
 QtObject {
     property list<Action> leadingActions: [
         Action {

=== modified file 'src/app/qml/documentPage/DocumentListDelegate.qml'
--- src/app/qml/documentPage/DocumentListDelegate.qml	2015-10-23 11:23:43 +0000
+++ src/app/qml/documentPage/DocumentListDelegate.qml	2015-11-13 21:35:42 +0000
@@ -21,59 +21,64 @@
 
 import "../common/utils.js" as Utils
 
-// TODO: Ask for a review of this component to the design team
-
 ListItem {
     id: listDelegate
     height: units.gu(9)
     leadingActions: ListItemActions { actions: documentDelegateActions.leadingActions }
     trailingActions: ListItemActions { actions: documentDelegateActions.trailingActions }
 
-    RowLayout {
-        spacing: units.gu(2)
-        anchors {
-            fill: parent; margins: units.gu(1)
-            leftMargin: units.gu(2)
-            rightMargin: units.gu(2)
-        }
-
+    /*** UITK 1.3 spec: Three slot layout (B-A-C)
+      ________________________________________
+     |   |                                |   |
+     | B |               A                | C |
+     |___|________________________________|___|
+
+    *********************************************/
+
+    ListItemLayout {
+        id: listItemLayout
+        anchors.fill: parent
+
+        /* UITK 1.3 specs: Slot B */
         Icon {
+            SlotsLayout.position: SlotsLayout.Leading
             name: Utils.getIconNameFromMimetype(model.mimetype)
-            Layout.preferredWidth: height
-            Layout.preferredHeight: units.gu(5)
-        }
-
-        Column {
-            Layout.fillWidth: true
-
-            RowLayout {
-                width: parent.width
-                Label {
-                    text: model.name
-                    //wrapMode: Text.Wrap
-                    elide: Text.ElideRight
-                    color: UbuntuColors.midAubergine
-                    Layout.fillWidth: true
-                }
-                Label {
-                    text: Utils.printSize(i18n, model.size)
-                    textSize: Label.Small
-                }
+            width: units.gu(5); height: width
+        }
+
+        /* UITK 1.3 specs: Slot A */
+        title {
+            text: model.name
+            elide: Text.ElideRight
+            color: UbuntuColors.midAubergine
+        }
+
+        subtitle.text: internal.formattedDateTime()
+
+        /* UITK 1.3 specs: Slot C */
+        Item {
+            SlotsLayout.position: SlotsLayout.Trailing
+            SlotsLayout.overrideVerticalPositioning: true
+            width: Math.max(sizeLabel.width, externalStorageLabel.width)
+            height: parent.height
+
+            Label {
+                id: sizeLabel
+                anchors.right: parent.right
+                text: Utils.printSize(i18n, model.size)
+                textSize: Label.Small
+                y: listItemLayout.mainSlot.y + listItemLayout.title.y
+                   + listItemLayout.title.baselineOffset - baselineOffset
             }
 
-            RowLayout {
-                width: parent.width
-                Label {
-                    text: internal.formattedDateTime()
-                    textSize: Label.Small
-
-                    Layout.fillWidth: true
-                }
-                Icon {
-                    width: units.gu(2); height: width
-                    name: "sdcard-symbolic"
-                    visible: model.isFromExternalStorage
-                }
+            Icon {
+                id: externalStorageLabel
+                anchors.right: parent.right
+                width: units.gu(2); height: width
+                name: "sdcard-symbolic"
+                visible: model.isFromExternalStorage
+                y: listItemLayout.mainSlot.y + listItemLayout.subtitle.y
+                   + listItemLayout.subtitle.baselineOffset - baselineOffset
             }
         }
     }

=== modified file 'src/app/qml/documentPage/SectionHeader.qml'
--- src/app/qml/documentPage/SectionHeader.qml	2015-10-23 11:19:19 +0000
+++ src/app/qml/documentPage/SectionHeader.qml	2015-11-13 21:35:42 +0000
@@ -1,9 +1,9 @@
 import QtQuick 2.4
 import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.3 as ListItem
+import Ubuntu.Components.ListItems 1.3 as ListItems
 import DocumentViewer 1.0
 
-ListItem.Header {
+ListItems.Header {
     text: {
         if (sortSettings.sortMode === 1)    // sort by name
             return section.toUpperCase()

=== modified file 'src/app/qml/loView/LOViewDefaultHeader.qml'
--- src/app/qml/loView/LOViewDefaultHeader.qml	2015-11-13 21:19:46 +0000
+++ src/app/qml/loView/LOViewDefaultHeader.qml	2015-11-13 21:35:42 +0000
@@ -89,6 +89,7 @@
         },*/
 
         Action {
+            // FIXME: Autopilot test broken... seems not to detect we're now using an ActionBar since the switch to UITK 1.3
             objectName: "gotopage"
             iconName: "browser-tabs"
             text: i18n.tr("Go to position...")

=== modified file 'src/app/qml/loView/PartsView.qml'
--- src/app/qml/loView/PartsView.qml	2015-11-02 01:06:31 +0000
+++ src/app/qml/loView/PartsView.qml	2015-11-13 21:35:42 +0000
@@ -49,17 +49,22 @@
 
             onClicked: internal.delegate_onClicked(model.index)
 
-            RowLayout {
-                anchors {
-                    fill: parent
-                    leftMargin: units.gu(1)
-                    rightMargin: units.gu(1)
-                }
-                spacing: units.gu(1)
-
+            /*** UITK 1.3 specs: Three slot layout (B-A-C)
+              ________________________________________
+             |   |                                |   |
+             | B |               A                | C |
+             |___|________________________________|___|
+
+            *********************************************/
+
+            ListItemLayout {
+                id: listItemLayout
+                anchors.fill: parent
+
+                /* UITK 1.3 specs: Slot B */
                 Image {
-                    Layout.fillHeight: true
-                    Layout.preferredWidth: height
+                    SlotsLayout.position: SlotsLayout.Leading
+                    height: parent.height; width: height
                     fillMode: Image.PreserveAspectFit
                     // Do not store a cache of the thumbnail, so that we don't show
                     // thumbnails of a previously loaded document.
@@ -67,8 +72,8 @@
                     source: model.thumbnail
                 }
 
-                Label {
-                    Layout.fillWidth: true
+                /* UITK 1.3 specs: Slot A */
+                title {
                     wrapMode: Text.WordWrap
                     text: model.name
                     visible: view.isWide
@@ -76,7 +81,10 @@
                                                                          : theme.palette.selected.backgroundText
                 }
 
+                /* UITK 1.3 specs: Slot C */
                 Label {
+                    SlotsLayout.position: SlotsLayout.Trailing
+
                     text: model.index + 1
                     color: (loView.document.currentPart === model.index) ? UbuntuColors.orange
                                                                          : theme.palette.selected.backgroundText

=== modified file 'src/app/qml/pdfView/PdfContentsPage.qml'
--- src/app/qml/pdfView/PdfContentsPage.qml	2015-11-01 19:56:27 +0000
+++ src/app/qml/pdfView/PdfContentsPage.qml	2015-11-13 21:35:42 +0000
@@ -88,44 +88,39 @@
                 visible: view.currentIndex == model.index
             }
 
-            RowLayout {
-                anchors {
-                    fill: parent
-                    leftMargin: units.gu(1)
-                    rightMargin: units.gu(1)
-                }
-
-                spacing: units.gu(1)
-
-                Label {
-                    objectName: "content"
-                    Layout.fillWidth: true
-
+            /* UITK 1.3 spec: Three slot layout (A-B-C)   */
+            //  ________________________________________
+            // |                              |     |   |
+            // |               A              |  B  | C |
+            // |______________________________|__ __|___|
+            //
+            ListItemLayout {
+                id: listItemLayout
+                objectName: "listItemLayout" + index
+                anchors.fill: parent
+
+                /* UITK 1.3 specs: Slot A */
+                title {
                     text: model.title
                     elide: Text.ElideRight
-
                     font.weight: model.level == 0 ? Font.DemiBold : Font.Normal
                     color: (model.level == 0) ? UbuntuColors.midAubergine
                                               : theme.palette.selected.backgroundText
                 }
 
-                /*
-                    TODO: Needs UX team's review.
-                    UX specifications for ListItem suggest to use a "tick" icon
-                    as indicator for a selected state.
-                    This currently looks a bit redundant, since we already
-                    use a grey overlay (see above).
-                */
+                /* UITK 1.3 specs: Slot B */
                 Icon {
-                    Layout.preferredHeight: units.gu(2)
-                    Layout.preferredWidth: units.gu(2)
+                    SlotsLayout.position: SlotsLayout.Trailing
+                    width: units.gu(2); height: width
                     name: "tick"
                     color: UbuntuColors.green
                     visible: view.currentIndex == model.index
                 }
 
+                /* UITK 1.3 specs: Slot C */
                 Label {
                     objectName: "pageindex"
+                    SlotsLayout.position: SlotsLayout.Last
                     text: model.pageIndex + 1
                     font.weight: model.level == 0 ? Font.DemiBold : Font.Normal
                     color: (model.level == 0) ? UbuntuColors.midAubergine