Something fun about tree-view


#1

Hello,

Just try this CSS in your stylesheet:

.tree-view-resizer {
    width: 200px;
    transition: width 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.tree-view-resizer:hover {
    width: 350px;
}

I like this useless feature :smile:


#2

That’s pretty cool! I don’t like the part where it moves opposite of the direction you pull it for a fraction of a second … but that can be tweaked, I’m sure.


#3

Like with my bezier-curve-editor package

:kissing_smiling_eyes: :notes:

Edit: I’m good for another update, it’s all broken :cry:


#4

You can use something more linear if you want.

Just change it by:

.tree-view-resizer {
    width: 200px;
    transition: width 200ms linear;
}

Or ease-in / ease-out. It looks good too :wink:


#5

I like it, ideally for me this would happen if there is some file which name is longer then the width of sidebar.


#6

This can be done with a package. Maybe if I have some time I will create it.


#7

Maybe If I have some time, I could help you with it :).
I will most likely have vacation in at end of the year and I am planning to spend it with Atom.


#8

I tried this with a friend:

.tree-view-resizer {
    width: 200px !important;
    min-width: 200px !important;
}

.tree-view-resizer:hover {
    width: auto !important;
}

It works but we can’t animate it.


#9

CSS transitions from and to auto values don’t work out of the box. For more information see here.


#10

Yes you’re right. But without making a package, it works.


#11

Nice! That’s pretty cool!