Class information seems to be missing from tree items
Closed this issue · 8 comments
First: thank you for creating these new forks. :)
Perhaps this is due to the deprecation fixes or the experimental color support, not sure yet. In the original project each tree list item had a class assigned to it corresponding to its tag type, which allowed users to tweak the appearance via the styles.less, such as this stripped down example:
.symbols-tree-nav {
li.list-item {
.icon-function, .icon-method {
color: #61afef;
}
}
}
Of course, all the power of css is available, not just simply changing the font color.
Is there a way to restore this functionality or if there is a new way of doing it?
Well as I am no coffee script expert and not the original author, it's not easy to answer. I will be able to check it seriously next week only.
I haven't used this functionality, so didn't notice my changes did break it (obviously this is the reason why it's not here anymore; though it's pretty sure it has nothing to do with the deprecation fixes, you can try symbols-tree-view-fix to check this (enable only one of the package in the same time!) and most probably this has to do with the colors option).
In order to be sure to understand, can you confirm that:
- when you add this snippet, you expect the colours of functions and methods entries to change accordingly, colors option being checked or not?
- you notice this functionality is out whether the colors option is checked or not?
Of course, if you (or anyone else) find a way to hack it correctly, don't hesitate to send a PR!
Well I want to correct this soon.
First, I have noticed a bug, a reference to symbols-tree-view that was left in the code and preventing the colors option to work well. This deserves a quick patch.
Now when I correct this, when the colors options is checked, the custom colors are overridden, this is normal (I don't know how to check whether a color has been changed in the styles.less before applying it).
When colors options is unchecked, the custom colors only show up when the icons are shown too. I will try to correct this.
No hurry. I appreciate all of your time so far. I will try symbols-tree-view-fix; just to see what happens, I haven't had a chance yet. To answer your questions:
- Yes, I would expect anything I add to styles.less to take precedence/override over anything set by the package. I've set opacity, spacing/padding, backgrounds, as well as color per item type; similar for selected, hover, and transition.
- It does not seem to matter if the colors option was checked or not, my symbol tree view is always black and white with this fork. I will attempt to play around with it more over the weekend,
Here's a screenshot of the original treeview package with my styles applied to match the horizontal separators in my code pane (classes are salmon, functions/methods are a dark cyan-ish):
OK. I'm annoyed to have released this fork embedding a stupid bug.
So, at least I have released a patch to correct it. Things should be better. (The bug anyhow made checking/unchecking the colors option ineffective). Now if you uncheck colors and check showIcons, you should get the same behaviour as before.
The colors defined in styles.less seem associated with the icons, not only because of the classes' names: .icon-function
, .icon-method
, but also it seems the information to choose the colors from styles.less is gone if one chooses to hide them. This can certainly be changed, but is a little more difficult.
Don't feel bad on the release, you've achieved more than I've had the time to do! :)
Pulling the update and turning on the icons option definitely got my custom styles working again. Thanks!
Good :)
Also, I think that turning on colors while icons are hidden might not be so difficult. I'll check it when I can.
So, in order to be able to use user custom colors, I have:
- renamed Colors option as Colors From Syntax Theme (so this is obvious where they come from)
- added a Custom Color option, if you check it, then colors defined like this:
.symbols-tree-nav {
li.list-item {
.custom-function, .custom-method {
color: #61afef;
}
}
}
should override (if defined) .icon-* classes and also colors from syntax theme.
So, in order to use your custom theme while hiding icons, you can add .custom-function, .custom-method
entries (maybe on the same line as .icon-function, .icon-method
), and turn off the icons. Tell me if it works (last patch 14.2).
@jolsen71 I think this issue can be closed. Tell me if I'm wrong or if you still have questions.