From 642190ceab2a46ebd7ee38ded32d395b8fe4518d Mon Sep 17 00:00:00 2001 From: marco_piccolino Date: Wed, 24 Jun 2015 13:44:00 +0200 Subject: [PATCH] [GridList] with configurable padding, image aspect ratio and column breakpoints Each added breakpoint increases number of columns by 1 [TitleTile] with primary text on dark scrim --- demo/GridListDemo.qml | 22 +++++++ demo/main.qml | 2 +- modules/Material/GridList.qml | 53 +++++++++++++++ modules/Material/Label.qml | 2 +- modules/Material/Material.pro | 1 + modules/Material/Tiles/TitleTile.qml | 98 ++++++++++++++++++++++++++++ modules/Material/Tiles/qmldir | 2 + modules/Material/qmldir | 1 + 8 files changed, 179 insertions(+), 2 deletions(-) create mode 100644 demo/GridListDemo.qml create mode 100644 modules/Material/GridList.qml create mode 100644 modules/Material/Tiles/TitleTile.qml create mode 100644 modules/Material/Tiles/qmldir diff --git a/demo/GridListDemo.qml b/demo/GridListDemo.qml new file mode 100644 index 00000000..6654fc5b --- /dev/null +++ b/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) + } + } +} + diff --git a/demo/main.qml b/demo/main.qml index 90bc8859..45388685 100644 --- a/demo/main.qml +++ b/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 ] diff --git a/modules/Material/GridList.qml b/modules/Material/GridList.qml new file mode 100644 index 00000000..026b7d41 --- /dev/null +++ b/modules/Material/GridList.qml @@ -0,0 +1,53 @@ +/* + * QML Material - An application framework implementing Material Design. + * Copyright (C) 2015 Marco Piccolino + * + * 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 . + */ + +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= 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) + } +} + diff --git a/modules/Material/Label.qml b/modules/Material/Label.qml index d6dfe0e3..3db211db 100644 --- a/modules/Material/Label.qml +++ b/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 diff --git a/modules/Material/Material.pro b/modules/Material/Material.pro index ab16e777..429e8efa 100644 --- a/modules/Material/Material.pro +++ b/modules/Material/Material.pro @@ -6,6 +6,7 @@ deployment.files += qmldir \ icons \ fonts \ ListItems \ + Tiles \ Transitions deployment.path = $$[QT_INSTALL_QML]/Material diff --git a/modules/Material/Tiles/TitleTile.qml b/modules/Material/Tiles/TitleTile.qml new file mode 100644 index 00000000..6dd40e7a --- /dev/null +++ b/modules/Material/Tiles/TitleTile.qml @@ -0,0 +1,98 @@ +/* + * QML Material - An application framework implementing Material Design. + * Copyright (C) 2015 Marco Piccolino + * + * 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 . + */ + +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 + } +} diff --git a/modules/Material/Tiles/qmldir b/modules/Material/Tiles/qmldir new file mode 100644 index 00000000..69a23ad4 --- /dev/null +++ b/modules/Material/Tiles/qmldir @@ -0,0 +1,2 @@ +module Material.Tiles +TitleTile 0.1 TitleTile.qml \ No newline at end of file diff --git a/modules/Material/qmldir b/modules/Material/qmldir index f210c9f9..de68537a 100644 --- a/modules/Material/qmldir +++ b/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