utilities: add recording delete confirmation

2 files changed, 69 insertions, 3 deletions

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 {}
+    }
+}