import QtQuick 2.0 import Sailfish.Silica 1.0 import QtGraphicalEffects 1.0 SilicaGridView { signal slideshowShow(int vIndex); signal slideshowIndexChanged(int vIndex); onSlideshowIndexChanged: { navigateTo(vIndex) } id: gridView property bool isPortrait: false ListModel { id: listModel ListElement { icon: "image://theme/icon-m-home" slug: "home" name: "Home" active: true unread: false } ListElement { icon: "image://theme/icon-m-alarm" slug: "notifications" name: "Notifications" active: false } ListElement { icon: "image://theme/icon-m-whereami" slug: "local" name: "Local" active: false unread: false } ListElement { icon: "image://theme/icon-m-website" slug: "federated" name: "Federated" active: false unread: false } ListElement { icon: "image://theme/icon-m-search" slug: "search" name: "Search" active: false unread: false } } model: listModel anchors.fill: parent currentIndex: -1 cellWidth: isPortrait ? gridView.width : gridView.width / model.count cellHeight: isPortrait ? gridView.height/model.count : gridView.height delegate: BackgroundItem { clip: true id: rectangle width: gridView.cellWidth height: gridView.cellHeight GridView.onAdd: AddAnimation { target: rectangle } GridView.onRemove: RemoveAnimation { target: rectangle } GlassItem { id: effect visible: !isPortrait && unread width: Theme.itemSizeMedium height: Theme.itemSizeMedium dimmed: true anchors.bottom: parent.bottom anchors.bottomMargin: -height/2 anchors.horizontalCenter: parent.horizontalCenter color: Theme.highlightColor } GlassItem { id: effect2 visible: isPortrait && unread width: Theme.itemSizeMedium height: Theme.itemSizeMedium dimmed: false anchors.right: parent.right; anchors.rightMargin: -height/2; anchors.verticalCenter: parent.verticalCenter color: Theme.highlightColor } OpacityRampEffect { sourceItem: label offset: 0.5 } /*Image { source: model.icon + (highlighted ? Theme.highlightColor : (model.active ? Theme.primaryColor : Theme.secondaryHighlightColor)) anchors.centerIn: parent }*/ ColorOverlay { anchors.fill: image source: image color: (highlighted ? Theme.highlightColor : (model.active ? Theme.primaryColor : Theme.secondaryHighlightColor)) } Image { id: image sourceSize.width: Theme.iconSizeMedium sourceSize.height: Theme.iconSizeMedium source: model.icon// +'?'+ (highlighted ? Theme.highlightColor : (model.active ? Theme.primaryColor : Theme.secondaryHighlightColor)) anchors.centerIn: parent visible: false // smooth: true } Text { anchors.bottom: parent.bottom anchors.bottomMargin: Theme.paddingSmall anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter visible: false text: model.name font.pixelSize: Theme.fontSizeExtraSmall/2 color: (highlighted ? Theme.highlightColor : (model.active ? Theme.primaryColor : Theme.secondaryHighlightColor)) } Label { id: label visible: false anchors { bottom: parent.bottom } horizontalAlignment : Text.AlignHCente width: parent.width color: (highlighted ? Theme.highlightColor : Theme.secondaryHighlightColor) text: { return model.name.toUpperCase(); } font { pixelSize: Theme.fontSizeExtraSmall family: Theme.fontFamilyHeading } } onClicked: { slideshowShow(index) console.log(index) navigateTo(model.slug) effect.state = "right" } } function navigateTo(slug){ for(var i = 0; i < listModel.count; i++){ if (listModel.get(i).slug === slug || i===slug) listModel.setProperty(i, 'active', true); else listModel.setProperty(i, 'active', false); } console.log(slug) } VerticalScrollDecorator {} }