components/qml/TileView.qml

0001 /*
0002     SPDX-FileCopyrightText: 2019 Aditya Mehra <aix.m@outlook.com>
0003
0004     SPDX-License-Identifier: GPL-2.0-or-later
0005 */
0006
0007 import QtQuick 2.14
0008 import QtQuick.Layouts 1.14
0009 import QtQuick.Window 2.14
0010 import QtQuick.Controls 2.14 as Controls
0011 import Qt5Compat.GraphicalEffects
0012
0013 import org.kde.plasma.core 2.0 as PlasmaCore
0014 import org.kde.plasma.components 3.0 as PlasmaComponents
0015 import org.kde.kirigami 2.12 as Kirigami
0016
0017 FocusScope {
0018     id: root
0019     signal activated
0020     property string title
0021     property alias view: view
0022     property alias delegate: view.delegate
0023     property alias model: view.model
0024     property alias currentIndex: view.currentIndex
0025     property alias currentItem: view.currentItem
0026     Layout.fillWidth: true
0027
0028     implicitHeight: view.implicitHeight + header.implicitHeight
0029
0030     //TODO:dynamic
0031     property int columns: Math.max(3, Math.floor(width / (Kirigami.Units.gridUnit * 8)))
0032
0033     property alias cellWidth: view.cellWidth
0034     property alias cellHeight: view.cellHeight
0035     readonly property real screenRatio: view.Window.window ? view.Window.window.width / view.Window.window.height : 1.6
0036
0037     property Item navigationUp
0038     property Item navigationDown
0039
0040     Kirigami.Heading {
0041         id: header
0042         anchors {
0043             left: parent.left
0044             right: parent.right
0045             top: parent.top
0046         }
0047         text: title
0048         layer.enabled: true
0049         color: Kirigami.Theme.textColor
0050     }
0051
0052     ListView {
0053         id: view
0054         anchors {
0055             left: parent.left
0056             right: parent.right
0057             top: header.baseline
0058             bottom: parent.bottom
0059             topMargin: Kirigami.Units.largeSpacing*2
0060             leftMargin: -Kirigami.Units.largeSpacing
0061         }
0062         focus: true
0063
0064         z: activeFocus ? 10: 1
0065         keyNavigationEnabled: true
0066         //Centering disabled as experiment
0067         highlightRangeMode: ListView.ApplyRange
0068
0069         highlightFollowsCurrentItem: true
0070         snapMode: ListView.SnapToItem
0071         cacheBuffer: width
0072         implicitHeight: cellHeight
0073         rightMargin: width-cellWidth
0074         property int cellWidth: (Kirigami.Units.iconSizes.huge + Kirigami.Units.largeSpacing*4)
0075         property int cellHeight: cellWidth + Kirigami.Units.gridUnit * 3
0076         preferredHighlightBegin: 0
0077         preferredHighlightEnd: cellWidth
0078         displayMarginBeginning: cellWidth
0079         displayMarginEnd: cellWidth
0080
0081         highlightMoveVelocity: -1
0082         highlightMoveDuration: Kirigami.Units.longDuration
0083
0084         onContentWidthChanged: if (view.currentIndex === 0) view.contentX = view.originX
0085
0086         onMovementEnded: flickEnded()
0087         onFlickEnded: currentIndex = indexAt(mapToItem(contentItem, cellWidth, 0).x, 0)
0088
0089         spacing: 0
0090         orientation: ListView.Horizontal
0091
0092         move: Transition {
0093             SmoothedAnimation {
0094                 property: "x"
0095                 duration: Kirigami.Units.longDuration
0096             }
0097         }
0098
0099         KeyNavigation.left: root
0100         KeyNavigation.right: root
0101
0102         Keys.onDownPressed:  {
0103             if (!navigationDown) {
0104                 return;
0105             }
0106
0107             if (navigationDown instanceof TileView) {
0108                 navigationDown.currentIndex = Math.min(Math.floor(navigationDown.view.indexAt(navigationDown.view.contentX + cellWidth/2, height/2)) + (view.currentIndex - view.indexAt(view.contentX + cellWidth/2, height/2)), navigationDown.view.count - 1);
0109
0110                 if (navigationDown.currentIndex < 0) {
0111                     navigationDown.currentIndex = view.currentIndex > 0 ? navigationDown.view.count - 1 : 0
0112                 }
0113             }
0114
0115             navigationDown.forceActiveFocus();
0116         }
0117
0118         Keys.onUpPressed:  {
0119             if (!navigationUp) {
0120                 return;
0121             }
0122
0123             if (navigationUp instanceof TileView) {
0124                 navigationUp.currentIndex = Math.min(Math.floor(navigationUp.view.indexAt(navigationUp.view.contentX + cellWidth/2, height/2)) + (view.currentIndex - view.indexAt(view.contentX + cellWidth/2, height/2)), navigationUp.view.count - 1);
0125
0126                 if (navigationUp.currentIndex < 0) {
0127                     navigationUp.currentIndex = view.currentIndex > 0 ? navigationUp.view.count - 1 : 0
0128                 }
0129             }
0130
0131             navigationUp.forceActiveFocus();
0132         }
0133     }
0134 }