[Enhancement] UI Customizations

[FelipeRearden]

Hello @ozntel !

First of all, thank you very for this amazing plug-in. This is my first day using and I'm having a great time.

I saw the positive comments from the amazing @chetachiezikeuzor about this plug-in on Discord and I decide to give it a shot.

Since I use the fantastic ITS Theme from @SlRvb, which has a powerful customization settings, my suggestions is related to change the colors and decorations of the File Tree to match to customizations I made on ITS

I have some features suggestions for your appreciation. I hope you like!

1 Customization [+] [-]

A. Option to change the color of [+] and [-]

B. Option define to specific colors to [+] and [-]

C. Add a different background-color when hover
---> Option to customize the color

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

Information: the Style Settings Plugin from @mgmeyers is a plugin used by many themes (ITS and Yin and Yang) as customization tool. Maybe is good ideia to use this for File Tree Alternative customizations

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

2 Wrap Text

Wrap the name of long folder

3 File Extension on the right

Change the position of the file extension from external files makes the UI more pleasant

4 Tools on the Right Side of Vault name

A button to apply some features(utilities) in the folders. My 2 first features are:

1- collapse and uncollapse all
2- sort by lastest date modified

Thanks for reading this! Let me know if need any clarification about the items.

Have a great day!

[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! 🤗

[FelipeRearden]

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

Thank you Chetachi !!!!!!

[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.

[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!

[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);
}

[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

[chetachiezikeuzor]

Ok sweet! Thanks for all your hardwork!

[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

[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.