ui/delegate/AbstractDelegate.qml

0001 // SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick 2.15
0005 import QtQuick.Layouts 1.1
0006 import QtQuick.Controls 2.3 as Controls
0007 import Qt5Compat.GraphicalEffects
0008 import QtQuick.Effects
0009
0010 import org.kde.kirigami 2.20 as Kirigami
0011
0012 import org.kde.kquickcontrolsaddons 2.0
0013
0014 import org.kde.private.mobile.homescreen.folio 1.0 as Folio
0015 import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
0016 import org.kde.plasma.private.mobileshell as MobileShell
0017
0018 Folio.DelegateTouchArea {
0019     id: delegate
0020
0021     property string name
0022     property bool shadow: false
0023
0024     property alias contentItem: visualItem.contentItem
0025     property alias delegateItem: delegateWrapper
0026     property alias labelOpacity: label.opacity
0027
0028     signal afterClickAnimation()
0029
0030     // grow/shrink animation
0031     property real zoomScale: 1
0032     property bool clickRequested: false
0033
0034     NumberAnimation on zoomScale {
0035         id: shrinkAnim
0036         running: false
0037         duration: ShellSettings.Settings.animationsEnabled ? 80 : 1
0038         to: ShellSettings.Settings.animationsEnabled ? 0.8 : 1
0039         onFinished: {
0040             if (!delegate.pressed) {
0041                 growAnim.restart();
0042             }
0043         }
0044     }
0045
0046     NumberAnimation on zoomScale {
0047         id: growAnim
0048         running: false
0049         duration: ShellSettings.Settings.animationsEnabled ? 80 : 1
0050         to: 1
0051         onFinished: {
0052             if (delegate.clickRequested) {
0053                 delegate.afterClickAnimation();
0054                 delegate.clickRequested = false;
0055             }
0056         }
0057     }
0058
0059     cursorShape: Qt.PointingHandCursor
0060     onPressedChanged: (pressed) => {
0061         if (pressed) {
0062             growAnim.stop();
0063             shrinkAnim.restart();
0064         } else if (!pressed && !shrinkAnim.running) {
0065             growAnim.restart();
0066         }
0067     }
0068     // trigger handled by press animation
0069     onClicked: clickRequested = true;
0070
0071     layer.enabled: delegate.shadow
0072     layer.effect: DelegateShadow {}
0073
0074     Item {
0075         id: delegateWrapper
0076         anchors.fill: parent
0077
0078         ColumnLayout {
0079             anchors.fill: parent
0080             spacing: 0
0081
0082             // transform is not on delegateWrapper because when it's zoomed in, it apparently
0083             // affects the delegate's x and y position, which messes up the starting drag and drop
0084             // position (for mapFromItem in HomeScreen.qml)
0085             transform: Scale {
0086                 origin.x: delegate.width / 2;
0087                 origin.y: delegate.height / 2;
0088                 xScale: delegate.zoomScale
0089                 yScale: delegate.zoomScale
0090             }
0091
0092             MobileShell.BaseItem {
0093                 id: visualItem
0094
0095                 Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
0096                 Layout.minimumWidth: Folio.FolioSettings.delegateIconSize
0097                 Layout.minimumHeight: Folio.FolioSettings.delegateIconSize
0098                 Layout.preferredHeight: Layout.minimumHeight
0099
0100                 // darken effect when hovered
0101                 // TODO: removed for now, since hovered property seems to overlap with the touch pressed event
0102                 // layer {
0103                 //     enabled: delegate.hovered
0104                 //     effect: ColorOverlay {
0105                 //         color: Qt.rgba(0, 0, 0, 0.3)
0106                 //     }
0107                 // }
0108             }
0109
0110             DelegateLabel {
0111                 id: label
0112                 opacity: text.length > 0
0113
0114                 Layout.fillWidth: true
0115                 Layout.preferredHeight: Folio.HomeScreenState.pageDelegateLabelHeight
0116                 Layout.topMargin: Folio.HomeScreenState.pageDelegateLabelSpacing
0117                 Layout.leftMargin: -parent.anchors.leftMargin + Kirigami.Units.smallSpacing
0118                 Layout.rightMargin: -parent.anchors.rightMargin + Kirigami.Units.smallSpacing
0119
0120                 text: delegate.name
0121                 color: "white"
0122             }
0123         }
0124     }
0125 }
0126
0127