Unity 8

plugins/Dash/CardCreator.js (+8/-6)
qml/Components/ResponsiveVerticalJournal.qml (+74/-0)
qml/Dash/CardCarousel.qml (+0/-2)
qml/Dash/CardFilterGrid.qml (+1/-4)
qml/Dash/CardVerticalJournal.qml (+89/-0)
qml/Dash/DashRenderer.qml (+0/-7)
qml/Dash/GenericScopeView.qml (+10/-1)
tests/plugins/Dash/cardcreator/1.res (+1/-1)
tests/plugins/Dash/cardcreator/2.res (+2/-1)
tests/plugins/Dash/cardcreator/3.res (+1/-1)
tests/plugins/Dash/cardcreator/4.res (+2/-1)
tests/plugins/Dash/cardcreator/5.res (+2/-2)
tests/qmltests/CMakeLists.txt (+1/-0)
tests/qmltests/Components/tst_ResponsiveVerticalJournal.qml (+183/-0)

To merge this branch:

bzr merge lp:~aacid/unity8/dashviews_integration

Undecided

Fix Released

Link a bug report

Reviewer	Review Type	Date Requested	Status
PS Jenkins bot (community)	continuous-integration		Needs Fixing on 2014-06-20
Michał Sawicz		2014-06-05	Approve on 2014-06-20
Review via email: mp+222192@code.launchpad.net

Commit message

Add VerticalJournal integration to Dash/scopes/QML

Description of the change

* Are there any related MPs required for this MP to build/function as expected?
No

* Did you perform an exploratory manual test run of your code change and any related functionality?
Yes, used unity-scope-tool on a scope modified to use VerticalJournal

* Did you make sure that your branch does not contain spurious tags?
Yes

* If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
N/A

* If you changed the UI, has there been a design review?
N/A

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-05:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3099/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-06:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3100/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-07:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3106/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-14:

PASSED: Continuous integration, rev:950
http://jenkins.qa.ubuntu.com/job/unity8-ci/3137/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/861
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/141
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/231
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/231
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/231/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/231
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/1273
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/1586
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/1586/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/8419

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3137/rebuild

review: Approve (continuous-integration)

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-06-17:

TryVerticalJournal doesn't resize the journal, would be nice to see how it behaves.

Also see inline.

review: Needs Fixing

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-06-17:

I took a scope (lp:~vtuson/+junk/rsslocal) and made it use vertical-journal (http://paste.ubuntu.com/7658904/), ran with the scope tool (./builddir/tools/unity-scope-tool /tmp/rsslocal/src/ELPAIS-scope.ini) and after expanding + overshooting and scrolling back, the view breaks...

We might be overloading the delegate margins maybe?

review: Needs Fixing

lp:~aacid/unity8/dashviews_integration updated on 2014-06-17

951. By Albert Astals Cid on 2014-06-17

Small fixes:

Make the comment be doc
Make tryResponsiveVerticalJournal actually change width with window width changes

952. By Albert Astals Cid on 2014-06-17

Make this a real

953. By Albert Astals Cid on 2014-06-17

Typo + year fix

954. By Albert Astals Cid on 2014-06-17

Unwrap lines, make _data functions simpler

Revision history for this message

Albert Astals Cid (aacid) wrote on 2014-06-17:

> TryVerticalJournal doesn't resize the journal, would be nice to see how it behaves.
Done

> Please apply http://paste.ubuntu.com/7658540/ to make it into a doc.
Done

> Shouldn't this be real?
Done

> Should this be "responsive"?
It's what we have in the responsiveGridView too, i agree it can be a bit confusing, can change it in both if you want

> Wonder if clip: true would be good enough here? Clipping should be smart enough to know when not to clip?
I think clip is not smart at all, that's why is disabled by default, turning it on will cause a speed decrease even if you only paint inside your own area

> Commented out?
No, it's the formula Karni added to help understand the code below, can remove it if it makes you get confused

> 2014
Done

> s/it's/its/
Done

> Is the comment still valid?
I'd say no

> Why wrapped? Same above?
Karni is probably using a narrow terminal :D Unwrapped

> Any reason why not 'return [...];'?
Karni did that and i did not pay much attention ;/ I've changed it now to return []

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-17:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3160/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-17:

PASSED: Continuous integration, rev:954
http://jenkins.qa.ubuntu.com/job/unity8-ci/3163/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/960
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/167
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/257
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/257
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/257/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/257
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/1352
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/1718
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/1718/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/8542

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3163/rebuild

review: Approve (continuous-integration)

lp:~aacid/unity8/dashviews_integration updated on 2014-06-18

955. By Albert Astals Cid on 2014-06-18

Merge lp:unity8

956. By Albert Astals Cid on 2014-06-18

Make the rowHeight be the headerHeight if we have it

Shuffle a bit the margins in headerHeight/fixedHeaderHeight

Revision history for this message

Albert Astals Cid (aacid) wrote on 2014-06-18:

Saviq: I think i fixed all the issues you mentioned. Can you check & re-review?

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-18:

PASSED: Continuous integration, rev:955
http://jenkins.qa.ubuntu.com/job/unity8-ci/3166/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/982
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/170
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/260
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/260
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/260/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/260
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/1369
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/1748
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/1748/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/8567

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3166/rebuild

review: Approve (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-18:

PASSED: Continuous integration, rev:956
http://jenkins.qa.ubuntu.com/job/unity8-ci/3171/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/996
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/175
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/265
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/265
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/265/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/265
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/1380
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/1766
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/1766/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/8580

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3171/rebuild

review: Approve (continuous-integration)

lp:~aacid/unity8/dashviews_integration updated on 2014-06-20

957. By Albert Astals Cid on 2014-06-20: Merge upstream

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-20:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3179/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-06-20:

I applied http://paste.ubuntu.com/7673731/ to test, and in tryDash I noticed that height of CardVJ animates on delegate creation and "forgets" which category was expanded.

review: Needs Fixing

lp:~aacid/unity8/dashviews_integration updated on 2014-06-20

958. By Albert Astals Cid on 2014-06-20: Seems doxygen needs 4 spaces in front to be told not to join lines

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-20:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3180/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/dashviews_integration updated on 2014-06-20

959. By Albert Astals Cid on 2014-06-20: Only animate height when told to
960. By Albert Astals Cid on 2014-06-20: Account for special behaviour of VJ expandable attribute not being set on load but after

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-06-20:

* Did you perform an exploratory manual test run of the code change and any related functionality?
Yes.

* Did CI run pass? If not, please explain why.
No, Qt 5.3 is causing failures. It's being worked on.

review: Approve

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-20:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3181/rebuild

review: Needs Fixing (continuous-integration)

lp:~aacid/unity8/dashviews_integration updated on 2014-06-30

961. By Albert Astals Cid on 2014-06-20: Missed one space

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Albert Astals Cid

Mohammad Rakibul Hasan

Unity Team

 === modified file 'plugins/Dash/CardCreator.js'
 --- plugins/Dash/CardCreator.js	2014-05-19 15:53:16 +0000
 +++ plugins/Dash/CardCreator.js	2014-06-20 10:32:22 +0000
@@ -108,7 +108,7 @@
                              visible: showHeader && status == Loader.Ready; \n\
                              sourceComponent: ShaderEffect { \n\
                                  id: overlay; \n\
--                                height: fixedHeaderHeight != -1 ? fixedHeaderHeight : headerHeight; \n\
++                                height: fixedHeaderHeight != -1 ? fixedHeaderHeight + units.gu(1) * 2 : headerHeight; \n\
                                  opacity: 0.6; \n\
                                  property var source: ShaderEffectSource { \n\
                                      id: shaderSource; \n\
@@ -145,6 +145,7 @@
                          objectName: "outerRow"; \n\
                          property real margins: units.gu(1); \n\
                          spacing: margins; \n\
++                        height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
                          anchors { %1 } \n\
                          anchors.right: parent.right; \n\
                          anchors.margins: margins;\n\
@@ -163,6 +164,7 @@
                          objectName: "outerRow"; \n\
                          property real margins: units.gu(1); \n\
                          spacing: margins; \n\
++                        height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
                          anchors { %1 } \n\
                          anchors.right: parent.right; \n\
                          anchors.margins: margins;\n\
@@ -315,7 +317,7 @@
              anchors = 'left: parent.left';
              if (hasMascot || hasTitle) {
                  widthCode = 'height * artShape.aspect'
--                heightCode = 'headerHeight';
++                heightCode = 'headerHeight + 2 * units.gu(1)';
              } else {
                  // This side of the else is a bit silly, who wants an horizontal layout without mascot and title?
                  // So we define a "random" height of the image height + 2 gu for the margins
@@ -366,13 +368,13 @@
+     }
      if (hasHeaderRow) {
--        code += 'readonly property int headerHeight: row.height + row.margins * 2;\n'
++        code += 'readonly property int headerHeight: row.height;\n'
      } else if (hasMascot) {
--        code += 'readonly property int headerHeight: mascotImage.height + units.gu(1) * 2;\n'
++        code += 'readonly property int headerHeight: mascotImage.height;\n'
      } else if (hasSubtitle) {
--        code += 'readonly property int headerHeight: titleLabel.height + titleLabel.anchors.topMargin * 2 + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
++        code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
      } else if (hasTitle) {
--        code += 'readonly property int headerHeight: titleLabel.height + titleLabel.anchors.topMargin * 2;\n'
++        code += 'readonly property int headerHeight: titleLabel.height;\n'
      } else {
          code += 'readonly property int headerHeight: 0;\n'
+     }
 === added file 'qml/Components/ResponsiveVerticalJournal.qml'
 --- qml/Components/ResponsiveVerticalJournal.qml	1970-01-01 00:00:00 +0000
 +++ qml/Components/ResponsiveVerticalJournal.qml	2014-06-20 10:32:22 +0000
@@ -0,0 +1,74 @@
++/*
++ * Copyright (C) 2013-2014 Canonical, Ltd.
++ *
++ * 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; 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.0
++import Ubuntu.Components 0.1
++import "../Components"
++import Dash 0.1
++
++/*!
++ \brief A responsive wrapper around VerticalJournal.
++
++ Based on defined column width, delegates are laid out in columns following
++ a top-left most position rule.
++
++ Example:
++    +-----+ +-----+ +-----+
++    |     | |  2  | |     |
++    |     | |     | |     |
++    |  1  | +-----+ |  3  |
++    |     | +-----+ |     |
++    |     | |     | +-----+
++    +-----+ |  4  | +-----+
++    +-----+ |     | |  5  |
++    |  6  | +-----+ |     |
++    |     |         +-----+
++    +-----+
++*/
++Item {
++    property real minimumColumnSpacing: units.gu(1)
++
++    property alias columnWidth: verticalJournalView.columnWidth
++    property alias rowSpacing: verticalJournalView.rowSpacing
++    property alias model: verticalJournalView.model
++    property alias delegate: verticalJournalView.delegate
++    property alias displayMarginBeginning: verticalJournalView.displayMarginBeginning
++    property alias displayMarginEnd: verticalJournalView.displayMarginEnd
++    implicitHeight: verticalJournalView.implicitHeight
++
++    VerticalJournal {
++        id: verticalJournalView
++        objectName: "responsiveVerticalJournalView"
++        anchors {
++            fill: parent
++            leftMargin: columnSpacing / 2
++            rightMargin: columnSpacing / 2
++            topMargin: rowSpacing / 2
++            bottomMargin: rowSpacing / 2
++        }
++        clip: parent.height != implicitHeight
++
++        function px2gu(pixels) {
++            return Math.floor(pixels / units.gu(1))
++        }
++
++        columnSpacing: {
++            // parent.width = columns * columnWidth + (columns-1) * spacing + spacing(margins)
++            var expectedColumns = Math.max(1, Math.floor(parent.width / (columnWidth + minimumColumnSpacing)));
++            Math.floor((parent.width - expectedColumns * columnWidth) / expectedColumns);
++        }
++    }
++}
 === modified file 'qml/Dash/CardCarousel.qml'
 --- qml/Dash/CardCarousel.qml	2014-05-27 07:46:14 +0000
 +++ qml/Dash/CardCarousel.qml	2014-06-20 10:32:22 +0000
@@ -27,9 +27,7 @@
      property alias selectedItemScaleFactor: carousel.selectedItemScaleFactor
      property alias tileAspectRatio: carousel.tileAspectRatio
--    currentItem: carousel.currentItem
      height: carousel.implicitHeight + units.gu(6)
--    verticalSpacing: units.gu(3)
      Carousel {
          id: carousel
 === modified file 'qml/Dash/CardFilterGrid.qml'
 --- qml/Dash/CardFilterGrid.qml	2014-05-23 13:52:36 +0000
 +++ qml/Dash/CardFilterGrid.qml	2014-06-20 10:32:22 +0000
@@ -22,11 +22,8 @@
      expandable: filterGrid.expandable
      collapsedHeight: filterGrid.collapsedHeight
--    margins: filterGrid.margins
      uncollapsedHeight: filterGrid.uncollapsedHeight
      originY: filterGrid.originY
--    verticalSpacing: units.gu(1)
--    currentItem: filterGrid.currentItem
      height: filterGrid.height
      filtered: filterGrid.filtered
@@ -40,7 +37,7 @@
          minimumHorizontalSpacing: units.gu(1)
          delegateWidth: cardTool.cardWidth
          delegateHeight: cardTool.cardHeight
--        verticalSpacing: genericFilterGrid.verticalSpacing
++        verticalSpacing: units.gu(1)
          model: genericFilterGrid.model
          collapsedRowCount: Math.min(2, cardTool && cardTool.template && cardTool.template["collapsed-rows"] || 2)
          displayMarginBeginning: genericFilterGrid.displayMarginBeginning
 === added file 'qml/Dash/CardVerticalJournal.qml'
 --- qml/Dash/CardVerticalJournal.qml	1970-01-01 00:00:00 +0000
 +++ qml/Dash/CardVerticalJournal.qml	2014-06-20 10:32:22 +0000
@@ -0,0 +1,89 @@
++/*
++ * Copyright (C) 2014 Canonical, Ltd.
++ *
++ * 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; 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.0
++import Ubuntu.Components 0.1
++import "../Components"
++
++DashRenderer {
++    id: root
++
++    readonly property double collapseLimit: units.gu(35)
++
++    uncollapsedHeight: cardVerticalJournal.implicitHeight
++    collapsedHeight: Math.min(collapseLimit, cardVerticalJournal.implicitHeight)
++    expandable: uncollapsedHeight > collapseLimit
++
++    // This minHeight is used as bootstrapper for the height. Vertical Journal
++    // is special by the fact that it doesn't know how to calculate its implicit height unless we give it
++    // enough height that it can start creating its children so we make sure it has enough height for that
++    // in case the model is non empty
++    readonly property double minHeight: root.model.count > 1 ? cardVerticalJournal.rowSpacing + 1 : 0
++    height: filtered ? Math.max(collapsedHeight, minHeight) : uncollapsedHeight
++
++    Behavior on height {
++        id: heightBehaviour
++        enabled: false
++        animation: UbuntuNumberAnimation {
++            onRunningChanged: {
++                if (!running) {
++                    heightBehaviour.enabled = false
++                }
++            }
++        }
++    }
++
++    function setFilter(filter, animate) {
++        heightBehaviour.enabled = animate;
++        filtered = filter;
++    }
++
++    ResponsiveVerticalJournal {
++        id: cardVerticalJournal
++
++        model: root.model
++
++        anchors.fill: parent
++        rowSpacing: minimumColumnSpacing
++        columnWidth: cardTool.cardWidth
++
++        displayMarginBeginning: root.displayMarginBeginning
++        displayMarginEnd: root.displayMarginEnd
++
++        delegate: Loader {
++            id: loader
++            sourceComponent: cardTool.cardComponent
++            width: cardTool.cardWidth
++            anchors.horizontalCenter: parent.horizontalCenter
++            onLoaded: {
++                item.objectName = "delegate" + index;
++                item.width = Qt.binding(function() { return cardTool.cardWidth; });
++                item.height = Qt.binding(function() { return cardTool.cardHeight; });
++                item.fixedArtShapeSize = Qt.binding(function() { return cardTool.artShapeSize; });
++                item.fixedHeaderHeight = Qt.binding(function() { return cardTool.headerHeight; });
++                item.cardData = Qt.binding(function() { return model; });
++                item.template = Qt.binding(function() { return cardTool.template; });
++                item.components = Qt.binding(function() { return cardTool.components; });
++                item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
++            }
++            Connections {
++                target: loader.item
++                onClicked: root.clicked(index, result)
++                onPressAndHold: root.pressAndHold(index)
++            }
++        }
++    }
++}
 === modified file 'qml/Dash/DashRenderer.qml'
 --- qml/Dash/DashRenderer.qml	2014-05-23 13:52:36 +0000
 +++ qml/Dash/DashRenderer.qml	2014-06-20 10:32:22 +0000
@@ -25,8 +25,6 @@
      property int collapsedHeight: height
--    property int margins: 0
--
      property int uncollapsedHeight: height
      property int displayMarginBeginning: 0
@@ -35,11 +33,6 @@
      property real originY: 0
--    property real verticalSpacing: 0
--
--    // The current item of the renderer
--    property var currentItem
--
      // The model to renderer
      property var model
 === modified file 'qml/Dash/GenericScopeView.qml'
 --- qml/Dash/GenericScopeView.qml	2014-06-11 09:42:10 +0000
 +++ qml/Dash/GenericScopeView.qml	2014-06-20 10:32:22 +0000
@@ -1,5 +1,5 @@
  /*
-- * Copyright (C) 2013 Canonical, Ltd.
++ * Copyright (C) 2013-2014 Canonical, Ltd.
+  *
   * 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
@@ -147,6 +147,7 @@
                  source: {
                      switch (cardTool.categoryLayout) {
                          case "carousel": return "CardCarousel.qml";
++                        case "vertical-journal": return "CardVerticalJournal.qml";
                          case "running-apps": return "Apps/RunningApplicationsGrid.qml";
                          case "grid":
                          default: return "CardFilterGrid.qml";
@@ -202,6 +203,14 @@
                          previewListView.currentIndex = index;
                          previewListView.open = true
+                     }
++                    onExpandableChanged: {
++                        // This can happen with the VJ that doesn't know how height it will be on creation
++                        // so doesn't set expandable until a bit too late for onLoaded
++                        if (rendererLoader.item.expandable) {
++                            var shouldFilter = baseItem.category != categoryView.expandedCategoryId;
++                            rendererLoader.item.setFilter(shouldFilter, false /*animate*/);
++                        }
++                    }
+                 }
                  Connections {
                      target: categoryView
 === modified file 'tests/plugins/Dash/cardcreator/1.res'
 --- tests/plugins/Dash/cardcreator/1.res	2014-05-19 15:53:16 +0000
 +++ tests/plugins/Dash/cardcreator/1.res	2014-06-20 10:32:22 +0000
@@ -56,7 +56,7 @@
+                         }
+                     }
+                 }
--readonly property int headerHeight: titleLabel.height + titleLabel.anchors.topMargin * 2;
++readonly property int headerHeight: titleLabel.height;
  Label {
                      id: titleLabel;
                      objectName: "titleLabel";
 === modified file 'tests/plugins/Dash/cardcreator/2.res'
 --- tests/plugins/Dash/cardcreator/2.res	2014-05-19 15:53:16 +0000
 +++ tests/plugins/Dash/cardcreator/2.res	2014-06-20 10:32:22 +0000
@@ -46,12 +46,13 @@
+                     }
+                 }
  readonly property size artShapeSize: Qt.size(-1, -1);
--readonly property int headerHeight: row.height + row.margins * 2;
++readonly property int headerHeight: row.height;
  Row {
                      id: row;
                      objectName: "outerRow";
                      property real margins: units.gu(1);
                      spacing: margins;
++                    height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
                      anchors { top: parent.top;
                                       topMargin: units.gu(1);
                      left: parent.left;
 === modified file 'tests/plugins/Dash/cardcreator/3.res'
 --- tests/plugins/Dash/cardcreator/3.res	2014-05-19 15:53:16 +0000
 +++ tests/plugins/Dash/cardcreator/3.res	2014-06-20 10:32:22 +0000
@@ -56,7 +56,7 @@
+                         }
+                     }
+                 }
--readonly property int headerHeight: titleLabel.height + titleLabel.anchors.topMargin * 2 + subtitleLabel.height + subtitleLabel.anchors.topMargin;
++readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;
  Label {
                      id: titleLabel;
                      objectName: "titleLabel";
 === modified file 'tests/plugins/Dash/cardcreator/4.res'
 --- tests/plugins/Dash/cardcreator/4.res	2014-05-19 15:53:16 +0000
 +++ tests/plugins/Dash/cardcreator/4.res	2014-06-20 10:32:22 +0000
@@ -13,12 +13,13 @@
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
  readonly property size artShapeSize: Qt.size(-1, -1);
--readonly property int headerHeight: row.height + row.margins * 2;
++readonly property int headerHeight: row.height;
  Row {
                      id: row;
                      objectName: "outerRow";
                      property real margins: units.gu(1);
                      spacing: margins;
++                    height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
                      anchors { top: parent.top;
                                       topMargin: units.gu(1);
                      left: parent.left;
 === modified file 'tests/plugins/Dash/cardcreator/5.res'
 --- tests/plugins/Dash/cardcreator/5.res	2014-05-19 15:53:16 +0000
 +++ tests/plugins/Dash/cardcreator/5.res	2014-06-20 10:32:22 +0000
@@ -68,7 +68,7 @@
              visible: showHeader && status == Loader.Ready;
              sourceComponent: ShaderEffect {
                  id: overlay;
--                height: fixedHeaderHeight != -1 ? fixedHeaderHeight : headerHeight;
++                height: fixedHeaderHeight != -1 ? fixedHeaderHeight + units.gu(1) * 2 : headerHeight;
                  opacity: 0.6;
                  property var source: ShaderEffectSource {
                      id: shaderSource;
@@ -96,7 +96,7 @@
                      }";
+             }
+         }
--readonly property int headerHeight: titleLabel.height + titleLabel.anchors.topMargin * 2 + subtitleLabel.height + subtitleLabel.anchors.topMargin;
++readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;
  Label {
                      id: titleLabel;
                      objectName: "titleLabel";
 === modified file 'tests/qmltests/CMakeLists.txt'
 --- tests/qmltests/CMakeLists.txt	2014-06-11 15:36:51 +0000
 +++ tests/qmltests/CMakeLists.txt	2014-06-20 10:32:22 +0000
@@ -29,6 +29,7 @@
  add_qml_test(Components Rating)
  add_qml_test(Components ResponsiveFlowView)
  add_qml_test(Components ResponsiveGridView)
++add_qml_test(Components ResponsiveVerticalJournal IMPORT_PATHS ${qmltest_DEFAULT_IMPORT_PATHS} ${CMAKE_BINARY_DIR}/plugins)
  add_qml_test(Components SeeMore)
  add_qml_test(Components Showable)
  add_qml_test(Components PageHeaderLabel)
 === added file 'tests/qmltests/Components/tst_ResponsiveVerticalJournal.qml'
 --- tests/qmltests/Components/tst_ResponsiveVerticalJournal.qml	1970-01-01 00:00:00 +0000
 +++ tests/qmltests/Components/tst_ResponsiveVerticalJournal.qml	2014-06-20 10:32:22 +0000
@@ -0,0 +1,183 @@
++/*
++ * Copyright 2013-2014 Canonical Ltd.
++ *
++ * 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; 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.0
++import QtTest 1.0
++import ".."
++import "../../../qml/Components"
++import Ubuntu.Components.ListItems 0.1 as ListItem
++import Ubuntu.Components 0.1
++import Utils 0.1
++import Unity.Test 0.1 as UT
++
++Item {
++    width: units.gu(80) + controls.width
++    height: units.gu(80)
++
++    Column {
++        id: controls
++        width: units.gu(40)
++        height: parent.height
++        anchors.top: parent.top
++        anchors.right: parent.right
++        ListItem.ValueSelector {
++            id: cardSizeSelector
++            text: "card-size"
++            // small, medium, large card sizes
++            values: [units.gu(12), units.gu(18.5), units.gu(38)]
++            selectedIndex: 0
++        }
++        ListItem.ValueSelector {
++            id: minColumnSpacingSelector
++            text: "minColumnSpacing"
++            values: [0, units.gu(2), units.gu(8), units.gu(25)]
++            selectedIndex: 0
++        }
++        ListItem.ValueSelector {
++            id: rowSpacingSelector
++            text: "rowSpacing"
++            values: [units.gu(1), units.gu(2), units.gu(4), units.gu(8)]
++            selectedIndex: 1
++        }
++    }
++
++    ListModel {
++        id: fakeModel
++        ListElement { name: "A" }
++        ListElement { name: "B" }
++        ListElement { name: "C" }
++        ListElement { name: "D" }
++        ListElement { name: "E" }
++        ListElement { name: "F" }
++        ListElement { name: "G" }
++        ListElement { name: "H" }
++        ListElement { name: "I" }
++        ListElement { name: "J" }
++        ListElement { name: "K" }
++        ListElement { name: "L" }
++        ListElement { name: "M" }
++        ListElement { name: "N" }
++        ListElement { name: "O" }
++        ListElement { name: "P" }
++        ListElement { name: "Q" }
++        ListElement { name: "R" }
++        ListElement { name: "S" }
++        ListElement { name: "T" }
++        ListElement { name: "U" }
++    }
++
++    SortFilterProxyModel {
++        id: wrappedFakeModel
++        model: fakeModel
++    }
++
++    Rectangle {
++        id: journalRect
++        height: parent.height
++        color: "grey"
++        anchors.top: parent.top
++        anchors.left: parent.left
++        anchors.right: controls.left
++
++        ResponsiveVerticalJournal {
++            id: journal
++            anchors.fill: parent
++            model: wrappedFakeModel
++            minimumColumnSpacing: minColumnSpacingSelector.values[minColumnSpacingSelector.selectedIndex]
++            rowSpacing: rowSpacingSelector.values[rowSpacingSelector.selectedIndex]
++            columnWidth: cardSizeSelector.values[cardSizeSelector.selectedIndex]
++
++            delegate: Rectangle {
++                id: delegateItem
++                // So that it can be identified by test code
++                property bool isJournalDelegate: true
++                objectName: "delegate" + index
++                color: "grey"
++                border.color: "red"
++                border.width: 1
++
++                // width derived from Card's template['card-size']
++                width: cardSizeSelector.values[cardSizeSelector.selectedIndex]
++                height: Math.max(units.gu(8), Math.floor(Math.random() * 300))
++
++                Rectangle {
++                    color: "green"
++                    anchors.centerIn: parent
++                    width: units.gu(6)
++                    height: units.gu(6)
++                    Text {
++                        anchors.centerIn: parent
++                        text: name
++                    }
++                }
++
++                Text { x:0; y:0; text:"(" + parent.x + ", " + parent.y + ")"}
++            }
++        }
++    }
++
++    UT.UnityTestCase {
++        name: "ResponsiveVerticalJournal"
++        when: windowShown
++
++        function test_minimumColumnSpacing_data() {
++            return [{minColumnSpacingIndex: 0, expectedColumns: 2},
++                    {minColumnSpacingIndex: 1, expectedColumns: 2},
++                    {minColumnSpacingIndex: 2, expectedColumns: 1}]
++        }
++
++        // Test how minimumColumnSpacing affects column count.
++        function test_minimumColumnSpacing(data) {
++            cardSizeSelector.selectedIndex = 2 // large card
++
++            minColumnSpacingSelector.selectedIndex = data.minColumnSpacingIndex
++
++            tryCompareFunction(countJournalDelegatesOnFirstRow, data.expectedColumns)
++        }
++
++        function test_maximumNumberOfColumns_data() {
++            return [{cardSizeIndex: 0, expectedColumns: 6},
++                    {cardSizeIndex: 1, expectedColumns: 4},
++                    {cardSizeIndex: 2, expectedColumns: 2}]
++        }
++
++        // Test how maximumNumberOfColumns and columnWidth affect column count.
++        function test_maximumNumberOfColumns(data) {
++            minColumnSpacingSelector.selectedIndex = 0 // no spacing
++
++            cardSizeSelector.selectedIndex = data.cardSizeIndex // columnWidth
++
++            tryCompareFunction(countJournalDelegatesOnFirstRow, data.expectedColumns)
++        }
++
++        function countJournalDelegatesOnFirstRow() {
++            return __countJournalDelegatesOnFirstRow(journal.visibleChildren, 0)
++        }
++
++        function __countJournalDelegatesOnFirstRow(objList, total) {
++            for (var i = 0; i < objList.length; ++i) {
++                var child = objList[i];
++                if (child.isJournalDelegate !== undefined && child.y === 0) {
++                    ++total;
++                } else {
++                    total = __countJournalDelegatesOnFirstRow(
++                            child.visibleChildren, total)
++                }
++            }
++            return total
++        }
++    }
++}