ui/settings/AppletListViewer.qml

0001 // SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Window
0006 import QtQuick.Layouts
0007 import QtQuick.Dialogs
0008 import QtQuick.Controls as QQC2
0009
0010 import org.kde.kirigami as Kirigami
0011 import org.kde.plasma.plasmoid
0012 import org.kde.plasma.private.shell 2.0
0013 import org.kde.private.mobile.homescreen.folio 1.0 as Folio
0014 import org.kde.kirigamiaddons.formcard 1.0 as FormCard
0015 import org.kde.plasma.components 3.0 as PC3
0016
0017 import '../delegate'
0018 import '../private'
0019
0020 MouseArea {
0021     id: root
0022
0023     property var homeScreen
0024
0025     signal requestClose()
0026     onClicked: root.requestClose()
0027
0028     Kirigami.Theme.inherit: false
0029     Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
0030
0031     Rectangle {
0032         anchors.fill: parent
0033         color: Qt.rgba(0, 0, 0, 0.7)
0034     }
0035
0036     RowLayout {
0037         id: header
0038         spacing: Kirigami.Units.largeSpacing
0039         anchors.left: parent.left
0040         anchors.leftMargin: Kirigami.Units.gridUnit
0041         anchors.top: parent.top
0042         anchors.topMargin: Kirigami.Units.gridUnit * 3 + root.homeScreen.topMargin
0043
0044         PC3.ToolButton {
0045             Layout.alignment: Qt.AlignVCenter
0046             icon.name: 'go-previous'
0047             implicitWidth: Kirigami.Units.gridUnit * 2
0048             implicitHeight: Kirigami.Units.gridUnit * 2
0049             padding: Kirigami.Units.smallSpacing
0050             onClicked: root.requestClose()
0051         }
0052
0053         PC3.Label {
0054             id: heading
0055             color: 'white'
0056             text: i18n("Widgets")
0057             font.weight: Font.Bold
0058             font.pointSize: Kirigami.Theme.defaultFont.pointSize * 1.5
0059         }
0060     }
0061
0062     GridView {
0063         id: gridView
0064         clip: true
0065         reuseItems: true
0066
0067         opacity: 0 // we display with the opacity gradient below
0068
0069         anchors.top: header.bottom
0070         anchors.topMargin: Kirigami.Units.gridUnit
0071         anchors.left: parent.left
0072         anchors.leftMargin: root.homeScreen.leftMargin
0073         anchors.right: parent.right
0074         anchors.rightMargin: root.homeScreen.rightMargin
0075         anchors.bottom: parent.bottom
0076         anchors.bottomMargin: root.homeScreen.bottomMargin
0077
0078         model: widgetExplorer.widgetsModel
0079
0080         readonly property real maxCellWidth: Kirigami.Units.gridUnit * 20
0081         readonly property real intendedCellWidth: Kirigami.Units.gridUnit * 8
0082         readonly property int columns: Math.min(5, (width - leftMargin - rightMargin) / intendedCellWidth)
0083
0084         cellWidth: (width - leftMargin - rightMargin) / columns
0085         cellHeight: cellWidth + Kirigami.Units.gridUnit * 3
0086
0087         readonly property real horizontalMargin: Math.round(width * 0.05)
0088         leftMargin: horizontalMargin
0089         rightMargin: horizontalMargin
0090
0091         MouseArea {
0092             z: -1
0093             anchors.fill: parent
0094             onClicked: root.requestClose()
0095         }
0096
0097         delegate: MouseArea {
0098             id: delegate
0099             width: gridView.cellWidth
0100             height: gridView.cellHeight
0101
0102             cursorShape: Qt.PointingHandCursor
0103             hoverEnabled: true
0104
0105             property real zoomScale: pressed ? 0.8 : 1
0106             transform: Scale {
0107                 origin.x: delegate.width / 2;
0108                 origin.y: delegate.height / 2;
0109                 xScale: delegate.zoomScale
0110                 yScale: delegate.zoomScale
0111             }
0112
0113             Behavior on zoomScale { NumberAnimation { duration: 80 } }
0114
0115             readonly property string pluginName: model.pluginName
0116
0117             onPressAndHold: {
0118                 root.requestClose();
0119                 Folio.HomeScreenState.closeSettingsView();
0120
0121                 let mappedCoords = root.homeScreen.prepareStartDelegateDrag(null, delegate);
0122                 const widthOffset = Folio.HomeScreenState.pageCellWidth / 2;
0123                 const heightOffset = Folio.HomeScreenState.pageCellHeight / 2;
0124
0125                 Folio.HomeScreenState.startDelegateWidgetListDrag(
0126                     mappedCoords.x + mouseX - widthOffset,
0127                     mappedCoords.y + mouseY - heightOffset,
0128                     widthOffset,
0129                     heightOffset,
0130                     pluginName
0131                 );
0132             }
0133
0134             Rectangle {
0135                 id: background
0136                 color: Qt.rgba(255, 255, 255, 0.3)
0137                 visible: delegate.containsMouse
0138                 radius: Kirigami.Units.smallSpacing
0139                 anchors.fill: parent
0140             }
0141
0142             ColumnLayout {
0143                 anchors.fill: parent
0144                 anchors.margins: Kirigami.Units.largeSpacing
0145
0146                 Item {
0147                     id: iconWidget
0148                     Layout.fillWidth: true
0149                     Layout.maximumWidth: delegate.width
0150                     Layout.preferredHeight: Kirigami.Units.iconSizes.large
0151                     Layout.preferredWidth: Kirigami.Units.iconSizes.large
0152                     Layout.alignment: Qt.AlignBottom
0153
0154                     Kirigami.Icon {
0155                         anchors.centerIn: parent
0156                         source: model.decoration
0157                         visible: model.screenshot == ""
0158                         implicitWidth: Kirigami.Units.iconSizes.large
0159                         implicitHeight: Kirigami.Units.iconSizes.large
0160                     }
0161                     Image {
0162                         anchors.centerIn: parent
0163                         fillMode: Image.PreserveAspectFit
0164                         source: model.screenshot
0165                         width: Kirigami.Units.iconSizes.large
0166                         height: Kirigami.Units.iconSizes.large
0167                     }
0168                 }
0169
0170                 PC3.Label {
0171                     id: heading
0172                     Layout.fillWidth: true
0173                     Layout.maximumWidth: delegate.width
0174                     Layout.alignment: Qt.AlignCenter
0175                     text: model.name
0176                     elide: Text.ElideRight
0177                     wrapMode: Text.Wrap
0178                     maximumLineCount: 2
0179                     horizontalAlignment: Text.AlignHCenter
0180                     font.weight: Font.Bold
0181                 }
0182
0183                 PC3.Label {
0184                     Layout.fillWidth: true
0185                     Layout.maximumWidth: delegate.width
0186                     Layout.alignment: Qt.AlignTop
0187                     // otherwise causes binding loop due to the way the Plasma sets the height
0188                     height: implicitHeight
0189                     text: model.description
0190                     font.pointSize: Kirigami.Theme.smallFont.pointSize
0191                     wrapMode: Text.Wrap
0192                     elide: Text.ElideRight
0193                     maximumLineCount: heading.lineCount === 1 ? 3 : 2
0194                     horizontalAlignment: Text.AlignHCenter
0195                 }
0196             }
0197         }
0198     }
0199
0200     // opacity gradient at grid edges
0201     FlickableOpacityGradient {
0202         anchors.fill: gridView
0203         flickable: gridView
0204     }
0205
0206     WidgetExplorer {
0207         id: widgetExplorer
0208         containment: Plasmoid
0209     }
0210 }