dcontent: impl rest of bt device settings

4 files changed, 328 insertions, 9 deletions

diff --git a/modules/bar/components/workspaces/ActiveIndicator.qml b/modules/bar/components/workspaces/ActiveIndicator.qml
index 4649bb1..a338d4e 100644
--- a/modules/bar/components/workspaces/ActiveIndicator.qml
+++ b/modules/bar/components/workspaces/ActiveIndicator.qml
@@ -2,7 +2,6 @@ import qs.widgets
 import qs.services
 import qs.config
 import QtQuick
-import QtQuick.Effects
 
 StyledRect {
     id: root
diff --git a/modules/detachedcontent/Session.qml b/modules/detachedcontent/Session.qml
index 136454d..c737518 100644
--- a/modules/detachedcontent/Session.qml
+++ b/modules/detachedcontent/Session.qml
@@ -17,5 +17,6 @@ QtObject {
         property BluetoothAdapter currentAdapter: Bluetooth.defaultAdapter
         property bool editingAdapterName
         property bool fabMenuOpen
+        property bool editingDeviceName
     }
 }
diff --git a/modules/detachedcontent/bluetooth/BtPane.qml b/modules/detachedcontent/bluetooth/BtPane.qml
index da18cdf..d0ea8b0 100644
--- a/modules/detachedcontent/bluetooth/BtPane.qml
+++ b/modules/detachedcontent/bluetooth/BtPane.qml
@@ -41,7 +41,7 @@ RowLayout {
         Loader {
             id: loader
 
-            property bool pane: root.session.bt.active
+            property BluetoothDevice pane: root.session.bt.active
 
             anchors.fill: parent
             anchors.margins: Appearance.padding.large * 2 + Appearance.padding.normal
diff --git a/modules/detachedcontent/bluetooth/Details.qml b/modules/detachedcontent/bluetooth/Details.qml
index 6e77d2d..9d434c0 100644
--- a/modules/detachedcontent/bluetooth/Details.qml
+++ b/modules/detachedcontent/bluetooth/Details.qml
@@ -39,7 +39,7 @@ Item {
             StyledText {
                 Layout.alignment: Qt.AlignHCenter
                 animate: true
-                text: root.device.name
+                text: root.device?.name ?? ""
                 font.pointSize: Appearance.font.size.large
                 font.bold: true
             }
@@ -58,13 +58,13 @@ Item {
 
             StyledRect {
                 Layout.fillWidth: true
-                implicitHeight: adapterStatus.implicitHeight + Appearance.padding.large * 2
+                implicitHeight: deviceStatus.implicitHeight + Appearance.padding.large * 2
 
                 radius: Appearance.rounding.normal
                 color: Colours.palette.m3surfaceContainer
 
                 ColumnLayout {
-                    id: adapterStatus
+                    id: deviceStatus
 
                     anchors.left: parent.left
                     anchors.right: parent.right
@@ -75,13 +75,13 @@ Item {
 
                     Toggle {
                         label: qsTr("Connected")
-                        checked: root.device.connected
+                        checked: root.device?.connected ?? false
                         toggle.onToggled: root.device.connected = checked
                     }
 
                     Toggle {
                         label: qsTr("Paired")
-                        checked: root.device.paired
+                        checked: root.device?.paired ?? false
                         toggle.onToggled: {
                             if (root.device.paired)
                                 root.device.forget();
@@ -92,11 +92,330 @@ Item {
 
                     Toggle {
                         label: qsTr("Blocked")
-                        checked: root.device.blocked
+                        checked: root.device?.blocked ?? false
                         toggle.onToggled: root.device.blocked = checked
                     }
                 }
             }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.large
+                text: qsTr("Device properties")
+                font.pointSize: Appearance.font.size.larger
+                font.weight: 500
+            }
+
+            StyledText {
+                text: qsTr("Additional settings")
+                color: Colours.palette.m3outline
+            }
+
+            StyledRect {
+                Layout.fillWidth: true
+                implicitHeight: deviceProps.implicitHeight + Appearance.padding.large * 2
+
+                radius: Appearance.rounding.normal
+                color: Colours.palette.m3surfaceContainer
+
+                ColumnLayout {
+                    id: deviceProps
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.margins: Appearance.padding.large
+
+                    spacing: Appearance.spacing.larger
+
+                    RowLayout {
+                        Layout.fillWidth: true
+                        spacing: Appearance.spacing.small
+
+                        Item {
+                            id: renameDevice
+
+                            Layout.fillWidth: true
+                            Layout.rightMargin: Appearance.spacing.small
+
+                            implicitHeight: renameLabel.implicitHeight + deviceNameEdit.implicitHeight
+
+                            states: State {
+                                name: "editingDeviceName"
+                                when: root.session.bt.editingDeviceName
+
+                                AnchorChanges {
+                                    target: deviceNameEdit
+                                    anchors.top: renameDevice.top
+                                }
+                                PropertyChanges {
+                                    renameDevice.implicitHeight: deviceNameEdit.implicitHeight
+                                    renameLabel.opacity: 0
+                                    deviceNameEdit.padding: Appearance.padding.normal
+                                }
+                            }
+
+                            transitions: Transition {
+                                AnchorAnimation {
+                                    duration: Appearance.anim.durations.normal
+                                    easing.type: Easing.BezierSpline
+                                    easing.bezierCurve: Appearance.anim.curves.standard
+                                }
+                                Anim {
+                                    properties: "implicitHeight,opacity,padding"
+                                }
+                            }
+
+                            StyledText {
+                                id: renameLabel
+
+                                anchors.left: parent.left
+
+                                text: qsTr("Device name")
+                                color: Colours.palette.m3outline
+                                font.pointSize: Appearance.font.size.small
+                            }
+
+                            StyledTextField {
+                                id: deviceNameEdit
+
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.top: renameLabel.bottom
+                                anchors.leftMargin: root.session.bt.editingDeviceName ? 0 : -Appearance.padding.normal
+
+                                text: root.device?.name ?? ""
+                                readOnly: !root.session.bt.editingDeviceName
+                                onAccepted: {
+                                    root.session.bt.editingDeviceName = false;
+                                    root.device.name = text;
+                                }
+
+                                leftPadding: Appearance.padding.normal
+                                rightPadding: Appearance.padding.normal
+
+                                background: StyledRect {
+                                    radius: Appearance.rounding.small
+                                    border.width: 2
+                                    border.color: Colours.palette.m3primary
+                                    opacity: root.session.bt.editingDeviceName ? 1 : 0
+
+                                    Behavior on border.color {
+                                        ColorAnimation {
+                                            duration: Appearance.anim.durations.normal
+                                            easing.type: Easing.BezierSpline
+                                            easing.bezierCurve: Appearance.anim.curves.standard
+                                        }
+                                    }
+
+                                    Behavior on opacity {
+                                        Anim {}
+                                    }
+                                }
+
+                                Behavior on anchors.leftMargin {
+                                    Anim {}
+                                }
+                            }
+                        }
+
+                        StyledRect {
+                            implicitWidth: implicitHeight
+                            implicitHeight: cancelEditIcon.implicitHeight + Appearance.padding.smaller * 2
+
+                            radius: Appearance.rounding.small
+                            color: Colours.palette.m3secondaryContainer
+                            opacity: root.session.bt.editingDeviceName ? 1 : 0
+                            scale: root.session.bt.editingDeviceName ? 1 : 0.5
+
+                            StateLayer {
+                                color: Colours.palette.m3onSecondaryContainer
+                                disabled: !root.session.bt.editingDeviceName
+
+                                function onClicked(): void {
+                                    root.session.bt.editingDeviceName = false;
+                                    deviceNameEdit.text = Qt.binding(() => root.device?.name ?? "");
+                                }
+                            }
+
+                            MaterialIcon {
+                                id: cancelEditIcon
+
+                                anchors.centerIn: parent
+                                animate: true
+                                text: "cancel"
+                                color: Colours.palette.m3onSecondaryContainer
+                            }
+
+                            Behavior on opacity {
+                                Anim {}
+                            }
+
+                            Behavior on scale {
+                                Anim {
+                                    duration: Appearance.anim.durations.expressiveFastSpatial
+                                    easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                                }
+                            }
+                        }
+
+                        StyledRect {
+                            implicitWidth: implicitHeight
+                            implicitHeight: editIcon.implicitHeight + Appearance.padding.smaller * 2
+
+                            radius: root.session.bt.editingDeviceName ? Appearance.rounding.small : implicitHeight / 2
+                            color: root.session.bt.editingDeviceName ? Colours.palette.m3primary : "transparent"
+
+                            StateLayer {
+                                color: root.session.bt.editingDeviceName ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+
+                                function onClicked(): void {
+                                    root.session.bt.editingDeviceName = !root.session.bt.editingDeviceName;
+                                    if (root.session.bt.editingDeviceName)
+                                        deviceNameEdit.forceActiveFocus();
+                                    else
+                                        deviceNameEdit.accepted();
+                                }
+                            }
+
+                            MaterialIcon {
+                                id: editIcon
+
+                                anchors.centerIn: parent
+                                animate: true
+                                text: root.session.bt.editingDeviceName ? "check_circle" : "edit"
+                                color: root.session.bt.editingDeviceName ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                            }
+
+                            Behavior on radius {
+                                Anim {}
+                            }
+                        }
+                    }
+
+                    Toggle {
+                        label: qsTr("Trusted")
+                        checked: root.device?.trusted ?? false
+                        toggle.onToggled: root.device.trusted = checked
+                    }
+
+                    Toggle {
+                        label: qsTr("Wake allowed")
+                        checked: root.device?.wakeAllowed ?? false
+                        toggle.onToggled: root.device.wakeAllowed = checked
+                    }
+                }
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.large
+                text: qsTr("Device information")
+                font.pointSize: Appearance.font.size.larger
+                font.weight: 500
+            }
+
+            StyledText {
+                text: qsTr("Information about this device")
+                color: Colours.palette.m3outline
+            }
+
+            StyledRect {
+                Layout.fillWidth: true
+                implicitHeight: deviceInfo.implicitHeight + Appearance.padding.large * 2
+
+                radius: Appearance.rounding.normal
+                color: Colours.palette.m3surfaceContainer
+
+                ColumnLayout {
+                    id: deviceInfo
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.margins: Appearance.padding.large
+
+                    spacing: Appearance.spacing.small / 2
+
+                    StyledText {
+                        text: root.device?.batteryAvailable ? qsTr("Device battery (%1%)").arg(root.device.battery * 100) : qsTr("Battery unavailable")
+                    }
+
+                    RowLayout {
+                        Layout.topMargin: Appearance.spacing.small / 2
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: Appearance.padding.smaller
+                        spacing: Appearance.spacing.small / 2
+
+                        StyledRect {
+                            Layout.fillHeight: true
+                            implicitWidth: root.device?.batteryAvailable ? parent.width * root.device.battery : 0
+                            radius: Appearance.rounding.full
+                            color: Colours.palette.m3primary
+                        }
+
+                        StyledRect {
+                            Layout.fillWidth: true
+                            Layout.fillHeight: true
+                            radius: Appearance.rounding.full
+                            color: Colours.palette.m3secondaryContainer
+
+                            StyledRect {
+                                anchors.right: parent.right
+                                anchors.top: parent.top
+                                anchors.bottom: parent.bottom
+                                anchors.margins: parent.height * 0.25
+
+                                implicitWidth: height
+                                radius: Appearance.rounding.full
+                                color: Colours.palette.m3primary
+                            }
+                        }
+                    }
+
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Dbus path")
+                    }
+
+                    StyledText {
+                        text: root.device?.dbusPath ?? ""
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("MAC address")
+                    }
+
+                    StyledText {
+                        text: root.device?.address ?? ""
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Bonded")
+                    }
+
+                    StyledText {
+                        text: root.device?.bonded ? qsTr("Yes") : qsTr("No")
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("System name")
+                    }
+
+                    StyledText {
+                        text: root.device?.deviceName ?? ""
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+                }
+            }
         }
     }
 
@@ -225,7 +544,7 @@ Item {
 
                     StyledText {
                         animate: true
-                        text: (root.device[`${fabMenuItem.modelData.name}ed`] ? fabMenuItem.modelData.name === "connect" ? "dis" : "un" : "") + fabMenuItem.modelData.name
+                        text: (root.device && root.device[`${fabMenuItem.modelData.name}ed`] ? fabMenuItem.modelData.name === "connect" ? "dis" : "un" : "") + fabMenuItem.modelData.name
                         color: Colours.palette.m3onPrimaryContainer
                         font.capitalization: Font.Capitalize
                         Layout.preferredWidth: implicitWidth