refactor: ToggleButton Tooltips and DeviceList

1 files changed, 328 insertions, 305 deletions

diff --git a/modules/controlcenter/bluetooth/Details.qml b/modules/controlcenter/bluetooth/Details.qml
index 5496966..b260458 100644
--- a/modules/controlcenter/bluetooth/Details.qml
+++ b/modules/controlcenter/bluetooth/Details.qml
@@ -20,404 +20,427 @@ StyledFlickable {
     readonly property BluetoothDevice device: session.bt.active
 
     flickableDirection: Flickable.VerticalFlick
-    contentHeight: layoutWrapper.height
+    contentHeight: detailsWrapper.height
 
     StyledScrollBar.vertical: StyledScrollBar {
         flickable: root
     }
 
-        Item {
-            id: layoutWrapper
+    Item {
+        id: detailsWrapper
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        implicitHeight: details.implicitHeight
+
+        DeviceDetails {
+            id: details
 
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.top: parent.top
-            implicitHeight: layout.height
-
-            ColumnLayout {
-                id: layout
 
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.top: parent.top
-                spacing: Appearance.spacing.normal
+            session: root.session
+            device: root.device
 
-            SettingsHeader {
-                icon: Icons.getBluetoothIcon(root.device?.icon ?? "")
-                title: root.device?.name ?? ""
+            headerComponent: Component {
+                SettingsHeader {
+                    icon: Icons.getBluetoothIcon(root.device?.icon ?? "")
+                    title: root.device?.name ?? ""
+                }
             }
 
-            StyledText {
-                Layout.topMargin: Appearance.spacing.large
-                text: qsTr("Connection status")
-                font.pointSize: Appearance.font.size.larger
-                font.weight: 500
-            }
+            sections: [
+                Component {
+                    ColumnLayout {
+                        spacing: Appearance.spacing.normal
 
-            StyledText {
-                text: qsTr("Connection settings for this device")
-                color: Colours.palette.m3outline
-            }
+                        StyledText {
+                            Layout.topMargin: Appearance.spacing.large
+                            text: qsTr("Connection status")
+                            font.pointSize: Appearance.font.size.larger
+                            font.weight: 500
+                        }
 
-            StyledRect {
-                Layout.fillWidth: true
-                implicitHeight: deviceStatus.implicitHeight + Appearance.padding.large * 2
+                        StyledText {
+                            text: qsTr("Connection settings for this device")
+                            color: Colours.palette.m3outline
+                        }
+
+                        StyledRect {
+                            Layout.fillWidth: true
+                            implicitHeight: deviceStatus.implicitHeight + Appearance.padding.large * 2
 
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
+                            radius: Appearance.rounding.normal
+                            color: Colours.tPalette.m3surfaceContainer
 
-                ColumnLayout {
-                    id: deviceStatus
+                            ColumnLayout {
+                                id: deviceStatus
 
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.margins: Appearance.padding.large
 
-                    spacing: Appearance.spacing.larger
+                                spacing: Appearance.spacing.larger
 
-                    Toggle {
-                        label: qsTr("Connected")
-                        checked: root.device?.connected ?? false
-                        toggle.onToggled: root.device.connected = checked
-                    }
+                                Toggle {
+                                    label: qsTr("Connected")
+                                    checked: root.device?.connected ?? false
+                                    toggle.onToggled: root.device.connected = checked
+                                }
 
-                    Toggle {
-                        label: qsTr("Paired")
-                        checked: root.device?.paired ?? false
-                        toggle.onToggled: {
-                            if (root.device.paired)
-                                root.device.forget();
-                            else
-                                root.device.pair();
+                                Toggle {
+                                    label: qsTr("Paired")
+                                    checked: root.device?.paired ?? false
+                                    toggle.onToggled: {
+                                        if (root.device.paired)
+                                            root.device.forget();
+                                        else
+                                            root.device.pair();
+                                    }
+                                }
+
+                                Toggle {
+                                    label: qsTr("Blocked")
+                                    checked: root.device?.blocked ?? false
+                                    toggle.onToggled: root.device.blocked = checked
+                                }
+                            }
                         }
                     }
+                },
+                Component {
+                    ColumnLayout {
+                        spacing: Appearance.spacing.normal
 
-                    Toggle {
-                        label: qsTr("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 {
-                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
+                        }
 
-            StyledText {
-                text: qsTr("Additional settings")
-                color: Colours.palette.m3outline
-            }
+                        StyledRect {
+                            Layout.fillWidth: true
+                            implicitHeight: deviceProps.implicitHeight + Appearance.padding.large * 2
 
-            StyledRect {
-                Layout.fillWidth: true
-                implicitHeight: deviceProps.implicitHeight + Appearance.padding.large * 2
+                            radius: Appearance.rounding.normal
+                            color: Colours.tPalette.m3surfaceContainer
 
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
+                            ColumnLayout {
+                                id: deviceProps
 
-                ColumnLayout {
-                    id: deviceProps
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.margins: Appearance.padding.large
 
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
+                                spacing: Appearance.spacing.larger
 
-                    spacing: Appearance.spacing.larger
+                                RowLayout {
+                                    Layout.fillWidth: true
+                                    spacing: Appearance.spacing.small
 
-                    RowLayout {
-                        Layout.fillWidth: true
-                        spacing: Appearance.spacing.small
+                                    Item {
+                                        id: renameDevice
 
-                        Item {
-                            id: renameDevice
+                                        Layout.fillWidth: true
+                                        Layout.rightMargin: Appearance.spacing.small
 
-                            Layout.fillWidth: true
-                            Layout.rightMargin: Appearance.spacing.small
+                                        implicitHeight: renameLabel.implicitHeight + deviceNameEdit.implicitHeight
 
-                            implicitHeight: renameLabel.implicitHeight + deviceNameEdit.implicitHeight
+                                        states: State {
+                                            name: "editingDeviceName"
+                                            when: root.session.bt.editingDeviceName
 
-                            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
+                                            }
+                                        }
 
-                                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"
+                                            }
+                                        }
 
-                            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
 
-                            StyledText {
-                                id: renameLabel
+                                            anchors.left: parent.left
 
-                                anchors.left: parent.left
+                                            text: qsTr("Device name")
+                                            color: Colours.palette.m3outline
+                                            font.pointSize: Appearance.font.size.small
+                                        }
 
-                                text: qsTr("Device name")
-                                color: Colours.palette.m3outline
-                                font.pointSize: Appearance.font.size.small
-                            }
+                                        StyledTextField {
+                                            id: deviceNameEdit
 
-                            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
 
-                                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;
+                                            }
 
-                                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
 
-                                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
 
-                                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 {
+                                                    CAnim {}
+                                                }
 
-                                    Behavior on border.color {
-                                        CAnim {}
-                                    }
+                                                Behavior on opacity {
+                                                    Anim {}
+                                                }
+                                            }
 
-                                    Behavior on opacity {
-                                        Anim {}
+                                            Behavior on anchors.leftMargin {
+                                                Anim {}
+                                            }
+                                        }
                                     }
-                                }
 
-                                Behavior on anchors.leftMargin {
-                                    Anim {}
-                                }
-                            }
-                        }
+                                    StyledRect {
+                                        implicitWidth: implicitHeight
+                                        implicitHeight: cancelEditIcon.implicitHeight + Appearance.padding.smaller * 2
 
-                        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
 
-                            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
 
-                            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 ?? "");
+                                            }
+                                        }
 
-                                function onClicked(): void {
-                                    root.session.bt.editingDeviceName = false;
-                                    deviceNameEdit.text = Qt.binding(() => root.device?.name ?? "");
-                                }
-                            }
+                                        MaterialIcon {
+                                            id: cancelEditIcon
 
-                            MaterialIcon {
-                                id: cancelEditIcon
+                                            anchors.centerIn: parent
+                                            animate: true
+                                            text: "cancel"
+                                            color: Colours.palette.m3onSecondaryContainer
+                                        }
 
-                                anchors.centerIn: parent
-                                animate: true
-                                text: "cancel"
-                                color: Colours.palette.m3onSecondaryContainer
-                            }
+                                        Behavior on opacity {
+                                            Anim {}
+                                        }
 
-                            Behavior on opacity {
-                                Anim {}
-                            }
+                                        Behavior on scale {
+                                            Anim {
+                                                duration: Appearance.anim.durations.expressiveFastSpatial
+                                                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                                            }
+                                        }
+                                    }
 
-                            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
 
-                        StyledRect {
-                            implicitWidth: implicitHeight
-                            implicitHeight: editIcon.implicitHeight + Appearance.padding.smaller * 2
+                                        radius: root.session.bt.editingDeviceName ? Appearance.rounding.small : implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+                                        color: Qt.alpha(Colours.palette.m3primary, root.session.bt.editingDeviceName ? 1 : 0)
 
-                            radius: root.session.bt.editingDeviceName ? Appearance.rounding.small : implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
-                            color: Qt.alpha(Colours.palette.m3primary, root.session.bt.editingDeviceName ? 1 : 0)
+                                        StateLayer {
+                                            color: root.session.bt.editingDeviceName ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
 
-                            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();
+                                            }
+                                        }
 
-                                function onClicked(): void {
-                                    root.session.bt.editingDeviceName = !root.session.bt.editingDeviceName;
-                                    if (root.session.bt.editingDeviceName)
-                                        deviceNameEdit.forceActiveFocus();
-                                    else
-                                        deviceNameEdit.accepted();
-                                }
-                            }
+                                        MaterialIcon {
+                                            id: editIcon
 
-                            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
+                                        }
 
-                                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 {}
+                                        }
+                                    }
+                                }
 
-                            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
+                                }
                             }
                         }
                     }
+                },
+                Component {
+                    ColumnLayout {
+                        spacing: Appearance.spacing.normal
 
-                    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 {
+                            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
-            }
+                        StyledText {
+                            text: qsTr("Information about this device")
+                            color: Colours.palette.m3outline
+                        }
 
-            StyledRect {
-                Layout.fillWidth: true
-                implicitHeight: deviceInfo.implicitHeight + Appearance.padding.large * 2
+                        StyledRect {
+                            Layout.fillWidth: true
+                            implicitHeight: deviceInfo.implicitHeight + Appearance.padding.large * 2
 
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
+                            radius: Appearance.rounding.normal
+                            color: Colours.tPalette.m3surfaceContainer
 
-                ColumnLayout {
-                    id: deviceInfo
+                            ColumnLayout {
+                                id: deviceInfo
 
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.margins: Appearance.padding.large
 
-                    spacing: Appearance.spacing.small / 2
+                                spacing: Appearance.spacing.small / 2
 
-                    StyledText {
-                        text: root.device?.batteryAvailable ? qsTr("Device battery (%1%)").arg(root.device.battery * 100) : qsTr("Battery unavailable")
-                    }
+                                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
+                                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.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 {
+                                        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
+                                        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
-                            }
-                        }
-                    }
+                                            implicitWidth: height
+                                            radius: Appearance.rounding.full
+                                            color: Colours.palette.m3primary
+                                        }
+                                    }
+                                }
 
-                    StyledText {
-                        Layout.topMargin: Appearance.spacing.normal
-                        text: qsTr("Dbus path")
-                    }
+                                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 {
+                                    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 {
+                                    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 {
+                                    text: root.device?.address ?? ""
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.small
+                                }
 
-                    StyledText {
-                        Layout.topMargin: Appearance.spacing.normal
-                        text: qsTr("Bonded")
-                    }
+                                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 {
+                                    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 {
+                                    Layout.topMargin: Appearance.spacing.normal
+                                    text: qsTr("System name")
+                                }
 
-                    StyledText {
-                        text: root.device?.deviceName ?? ""
-                        color: Colours.palette.m3outline
-                        font.pointSize: Appearance.font.size.small
+                                StyledText {
+                                    text: root.device?.deviceName ?? ""
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.small
+                                }
+                            }
+                        }
                     }
                 }
-            }
-            }
+            ]
         }
+    }
 
+    // FAB Menu (positioned absolutely relative to flickable)
     ColumnLayout {
         anchors.right: fabRoot.right
         anchors.bottom: fabRoot.top