FIle Search Widget

[sowjanyagunupuru]

I have added a widget for file search with basic functionality and ui styles as shown in the attached image

But it's not handling the input states as expected i.e search term or file

Here I need suggestion , that the filteration must be done among all the existed files.
How can I give that files content to the file search widget

And how can I make this widget to handle the input states ime searchterm

[msujew]

Hey @sowjanyagunupuru,

I'm unsure what you want. Can you explain a bit what the search bar should search? Are you expecting it to open something similar to VS Code?

[sowjanyagunupuru]

That search bar should find the files

Like in vscode
We use that to find the respective file by giving that file name as input

Most matched file names with the input are shown

I want that functionality for my search bar

[sowjanyagunupuru]

Yes as shown in the image shared by u is exactly my requirement

[msujew]

I see. You can use the QuickInputService#open method by injecting an instance of QuickInputService to achieve that. That should automatically open this exact popup.

[sowjanyagunupuru]

Yeah it's working perfect as expected
Thank you for your support 😊

[sowjanyagunupuru]

Hello @msujew ,

Can u kindly help me adding an extension for icon such as FlatIcon

So that the icons which are shown on the screen will be replaced with the icons of the included extension

Icons such as shown below in the image must be replaced with the icons of added extension
But how can we include manage that.?

Is there any method to include the extension and use the icons of that extension instead of existed

Such that all the icons in the ui screen will be the icons of added extension i.e FlatIcon

[msujew]

The CSS for views contributed by VS Code extensions is dynamically generated here:

theia/packages/plugin-ext/src/main/browser/plugin-shared-style.ts

Lines 124 to 143 in ac0c246

	if (type === 'icon') {
	toDispose.push(this.insertRule('.' + iconClass + '::before', theme => `
	content: "";
	background-position: 2px;
	display: block;
	width: ${size}px;
	height: ${size}px;
	background: center no-repeat url("${theme.type === 'light' ? lightIconUrl : darkIconUrl}");
	background-size: ${size}px;
	`));
	} else {
	toDispose.push(this.insertRule('.' + iconClass + '::before', theme => `
	content: "";
	background-image: url("${theme.type === 'light' ? lightIconUrl : darkIconUrl}");
	background-size: ${DEFAULT_ICON_SIZE}px;
	background-position: left center;
	background-repeat: no-repeat;
	`));
	iconClass += ' ' + PLUGIN_FILE_ICON_CLASS;
	}

You might be able to override this service in a way so that you can replace the paths of the icons with a custom one. I don't think there's a good way to generically replace those icons with the icon of the extension, given that the extension icon is often times not suited to be displayed in the side bar.

[sowjanyagunupuru]

I found your suggestion to use QuickInputService#open for file searches extremely helpful in fulfilling my requirement and saving time.

Now, I have another request: I’d like to implement the navigation functionality (left/right arrows) that already exists in the toolbar for my icons. Can you guide me on how to utilize that functionality in my top panel as my icons are in toppanel?