mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-06-11 16:57:43 +00:00
Use Motion wrappers and state layers across Folio and Halcyon delegates, drawers, folders, resize handles, and dock feedback. Also align Folio edit/drop highlights with theme colors instead of fixed white overlays.
128 lines
4.4 KiB
QML
128 lines
4.4 KiB
QML
// SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
|
|
// SPDX-License-Identifier: LGPL-2.0-or-later
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls as Controls
|
|
import QtQuick.Effects
|
|
|
|
import org.kde.kirigami as Kirigami
|
|
|
|
import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio
|
|
import org.kde.plasma.private.mobileshell.state as MobileShellState
|
|
import org.kde.plasma.private.mobileshell as MobileShell
|
|
import org.kde.plasma.plasmoid
|
|
|
|
AbstractDelegate {
|
|
id: root
|
|
|
|
shadow: true
|
|
name: application ? application.name : ""
|
|
|
|
// This may be null for short periods of time due to model changes
|
|
property Folio.FolioApplication application
|
|
|
|
property alias iconItem: icon
|
|
|
|
property bool turnToFolder: false
|
|
property bool turnToFolderAnimEnabled: false
|
|
readonly property int turnToFolderAnimationDuration: root.turnToFolderAnimEnabled ? MobileShell.Motion.duration(MobileShell.Motion.Standard) : 0
|
|
readonly property color folderFeedbackColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.28)
|
|
|
|
function launchApp() {
|
|
if (!application) {
|
|
return;
|
|
}
|
|
|
|
if (application.icon !== "" && !root.application.running) {
|
|
MobileShellState.ShellDBusClient.openAppLaunchAnimationWithPosition(
|
|
Plasmoid.screen,
|
|
application.icon,
|
|
application.name,
|
|
application.storageId,
|
|
root.iconItem.Kirigami.ScenePosition.x + root.iconItem.width/2,
|
|
root.iconItem.Kirigami.ScenePosition.y + root.iconItem.height/2,
|
|
Math.min(root.iconItem.width, root.iconItem.height));
|
|
}
|
|
|
|
application.setMinimizedDelegate(root);
|
|
MobileShell.AppLaunch.launchOrActivateApp(application.storageId);
|
|
}
|
|
|
|
onAfterClickAnimation: {
|
|
launchApp();
|
|
}
|
|
|
|
contentItem: Item {
|
|
height: folio.FolioSettings.delegateIconSize
|
|
width: folio.FolioSettings.delegateIconSize
|
|
|
|
// Background for folder creation animation
|
|
Rectangle {
|
|
id: rect
|
|
radius: Kirigami.Units.cornerRadius
|
|
color: root.folderFeedbackColor
|
|
anchors.fill: parent
|
|
|
|
Component.onCompleted: {
|
|
if (maskManager) {
|
|
maskManager.assignToMask(this)
|
|
}
|
|
}
|
|
|
|
opacity: root.turnToFolder ? 1 : 0
|
|
property real scaleAmount: root.turnToFolder ? 1.08 : 1.0
|
|
|
|
Behavior on scaleAmount {
|
|
enabled: root.turnToFolderAnimEnabled
|
|
MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Standard; duration: root.turnToFolderAnimationDuration }
|
|
}
|
|
Behavior on opacity {
|
|
enabled: root.turnToFolderAnimEnabled
|
|
MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Standard; duration: root.turnToFolderAnimationDuration }
|
|
}
|
|
|
|
transform: Scale {
|
|
origin.x: rect.width / 2
|
|
origin.y: rect.height / 2
|
|
xScale: rect.scaleAmount
|
|
yScale: rect.scaleAmount
|
|
}
|
|
}
|
|
|
|
// Application icon
|
|
DelegateAppIcon {
|
|
id: icon
|
|
folio: root.folio
|
|
anchors.fill: parent
|
|
source: root.application ? root.application.icon : ""
|
|
|
|
property real scaleAmount: root.turnToFolder ? 0.42 : 1.0
|
|
Behavior on scaleAmount {
|
|
enabled: root.turnToFolderAnimEnabled
|
|
MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Standard; duration: root.turnToFolderAnimationDuration }
|
|
}
|
|
|
|
transform: Scale {
|
|
origin.x: icon.width / 2
|
|
origin.y: icon.height / 2
|
|
xScale: icon.scaleAmount
|
|
yScale: icon.scaleAmount
|
|
}
|
|
|
|
// Running indicator
|
|
Rectangle {
|
|
anchors {
|
|
horizontalCenter: parent.horizontalCenter
|
|
bottom: parent.bottom
|
|
bottomMargin: -Kirigami.Units.smallSpacing
|
|
}
|
|
visible: root.application && root.application.running
|
|
radius: width
|
|
width: Kirigami.Units.smallSpacing
|
|
height: width
|
|
color: Kirigami.Theme.highlightColor
|
|
}
|
|
}
|
|
}
|
|
}
|