Unity 8
ResponsiveVerticalJournal.qml
1 /*
2  * Copyright (C) 2013-2014 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.4
18 import Ubuntu.Components 1.3
19 import "../Components"
20 import Dash 0.1
21 
22 /*!
23  \brief A responsive wrapper around VerticalJournal.
24 
25  Based on defined column width, delegates are laid out in columns following
26  a top-left most position rule.
27 
28  Example:
29  +-----+ +-----+ +-----+
30  | | | 2 | | |
31  | | | | | |
32  | 1 | +-----+ | 3 |
33  | | +-----+ | |
34  | | | | +-----+
35  +-----+ | 4 | +-----+
36  +-----+ | | | 5 |
37  | 6 | +-----+ | |
38  | | +-----+
39  +-----+
40 */
41 Item {
42  id: root
43 
44  property real minimumColumnSpacing: units.gu(1)
45 
46  property alias columnWidth: verticalJournalView.columnWidth
47  property alias rowSpacing: verticalJournalView.rowSpacing
48  property alias model: verticalJournalView.model
49  property alias delegate: verticalJournalView.delegate
50  property alias cacheBuffer: verticalJournalView.cacheBuffer
51  property real displayMarginBeginning: 0
52  property real displayMarginEnd: 0
53 
54  implicitHeight: verticalJournalView.implicitHeight + rowSpacing
55  clip: height < implicitHeight
56 
57  VerticalJournal {
58  id: verticalJournalView
59  objectName: "responsiveVerticalJournalView"
60  anchors {
61  fill: parent
62  leftMargin: columnSpacing / 2
63  rightMargin: columnSpacing / 2
64  topMargin: rowSpacing / 2
65  bottomMargin: rowSpacing / 2
66  }
67 
68  displayMarginBeginning: -Math.max(-root.displayMarginBeginning - anchors.topMargin, 0)
69  displayMarginEnd:-Math.max(-root.displayMarginEnd - anchors.topMargin, 0)
70 
71  function px2gu(pixels) {
72  return Math.floor(pixels / units.gu(1))
73  }
74 
75  columnSpacing: {
76  // parent.width = columns * columnWidth + (columns-1) * spacing + spacing(margins)
77  var expectedColumns = Math.max(1, Math.floor(parent.width / (columnWidth + minimumColumnSpacing)));
78  Math.floor((parent.width - expectedColumns * columnWidth) / expectedColumns);
79  }
80  }
81 }