d18b147 · unity8 · git.iko.soy

git.iko.soy/unity8

Drop FilterGrid and simplify DashRenderer and height animation in dash.

commitd18b1474f579d13e4546d50adbb8bf545e1746bc authorMichał Sawicz <michal.sawicz@canonical.com> dateThu 10 Jul 2014, 17:24 (12 years ago) parentd0b53b9

6 files changed+58−195

compare with xenial

unifiedsplit

qml/Components/FilterGrid.qml−124 qml/Components/ResponsiveGridView.qml+1−1 qml/Dash/CardFilterGrid.qml → qml/Dash/CardGrid.qml+17−22 qml/Dash/CardVerticalJournal.qml+1−20 qml/Dash/DashRenderer.qml−9 qml/Dash/GenericScopeView.qml+39−19

qml/Components/FilterGrid.qmldeleted−124

@@ -1,124 +0,0 @@

1−/*

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.0

18−import Ubuntu.Components 0.1

19−import Utils 0.1

20−import "../Components"

21−

22−/*

23− A ResponsiveGridView that can optionally have the number of rows being displayed

24− reduced to collapsedRowCount, in which case a button saying "View all (123)"

25− will be shown at the bottom. If clicked, FilterGrid will them expand vertically

26− to display all rows.

27− */

28−Item {

29− id: root

30−

31− /* Whether, when collapsed, a button should be displayed enabling the user to expand

32− the grid to its full size. */

33− readonly property bool expandable: model.count > rowsWhenCollapsed * iconTileGrid.columns

34−

35− property var model: null

36−

37− /* Maximum number of rows to be show when filter=true. */

38− property int collapsedRowCount: 2

39− property int uncollapsedRowCount: Math.ceil(model.count / columns)

40− /* Never show more rows than model would fill up. */

41− readonly property int rowsWhenCollapsed: Math.min(collapsedRowCount, uncollapsedRowCount)

42− readonly property int collapsedHeight: iconTileGrid.contentHeightForRows(rowsWhenCollapsed)

43− readonly property int uncollapsedHeight: iconTileGrid.contentHeightForRows(uncollapsedRowCount)

44−

45− property alias minimumHorizontalSpacing: iconTileGrid.minimumHorizontalSpacing

46− property alias maximumNumberOfColumns: iconTileGrid.maximumNumberOfColumns

47− property alias columns: iconTileGrid.columns

48− property alias delegateWidth: iconTileGrid.delegateWidth

49− property alias delegateHeight: iconTileGrid.delegateHeight

50− property alias verticalSpacing: iconTileGrid.verticalSpacing

51− readonly property alias margins: iconTileGrid.margins

52− property alias delegate: iconTileGrid.delegate

53− property alias cellWidth: iconTileGrid.cellWidth

54− property alias cellHeight: iconTileGrid.cellHeight

55− property alias displayMarginBeginning: iconTileGrid.displayMarginBeginning

56− property alias displayMarginEnd: iconTileGrid.displayMarginEnd

57− readonly property alias originY: iconTileGrid.originY

58− readonly property alias flicking: iconTileGrid.flicking

59− readonly property alias moving: iconTileGrid.moving

60− readonly property alias pressDelay: iconTileGrid.pressDelay

61− property alias highlightIndex: iconTileGrid.highlightIndex

62− readonly property alias currentItem: iconTileGrid.currentItem

63− readonly property alias filtered: d.filter

64−

65− QtObject {

66− id: d

67− // We do have filter and collapsed properties because we need to decouple

68− // the real filtering with the animation since the closing animation

69− // i.e. setFilter(false. true) we still need to not be filtering until

70− // the animation finishes otherwise we hide the items when the animation

71− // is still running

72− property bool filter: true

73− property bool collapsed: true

74− }

75−

76− height: d.collapsed ? root.collapsedHeight : root.uncollapsedHeight

77− clip: filterAnimation.running

78−

79− Behavior on height {

80− id: heightBehaviour

81− enabled: false

82− NumberAnimation {

83− id: filterAnimation

84− // Duration and easing here match the ListViewWithPageHeader::m_contentYAnimation

85− // otherwise since both animations can run at the same time you'll get

86− // some visual weirdness.

87− duration: 200

88− easing.type: Easing.InOutQuad

89− onRunningChanged: {

90− if (!running) {

91− d.filter = d.collapsed;

92− }

93− heightBehaviour.enabled = false;

94− }

95− }

96− }

97−

98− function setFilter(filter, animate) {

99− heightBehaviour.enabled = animate;

100− d.collapsed = filter;

101− if (!animate || !filter) {

102− d.filter = filter;

103− }

104− }

105−

106− ResponsiveGridView {

107− id: iconTileGrid

108−

109− anchors { left: parent.left; right: parent.right }

110− height: totalContentHeight

111− interactive: false

112−

113− minimumHorizontalSpacing: units.gu(0.5)

114− maximumNumberOfColumns: 6

115− delegateWidth: units.gu(11)

116− delegateHeight: units.gu(9.5)

117− verticalSpacing: units.gu(2)

118−

119− model: LimitProxyModel {

120− model: root.model

121− limit: d.filter ? rowsWhenCollapsed * iconTileGrid.columns : -1

122− }

123− }

124−}

qml/Components/ResponsiveGridView.qml+1−1

@@ -47,7 +47,7 @@ Item {

4747 readonly property alias currentItem: gridView.currentItem

4848

4949 function contentHeightForRows(rows) {

50− return rows * cellHeight + verticalSpacing

50+ return rows * cellHeight;

5151 }

5252

5353 GridView {

qml/Dash/CardFilterGrid.qml → qml/Dash/CardGrid.qmlrenamed+17−22

@@ -18,33 +18,28 @@ import QtQuick 2.0

1818import "../Components"

1919

2020DashRenderer {

21− id: genericFilterGrid

21+ id: root

2222

23− expandable: filterGrid.expandable

24− collapsedHeight: filterGrid.collapsedHeight

25− uncollapsedHeight: filterGrid.uncollapsedHeight

26− originY: filterGrid.originY

27− height: filterGrid.height

28− filtered: filterGrid.filtered

23+ readonly property int collapsedRows: cardTool && cardTool.template && cardTool.template["collapsed-rows"]

2924

30− function setFilter(filter, animate) {

31− filterGrid.setFilter(filter, animate)

32− }

25+ uncollapsedHeight: grid.totalContentHeight

26+ collapsedHeight: collapsedRows ? Math.min(grid.contentHeightForRows(collapsedRows), uncollapsedHeight) : uncollapsedHeight

27+ originY: grid.originY

3328

34− FilterGrid {

35− id: filterGrid

36− width: genericFilterGrid.width

29+ ResponsiveGridView {

30+ id: grid

31+ anchors.fill: parent

3732 minimumHorizontalSpacing: units.gu(1)

3833 delegateWidth: cardTool.cardWidth

3934 delegateHeight: cardTool.cardHeight

4035 verticalSpacing: units.gu(1)

41− model: genericFilterGrid.model

42− collapsedRowCount: Math.min(2, cardTool && cardTool.template && cardTool.template["collapsed-rows"] || 2)

43− displayMarginBeginning: genericFilterGrid.displayMarginBeginning

44− displayMarginEnd: genericFilterGrid.displayMarginEnd

36+ model: root.model

37+ displayMarginBeginning: root.displayMarginBeginning

38+ displayMarginEnd: root.displayMarginEnd

39+ interactive: false

4540 delegate: Item {

46− width: filterGrid.cellWidth

47− height: filterGrid.cellHeight

41+ width: grid.cellWidth

42+ height: grid.cellHeight

4843 Loader {

4944 id: loader

5045 sourceComponent: cardTool.cardComponent

@@ -58,12 +53,12 @@ DashRenderer {

5853 item.template = Qt.binding(function() { return cardTool.template; });

5954 item.components = Qt.binding(function() { return cardTool.components; });

6055 item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });

61− item.scopeStyle = genericFilterGrid.scopeStyle;

56+ item.scopeStyle = root.scopeStyle;

6257 }

6358 Connections {

6459 target: loader.item

65− onClicked: genericFilterGrid.clicked(index, result)

66− onPressAndHold: genericFilterGrid.pressAndHold(index)

60+ onClicked: root.clicked(index, result)

61+ onPressAndHold: root.pressAndHold(index)

6762 }

6863 }

6964 }

qml/Dash/CardVerticalJournal.qml+1−20

@@ -24,32 +24,13 @@ DashRenderer {

2424 readonly property double collapseLimit: units.gu(35)

2525

2626 uncollapsedHeight: cardVerticalJournal.implicitHeight

27− collapsedHeight: Math.min(collapseLimit, cardVerticalJournal.implicitHeight)

28− expandable: uncollapsedHeight > collapseLimit

27+ collapsedHeight: Math.max(Math.min(collapseLimit, cardVerticalJournal.implicitHeight), minHeight)

2928

3029 // This minHeight is used as bootstrapper for the height. Vertical Journal

3130 // is special by the fact that it doesn't know how to calculate its implicit height unless we give it

3231 // enough height that it can start creating its children so we make sure it has enough height for that

3332 // in case the model is non empty

3433 readonly property double minHeight: root.model.count >= 1 ? cardVerticalJournal.rowSpacing + 1 : 0

35− height: filtered ? Math.max(collapsedHeight, minHeight) : uncollapsedHeight

36−

37− Behavior on height {

38− id: heightBehaviour

39− enabled: false

40− animation: UbuntuNumberAnimation {

41− onRunningChanged: {

42− if (!running) {

43− heightBehaviour.enabled = false

44− }

45− }

46− }

47− }

48−

49− function setFilter(filter, animate) {

50− heightBehaviour.enabled = animate;

51− filtered = filter;

52− }

5334

5435 ResponsiveVerticalJournal {

5536 id: cardVerticalJournal

qml/Dash/DashRenderer.qml−9

@@ -17,12 +17,6 @@

1717import QtQuick 2.0

1818

1919Item {

20− // Can the item be expanded?

21− property bool expandable: false

22−

23− // In case it can be expanded, is it filtered

24− property bool filtered: true

25−

2620 property int collapsedHeight: height

2721

2822 property int uncollapsedHeight: height

@@ -50,7 +44,4 @@ Item {

5044 /// Emitted when the user pressed and held on an item

5145 /// @param index is the index of the held item

5246 signal pressAndHold(int index)

53−

54− function setFilter(filter, animate) {

55− }

5647}

qml/Dash/GenericScopeView.qml+39−19

@@ -128,11 +128,16 @@ FocusScope {

128128 highlightWhenPressed: false

129129 showDivider: false

130130

131− readonly property bool expandable: rendererLoader.item ? rendererLoader.item.expandable : false

132− readonly property bool filtered: rendererLoader.item ? rendererLoader.item.filtered : true

131+ readonly property bool expandable: item ? item.uncollapsedHeight > item.collapsedHeight : false

132+ property bool filtered: true

133133 readonly property string category: categoryId

134134 readonly property var item: rendererLoader.item

135135

136+ function setFilter(filter, animate) {

137+ heightBehaviour.enabled = animate;

138+ filtered = filter;

139+ }

140+

136141 CardTool {

137142 id: cardTool

138143 objectName: "cardTool"

@@ -142,6 +147,18 @@ FocusScope {

142147 viewWidth: parent.width

143148 }

144149

150+ onExpandableChanged: {

151+ // This can happen with the VJ that doesn't know how height it will be on creation

152+ // so doesn't set expandable until a bit too late for onLoaded

153+ if (expandable) {

154+ var shouldFilter = baseItem.category != categoryView.expandedCategoryId;

155+ baseItem.setFilter(shouldFilter, false /*animate*/);

156+ }

157+ }

158+

159+ onHeightChanged: rendererLoader.updateDelegateCreationRange();

160+ onYChanged: rendererLoader.updateDelegateCreationRange();

161+

145162 Loader {

146163 id: rendererLoader

147164 anchors {

@@ -151,13 +168,27 @@ FocusScope {

151168 topMargin: hasSectionHeader ? 0 : units.gu(2)

152169 }

153170

171+ Behavior on height {

172+ id: heightBehaviour

173+ enabled: false

174+ animation: UbuntuNumberAnimation {

175+ onRunningChanged: {

176+ if (!running) {

177+ heightBehaviour.enabled = false

178+ }

179+ }

180+ }

181+ }

182+

183+ height: baseItem.filtered ? item.collapsedHeight : item.uncollapsedHeight

184+

154185 source: {

155186 switch (cardTool.categoryLayout) {

156187 case "carousel": return "CardCarousel.qml";

157188 case "vertical-journal": return "CardVerticalJournal.qml";

158189 case "running-apps": return "Apps/RunningApplicationsGrid.qml";

159190 case "grid":

160− default: return "CardFilterGrid.qml";

191+ default: return "CardGrid.qml";

161192 }

162193 }

163194

@@ -176,9 +207,9 @@ FocusScope {

176207 }

177208 item.objectName = Qt.binding(function() { return categoryId })

178209 item.scopeStyle = scopeView.scopeStyle;

179− if (item.expandable) {

210+ if (baseItem.expandable) {

180211 var shouldFilter = categoryId != categoryView.expandedCategoryId;

181− item.setFilter(shouldFilter, false /*animate*/);

212+ baseItem.setFilter(shouldFilter, false /*animate*/);

182213 }

183214 updateDelegateCreationRange();

184215 item.cardTool = cardTool;

@@ -211,14 +242,6 @@ FocusScope {

211242 previewListView.currentIndex = index;

212243 previewListView.open = true

213244 }

214− onExpandableChanged: {

215− // This can happen with the VJ that doesn't know how height it will be on creation

216− // so doesn't set expandable until a bit too late for onLoaded

217− if (rendererLoader.item.expandable) {

218− var shouldFilter = baseItem.category != categoryView.expandedCategoryId;

219− rendererLoader.item.setFilter(shouldFilter, false /*animate*/);

220− }

221− }

222245 }

223246 Connections {

224247 target: categoryView

@@ -227,15 +250,15 @@ FocusScope {

227250 }

228251 function collapseAllButExpandedCategory() {

229252 var item = rendererLoader.item;

230− if (item.expandable) {

253+ if (baseItem.expandable) {

231254 var shouldFilter = categoryId != categoryView.expandedCategoryId;

232− if (shouldFilter != item.filter) {

255+ if (shouldFilter != baseItem.filtered) {

233256 // If the filter animation will be seen start it, otherwise, just flip the switch

234257 var shrinkingVisible = shouldFilter && y + item.collapsedHeight < categoryView.height;

235258 var growingVisible = !shouldFilter && y + height < categoryView.height;

236259 if (!previewListView.open || !shouldFilter) {

237260 var animate = shrinkingVisible || growingVisible;

238− item.setFilter(shouldFilter, animate)

261+ baseItem.setFilter(shouldFilter, animate)

239262 if (!shouldFilter && !previewListView.open) {

240263 categoryView.maximizeVisibleArea(index, item.uncollapsedHeight);

241264 }

@@ -304,9 +327,6 @@ FocusScope {

304327 z: -1

305328 }

306329 }

307−

308− onHeightChanged: rendererLoader.updateDelegateCreationRange();

309− onYChanged: rendererLoader.updateDelegateCreationRange();

310330 }

311331

312332 sectionProperty: "name"