From e407e762335379052563a56d72f9cf7dc799c4a2 Mon Sep 17 00:00:00 2001 From: Devin Lin Date: Fri, 24 Dec 2021 20:17:08 -0500 Subject: [PATCH] homescreen: Refactor and split out homescreen component --- .../package/contents/ui/AppDrawerHeader.qml | 48 ++++ .../package/contents/ui/HomeScreen.qml | 147 ++++++++++++ .../homescreen/package/contents/ui/main.qml | 217 +++--------------- 3 files changed, 233 insertions(+), 179 deletions(-) create mode 100644 containments/homescreen/package/contents/ui/AppDrawerHeader.qml create mode 100644 containments/homescreen/package/contents/ui/HomeScreen.qml diff --git a/containments/homescreen/package/contents/ui/AppDrawerHeader.qml b/containments/homescreen/package/contents/ui/AppDrawerHeader.qml new file mode 100644 index 00000000..bdd1e82a --- /dev/null +++ b/containments/homescreen/package/contents/ui/AppDrawerHeader.qml @@ -0,0 +1,48 @@ +/* + * SPDX-FileCopyrightText: 2021 Devin Lin + * + * SPDX-License-Identifier: LGPL-2.0-or-later + */ + +import QtQuick 2.12 +import QtQuick.Layouts 1.1 + +import org.kde.plasma.core 2.0 as PlasmaCore +import org.kde.plasma.components 3.0 as PlasmaComponents +import org.kde.plasma.extras 2.0 as PlasmaExtra + +PlasmaCore.ColorScope { + id: root + + signal switchToListRequested() + signal switchToGridRequested() + + colorGroup: PlasmaCore.Theme.ComplementaryColorGroup + + RowLayout { + anchors.topMargin: PlasmaCore.Units.smallSpacing + anchors.leftMargin: PlasmaCore.Units.largeSpacing + anchors.rightMargin: PlasmaCore.Units.largeSpacing + anchors.fill: parent + spacing: PlasmaCore.Units.smallSpacing + + PlasmaExtra.Heading { + color: "white" + level: 1 + text: i18n("Applications") + } + Item { Layout.fillWidth: true } + PlasmaComponents.ToolButton { + icon.name: "view-list-symbolic" + implicitWidth: Math.round(PlasmaCore.Units.gridUnit * 2.1) + implicitHeight: Math.round(PlasmaCore.Units.gridUnit * 2.1) + onClicked: root.switchToListRequested() + } + PlasmaComponents.ToolButton { + icon.name: "view-grid-symbolic" + implicitWidth: Math.round(PlasmaCore.Units.gridUnit * 2.1) + implicitHeight: Math.round(PlasmaCore.Units.gridUnit * 2.1) + onClicked: root.switchToGridRequested() + } + } +} diff --git a/containments/homescreen/package/contents/ui/HomeScreen.qml b/containments/homescreen/package/contents/ui/HomeScreen.qml new file mode 100644 index 00000000..5e302e48 --- /dev/null +++ b/containments/homescreen/package/contents/ui/HomeScreen.qml @@ -0,0 +1,147 @@ +/* + * SPDX-FileCopyrightText: 2019 Marco Martin + * SPDX-FileCopyrightText: 2021 Devin Lin + * + * SPDX-License-Identifier: LGPL-2.0-or-later + */ + +import QtQuick 2.12 +import QtQuick.Window 2.12 +import QtQuick.Layouts 1.1 + +import org.kde.plasma.plasmoid 2.0 +import org.kde.plasma.core 2.0 as PlasmaCore +import org.kde.plasma.components 3.0 as PlasmaComponents + +import org.kde.plasma.private.mobilehomescreencomponents 0.1 as HomeScreenComponents +import org.kde.plasma.private.mobileshell 1.0 as MobileShell + +Item { + id: root + + property alias flickablePages: mainFlickable + property alias homeScreenContents: contents + + // listview/gridview header + property string appDrawerType: "gridview" // gridview/listview + property alias appDrawer: appDrawerLoader.item + + readonly property real headerHeight: Math.round(PlasmaCore.Units.gridUnit * 3) + +//BEGIN functions + function activate() { + // there's a couple of steps: + // - minimize windows + // - open app drawer + // - restore windows + if (!plasmoid.nativeInterface.showingDesktop) { + plasmoid.nativeInterface.showingDesktop = true + } else if (appDrawer.status !== HomeScreenComponents.AbstractAppDrawer.Status.Open) { + mainFlickable.currentIndex = 0 + root.appDrawer.open() + } else { + plasmoid.nativeInterface.showingDesktop = false + root.appDrawer.close() + } + } +//END functions + + HomeScreenComponents.FlickablePages { + id: mainFlickable + + anchors { + fill: parent + topMargin: plasmoid.availableScreenRect.y + bottomMargin: plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y + } + + appletsLayout: homeScreenContents.appletsLayout + + appDrawer: root.appDrawer + contentWidth: Math.max(width, width * Math.ceil(homeScreenContents.itemsBoundingRect.width/width)) + (homeScreenContents.launcherDragManager.active ? width : 0) + showAddPageIndicator: homeScreenContents.launcherDragManager.active + + dragGestureEnabled: root.parent.focus && (!root.appDrawer || root.appDrawer.status !== HomeScreenComponents.AbstractAppDrawer.Status.Open) && !appletsLayout.editMode && !plasmoid.editMode && !homeScreenContents.launcherDragManager.active + + HomeScreenComponents.HomeScreenContents { + id: contents + width: mainFlickable.width * 100 + favoriteStrip: favoriteStrip + } + + footer: HomeScreenComponents.FavoriteStrip { + id: favoriteStrip + + appletsLayout: homeScreenContents.appletsLayout + visible: favoriteStrip.flow.children.length > 0 || homeScreenContents.launcherDragManager.active || homeScreenContents.containsDrag + opacity: homeScreenContents.launcherDragManager.active && HomeScreenComponents.ApplicationListModel.favoriteCount >= HomeScreenComponents.ApplicationListModel.maxFavoriteCount ? 0.3 : 1 + + TapHandler { + target: favoriteStrip + onTapped: { + //Hides icons close button + homeScreenContents.appletsLayout.appletsLayoutInteracted(); + homeScreenContents.appletsLayout.editMode = false; + } + onLongPressed: homeScreenContents.appletsLayout.editMode = true; + onPressedChanged: root.parent.focus = true; + } + } + } + + Component { + id: headerComponent + + AppDrawerHeader { + onSwitchToListRequested: { + if (root.appDrawerType !== "listview") { + root.appDrawerType = "listview"; + appDrawer.flickable.goToBeginning(); // jump to top + } + } + + onSwitchToGridRequested: { + if (root.appDrawerType !== "gridview") { + root.appDrawerType = "gridview"; + appDrawer.flickable.goToBeginning(); // jump to top + } + } + } + } + + Component { + id: listViewDrawer + HomeScreenComponents.ListViewAppDrawer { + anchors.fill: parent + topPadding: plasmoid.availableScreenRect.y + bottomPadding: plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y + closedPositionOffset: favoriteStrip.height + + headerItem: Loader { + sourceComponent: headerComponent + } + headerHeight: root.headerHeight + } + } + + Component { + id: gridViewDrawer + HomeScreenComponents.GridViewAppDrawer { + anchors.fill: parent + topPadding: plasmoid.availableScreenRect.y + bottomPadding: plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y + closedPositionOffset: favoriteStrip.height + + headerItem: Loader { + sourceComponent: headerComponent + } + headerHeight: root.headerHeight + } + } + + Loader { + id: appDrawerLoader + anchors.fill: parent + sourceComponent: appDrawerType === "gridview" ? gridViewDrawer : listViewDrawer + } +} diff --git a/containments/homescreen/package/contents/ui/main.qml b/containments/homescreen/package/contents/ui/main.qml index 0c7538ea..8b2011b2 100644 --- a/containments/homescreen/package/contents/ui/main.qml +++ b/containments/homescreen/package/contents/ui/main.qml @@ -1,23 +1,19 @@ /* * SPDX-FileCopyrightText: 2019 Marco Martin + * SPDX-FileCopyrightText: 2021 Devin Lin * * SPDX-License-Identifier: LGPL-2.0-or-later */ -import QtQuick 2.12 -import QtQuick.Window 2.12 +import QtQuick 2.15 +import QtQuick.Window 2.15 import QtQuick.Layouts 1.1 -import QtGraphicalEffects 1.0 import org.kde.plasma.plasmoid 2.0 import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.components 3.0 as PlasmaComponents -import org.kde.plasma.extras 2.0 as PlasmaExtra -import org.kde.draganddrop 2.0 as DragDrop import org.kde.plasma.private.mobilehomescreencomponents 0.1 as HomeScreenComponents -import org.kde.plasma.private.containmentlayoutmanager 1.0 as ContainmentLayoutManager - import org.kde.plasma.private.mobileshell 1.0 as MobileShell FocusScope { @@ -25,16 +21,13 @@ FocusScope { width: 640 height: 480 - property Item toolBox - //BEGIN functions function recalculateMaxFavoriteCount() { if (!componentComplete) { return; } - - HomeScreenComponents.ApplicationListModel.maxFavoriteCount = Math.max(4, Math.floor(Math.min(width, height) / homeScreenContents.appletsLayout.cellWidth)); + HomeScreenComponents.ApplicationListModel.maxFavoriteCount = Math.max(4, Math.floor(Math.min(width, height) / homescreen.homeScreenContents.appletsLayout.cellWidth)); } //END functions @@ -44,54 +37,61 @@ FocusScope { target: MobileShell.HomeScreenControls property real lastRequestedPosition: 0 + function onResetHomeScreenPosition() { - mainFlickable.scrollToPage(0); - root.appDrawer.close(); + homescreen.flickablePages.scrollToPage(0); + homescreen.appDrawer.close(); } + function onSnapHomeScreenPosition() { if (lastRequestedPosition < 0) { - root.appDrawer.open(); + homescreen.appDrawer.open(); } else { - root.appDrawer.close(); + homescreen.appDrawer.close(); } } + function onRequestRelativeScroll(pos) { - root.appDrawer.offset -= pos.y; + homescreen.appDrawer.offset -= pos.y; lastRequestedPosition = pos.y; } - } - opacity: 1 - - NumberAnimation on opacity { - id: opacityAnimation - duration: PlasmaCore.Units.longDuration - } - - Connections { - target: MobileShell.HomeScreenControls + function onHideHomeScreen(animate) { if (animate) { opacityAnimation.to = 0; opacityAnimation.restart(); } else { - root.opacity = 0; + homescreen.opacity = 0; } } + function onShowHomeScreen(animate) { if (animate) { opacityAnimation.to = 1; opacityAnimation.restart(); } else { - root.opacity = 1; + homescreen.opacity = 1; } } } + + Plasmoid.onScreenChanged: { + if (plasmoid.screen == 0) { + MobileShell.HomeScreenControls.homeScreen = root + MobileShell.HomeScreenControls.homeScreenWindow = root.Window.window + } + } + Window.onWindowChanged: { + if (plasmoid.screen == 0) { + MobileShell.HomeScreenControls.homeScreenWindow = root.Window.window + } + } //END API implementation property bool componentComplete: false onWidthChanged: recalculateMaxFavoriteCount() - onHeightChanged:recalculateMaxFavoriteCount() + onHeightChanged: recalculateMaxFavoriteCount() Component.onCompleted: { // ApplicationListModel doesn't have a plasmoid as is not the one that should be doing writing @@ -110,162 +110,21 @@ FocusScope { // ensure the gestures work immediately on load forceActiveFocus(); } - - Plasmoid.onScreenChanged: { - if (plasmoid.screen == 0) { - MobileShell.HomeScreenControls.homeScreen = root - MobileShell.HomeScreenControls.homeScreenWindow = root.Window.window - } - } - Window.onWindowChanged: { - if (plasmoid.screen == 0) { - MobileShell.HomeScreenControls.homeScreenWindow = root.Window.window - } - } - - HomeScreenComponents.FlickablePages { - id: mainFlickable - - anchors { - fill: parent - topMargin: plasmoid.availableScreenRect.y - bottomMargin: plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y - } - - appletsLayout: homeScreenContents.appletsLayout - - appDrawer: root.appDrawer - contentWidth: Math.max(width, width * Math.ceil(homeScreenContents.itemsBoundingRect.width/width)) + (homeScreenContents.launcherDragManager.active ? width : 0) - showAddPageIndicator: homeScreenContents.launcherDragManager.active - - dragGestureEnabled: root.focus && (!appDrawer || appDrawer.status !== HomeScreenComponents.AbstractAppDrawer.Status.Open) && !appletsLayout.editMode && !plasmoid.editMode && !homeScreenContents.launcherDragManager.active - - HomeScreenComponents.HomeScreenContents { - id: homeScreenContents - width: mainFlickable.width * 100 - favoriteStrip: favoriteStrip - } - - footer: HomeScreenComponents.FavoriteStrip { - id: favoriteStrip - - appletsLayout: homeScreenContents.appletsLayout - visible: flow.children.length > 0 || homeScreenContents.launcherDragManager.active || homeScreenContents.containsDrag - opacity: homeScreenContents.launcherDragManager.active && HomeScreenComponents.ApplicationListModel.favoriteCount >= HomeScreenComponents.ApplicationListModel.maxFavoriteCount ? 0.3 : 1 - - TapHandler { - target: favoriteStrip - onTapped: { - //Hides icons close button - homeScreenContents.appletsLayout.appletsLayoutInteracted(); - homeScreenContents.appletsLayout.editMode = false; - } - onLongPressed: homeScreenContents.appletsLayout.editMode = true; - onPressedChanged: root.focus = true; - } - } - } - - // listview/gridview header - property int headerHeight: Math.round(PlasmaCore.Units.gridUnit * 3) - property string appDrawerType: "gridview" // gridview/listview - property alias appDrawer: appDrawerLoader.item Plasmoid.onActivated: { console.log("Triggered!", plasmoid.nativeInterface.showingDesktop) - - // there's a couple of steps: - // - minimize windows - // - open app drawer - // - restore windows - if (!plasmoid.nativeInterface.showingDesktop) { - plasmoid.nativeInterface.showingDesktop = true - } else if (appDrawer.status !== HomeScreenComponents.AbstractAppDrawer.Status.Open) { - mainFlickable.currentIndex = 0 - root.appDrawer.open() - } else { - plasmoid.nativeInterface.showingDesktop = false - root.appDrawer.close() - } + homescreen.activate(); } - Component { - id: headerComponent - PlasmaCore.ColorScope { - colorGroup: PlasmaCore.Theme.ComplementaryColorGroup - - RowLayout { - anchors.topMargin: PlasmaCore.Units.smallSpacing - anchors.leftMargin: PlasmaCore.Units.largeSpacing - anchors.rightMargin: PlasmaCore.Units.largeSpacing - anchors.fill: parent - spacing: PlasmaCore.Units.smallSpacing - - PlasmaExtra.Heading { - color: "white" - level: 1 - text: i18n("Applications") - } - Item { Layout.fillWidth: true } - PlasmaComponents.ToolButton { - icon.name: "view-list-symbolic" - implicitWidth: Math.round(PlasmaCore.Units.gridUnit * 2.1) - implicitHeight: Math.round(PlasmaCore.Units.gridUnit * 2.1) - onClicked: { - if (root.appDrawerType !== "listview") { - root.appDrawerType = "listview"; - appDrawer.flickable.goToBeginning(); // jump to top - } - } - } - PlasmaComponents.ToolButton { - icon.name: "view-grid-symbolic" - implicitWidth: Math.round(PlasmaCore.Units.gridUnit * 2.1) - implicitHeight: Math.round(PlasmaCore.Units.gridUnit * 2.1) - onClicked: { - if (root.appDrawerType !== "gridview") { - root.appDrawerType = "gridview"; - appDrawer.flickable.goToBeginning(); // jump to top - } - } - } - } - } - } - - Component { - id: listViewDrawer - HomeScreenComponents.ListViewAppDrawer { - anchors.fill: parent - topPadding: plasmoid.availableScreenRect.y - bottomPadding: plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y - closedPositionOffset: favoriteStrip.height - - headerItem: Loader { - sourceComponent: headerComponent - } - headerHeight: root.headerHeight - } - } - Component { - id: gridViewDrawer - HomeScreenComponents.GridViewAppDrawer { - anchors.fill: parent - topPadding: plasmoid.availableScreenRect.y - bottomPadding: plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y - closedPositionOffset: favoriteStrip.height - - headerItem: Loader { - sourceComponent: headerComponent - } - headerHeight: root.headerHeight - } - } - - Loader { - id: appDrawerLoader + HomeScreen { + id: homescreen anchors.fill: parent - sourceComponent: appDrawerType === "gridview" ? gridViewDrawer : listViewDrawer + + opacity: 1 + NumberAnimation on opacity { + id: opacityAnimation + duration: PlasmaCore.Units.longDuration + } } }