diff.rs icon indicating copy to clipboard operation
diff.rs copied to clipboard

Prettier code folding elements

Open xfbs opened this issue 1 year ago • 2 comments

Currently, we have these little boxes for code folding:

Screenshot from 2024-10-13 16-10-36

I think we can make this look prettier. For example, GitHub uses these blue lines to control the folding:

Screenshot from 2024-10-13 16-11-27

They are defined in src/components/diff_view.rs in the DiffLineGroup component, and their style is in static/style.css.

xfbs avatar Oct 13 '24 14:10 xfbs

Idea: can use the iconography of GitHub for this, since they permissively license them: octicons. GitHub has put a lot of thought into creating these icons, they are pretty and coders should be used to them.

xfbs avatar Oct 17 '24 15:10 xfbs

I've just pushed a commit which implements this.

Currently broken:

  • line numbers for old/new aren't right, needs fixing
  • want to add a button expand all
  • github does an incremental unfold.. when you press the button, it reveals the next 15 lines, but not all of them. not sure if we want this too or if we want to keep it simple.

xfbs avatar Oct 19 '24 16:10 xfbs