Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace ellipses with number of items that can be expanded. #128

Closed
lawrencechernin opened this issue Apr 22, 2016 · 8 comments
Closed

Replace ellipses with number of items that can be expanded. #128

lawrencechernin opened this issue Apr 22, 2016 · 8 comments

Comments

@lawrencechernin
Copy link

for example
change:

  • {...},

to

  • {6},
@bhollis
Copy link
Owner

bhollis commented Apr 22, 2016

That's an interesting idea. I'll try it out and see if it's confusing.

@bhollis
Copy link
Owner

bhollis commented May 24, 2016

I'm doing this with CSS, so it's hard to do the count.

@bhollis bhollis closed this as completed May 24, 2016
@stanio
Copy link
Contributor

stanio commented May 24, 2016

I think it would be better to inline all child items, possibly grayed out, cutting off to a single (the first) line, possibly using text-overflow: ellipsis to indicate there's more to show. This style I've seen with few other apps including the new built-in Firefox JSON viewer (which I don't like as I like JSONView). I'll try to prepare the styles for demonstration.

@stanio
Copy link
Contributor

stanio commented Aug 21, 2016

Haven't had the time to look into implementing this into a PR but here's what I mean:

  • Option 1: Inline all of the object/array content, and display ellipsis on overflow

jsonview-inline-1

  • Option 2: Same as Option 1 but always collapse nested object/array into ellipsis

jsonview-inline-2

Collapsing the view further:

jsonview-inline-3

  • If the view is wide enough whole of the collapsed object/array is visible on one line:

jsonview-inline-4

jsonview-inline-5

To implement this I'll need to add class="collapsed" to parent LI elements encapsulating the property name and the object/array value, and then add few CSS rules involving display: flex, and text-overflow: ellipsis as mentioned before.

@bhollis
Copy link
Owner

bhollis commented Sep 4, 2016

I like that! Would you be able to send a PR for it?

The only thing to keep in mind is that copy-paste should preserve valid JSON.

@bhollis bhollis reopened this Sep 4, 2016
@bhollis
Copy link
Owner

bhollis commented Nov 25, 2016

This is related to #131.

@stanio
Copy link
Contributor

stanio commented Dec 30, 2016

@bhollis:

I like that! Would you be able to send a PR for it?

The only thing to keep in mind is that copy-paste should preserve valid JSON.

I'm able to prepare a PR for it, now that I have some free time on my hands, but I've played with it a bit more, and realized the original formatting could not be kept as currently is (on copy+paste) as the collapsed nested content would be forced inline. If that's not absolute showstopper(?) I will go ahead and prepare a PR for this. May be we could have this behavior behind a preference?

@bhollis
Copy link
Owner

bhollis commented Dec 31, 2016 via email

@bhollis bhollis closed this as completed Nov 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants