harbour-tooter/qml/pages/components/Navigation.qml

173 lines
4.7 KiB
QML
Raw Normal View History

import QtQuick 2.0
import Sailfish.Silica 1.0
2018-05-24 12:14:02 +03:00
import QtGraphicalEffects 1.0
SilicaGridView {
id: gridView
property bool isPortrait: false
signal slideshowShow(int vIndex)
signal slideshowIndexChanged(int vIndex)
onSlideshowIndexChanged: {
navigateTo(vIndex)
}
ListModel {
id: listModel
ListElement {
2018-05-24 16:00:10 +03:00
icon: "image://theme/icon-m-home"
2018-05-24 12:14:02 +03:00
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"
2018-05-24 12:14:02 +03:00
slug: "local"
name: "Local"
active: false
2018-05-24 12:14:02 +03:00
unread: false
}
ListElement {
icon: "image://theme/icon-m-website"
slug: "federated"
name: "Federated"
2018-05-24 12:14:02 +03:00
active: false
unread: false
2018-05-24 12:14:02 +03:00
}
2018-05-24 12:14:02 +03:00
ListElement {
2018-05-24 16:00:10 +03:00
icon: "image://theme/icon-m-search"
slug: "search"
name: "Search"
active: false
unread: false
}
}
model: listModel
currentIndex: -1
2017-06-07 17:09:41 +03:00
cellWidth: isPortrait ? gridView.width : gridView.width / model.count
cellHeight: isPortrait ? gridView.height/model.count : gridView.height
anchors.fill: parent
delegate: BackgroundItem {
id: rectangle
clip: true
width: gridView.cellWidth
height: gridView.cellHeight
GridView.onAdd: AddAnimation {
target: rectangle
}
GridView.onRemove: RemoveAnimation {
target: rectangle
}
GlassItem {
id: effect
visible: !isPortrait && unread
dimmed: true
color: Theme.highlightColor
width: Theme.itemSizeMedium
height: Theme.itemSizeMedium
anchors {
bottom: parent.bottom
bottomMargin: -height/2
horizontalCenter: parent.horizontalCenter
}
}
GlassItem {
id: effect2
visible: isPortrait && unread
dimmed: false
color: Theme.highlightColor
width: Theme.itemSizeMedium
height: Theme.itemSizeMedium
anchors {
right: parent.right
rightMargin: -height/2
verticalCenter: parent.verticalCenter
}
}
OpacityRampEffect {
sourceItem: label
offset: 0.5
}
2018-05-24 12:14:02 +03:00
ColorOverlay {
source: image
color: (highlighted ? Theme.highlightColor : (model.active ? Theme.primaryColor : Theme.secondaryHighlightColor))
anchors.fill: image
}
Image {
id: image
visible: false
source: model.icon // +'?'+ (highlighted ? Theme.highlightColor : (model.active ? Theme.primaryColor : Theme.secondaryHighlightColor))
2018-05-24 16:00:10 +03:00
sourceSize.width: Theme.iconSizeMedium
sourceSize.height: Theme.iconSizeMedium
anchors.centerIn: parent
}
2017-06-07 17:09:41 +03:00
Text {
visible: false
2018-05-24 12:14:02 +03:00
text: model.name
font.pixelSize: Theme.fontSizeExtraSmall/2
color: (highlighted
? Theme.highlightColor
: (model.active ? Theme.primaryColor : Theme.secondaryHighlightColor))
horizontalAlignment: Text.AlignHCenter
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
bottomMargin: Theme.paddingSmall
}
}
Label {
id: label
visible: false
color: (highlighted ? Theme.highlightColor : Theme.secondaryHighlightColor)
text: {
return model.name.toUpperCase();
}
font.pixelSize: Theme.fontSizeExtraSmall
font.family: Theme.fontFamilyHeading
width: parent.width
horizontalAlignment : Text.AlignHCenter
anchors.bottom: parent.bottom
}
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 {}
}