[Enhancement] UI Customizations about file-tree-alternative

[ozntel]

This is actually exactly what I have configured within my theme. I'm not sure if @ozntel intends to do it this way but just incase anyone else is trying to get the effect:

Yes, I already included within the code and it will be there in the next release

[ozntel]

I just released the new version. You can update from the community plugins.

These are the updates I could remember of right now:

• [+] [-] Icon Color Adjustment for themes
• Drag and Drop to the Folder Tree
• Drag and Drop style correction in Files List
• data-path addition for folder div
• pinned files save after each pin files list change
• Removal of unnecessary state refresh in files view

There are also some optimizations to ensure that the plugin works smoothly.

Hope you will enjoy

[chetachiezikeuzor]

Hey! I just saw you mentioned me so I thought I'd add to this (if it helps of course).

Wrap Text: this is a bit of a hackier way to do it but I've found this to work.

div.treeview > span,
.nav-file-title-content{
  white-space: normal;
}

File Extension Reverse: This works perfectly to reverse the extension tag.

.oz-nav-file-title{
  flex-direction: row-reverse;
}

[FelipeRearden]

Hey @chetachiezikeuzor !!!!!!

You are always helping me Chetachi :) every time you appear with a solution 👍

Thank you so much for two more snippets !!!!!

[chetachiezikeuzor]

Of course! I'm always happy to help! 🤗

[ozntel]

Hey, I am glad that the plugin is helpful.

Since this is a quite new plugin that I created, I have still a lot to improve inside. As you might realize within the last couple of days, I have been releasing new versions quite often to ensure that each feature I included works properly for users.

Customization [+] [-]

Since I includeSVG as an icon for collapse and expand, I set the color from the beginning. I might think giving options to users within the plugin settings.

Option to change the color of the dashed - - - relationship line

This uses var(--text-muted) to ensure that it is compatible with all plugins. You should be able to edit from your end.

Would be a great combo with @Mara-Li suggestions! #6

data-path will be included in the next release for the folders.

Add a different background-color when hover

Color change when Hover on folder and files will be also in the next release. This color will be also active when user drag and drop an external file to file list or folder name (folder drop will be in the next release)

Wrap Text

I see that Chetachi has already found a solution for this. I won't include within the plugin snippets.

File Extension on the right

In React, I positioned them actually on the right side specifically. It might be a conflict with your CSS snippet.

Tools on the Right Side of Vault name

I can put it on the list for enhancement in the future. But I need to first finish the basic needs.

Hope this helps a bit

[SlRvb]

Thanks for mentioning me Felipe!

I think the [+][-] should use Obsidian's color variables for its colors, something like --interactive-accent. That way it would easily match any theme's color scheme without too much work.

I hope you do include the text wrap in the plugin's options because not everyone knows or wants to add css snippets for every plugin. Maybe a toggle for text wrapping would help, along with the option to switch between dashed/solid/no lines.

[chetachiezikeuzor]

I think the [+][-] should use Obsidian's color variables for its colors, something like --interactive-accent. That way it would easily match any theme's color scheme without too much work.

This is actually exactly what I have configured within my theme. I'm not sure if @ozntel intends to do it this way but just incase anyone else is trying to get the effect:

div.treeview svg.toggle{
    fill: var(--interactive-accent);
}

[chetachiezikeuzor]

Ok sweet! Thanks for all your hardwork!

[FelipeRearden]

Of course! I'm always happy to help! 🤗

Thank you Chetachi !!!!!!

[FelipeRearden]

Hello @ozntel !

Any enhancements from this list will be more than welcome! I'm sorry if I get hyped and write every suggestion that I could think that could be a good feature for File Tree.

Thanks for your reply and comments about my suggestions!

[FelipeRearden]

Thanks @ozntel for this update!

[N3C2L]

Hello Mr. @ozntel ,

I'd be glad if you could help me out here:

This wrap snippet from @chetachiezikeuzor isn't working anymore:

div.treeview > span, .nav-file-title-content{ white-space: normal; }

What can I do?

[N3C2L]

Tested it again in a fresh sandbox vault and wrapping works, but text overlaps with the item below (Tested it for long filenames). I'd be glad if you could looking into it.

[N3C2L]

An idea would be to add a wrap text toggle button here to this button menu.
I think many users would love to read long file titles without resizing the sidebar everytime to the maximum width.