Change the design of the MOC tree

[Robin-Haupt-1]

maybe move away from the dotted lines style to something more modern.

[tyf2018]

Hi， @Robin-Haupt-1 I am very happy to hear this. This is a super powerful plugin , and I like it very much, but I have to admit that I am not used to the dotted style.

In addition, I want to change the dotted line to a solid line, and customize the color and thickness. How should I modify the css? I haven't found a valid css parameter in the developer background.

Best Regards.

[Robin-Haupt-1]

Hi tyf2018,

what do you mean by "developer background" in

I haven't found a valid css parameter in the developer background.

? Do you mean the developer console or the plugins settings tab?

There is no option to change the design without changing the source code. I have made a few changes. How do you like this look? I think it's much better and i'll probably release an update with this style soon.

I'm curious, how would you modify the style if there was an option to?

[tyf2018]

Do you mean the developer console or the plugins settings tab?

Yes, this:

The new design is pretty good, and I look forward to its release soon.

At present, for the MOC tree, I hope to quickly identify the hierarchical relationship to which the notes belong, so I customized the font color, and the effect is similar to this:

At present, it is still a bit ugly, but it does help me quickly identify hierarchical relationships. This is the css code: MOC_css.zip

[Robin-Haupt-1]

Wow, very interesting! Thanks for sharing that. Working with colors is a nice idea, maybe i'll add that functionality to the plugin.

[tyf2018]

By the way, there is a small suggestion. Can this icon be replaced with icons such as right arrow and down arrow? Reason: It is very similar to folding and unfolding, so it is difficult to distinguish.

[Robin-Haupt-1]

Do you mean that unfolded looks too similar to folded?

Now that i think about it, maybe it would help to switch to something like this: https://iconmonstr.com/arrow-37-svg/

Since the current icon has this little ege on the top/left side, it may be harder to distuingish which way it points.

[Robin-Haupt-1]

Or maybe this would be even better? https://iconmonstr.com/arrow-25-svg/

[tyf2018]

Hi， @Robin-Haupt-1 Would you consider using an arrow icon like this? When collapsed, the right arrow is displayed and the color becomes dimmed, and when expanded, it is displayed as the down arrow and the color becomes brighter.

By the way, would you consider adding a connection? The color of the connection in the normal mode is dim, and the color becomes brighter when the mouse is hovered, like this：

https://user-images.githubusercontent.com/56342788/142760798-c032ccda-3573-41e9-aa8c-e6611ca55dce.mp4

[Robin-Haupt-1]

I would rather not use an arrow like in your picture but stay with the simple triangles, because i think it's more intuitive and a common icon to use in collapsing trees.

Maybe making the arrows colorful, and maybe making collapsed ones fade is a good idea. I'll think about it.

I like the idea of having the background highlighted on hover. I like the style in your video in general. Can you send me the css for that? Maybe i could use some things from it.

[tyf2018]

I would rather not use an arrow like in your picture but stay with the simple triangles, because i think it's more intuitive and a common icon to use in collapsing trees.

If it is a triangle, I personally think it might be easy to confuse folding and unfolding. In short, my idea is that the collapsed and expanded icons should be easy to distinguish. Or use triangles when folding? But use another shape when unfolding, such as a square? Hahaha, just say it casually.

Can you send me the css for that? Maybe i could use some things from it.

Regarding css, I only have this entire file, please check it.

Blue Topaz.zip

[Robin-Haupt-1]

Do you also think it would be hard to tell apart the two states with this arrow? https://iconmonstr.com/arrow-25-svg/ It is like a real arrow just without the tail :)

Regarding the css, in the video you seem to have my plugin with hover background and without the borders around the li elements. I really like how it looks. Can you send me the CSS for that?

And i am curios, how exactly do you make all these changes to the plugins apperance? Do you put the CSS files in the CSS snippets folder?

[tyf2018]

Do you also think it would be hard to tell apart the two states with this arrow?

It may be that everyone’s feelings are different. How do I find arrows with tails easier to distinguish?🤣

Regarding the css, in the video you seem to have my plugin with hover background and without the borders around the li elements.

In fact, that is not the MOC tree of the MOC plug-in, but the view interface of the Obsidian core plug-in file list . Because I haven't found a valid css parameter, so I don't know how to modify the css style of the MOC tree.

The connection of the file list is controlled by this css: 文件列表.zip

The principle is the same, I think the MOC tree can also achieve the hovering effect of the connection.

how exactly do you make all these changes to the plugins apperance? Do you put the CSS files in the CSS snippets folder?

As long as you find the correct css parameters, whether you directly modify the theme or add it to the css snippets folder, it will work.

[Robin-Haupt-1]

It may be that everyone’s feelings are different. How do I find arrows with tails easier to distinguish?

This may also be because you have removed the borders with your custom CSS. They probably make it easier to discern hierarchy, and that tells you if an item is expanded in this way: If it has a button to expand, but you can't see any descendants, it's collapsed.

So you may need the symbols to be more specific.

Maybe you can override the symbols with your custom CSS too? Just set the background to the svg you'd like (i get mine from https://iconmonstr.com/arrow/). I've never done that, but it might work.

Like this: .bg { background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); } See here: https://css-tricks.com/lodge/svg/09-svg-data-uris/

So you'd have to do

div.expand_button {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

div.expand_button svg{
display:none;
}

[tyf2018]

Hi， @Robin-Haupt-1 I may have solved the style of the hover effect, the effect is as follows:

https://user-images.githubusercontent.com/56342788/143168922-28ce3436-3f9f-47cd-99b4-e58bcc9ed81b.mp4

This is the css parameter:

/*MOC tree竖向边框*/
.workspace-leaf-content[data-type="map-of-content"] li {
    border-left: none !important;
}
.workspace-leaf-content[data-type="map-of-content"] li:hover,
.workspace-leaf-content[data-type="map-of-content"] li li:hover,
.workspace-leaf-content[data-type="map-of-content"] li li li:hover,
.workspace-leaf-content[data-type="map-of-content"] li li li li:hover,
.workspace-leaf-content[data-type="map-of-content"] li li li li li:hover,
.workspace-leaf-content[data-type="map-of-content"] li li li li li li:hover {
    border-left: 3px solid var(--text-header2) !important;
}
/*MOC tree横向边框*/
.workspace-leaf-content[data-type="map-of-content"] li.container ul {
    border: none !important;
    font-size: 1.03em !important;
}

[Robin-Haupt-1]

Thanks, but i was thinking rather about the background underlying the whole row / line being highlighted on hover.

I think you could stop the hover from moving the text to the right by giving the lis a border-left: 3px solid transparent;