dcontent: create bluetooth panel

3 files changed, 296 insertions, 0 deletions

diff --git a/modules/detachedcontent/DetachedContent.qml b/modules/detachedcontent/DetachedContent.qml
new file mode 100644
index 0000000..4226917
--- /dev/null
+++ b/modules/detachedcontent/DetachedContent.qml
@@ -0,0 +1,98 @@
+pragma ComponentBehavior: Bound
+
+import qs.widgets
+import qs.services
+import qs.config
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+
+Item {
+    id: root
+
+    required property ShellScreen screen
+    property alias active: session.active
+    readonly property Session session: Session {
+        id: session
+    }
+
+    implicitWidth: implicitHeight * Config.dcontent.sizes.ratio
+    implicitHeight: screen.height * Config.dcontent.sizes.heightMult
+
+    GridLayout {
+        anchors.fill: parent
+
+        rows: 2
+        columns: 2
+        rowSpacing: 0
+        columnSpacing: 0
+
+        StyledRect {
+            Layout.fillHeight: true
+            Layout.rowSpan: 2
+
+            topLeftRadius: Appearance.rounding.normal
+            bottomLeftRadius: Appearance.rounding.normal
+            implicitWidth: navRail.implicitWidth
+            color: Colours.palette.m3surfaceContainer
+
+            NavRail {
+                id: navRail
+
+                session: root.session
+            }
+        }
+
+        StyledRect {
+            Layout.fillWidth: true
+            implicitHeight: 50
+            topRightRadius: Appearance.rounding.normal
+            color: Colours.palette.m3surfaceContainer
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            StyledText {
+                anchors.centerIn: parent
+                text: qsTr("Work in progress")
+                color: Colours.palette.m3outline
+                font.pointSize: Appearance.font.size.extraLarge
+                font.weight: 500
+            }
+
+            StyledRect {
+                anchors.fill: parent
+                color: Colours.palette.m3surfaceContainer
+                bottomRightRadius: Appearance.rounding.normal
+
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    maskSource: mask
+                    maskEnabled: true
+                    maskInverted: true
+                    maskThresholdMin: 0.5
+                    maskSpreadAtMin: 1
+                }
+            }
+
+            Item {
+                id: mask
+
+                anchors.fill: parent
+                layer.enabled: true
+                visible: false
+
+                Rectangle {
+                    anchors.fill: parent
+                    anchors.margins: Appearance.padding.normal
+                    anchors.topMargin: 0
+                    anchors.leftMargin: 0
+                    radius: Appearance.rounding.small
+                }
+            }
+        }
+    }
+}
diff --git a/modules/detachedcontent/NavRail.qml b/modules/detachedcontent/NavRail.qml
new file mode 100644
index 0000000..fb30c06
--- /dev/null
+++ b/modules/detachedcontent/NavRail.qml
@@ -0,0 +1,193 @@
+pragma ComponentBehavior: Bound
+
+import qs.widgets
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property Session session
+    property bool expanded
+
+    implicitWidth: layout.implicitWidth + Appearance.padding.large * 4
+    implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
+
+    ColumnLayout {
+        id: layout
+
+        anchors.centerIn: parent
+        spacing: Appearance.spacing.normal
+
+        states: State {
+            name: "expanded"
+            when: root.expanded
+
+            PropertyChanges {
+                layout.spacing: Appearance.spacing.small / 2
+                menuIcon.opacity: 0
+                menuIconExpanded.opacity: 1
+                menuIcon.rotation: 180
+                menuIconExpanded.rotation: 0
+            }
+            AnchorChanges {
+                target: menuIcon
+                anchors.horizontalCenter: undefined
+            }
+            AnchorChanges {
+                target: menuIconExpanded
+                anchors.horizontalCenter: undefined
+            }
+        }
+
+        transitions: Transition {
+            Anim {
+                properties: "spacing,opacity,rotation"
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.bottomMargin: Appearance.spacing.small / 2
+            implicitHeight: Math.max(menuIcon.implicitHeight, menuIconExpanded.implicitHeight) + Appearance.padding.normal * 2
+
+            StateLayer {
+                radius: Appearance.rounding.small
+
+                function onClicked(): void {
+                    root.expanded = !root.expanded;
+                }
+            }
+
+            MaterialIcon {
+                id: menuIcon
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                text: "menu"
+                font.pointSize: Appearance.font.size.large
+            }
+
+            MaterialIcon {
+                id: menuIconExpanded
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                text: "menu_open"
+                font.pointSize: Appearance.font.size.large
+                opacity: 0
+                rotation: -180
+            }
+        }
+
+        NavItem {
+            icon: "settings_bluetooth"
+            label: "bluetooth"
+        }
+    }
+
+    component NavItem: Item {
+        id: item
+
+        required property string icon
+        required property string label
+        readonly property bool active: root.session.active === label
+
+        implicitWidth: background.implicitWidth
+        implicitHeight: background.implicitHeight + smallLabel.implicitHeight + smallLabel.anchors.topMargin
+
+        states: State {
+            name: "expanded"
+            when: root.expanded
+
+            PropertyChanges {
+                expandedLabel.opacity: 1
+                smallLabel.opacity: 0
+                background.implicitWidth: Config.dcontent.sizes.expandedNavWidth
+                background.implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2
+                item.implicitHeight: background.implicitHeight
+            }
+        }
+
+        transitions: Transition {
+            Anim {
+                property: "opacity"
+                duration: Appearance.anim.durations.small
+            }
+
+            Anim {
+                properties: "implicitWidth,implicitHeight"
+                duration: Appearance.anim.durations.expressiveDefaultSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+            }
+        }
+
+        StyledRect {
+            id: background
+
+            radius: Appearance.rounding.full
+            color: item.active ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainer
+
+            implicitWidth: icon.implicitWidth + icon.anchors.leftMargin * 2
+            implicitHeight: icon.implicitHeight + Appearance.padding.small
+
+            StateLayer {
+                color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+
+                function onClicked(): void {
+                    root.session.active = item.label;
+                }
+            }
+
+            MaterialIcon {
+                id: icon
+
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: Appearance.padding.large
+
+                text: item.icon
+                color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                font.pointSize: Appearance.font.size.large
+                fill: item.active ? 1 : 0
+
+                Behavior on fill {
+                    Anim {}
+                }
+            }
+
+            StyledText {
+                id: expandedLabel
+
+                anchors.left: icon.right
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: Appearance.spacing.small
+
+                opacity: 0
+                text: item.label
+                color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                font.capitalization: Font.Capitalize
+            }
+
+            StyledText {
+                id: smallLabel
+
+                anchors.horizontalCenter: icon.horizontalCenter
+                anchors.top: icon.bottom
+                anchors.topMargin: Appearance.spacing.small / 2
+
+                text: item.label
+                font.pointSize: Appearance.font.size.small
+                font.capitalization: Font.Capitalize
+            }
+        }
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
+    }
+}
diff --git a/modules/detachedcontent/Session.qml b/modules/detachedcontent/Session.qml
new file mode 100644
index 0000000..a3f2de5
--- /dev/null
+++ b/modules/detachedcontent/Session.qml
@@ -0,0 +1,5 @@
+import QtQuick
+
+QtObject {
+    property string active
+}