adds a GridList with configurable padding, image aspect ratio and breakpoints

demo/GridListDemo.qml

@@ -0,0 +1,22 @@
+import QtQuick 2.0
+import Material 0.1
+import Material.Tiles 0.1 as Tile
+
+Item {
+    anchors.fill: parent
+    anchors.margins: Units.dp(16)
+
+    GridList {
+        id: gridList
+
+        model: 10
+        breakpoints: [480,600,1024]
+        padding: Units.dp(1)
+        tileRatio: "4:3"
+        delegate: Tile.TitleTile {
+            primaryText: "Get the full story behind image "+(modelData+1)
+            imageSource: "http://lorempixel.com/400/200/sports/"+(modelData+1)
+        }
+    }
+}
+

demo/main.qml

@@ -24,7 +24,7 @@ ApplicationWindow {
     ]
 
     property var compoundComponents: [
-            "Bottom Sheet", "Dialog", "Forms", "List Items", "Page Stack", "Time Picker"
+            "Bottom Sheet", "Dialog", "Forms", "Grid List", "List Items", "Page Stack", "Time Picker"
     ]
 
     property var sections: [ styles, basicComponents, compoundComponents ]

modules/Material/GridList.qml

@@ -0,0 +1,53 @@
+/*
+ * QML Material - An application framework implementing Material Design.
+ * Copyright (C) 2015 Marco Piccolino <[email protected]>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation, either version 2.1 of the
+ * License, or (at your option) any later version.
+ *
+ * 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Material 0.1
+
+GridView {
+    id: gridList
+
+    property var breakpoints: [600,1024]
+    property int padding: Units.dp(4)
+    property string tileRatio: _aspect.indexOf(tileRatio) !== -1 ? tileRatio : "1:1"
+
+    property var _aspect: ["16:9","3:2","4:3","1:1","3:4","2:3"]
+
+    anchors {
+        fill: parent
+        leftMargin: padding
+        topMargin: padding
+    }
+    clip: true
+    cellWidth: {
+        var columns = 2
+        for (var i=0; i<breakpoints.length; i++) {
+            if (parent && parent.width >= Units.dp(breakpoints[i])) {
+                columns += 1
+            }
+        }
+        Math.floor(width / columns)
+    }
+    cellHeight: {
+        var ratio = tileRatio.split(":")
+        var ratioW =  ratio[0]
+        var ratioH =  ratio[1]
+        Math.round(cellWidth * ratioH / ratioW)
+    }
+}
+

modules/Material/Label.qml

@@ -123,7 +123,7 @@ Text {
         }
     }
 
-    font.capitalization: style == "button" ? Font.AllUppercase : Font.MixedCase
+    //font.capitalization: style == "button" ? Font.AllUppercase : Font.MixedCase
 
     color: Theme.light.textColor
 

modules/Material/Material.pro

@@ -6,6 +6,7 @@ deployment.files += qmldir \
                     icons \
                     fonts \
                     ListItems \
+                    Tiles \
                     Transitions
 
 deployment.path = $$[QT_INSTALL_QML]/Material

modules/Material/Tiles/TitleTile.qml

@@ -0,0 +1,98 @@
+/*
+ * QML Material - An application framework implementing Material Design.
+ * Copyright (C) 2015 Marco Piccolino <[email protected]>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation, either version 2.1 of the
+ * License, or (at your option) any later version.
+ *
+ * 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Material 0.1
+
+/*!
+   \qmltype TitleTile
+   \inqmlmodule Material 0.1
+   \brief An image tile for grid lists, with a title on two lines over a dark scrim.
+ */
+
+Item {
+    id: tile
+
+    property alias primaryText: primaryText.text
+    property alias imageSource: image.source
+
+    property var _view: GridView.view
+
+    width: _view && _view.cellHeight ?
+               Math.round(_view.cellWidth - _view.padding) :
+               Units.dp(158)
+    height: _view && _view.cellHeight ?
+                Math.round(_view.cellHeight - _view.padding) :
+                Math.round(width * 2/3)
+
+    signal clicked
+    signal pressAndHold
+
+    Image {
+        id: image
+
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectCrop
+        asynchronous: true
+    }
+
+    Rectangle {
+        id: scrim
+
+        height: bar.height * 1.5
+        width: parent.width
+        anchors.bottom: parent.bottom
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
+            GradientStop { position: 0.7; color: Qt.rgba(0,0,0,0.4) }
+            GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.8) }
+        }
+    }
+
+    Item {
+        id: bar
+
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: Units.dp(68)
+        anchors.margins: Units.dp(16)
+
+        Label {
+            id: primaryText
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            wrapMode: Text.WordWrap
+            maximumLineCount: 2
+            elide: Text.ElideRight
+            text: "Primary text on two lines"
+            color: Theme.dark.textColor
+            style: "subheading"
+        }
+    }
+
+    Ink {
+        id: ink
+
+        onClicked: tile.clicked()
+        onPressAndHold: tile.pressAndHold()
+
+        anchors.fill: parent
+    }
+}

modules/Material/Tiles/qmldir

@@ -0,0 +1,2 @@
+module Material.Tiles
+TitleTile 0.1 TitleTile.qml

modules/Material/qmldir

@@ -12,6 +12,7 @@ Card 0.1 Card.qml
 CheckBox 0.1 CheckBox.qml
 Dialog 0.1 Dialog.qml
 Dropdown 0.1 Dropdown.qml
+GridList 0.1 GridList.qml
 Icon 0.1 Icon.qml
 IconButton 0.1 IconButton.qml
 Ink 0.1 Ink.qml