components: Introduce ExtendedAbstractButton, port homescreen to it

This commit is contained in:
Devin Lin 2022-06-21 18:38:21 -04:00
parent d158549525
commit 9922c8d5d2
10 changed files with 161 additions and 77 deletions

View file

@ -69,6 +69,7 @@ void MobileShellPlugin::registerTypes(const char *uri)
// /components
qmlRegisterType(resolvePath("components/BaseItem.qml"), uri, 1, 0, "BaseItem");
qmlRegisterType(resolvePath("components/ExtendedAbstractButton.qml"), uri, 1, 0, "ExtendedAbstractButton");
qmlRegisterSingletonType(resolvePath("components/Haptics.qml"), uri, 1, 0, "Haptics");
qmlRegisterType(resolvePath("components/StartupFeedback.qml"), uri, 1, 0, "StartupFeedback");
qmlRegisterType(resolvePath("components/VelocityCalculator.qml"), uri, 1, 0, "VelocityCalculator");

View file

@ -0,0 +1,65 @@
// SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.15
import QtQuick.Controls 2.15 as QQC2
/**
* This component is an AbstractButton with some added functionality to simulate a MouseArea.
*
* The hovered property of AbstractButton is much more accurate than the containsMouse property of MouseArea,
* and so this is useful for creating custom buttons.
*/
QQC2.AbstractButton {
id: root
/**
* The cursor shape when the mouse is over the button.
*/
property alias cursorShape: mouseArea.cursorShape
/**
* This property holds the elapsed time in milliseconds before pressAndHold is emitted.
*/
property real pressAndHoldInterval: 1000
/**
* Signal that is emitted when the button has been held for a certain amount of time.
*/
signal pressAndHold()
/**
* Signal that is emitted when the right click button is pressed.
*/
signal rightClickPressed()
Timer {
id: timer
interval: pressAndHoldInterval
repeat: false
running: false
onTriggered: root.pressAndHold()
}
onPressedChanged: {
if (pressed) {
timer.restart();
} else {
timer.stop();
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onPressed: {
if (mouse.button === Qt.RightButton) {
root.rightClickPressed();
} else {
mouse.accepted = false;
}
}
}
}

View file

@ -21,6 +21,7 @@
<file>qml/actiondrawer/PortraitContentContainer.qml</file>
<file>qml/components/BaseItem.qml</file>
<file>qml/components/ExtendedAbstractButton.qml</file>
<file>qml/components/Haptics.qml</file>
<file>qml/components/HapticsEffectWrapper.qml</file>
<file>qml/components/MarqueeLabel.qml</file>

View file

@ -63,7 +63,6 @@ QHash<int, QByteArray> ApplicationListModel::roleNames() const
void ApplicationListModel::sycocaDbChanged()
{
m_applicationList.clear();
loadApplications();
}

View file

@ -100,7 +100,7 @@ ContainmentLayoutManager.ItemContainer {
}
}
contentItem: MouseArea {
contentItem: MobileShell.ExtendedAbstractButton {
id: mouseArea
// grow/shrink animation
@ -187,7 +187,7 @@ ContainmentLayoutManager.ItemContainer {
// darken effect when hovered/pressed
layer {
enabled: mouseArea.pressed || mouseArea.containsMouse
enabled: mouseArea.pressed || mouseArea.hovered
effect: ColorOverlay {
color: Qt.rgba(0, 0, 0, 0.3)
}

View file

@ -17,7 +17,7 @@ import org.kde.kquickcontrolsaddons 2.0
import org.kde.plasma.private.containmentlayoutmanager 1.0 as ContainmentLayoutManager
import org.kde.plasma.private.mobileshell 1.0 as MobileShell
MouseArea {
MobileShell.ExtendedAbstractButton {
id: delegate
width: GridView.view.cellWidth
height: GridView.view.cellHeight
@ -129,7 +129,7 @@ MouseArea {
// darken effect when hovered/pressed
layer {
enabled: delegate.pressed || delegate.containsMouse
enabled: delegate.pressed || delegate.hovered
effect: ColorOverlay {
color: Qt.rgba(0, 0, 0, 0.3)
}

View file

@ -18,7 +18,7 @@ import org.kde.kquickcontrolsaddons 2.0
import org.kde.plasma.private.containmentlayoutmanager 1.0 as ContainmentLayoutManager
import org.kde.plasma.private.mobileshell 1.0 as MobileShell
MouseArea {
MobileShell.ExtendedAbstractButton {
id: delegate
property int reservedSpaceForLabel
property alias iconItem: icon
@ -45,7 +45,7 @@ MouseArea {
Rectangle {
anchors.fill: parent
color: delegate.pressed ? Qt.rgba(255, 255, 255, 0.2) : (delegate.containsMouse ? Qt.rgba(255, 255, 255, 0.05) : "transparent")
color: delegate.pressed ? Qt.rgba(255, 255, 255, 0.2) : (delegate.hovered ? Qt.rgba(255, 255, 255, 0.05) : "transparent")
Behavior on color {
ColorAnimation { duration: PlasmaCore.Units.shortDuration }
}

View file

@ -38,7 +38,6 @@ QHash<int, QByteArray> ApplicationListModel::roleNames() const
void ApplicationListModel::sycocaDbChanged()
{
m_applicationList.clear();
loadApplications();
}

View file

@ -17,7 +17,7 @@ import org.kde.phone.homescreen.halcyon 1.0 as Halcyon
import org.kde.kirigami 2.19 as Kirigami
MouseArea {
MobileShell.ExtendedAbstractButton {
id: delegate
property alias iconItem: icon
@ -44,11 +44,15 @@ MouseArea {
application.runApplication();
}
onPressAndHold: {
function openContextMenu() {
dialogLoader.active = true;
dialogLoader.item.open();
}
hoverEnabled: true
onPressAndHold: openContextMenu()
onRightClickPressed: openContextMenu()
onClicked: {
// launch app
if (application.running) {
@ -57,7 +61,6 @@ MouseArea {
delegate.launch(delegate.x + (PlasmaCore.Units.smallSpacing * 2), delegate.y + (PlasmaCore.Units.smallSpacing * 2), icon.source, applicationName, applicationStorageId);
}
}
hoverEnabled: true
Loader {
id: dialogLoader
@ -65,6 +68,7 @@ MouseArea {
sourceComponent: PlasmaComponents.Menu {
title: label.text
closePolicy: PlasmaComponents.Menu.CloseOnReleaseOutside | PlasmaComponents.Menu.CloseOnEscape
PlasmaComponents.MenuItem {
icon.name: "emblem-favorite"
@ -77,15 +81,17 @@ MouseArea {
}
}
Rectangle {
anchors.fill: parent
background: Rectangle {
radius: height / 2
color: delegate.pressed ? Qt.rgba(255, 255, 255, 0.2) : (delegate.containsMouse ? Qt.rgba(255, 255, 255, 0.1) : "transparent")
color: delegate.pressed ? Qt.rgba(255, 255, 255, 0.2) : (delegate.hovered ? Qt.rgba(255, 255, 255, 0.1) : "transparent")
}
contentItem: Item {
implicitHeight: rowLayout.height + rowLayout.anchors.topMargin + rowLayout.anchors.bottomMargin
implicitWidth: rowLayout.width + rowLayout.anchors.rightMargin + rowLayout.anchors.leftMargin
RowLayout {
id: rowLayout
anchors {
fill: parent
leftMargin: PlasmaCore.Units.smallSpacing * 2
@ -112,7 +118,7 @@ MouseArea {
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
}
visible: application.running
visible: application ? application.running : false
radius: width
width: PlasmaCore.Units.smallSpacing
height: width
@ -155,6 +161,7 @@ MouseArea {
}
}
}
}

View file

@ -20,7 +20,7 @@ import org.kde.phone.homescreen.halcyon 1.0 as Halcyon
import org.kde.kirigami 2.19 as Kirigami
MouseArea {
MobileShell.ExtendedAbstractButton {
id: delegate
width: GridView.view.cellWidth
height: GridView.view.cellHeight
@ -34,11 +34,16 @@ MouseArea {
signal launch(int x, int y, var source, string title, string storageId)
onPressAndHold: {
function openContextMenu() {
dialogLoader.active = true;
dialogLoader.item.open();
}
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onPressAndHold: openContextMenu()
onRightClickPressed: openContextMenu()
function launchApp() {
// launch app
if (application.running) {
@ -54,6 +59,7 @@ MouseArea {
sourceComponent: PlasmaComponents.Menu {
title: label.text
closePolicy: PlasmaComponents.Menu.CloseOnReleaseOutside | PlasmaComponents.Menu.CloseOnEscape
PlasmaComponents.MenuItem {
icon.name: "emblem-favorite"
@ -102,8 +108,6 @@ MouseArea {
}
}
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onPressedChanged: {
if (pressed) {
growAnim.stop();
@ -147,6 +151,14 @@ MouseArea {
height: width
color: theme.highlightColor
}
// darken effect when hovered/pressed
layer {
enabled: delegate.pressed || delegate.hovered
effect: ColorOverlay {
color: Qt.rgba(0, 0, 0, 0.3)
}
}
}
PlasmaComponents.Label {