diff --git a/modules/wp/WallpaperPicker.qml b/modules/wp/WallpaperPicker.qml index dfd7d53..97f6a3c 100644 --- a/modules/wp/WallpaperPicker.qml +++ b/modules/wp/WallpaperPicker.qml @@ -12,6 +12,7 @@ PanelWindow { implicitHeight: screen.height * 0.5 color: "transparent" visible: true + focusable: true Rectangle { anchors.fill: parent @@ -21,6 +22,33 @@ PanelWindow { border.width: 2 border.color: Colors.outlineVariant + clip: true + + TextField { + id: filterText + placeholderText: "Search..." + onTextChanged: wallpaperContainer.filterImages() + + anchors.top: parent.top + anchors.topMargin: 20 + anchors.horizontalCenter: parent.horizontalCenter + + width: parent.width - 35 + height: 45 + + color: "white" + placeholderTextColor: "#888" + + background: Rectangle { + + radius: 12 + color: "#2b2b2b" + border.color: filterText.activeFocus ? "#4da3ff" : "#555" + border.width: 1 + } + + } + //Wallpaper space Rectangle { @@ -44,6 +72,31 @@ PanelWindow { folder: "file://" + Quickshell.env("HOME") + "/.cache/wallpaper-thumbs" nameFilters: ["*.png", "*.jpg", "*.jpeg"] showDirs: false + + onCountChanged: { + wallpaperContainer.filterImages() // ensure filteredModel is filled when folder loads + } + } + + ListModel { + id: filteredModel + + } + + function filterImages(){ + filteredModel.clear() + + for (let i = 0; i < imagesModel.count; ++i) { + let name = imagesModel.get(i, "fileName") + let path = imagesModel.get(i, "filePath") + let url = imagesModel.get(i, "fileUrl") + + + if (name.toLowerCase().startsWith(filterText.text.toLowerCase())) { + filteredModel.append({ fileName: name, filePath: path, fileUrl: url }) + } + } + } // grid @@ -56,7 +109,7 @@ PanelWindow { anchors.fill: parent cellWidth: parent.width/6 cellHeight: parent.height/2 + 15 - model: imagesModel + model:filteredModel boundsBehavior: Flickable.StopAtBounds