diff --git a/modules/nexus/NavPane.qml b/modules/nexus/NavPane.qml index 71f5d14c..5d765e8c 100644 --- a/modules/nexus/NavPane.qml +++ b/modules/nexus/NavPane.qml @@ -11,6 +11,11 @@ ColumnLayout { spacing: Tokens.spacing.large + SearchBar { + Layout.fillWidth: true + nState: root.nState + } + NavLocations { Layout.fillWidth: true Layout.fillHeight: true diff --git a/modules/nexus/NexusState.qml b/modules/nexus/NexusState.qml index f575bdb9..015f844d 100644 --- a/modules/nexus/NexusState.qml +++ b/modules/nexus/NexusState.qml @@ -4,8 +4,8 @@ import Quickshell QtObject { property ShellScreen screen property bool isWindow - property bool navExpanded property int currentPageIdx + property bool searchOpen signal close } diff --git a/modules/nexus/navpane/NavLocations.qml b/modules/nexus/navpane/NavLocations.qml index 079ce087..2badcb6f 100644 --- a/modules/nexus/navpane/NavLocations.qml +++ b/modules/nexus/navpane/NavLocations.qml @@ -97,7 +97,7 @@ StyledFlickable { ColumnLayout { Layout.fillWidth: true - spacing: 0 //Tokens.spacing.extraSmall + spacing: 0 StyledText { Layout.fillWidth: true diff --git a/modules/nexus/navpane/SearchBar.qml b/modules/nexus/navpane/SearchBar.qml new file mode 100644 index 00000000..95236768 --- /dev/null +++ b/modules/nexus/navpane/SearchBar.qml @@ -0,0 +1,81 @@ +import QtQuick +import QtQuick.Layouts +import Caelestia.Config +import qs.components +import qs.components.controls +import qs.services +import qs.modules.nexus + +StyledRect { + id: root + + required property NexusState nState + + implicitHeight: searchLayout.implicitHeight + Tokens.padding.medium * 2 + + radius: Tokens.rounding.full + color: Colours.palette.m3surfaceContainerLowest + border.color: Colours.palette.m3outlineVariant + + Behavior on border.color { + CAnim {} + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.IBeamCursor + onClicked: searchField.focus = true + } + + RowLayout { + id: searchLayout + + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Tokens.padding.large + + spacing: Tokens.spacing.small + + MaterialIcon { + text: "search" + color: Colours.palette.m3onSurfaceVariant + fontStyle: Tokens.font.icon.medium + } + + StyledTextField { + id: searchField + + Layout.fillWidth: true + Layout.fillHeight: true + + placeholderText: qsTr("Search settings") + placeholderTextColor: Colours.palette.m3onSurfaceVariant + color: Colours.palette.m3onSurfaceVariant + font: Tokens.font.body.large + + Binding { + target: root.nState + property: "searchOpen" + value: searchField.text.length > 0 + } + } + + IconButton { + icon: "close" + font: Tokens.font.icon.medium + type: IconButton.Text + padding: Tokens.padding.extraSmall + isRound: true + onClicked: searchField.clear() + + opacity: searchField.text.length > 0 ? 1 : 0 + + Behavior on opacity { + Anim { + type: Anim.DefaultEffects + } + } + } + } +}