search

ecustic / obsidian-file-color

An Obsidian plugin for setting colors on folders and files in the file tree.
MIT License
115 stars 7 forks source link

Implement color inheritance and background colors #20

Closed eblanshey closed 9 months ago

eblanshey commented 1 year ago

This PR implements color inheritance as requested in #14, #5

A new option is added in the settings to enable inheritance. If enabled, then if a color is set on a folder, all the children will inherit the same color. Colors set on children will override the parents.

The only slight downside is that if people go crazy with setting colors, it may be difficult to determine which files have colors set. I think it's not a big issue though, since the first different color in the folder hierarchy is the one that has a color set.

eblanshey commented 1 year ago

I also added ability to color the background instead of the text. #3

The two new options look like this: image

Samples: Background color on, no inheritance: image

Background color on, with inheritance: image

Background color off, with inheritance: image

Background color off, no inheritance (same as the original): image

I haven't worked with Typescript before and couldn't quickly figure out how to get proper typing for some things, so I didn't add a new component for the toggle area. Hopefully that's okay.

ecustic commented 1 year ago

Hey, I just wanted to say I really appreciate the contribution. I'll take a look at it over the weekend, and see about getting it merged.

eblanshey commented 1 year ago

@ecustic changes done. I feel that "cascading colors" is better than "inherit colors" so I swapped out the naming in the code for that. I tested all 4 combinations and everything looks good :+1:

Thomas-Schmall commented 1 year ago

Super cool, thanks for adding this!

On my personal wish list would be the option to have it work different for files and folders. That is: To optionally have all folders use the background coloring, but all files just the name coloring. Or a little border maybe. Because currently I find them hard to distinguish on a glance.

eblanshey commented 1 year ago

@Thomas-Schmall you're welcome!

Isn't it the same as the behavior without this plugin? The way to distinguish files and folders is the little dropdown icon to the left of the folder. I think a CSS snippet might be best for you to accomplish this.

Thomas-Schmall commented 1 year ago

Isn't it the same as the behavior without this plugin?

Not sure I follow. Without the plugin either there are no colors or in some themes there are random default colors for the top folders. The good thing about the second version is that the distinction is clearer. There are gray drop-down icons - but they're hard to see on a glance.

I think a CSS snippet might be best for you to accomplish this.

Yeah, I was just musing on how I would like it in my dream world 😅 Ideally one could see with one look what is files and what is folders - and what is the top level. I was trying hard, but with my limited CSS knowledge I found no way to clearly select the top nodes vs the child nodes in the file tree. They're not clearly tagged.
There is also some bug in Obsidian that makes the indentation styling jump around. When I have time I'll write them a bug report.

eblanshey commented 1 year ago

@Thomas-Schmall you can use this CSS to apply styles to top-level folders:

.workspace-leaf-content[data-type="file-explorer"] .nav-files-container .mod-root > .nav-folder-children > .nav-folder > .nav-folder-title {
    border-style: dotted;
    border-width: 1px;
    border-color: black;
}

The > indicates "direct child" so that not all children recursively get the styles. Probably "top level folder styles" could be its own plugin rather than a file color plugin, but that's just me.

You can also make the collapse icon a more bright, distinct color to help distinguish folders from files:

.collapse-icon svg.svg-icon {
   color: #FF0000;
}

There is also some bug in Obsidian that makes the indentation styling jump around. When I have time I'll write them a bug report.

I've encountered this too, thought it was an issue with the theme, but probably not. Please report it!

laffan commented 1 year ago

This is exactly what I was going to ask for. Thanks @eblanshey !

Thomas-Schmall commented 1 year ago

@eblanshey Thank you so much for the CSS! This is awesome. It works nicely for quick-glances. I used it to color the border for sub-folders. And files just get the name colored.

I've put a screenshot of my implementation in the other thread (not to clog this one).

I've encountered this too, thought it was an issue with the theme, but probably not. Please report it!

Will do.

dcampagnone commented 11 months ago

Any update on getting this merged and released?

laffan commented 10 months ago

@eblanshey / @ecustic any updates? Can folks help in any way? These changes would be a great addition to the plugin.

eblanshey commented 9 months ago

Hey, I'm also quite a bit short on time, and don't really use the plugin anymore. Would you be willing to update the code yourself? Your suggestions are sound. We can merge this into a development branch, if you'd like?

ecustic commented 9 months ago

Hey, I'm also quite a bit short on time, and don't really use the plugin anymore. Would you be willing to update the code yourself? Your suggestions are sound. We can merge this into a development branch, if you'd like?

Sure, let's retarget this PR to the feature/color-cascade branch, merge it and I'll take it from there.