contents/ui/HomeScreen.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.Effects
0008 import QtQuick.Controls as QQC2
0009
0010 import org.kde.kirigami 2.20 as Kirigami
0011
0012 import org.kde.plasma.plasmoid 2.0
0013 import org.kde.plasma.components 3.0 as PC3
0014 import org.kde.plasma.private.mobileshell as MobileShell
0015 import org.kde.private.mobile.homescreen.folio 1.0 as Folio
0016
0017 import "./delegate"
0018 import "./settings"
0019
0020 Item {
0021     id: root
0022
0023     property real topMargin: 0
0024     property real bottomMargin: 0
0025     property real leftMargin: 0
0026     property real rightMargin: 0
0027
0028     property bool interactive: true
0029
0030     property Folio.HomeScreenState homeScreenState: Folio.HomeScreenState
0031
0032     // non-widget drop animation
0033     readonly property bool dropAnimationRunning: delegateDragItem.dropAnimationRunning || widgetDragItem.dropAnimationRunning
0034
0035     // widget that is currently being dragged (or dropped)
0036     readonly property Folio.FolioWidget currentlyDraggedWidget: widgetDragItem.widget
0037
0038     // how much to scale out in the settings mode
0039     readonly property real settingsModeHomeScreenScale: 0.8
0040
0041     onTopMarginChanged: Folio.HomeScreenState.viewTopPadding = root.topMargin
0042     onBottomMarginChanged: Folio.HomeScreenState.viewBottomPadding = root.bottomMargin
0043     onLeftMarginChanged: Folio.HomeScreenState.viewLeftPadding = root.leftMargin
0044     onRightMarginChanged: Folio.HomeScreenState.viewRightPadding = root.rightMargin
0045
0046     // called by any delegates when starting drag
0047     // returns the mapped coordinates to be used in the home screen state
0048     function prepareStartDelegateDrag(delegate, item) {
0049         swipeArea.setSkipSwipeThreshold(true);
0050
0051         if (delegate) {
0052             delegateDragItem.delegate = delegate;
0053         }
0054         return root.mapFromItem(item, 0, 0);
0055     }
0056
0057     function cancelDelegateDrag() {
0058         homeScreenState.cancelDelegateDrag();
0059     }
0060
0061     // sets the coordinates for the folder opening/closing animation
0062     function prepareFolderOpen(item) {
0063         return root.mapFromItem(item, 0, 0);
0064     }
0065
0066     function openConfigure() {
0067         Plasmoid.internalAction("configure").trigger();
0068     }
0069
0070     // determine how tall an app label is, for delegate measurements
0071     DelegateLabel {
0072         id: appLabelMetrics
0073         text: "M\nM"
0074         visible: false
0075
0076         onHeightChanged: Folio.HomeScreenState.pageDelegateLabelHeight = appLabelMetrics.height
0077
0078         Component.onCompleted: {
0079             Folio.HomeScreenState.pageDelegateLabelWidth = Kirigami.Units.smallSpacing;
0080         }
0081     }
0082
0083     // determine screen dimensions
0084     Item {
0085         id: screenDimensions
0086         anchors.fill: parent
0087
0088         onWidthChanged: Folio.HomeScreenState.viewWidth = width;
0089         onHeightChanged: Folio.HomeScreenState.viewHeight = height;
0090     }
0091
0092     // a way of stopping focus
0093     FocusScope {
0094         id: noFocus
0095     }
0096
0097     // area that can be swiped
0098     MobileShell.SwipeArea {
0099         id: swipeArea
0100         anchors.fill: parent
0101
0102         interactive: root.interactive &&
0103             settings.homeScreenInteractive &&
0104             (appDrawer.flickable.contentY <= 10 || // disable the swipe area when we are swiping in the app drawer, and not in drag-and-drop
0105                 Folio.HomeScreenState.swipeState === Folio.HomeScreenState.AwaitingDraggingDelegate ||
0106                 Folio.HomeScreenState.swipeState === Folio.HomeScreenState.DraggingDelegate ||
0107                 Folio.HomeScreenState.swipeState === Folio.HomeScreenState.SwipingAppDrawerGrid ||
0108                 Folio.HomeScreenState.viewState !== Folio.HomeScreenState.AppDrawerView)
0109
0110         onSwipeStarted: {
0111             homeScreenState.swipeStarted();
0112         }
0113         onSwipeEnded: {
0114             homeScreenState.swipeEnded();
0115         }
0116         onSwipeMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => {
0117             homeScreenState.swipeMoved(totalDeltaX, totalDeltaY, deltaX, deltaY);
0118         }
0119
0120         onPressedChanged: {
0121             if (pressed) {
0122                 // ensures that components like the widget settings overlay close when swiping
0123                 noFocus.forceActiveFocus();
0124             }
0125         }
0126
0127         SettingsComponent {
0128             id: settings
0129             width: parent.width
0130             height: parent.height
0131             opacity: Folio.HomeScreenState.settingsOpenProgress
0132             z: 1
0133
0134             // move the settings out of the way if it is not visible
0135             // NOTE: we do this instead of setting visible to false, because
0136             //       it doesn't mess with widget drag and drop
0137             y: (opacity > 0) ? 0 : parent.height
0138
0139             settingsModeHomeScreenScale: root.settingsModeHomeScreenScale
0140             homeScreen: root
0141         }
0142
0143         Item {
0144             id: mainHomeScreen
0145             anchors.fill: parent
0146
0147             // we stop showing halfway through the animation
0148             opacity: 1 - Math.max(homeScreenState.appDrawerOpenProgress, homeScreenState.searchWidgetOpenProgress, homeScreenState.folderOpenProgress) * 2
0149             visible: opacity > 0 // prevent handlers from picking up events
0150
0151             transform: [
0152                 Scale {
0153                     property real scaleFactor: Math.max(homeScreenState.appDrawerOpenProgress, homeScreenState.searchWidgetOpenProgress)
0154                     origin.x: mainHomeScreen.width / 2
0155                     origin.y: mainHomeScreen.height / 2
0156                     yScale: 1 - (scaleFactor * 2) * 0.1
0157                     xScale: 1 - (scaleFactor * 2) * 0.1
0158                 }
0159             ]
0160
0161             HomeScreenPages {
0162                 id: homeScreenPages
0163                 homeScreen: root
0164
0165                 anchors.topMargin: root.topMargin
0166                 anchors.leftMargin: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left ? 0 : root.leftMargin
0167                 anchors.rightMargin: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right ? 0 : root.rightMargin
0168                 anchors.bottomMargin: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? 0 : root.bottomMargin
0169
0170                 // update the model with page dimensions
0171                 onWidthChanged: {
0172                     homeScreenState.pageWidth = homeScreenPages.width;
0173                 }
0174                 onHeightChanged: {
0175                     homeScreenState.pageHeight = homeScreenPages.height;
0176                 }
0177
0178                 transform: [
0179                     Scale {
0180                         // animation when settings opens
0181                         property real scaleFactor: 1 - Folio.HomeScreenState.settingsOpenProgress * (1 - settingsModeHomeScreenScale)
0182                         origin.x: root.leftMargin + (root.width - root.rightMargin - root.leftMargin) / 2
0183                         origin.y: root.height * settingsModeHomeScreenScale / 2
0184                         xScale: scaleFactor
0185                         yScale: scaleFactor
0186                     }
0187                 ]
0188
0189                 states: [
0190                     State {
0191                         name: "bottom"
0192                         when: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom
0193                         AnchorChanges {
0194                             target: homeScreenPages
0195                             anchors.top: parent.top
0196                             anchors.bottom: favouritesBar.top
0197                             anchors.left: parent.left
0198                             anchors.right: parent.right
0199                         }
0200                     }, State {
0201                         name: "left"
0202                         when: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left
0203                         AnchorChanges {
0204                             target: homeScreenPages
0205                             anchors.top: parent.top
0206                             anchors.bottom: parent.bottom
0207                             anchors.left: favouritesBar.right
0208                             anchors.right: parent.right
0209                         }
0210                     }, State {
0211                         name: "right"
0212                         when: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right
0213                         AnchorChanges {
0214                             target: homeScreenPages
0215                             anchors.top: parent.top
0216                             anchors.bottom: parent.bottom
0217                             anchors.left: parent.left
0218                             anchors.right: favouritesBar.left
0219                         }
0220                     }
0221                 ]
0222             }
0223
0224             Rectangle {
0225                 id: favouritesBarScrim
0226                 color: Qt.rgba(255, 255, 255, 0.2)
0227
0228                 // don't show in settings mode
0229                 opacity: 1 - Folio.HomeScreenState.settingsOpenProgress
0230                 visible: Folio.FolioSettings.showFavouritesBarBackground
0231
0232                 anchors.top: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? favouritesBar.top : parent.top
0233                 anchors.bottom: parent.bottom
0234                 anchors.left: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right ? favouritesBar.left : parent.left
0235                 anchors.right: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left ? favouritesBar.right : parent.right
0236
0237                 // because of the scale animation, we need to extend the panel out a bit
0238                 anchors.topMargin: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? 0 : -Kirigami.Units.gridUnit * 5
0239                 anchors.bottomMargin: -Kirigami.Units.gridUnit * 5
0240                 anchors.leftMargin: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right ? 0 : -Kirigami.Units.gridUnit * 5
0241                 anchors.rightMargin: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left ? 0 : -Kirigami.Units.gridUnit * 5
0242             }
0243
0244             FavouritesBar {
0245                 id: favouritesBar
0246                 homeScreen: root
0247                 leftMargin: root.leftMargin
0248                 topMargin: root.topMargin
0249
0250                 // don't show in settings mode
0251                 opacity: 1 - Folio.HomeScreenState.settingsOpenProgress
0252                 visible: opacity > 0
0253
0254                 // one is ignored as anchors are set
0255                 height: Kirigami.Units.gridUnit * 6
0256                 width: Kirigami.Units.gridUnit * 6
0257
0258                 anchors.topMargin: root.topMargin
0259                 anchors.bottomMargin: root.bottomMargin
0260                 anchors.leftMargin: root.leftMargin
0261                 anchors.rightMargin: root.rightMargin
0262
0263                 states: [
0264                     State {
0265                         name: "bottom"
0266                         when: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom
0267                         AnchorChanges {
0268                             target: favouritesBar
0269                             anchors.top: undefined
0270                             anchors.bottom: parent.bottom
0271                             anchors.left: parent.left
0272                             anchors.right: parent.right
0273                         }
0274                         PropertyChanges {
0275                             target: favouritesBar
0276                             height: Kirigami.Units.gridUnit * 6
0277                         }
0278                     }, State {
0279                         name: "left"
0280                         when: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left
0281                         AnchorChanges {
0282                             target: favouritesBar
0283                             anchors.top: parent.top
0284                             anchors.bottom: parent.bottom
0285                             anchors.left: parent.left
0286                             anchors.right: undefined
0287                         }
0288                         PropertyChanges {
0289                             target: favouritesBar
0290                             width: Kirigami.Units.gridUnit * 6
0291                         }
0292                     }, State {
0293                         name: "right"
0294                         when: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right
0295                         AnchorChanges {
0296                             target: favouritesBar
0297                             anchors.top: parent.top
0298                             anchors.bottom: parent.bottom
0299                             anchors.left: undefined
0300                             anchors.right: parent.right
0301                         }
0302                         PropertyChanges {
0303                             target: favouritesBar
0304                             width: Kirigami.Units.gridUnit * 6
0305                         }
0306                     }
0307                 ]
0308             }
0309
0310             Item {
0311                 id: pageIndicatorWrapper
0312                 property bool favouritesBarAtBottom: Folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom
0313
0314                 // don't show in settings mode
0315                 opacity: 1 - Folio.HomeScreenState.settingsOpenProgress
0316
0317                 anchors.top: parent.top
0318                 anchors.left: parent.left
0319                 anchors.right: parent.right
0320                 anchors.bottom: favouritesBarAtBottom ? favouritesBar.top : parent.bottom
0321
0322                 anchors.topMargin: root.topMargin
0323                 anchors.leftMargin: root.leftMargin
0324                 anchors.rightMargin: root.rightMargin
0325                 anchors.bottomMargin: favouritesBarAtBottom ? 0 : (root.bottomMargin + Kirigami.Units.largeSpacing)
0326
0327                 QQC2.PageIndicator {
0328                     visible: count > 1
0329                     Kirigami.Theme.inherit: false
0330                     Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
0331
0332                     anchors.horizontalCenter: parent.horizontalCenter
0333                     anchors.bottom: parent.bottom
0334
0335                     currentIndex: Folio.HomeScreenState.currentPage
0336                     count: Folio.PageListModel.length
0337                 }
0338             }
0339         }
0340
0341         // folder view
0342         FolderView {
0343             id: folderView
0344             anchors.fill: parent
0345             anchors.topMargin: root.topMargin
0346             anchors.leftMargin: root.leftMargin
0347             anchors.rightMargin: root.rightMargin
0348             anchors.bottomMargin: root.bottomMargin
0349
0350             homeScreen: root
0351             opacity: homeScreenState.folderOpenProgress
0352             transform: Translate { y: folderView.opacity > 0 ? 0 : folderView.height }
0353         }
0354
0355         // drag and drop component
0356         DelegateDragItem {
0357             id: delegateDragItem
0358         }
0359
0360         // drag and drop for widgets
0361         WidgetDragItem {
0362             id: widgetDragItem
0363         }
0364
0365         // bottom app drawer
0366         AppDrawer {
0367             id: appDrawer
0368             width: parent.width
0369             height: parent.height
0370
0371             homeScreen: root
0372
0373             // we only start showing it halfway through
0374             opacity: homeScreenState.appDrawerOpenProgress < 0.5 ? 0 : (homeScreenState.appDrawerOpenProgress - 0.5) * 2
0375
0376             // position for animation
0377             property real animationY: (1 - homeScreenState.appDrawerOpenProgress) * (Kirigami.Units.gridUnit * 2)
0378
0379             // move the app drawer out of the way if it is not visible
0380             // NOTE: we do this instead of setting visible to false, because
0381             //       it doesn't mess with app drag and drop from the app drawer
0382             y: (opacity > 0) ? animationY : parent.height
0383
0384             headerHeight: Math.round(Kirigami.Units.gridUnit * 5)
0385             headerItem: AppDrawerHeader {}
0386
0387             // account for panels
0388             topPadding: root.topMargin
0389             bottomPadding: root.bottomMargin
0390             leftPadding: root.leftMargin
0391             rightPadding: root.rightMargin
0392
0393             Connections {
0394                 target: Folio.HomeScreenState
0395
0396                 function onAppDrawerClosed() {
0397                     // reset app drawer position when closed
0398                     appDrawer.flickable.contentY = 0;
0399                 }
0400             }
0401         }
0402
0403         // search component
0404         MobileShell.KRunnerScreen {
0405             id: searchWidget
0406             anchors.fill: parent
0407
0408             opacity: homeScreenState.searchWidgetOpenProgress
0409             visible: opacity > 0
0410             transform: Translate { y: (1 - homeScreenState.searchWidgetOpenProgress) * (-Kirigami.Units.gridUnit * 2) }
0411
0412             onVisibleChanged: {
0413                 if (!visible) {
0414                     // clear search bar when closed
0415                     searchWidget.clearField();
0416                 }
0417             }
0418
0419             // focus the search bar if it opens
0420             Connections {
0421                 target: Folio.HomeScreenState
0422
0423                 function onSearchWidgetOpenProgressChanged() {
0424                     if (homeScreenState.searchWidgetOpenProgress === 1.0) {
0425                         searchWidget.requestFocus();
0426                     } else {
0427                         // TODO this gets called a lot, can we have a more performant way?
0428                         root.forceActiveFocus();
0429                     }
0430                 }
0431             }
0432
0433             onRequestedClose: {
0434                 homeScreenState.closeSearchWidget();
0435             }
0436
0437             anchors.topMargin: root.topMargin
0438             anchors.bottomMargin: root.bottomMargin
0439             anchors.leftMargin: root.leftMargin
0440             anchors.rightMargin: root.rightMargin
0441         }
0442     }
0443 }