From 281b04b6d99c060571788478dd3679f1c1dc5cd8 Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Sun, 14 Sep 2025 17:31:01 +1000 Subject: utilities: add recording delete confirmation --- components/controls/IconButton.qml | 7 +- components/controls/TextButton.qml | 65 ++++++++++++++++ modules/utilities/Content.qml | 29 ++++++-- modules/utilities/RecordingDeleteModal.qml | 114 +++++++++++++++++++++++++++++ modules/utilities/Wrapper.qml | 1 + modules/utilities/cards/Record.qml | 3 +- 6 files changed, 207 insertions(+), 12 deletions(-) create mode 100644 components/controls/TextButton.qml create mode 100644 modules/utilities/RecordingDeleteModal.qml diff --git a/components/controls/IconButton.qml b/components/controls/IconButton.qml index 7eadcc3..0b39d97 100644 --- a/components/controls/IconButton.qml +++ b/components/controls/IconButton.qml @@ -12,13 +12,14 @@ StyledRect { Text } - required property string icon + property alias icon: label.text property bool checked property bool toggle property real padding: type == IconButton.Text ? Appearance.padding.small / 2 : Appearance.padding.smaller property alias font: label.font property int type: IconButton.Filled + property alias stateLayer: stateLayer property alias label: label property bool internalChecked @@ -39,6 +40,8 @@ StyledRect { implicitHeight: label.implicitHeight + padding * 2 StateLayer { + id: stateLayer + color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour function onClicked(): void { @@ -52,8 +55,6 @@ StyledRect { id: label anchors.centerIn: parent - - text: root.icon color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour fill: root.internalChecked ? 1 : 0 diff --git a/components/controls/TextButton.qml b/components/controls/TextButton.qml new file mode 100644 index 0000000..55749cb --- /dev/null +++ b/components/controls/TextButton.qml @@ -0,0 +1,65 @@ +import ".." +import qs.services +import qs.config +import QtQuick + +StyledRect { + id: root + + enum Type { + Filled, + Tonal, + Text + } + + property alias text: label.text + property bool checked + property bool toggle + property real horizontalPadding: Appearance.padding.normal + property real verticalPadding: Appearance.padding.smaller + property alias font: label.font + property int type: IconButton.Filled + + property alias stateLayer: stateLayer + property alias label: label + + property bool internalChecked + property color activeColour: type == IconButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary + property color inactiveColour: type == IconButton.Filled ? Colours.palette.m3surfaceContainer : Colours.palette.m3secondaryContainer + property color activeOnColour: type == IconButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondary + property color inactiveOnColour: type == IconButton.Filled ? Colours.palette.m3onSurface : Colours.palette.m3onSecondaryContainer + + function onClicked(): void { + } + + onCheckedChanged: internalChecked = checked + + radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2 + color: type == IconButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour + + implicitWidth: label.implicitWidth + horizontalPadding * 2 + implicitHeight: label.implicitHeight + verticalPadding * 2 + + StateLayer { + id: stateLayer + + color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour + + function onClicked(): void { + if (root.toggle) + root.internalChecked = !root.internalChecked; + root.onClicked(); + } + } + + StyledText { + id: label + + anchors.centerIn: parent + color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour + } + + Behavior on radius { + Anim {} + } +} diff --git a/modules/utilities/Content.qml b/modules/utilities/Content.qml index 3e29402..ea8f93f 100644 --- a/modules/utilities/Content.qml +++ b/modules/utilities/Content.qml @@ -1,23 +1,36 @@ import "cards" import qs.config +import QtQuick import QtQuick.Layouts -ColumnLayout { +Item { id: root required property var props required property var visibilities - spacing: Appearance.spacing.normal + implicitWidth: layout.implicitWidth + implicitHeight: layout.implicitHeight - IdleInhibit {} + ColumnLayout { + id: layout - Record { - props: root.props - visibilities: root.visibilities + anchors.fill: parent + spacing: Appearance.spacing.normal + + IdleInhibit {} + + Record { + props: root.props + visibilities: root.visibilities + } + + Toggles { + visibilities: root.visibilities + } } - Toggles { - visibilities: root.visibilities + RecordingDeleteModal { + props: root.props } } diff --git a/modules/utilities/RecordingDeleteModal.qml b/modules/utilities/RecordingDeleteModal.qml new file mode 100644 index 0000000..9b6f3d5 --- /dev/null +++ b/modules/utilities/RecordingDeleteModal.qml @@ -0,0 +1,114 @@ +pragma ComponentBehavior: Bound + +import qs.components +import qs.components.controls +import qs.components.effects +import qs.services +import qs.config +import Caelestia +import QtQuick +import QtQuick.Layouts + +Loader { + id: root + + required property var props + + anchors.fill: parent + + opacity: root.props.recordingConfirmDelete ? 1 : 0 + active: opacity > 0 + asynchronous: true + + sourceComponent: MouseArea { + id: deleteConfirmation + + property string path + + Component.onCompleted: path = root.props.recordingConfirmDelete + + hoverEnabled: true + onClicked: root.props.recordingConfirmDelete = "" + + StyledRect { + anchors.centerIn: parent + radius: Appearance.rounding.large + color: Colours.palette.m3surfaceContainerHigh + + scale: 0.5 + Component.onCompleted: scale = Qt.binding(() => root.props.recordingConfirmDelete ? 1 : 0.5) + + width: Math.min(parent.width - Appearance.padding.large * 2, implicitWidth) + implicitWidth: deleteConfirmationLayout.implicitWidth + Appearance.padding.large * 3 + implicitHeight: deleteConfirmationLayout.implicitHeight + Appearance.padding.large * 3 + + Elevation { + anchors.fill: parent + radius: parent.radius + z: -1 + level: 3 + } + + ColumnLayout { + id: deleteConfirmationLayout + + anchors.fill: parent + anchors.margins: Appearance.padding.large * 1.5 + spacing: Appearance.spacing.normal + + StyledText { + text: qsTr("Delete recording?") + font.pointSize: Appearance.font.size.large + } + + StyledText { + Layout.fillWidth: true + text: qsTr("Recording '%1' will be permanently deleted.").arg(deleteConfirmation.path) + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.small + wrapMode: Text.WrapAtWordBoundaryOrAnywhere + } + + RowLayout { + Layout.topMargin: Appearance.spacing.normal + Layout.alignment: Qt.AlignRight + spacing: Appearance.spacing.normal + + TextButton { + text: qsTr("Cancel") + type: TextButton.Text + label.color: Colours.palette.m3primary + stateLayer.color: Colours.palette.m3primary + + function onClicked(): void { + root.props.recordingConfirmDelete = ""; + } + } + + TextButton { + text: qsTr("Delete") + type: TextButton.Text + label.color: Colours.palette.m3primary + stateLayer.color: Colours.palette.m3primary + + function onClicked(): void { + CUtils.deleteFile(Qt.resolvedUrl(root.props.recordingConfirmDelete)); + root.props.recordingConfirmDelete = ""; + } + } + } + } + + Behavior on scale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + } + } + } + + Behavior on opacity { + Anim {} + } +} diff --git a/modules/utilities/Wrapper.qml b/modules/utilities/Wrapper.qml index 4de4014..137f0ce 100644 --- a/modules/utilities/Wrapper.qml +++ b/modules/utilities/Wrapper.qml @@ -11,6 +11,7 @@ Item { required property var visibilities readonly property PersistentProperties props: PersistentProperties { property bool recordingListExpanded: false + property string recordingConfirmDelete reloadableId: "utilities" } diff --git a/modules/utilities/cards/Record.qml b/modules/utilities/cards/Record.qml index c993785..9707176 100644 --- a/modules/utilities/cards/Record.qml +++ b/modules/utilities/cards/Record.qml @@ -193,9 +193,10 @@ StyledRect { icon: "delete_forever" type: IconButton.Text label.color: Colours.palette.m3error + stateLayer.color: Colours.palette.m3error function onClicked(): void { - CUtils.deleteFile(Qt.resolvedUrl(recording.modelData.path)); + root.props.recordingConfirmDelete = recording.modelData.path; } } } -- cgit v1.2.3-freya