From 824a9f33ed7ff6d7d1f0e881dfe4d4aa9b1057e6 Mon Sep 17 00:00:00 2001 From: Devin Lin Date: Tue, 28 Jun 2022 00:43:40 -0400 Subject: [PATCH] homescreens/halcyon: Two column layout, and refactor --- .../package/contents/ui/FavoritesGrid.qml | 124 ++++++++++++++++++ .../package/contents/ui/GridAppList.qml | 2 +- .../package/contents/ui/HomeScreen.qml | 100 +------------- .../panel/package/contents/ui/main.qml | 1 + 4 files changed, 131 insertions(+), 96 deletions(-) create mode 100644 containments/homescreens/halcyon/package/contents/ui/FavoritesGrid.qml diff --git a/containments/homescreens/halcyon/package/contents/ui/FavoritesGrid.qml b/containments/homescreens/halcyon/package/contents/ui/FavoritesGrid.qml new file mode 100644 index 00000000..992ab22a --- /dev/null +++ b/containments/homescreens/halcyon/package/contents/ui/FavoritesGrid.qml @@ -0,0 +1,124 @@ +// SPDX-FileCopyrightText: 2022 Devin Lin +// SPDX-License-Identifier: LGPL-2.0-or-later + +import QtQuick 2.12 +import QtQuick.Controls 2.15 as QQC2 +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.extras 2.0 as PlasmaExtras +import org.kde.plasma.components 3.0 as PC3 +import org.kde.draganddrop 2.0 as DragDrop + +import org.kde.kirigami 2.19 as Kirigami +import org.kde.plasma.private.mobileshell 1.0 as MobileShell +import org.kde.phone.homescreen.halcyon 1.0 as Halcyon + +GridView { + id: root + layer.enabled: true // cache + + required property var searchWidget + signal openConfigureRequested() + + readonly property real twoColumnThreshold: PlasmaCore.Units.gridUnit * 10 + readonly property bool twoColumn: root.width / 2 > twoColumnThreshold + + cellWidth: twoColumn ? root.width / 2 : root.width + cellHeight: delegateHeight + + // don't set anchors.margins since we want everywhere to be draggable + readonly property real leftMargin: Math.round(parent.width * 0.1) + readonly property real rightMargin: Math.round(parent.width * 0.1) + readonly property real delegateHeight: PlasmaCore.Units.gridUnit * 3 + + // search widget open gesture + property bool openingSearchWidget: false + property real oldVerticalOvershoot: verticalOvershoot + onVerticalOvershootChanged: { + if (dragging && verticalOvershoot < 0) { + if (!openingSearchWidget) { + if (oldVerticalOvershoot === 0) { + openingSearchWidget = true; + root.searchWidget.startGesture(); + } + } else { + let offset = -(verticalOvershoot - oldVerticalOvershoot); + root.searchWidget.updateGestureOffset(-offset); + } + } + oldVerticalOvershoot = verticalOvershoot; + } + onDraggingChanged: { + if (!dragging && openingSearchWidget) { + openingSearchWidget = false; + root.searchWidget.endGesture(); + } + } + + model: Halcyon.PinnedModel + header: MobileShell.BaseItem { + topPadding: Math.round(swipeView.height * 0.2) + bottomPadding: PlasmaCore.Units.largeSpacing + leftPadding: root.leftMargin + rightPadding: root.rightMargin + implicitWidth: root.width + + background: Rectangle { + color: 'transparent' + TapHandler { onLongPressed: root.openConfigureRequested() } // open wallpaper menu when held on click + } + contentItem: Clock {} + } + + delegate: MobileShell.BaseItem { + id: baseItem + readonly property bool isLeftColumn: !root.twoColumn || (root.count % model.index !== 0) + readonly property bool isRightColumn: !root.twoColumn || (root.count % model.index === 0) + leftPadding: isLeftColumn ? root.leftMargin : 0 + rightPadding: isRightColumn ? root.rightMargin : 0 + + contentItem: DrawerListDelegate { + implicitWidth: root.cellWidth - (baseItem.isLeftColumn ? root.leftMargin : 0) - (baseItem.isRightColumn ? root.rightMargin : 0) + implicitHeight: visible ? root.cellHeight : 0 + } + } + + // open wallpaper menu when held on click + TapHandler { + onLongPressed: root.openConfigureRequested() + } + + ColumnLayout { + id: placeholder + spacing: PlasmaCore.Units.gridUnit + visible: root.count == 0 + opacity: 0.9 + + anchors.fill: parent + anchors.topMargin: Math.round(swipeView.height * 0.2) - (root.contentY - root.originY) + anchors.leftMargin: root.leftMargin + anchors.rightMargin: root.rightMargin + + Kirigami.Icon { + id: icon + Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter + implicitWidth: PlasmaCore.Units.iconSizes.large + implicitHeight: width + source: "emblem-favorite" + color: "white" + } + + PlasmaExtras.Heading { + Layout.fillWidth: true + Layout.maximumWidth: placeholder.width * 0.75 + Layout.alignment: Qt.AlignTop | Qt.AlignHCenter + color: "white" + level: 3 + wrapMode: Text.Wrap + horizontalAlignment: Text.AlignHCenter + text: i18n("Add applications to your favourites so they show up here.") + } + } +} diff --git a/containments/homescreens/halcyon/package/contents/ui/GridAppList.qml b/containments/homescreens/halcyon/package/contents/ui/GridAppList.qml index 038e336a..56991121 100644 --- a/containments/homescreens/halcyon/package/contents/ui/GridAppList.qml +++ b/containments/homescreens/halcyon/package/contents/ui/GridAppList.qml @@ -19,7 +19,7 @@ import org.kde.phone.homescreen.halcyon 1.0 as Halcyon GridView { id: gridView - clip: true + layer.enabled: true // caching readonly property int reservedSpaceForLabel: metrics.height required property real effectiveContentWidth diff --git a/containments/homescreens/halcyon/package/contents/ui/HomeScreen.qml b/containments/homescreens/halcyon/package/contents/ui/HomeScreen.qml index 185f351b..10836271 100644 --- a/containments/homescreens/halcyon/package/contents/ui/HomeScreen.qml +++ b/containments/homescreens/halcyon/package/contents/ui/HomeScreen.qml @@ -19,7 +19,7 @@ Item { id: root property bool interactive: true - property var searchWidget + required property var searchWidget property alias page: swipeView.currentIndex @@ -54,102 +54,12 @@ Item { onLongPressed: root.openConfigure() } - ListView { - id: favouritesList - clip: true - interactive: root.interactive + FavoritesGrid { anchors.fill: parent + searchWidget: root.searchWidget + interactive: root.interactive - // don't set anchors.margins since we want everywhere to be draggable - readonly property real leftMargin: Math.round(parent.width * 0.1) - readonly property real rightMargin: Math.round(parent.width * 0.1) - readonly property real delegateHeight: PlasmaCore.Units.gridUnit * 3 - - // search widget open gesture - property bool openingSearchWidget: false - property real oldVerticalOvershoot: verticalOvershoot - onVerticalOvershootChanged: { - if (dragging && verticalOvershoot < 0) { - if (!openingSearchWidget) { - if (oldVerticalOvershoot === 0) { - openingSearchWidget = true; - root.searchWidget.startGesture(); - } - } else { - let offset = -(verticalOvershoot - oldVerticalOvershoot); - root.searchWidget.updateGestureOffset(-offset); - } - } - oldVerticalOvershoot = verticalOvershoot; - } - onDraggingChanged: { - if (!dragging && openingSearchWidget) { - openingSearchWidget = false; - root.searchWidget.endGesture(); - } - } - - model: Halcyon.PinnedModel - header: MobileShell.BaseItem { - topPadding: Math.round(swipeView.height * 0.2) - bottomPadding: PlasmaCore.Units.largeSpacing - leftPadding: favouritesList.leftMargin - rightPadding: favouritesList.rightMargin - implicitWidth: favouritesList.width - - background: Rectangle { - color: 'transparent' - TapHandler { onLongPressed: root.openConfigure() } // open wallpaper menu when held on click - } - contentItem: Clock {} - } - - delegate: MobileShell.BaseItem { - leftPadding: favouritesList.leftMargin - rightPadding: favouritesList.rightMargin - - contentItem: DrawerListDelegate { - implicitWidth: favouritesList.width - favouritesList.leftMargin - favouritesList.rightMargin - implicitHeight: visible ? favouritesList.delegateHeight : 0 - } - } - - // open wallpaper menu when held on click - TapHandler { - onLongPressed: root.openConfigure() - } - - ColumnLayout { - id: placeholder - spacing: PlasmaCore.Units.gridUnit - visible: favouritesList.count == 0 - opacity: 0.9 - - anchors.fill: parent - anchors.topMargin: Math.round(swipeView.height * 0.2) - (favouritesList.contentY - favouritesList.originY) - anchors.leftMargin: favouritesList.leftMargin - anchors.rightMargin: favouritesList.rightMargin - - Kirigami.Icon { - id: icon - Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter - implicitWidth: PlasmaCore.Units.iconSizes.large - implicitHeight: width - source: "emblem-favorite" - color: "white" - } - - PlasmaExtras.Heading { - Layout.fillWidth: true - Layout.maximumWidth: placeholder.width * 0.75 - Layout.alignment: Qt.AlignTop | Qt.AlignHCenter - color: "white" - level: 3 - wrapMode: Text.Wrap - horizontalAlignment: Text.AlignHCenter - text: i18n("Add applications to your favourites so they show up here.") - } - } + onOpenConfigureRequested: root.openConfigure() } } diff --git a/containments/panel/package/contents/ui/main.qml b/containments/panel/package/contents/ui/main.qml index 758b1747..d5fa3d1c 100644 --- a/containments/panel/package/contents/ui/main.qml +++ b/containments/panel/package/contents/ui/main.qml @@ -7,6 +7,7 @@ import QtQuick 2.12 import QtQuick.Layouts 1.3 +import QtQuick.Window 2.15 import QtQml.Models 2.12 import org.kde.kirigami 2.12 as Kirigami