Improve tree view #87

lapo-luchini · 2024-04-19T20:26:43Z

I'm creating this PR myself for ease of tracking olibu's branch as quoted in #81.

I have concept draft for a new interactive tree view based on the latest esm branch in my repository. https://github.com/olibu/asn1js/tree/treeview
What do you think about it.

Update to latest trunk

Merging this to my release branch

lapo-luchini · 2024-04-19T20:26:54Z

I really like the "real tree" look, I'm not very fond of the ⊕⊖ icons, seems a bit too cumbersone (I mean too "noticeable" in regards of the actual text), but that's a minor issue (I think it can be improved easily with smaller size or with less contrast).

Something funny happened with distances between elements (my 2.0.1 vs your treeview):

lapo-luchini · 2024-04-19T20:31:28Z

I'm not very fond of the ⊕⊖ icons, seems a bit too cumbersome

Might also be the reason the new view occupies more vertical space.

Was it intended change (i.e. for visual clarity?) or a unintended side-effect?

olibu · 2024-04-20T07:54:21Z

Thank you for your feedback!
I'm not really happy with the icons, too. They have larger and black and white. I'll reduce them a little bit more to reduce the distraction.
I have not changed any vertical spacing explicitly. I can hardly see the differences. I expect that this is an side effect of the icons and the <li> elements.
Shall I add more space between the lines again?

olibu · 2024-04-20T13:05:57Z

I've update the feature branch with less distracting tree icons.
As part of the tree stylesheet I had removed too many spacing styles. After recovering, the UI now looks much more like the original one.

I've deployed that version at https://olibu.github.io/asn1js/

Waiting for your feedback.

lapo-luchini · 2024-04-21T11:36:43Z

Much better!

About vertical space… it does use a bit more space, but watching it again maybe it was a bit "too packed" before, rather than "too spacey" in the new one. 🤔

lapo-luchini · 2024-04-21T11:38:42Z

There are a few "weird spots" where the tree lines have double width, can you check that?
PS: I can't see any new commit with these fixes on the feature branch… did you forget to push?

olibu · 2024-04-21T14:42:49Z

I do not see any of this "weird spots". Maybe it's dependent on the resolution? I'm using Chrome and Safari on a Mac.

All changes are now available at https://github.com/olibu/asn1js/tree/feature/treeview
There have been some push issues as you already found out ;)

olibu · 2024-04-21T14:51:05Z

I can reproduce the "weired spots" when zomming the page. Some zoom levels show the lines in different sizes. I will try to find a fix for this.

lapo-luchini · 2024-05-12T13:52:41Z

@olibu I'm going to fix this squashed in a single commit, it would be too difficult to re-build all changes in single commits, I hope you don't mind. (I usually prefer 1:1 commits myself…)

lapo-luchini · 2024-05-12T15:30:25Z

index.js

@@ -231,3 +237,19 @@ selectTag.onchange = function (ev) {
    let tag = ev.target.selectedOptions[0].value;
    window.location.href = 'https://rawcdn.githack.com/lapo-luchini/asn1js/' + tag + '/index.html';
 };
+
+// zoom fix to have straight lines in treeview


Is it possible to do this using CSS rules instead of custom JS?
Because I fear that direct style rules such as this would be stopped by CSP on official website.

I added a version without JS. Looks fine on my screen.

From 64546e4 Date: Sun, 28 Jan 2024 18:17:45 +0100 Subject: [PATCH 01/25] hex copy on click From 151289b Date: Sun, 28 Jan 2024 22:08:09 +0100 Subject: [PATCH 02/25] Context menu and copyAsString added From 5efe7f7 Date: Mon, 29 Jan 2024 08:26:40 +0100 Subject: [PATCH 03/25] Context menu initially hidden From 36dd239 Date: Mon, 29 Jan 2024 13:28:54 +0100 Subject: [PATCH 04/25] Fix: Copy the string to clipboard From 01b1525 Date: Mon, 29 Jan 2024 13:31:51 +0100 Subject: [PATCH 05/25] New: Copy as pretty From 4978b90 Date: Mon, 29 Jan 2024 13:33:13 +0100 Subject: [PATCH 06/25] New: Align context menu to left From c7cc3ba Date: Mon, 29 Jan 2024 18:48:31 +0100 Subject: [PATCH 07/25] Negative list for set and sequence From c69ed8d Date: Mon, 29 Jan 2024 18:52:28 +0100 Subject: [PATCH 08/25] Fix: Show context menu at correct position From 0b9b3f3 Date: Mon, 29 Jan 2024 19:22:45 +0100 Subject: [PATCH 09/25] Simple marker with toggle method From 8eb7457 Date: Wed, 31 Jan 2024 19:50:58 +0100 Subject: [PATCH 10/25] Indention fixed From 80e7a8b Date: Sun, 31 Mar 2024 19:35:37 +0200 Subject: [PATCH 11/25] Menu added to tree view From 6dcb057 Date: Sun, 31 Mar 2024 22:09:03 +0200 Subject: [PATCH 12/25] Pretty text from innerText From 88d7afd Date: Wed, 10 Apr 2024 21:01:10 +0200 Subject: [PATCH 13/25] new: tree view From 59d44dc Date: Fri, 19 Apr 2024 15:42:51 +0200 Subject: [PATCH 14/25] Only highlight the current selected node From 1dc1323 Date: Fri, 19 Apr 2024 15:48:44 +0200 Subject: [PATCH 15/25] smaller padding as of tree layout From 60383f9 Date: Fri, 19 Apr 2024 16:17:50 +0200 Subject: [PATCH 16/25] Smaller borders and icon From a6cf850 Date: Fri, 19 Apr 2024 16:31:23 +0200 Subject: [PATCH 17/25] do not show the menu in case of clicking the icon From 174df2c Date: Fri, 19 Apr 2024 16:38:45 +0200 Subject: [PATCH 18/25] Installation of node to execute lint correctly From 48fbe0b Date: Fri, 19 Apr 2024 16:38:54 +0200 Subject: [PATCH 19/25] Singlequotes From fbd2b26 Date: Sat, 20 Apr 2024 13:33:30 +0200 Subject: [PATCH 20/25] Only show context menu on highlighted element From ea3c28f Date: Sat, 20 Apr 2024 14:09:29 +0200 Subject: [PATCH 21/25] Less offensive tree icons From 1f9913c Date: Sat, 20 Apr 2024 14:28:33 +0200 Subject: [PATCH 22/25] Original layout recovered From 0d84f33 Date: Sat, 20 Apr 2024 15:02:26 +0200 Subject: [PATCH 23/25] Layout issue fixed From ba21d40 Date: Mon, 22 Apr 2024 19:46:31 +0200 Subject: [PATCH 24/25] Fix: Zoom issues of the border line in treeview From d303e65 Date: Tue, 23 Apr 2024 09:35:51 +0200 Subject: [PATCH 25/25] Indentation fixed

lapo-luchini · 2024-05-12T15:33:05Z

BTW: I squashed your branch in 76b5048 (and partially merged to current trunk).

lapo-luchini · 2024-05-12T16:25:45Z

I merged this PR in branch github-87, which can be tested online on githack.

olibu · 2024-05-12T19:24:46Z

The branch looks fine to me. The githack link however has some CSS issues. Maybe the cache has to be reloaded.

lapo-luchini · 2024-05-13T07:57:21Z

Maybe the cache has to be reloaded.

Probably; that happened to me as well, but after a reload with F12+disable cache it looked fine.

lapo-luchini · 2024-05-23T20:35:30Z

Merged in 88cb856.

olibu and others added 24 commits October 7, 2023 18:30

Merge pull request #2 from lapo-luchini/trunk

c0b4a11

Update to latest trunk

hex copy on click

64546e4

Context menu and copyAsString added

151289b

Context menu initially hidden

5efe7f7

Fix: Copy the string to clipboard

36dd239

New: Copy as pretty

01b1525

New: Align context menu to left

4978b90

Negative list for set and sequence

c7cc3ba

Fix: Show context menu at correct position

c69ed8d

Simple marker with toggle method

0b9b3f3

Merge branch 'feature/hexcopy' into release

2256505

Merging this to my release branch

Indention fixed

8eb7457

Merge branch 'feature/hexcopy' into release

170ef08

Merge remote-tracking branch 'lapo/trunk' into release

620bc08

Menu added to tree view

80e7a8b

Pretty text from innerText

6dcb057

new: tree view

88d7afd

Only highlight the current selected node

59d44dc

smaller padding as of tree layout

1dc1323

Smaller borders and icon

60383f9

do not show the menu in case of clicking the icon

a6cf850

Installation of node to execute lint correctly

174df2c

Singlequotes

48fbe0b

Merge branch 'feature/treeview' into release

b4ac6bd

lapo-luchini mentioned this pull request Apr 19, 2024

Cleaner hover icon for current selected node #81

Closed

olibu added 2 commits April 20, 2024 13:33

Only show context menu on highlighted element

fbd2b26

Less offensive tree icons

ea3c28f

olibu added 2 commits April 20, 2024 14:28

Original layout recovered

1f9913c

Layout issue fixed

0d84f33

olibu force-pushed the feature/treeview branch from ed7ddd9 to 0d84f33 Compare April 22, 2024 09:46

olibu added 2 commits April 22, 2024 19:46

Fix: Zoom issues of the border line in treeview

ba21d40

Indentation fixed

d303e65

lapo-luchini commented May 12, 2024

View reviewed changes

olibu added 3 commits May 12, 2024 21:01

Zoom fix via css media query instead of JS

7ecec55

Resolving merge conflict

1b1b3ac

Push to trigger failed build again

678a19a

lapo-luchini closed this May 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve tree view #87

Improve tree view #87

lapo-luchini commented Apr 19, 2024

lapo-luchini commented Apr 19, 2024

lapo-luchini commented Apr 19, 2024

olibu commented Apr 20, 2024 •

edited

olibu commented Apr 20, 2024

lapo-luchini commented Apr 21, 2024

lapo-luchini commented Apr 21, 2024

olibu commented Apr 21, 2024 •

edited

olibu commented Apr 21, 2024

lapo-luchini commented May 12, 2024

lapo-luchini May 12, 2024

olibu May 12, 2024

lapo-luchini commented May 12, 2024 •

edited

lapo-luchini commented May 12, 2024

olibu commented May 12, 2024

lapo-luchini commented May 13, 2024

lapo-luchini commented May 23, 2024

Improve tree view #87

Improve tree view #87

Conversation

lapo-luchini commented Apr 19, 2024

lapo-luchini commented Apr 19, 2024

lapo-luchini commented Apr 19, 2024

olibu commented Apr 20, 2024 • edited

olibu commented Apr 20, 2024

lapo-luchini commented Apr 21, 2024

lapo-luchini commented Apr 21, 2024

olibu commented Apr 21, 2024 • edited

olibu commented Apr 21, 2024

lapo-luchini commented May 12, 2024

lapo-luchini May 12, 2024

Choose a reason for hiding this comment

olibu May 12, 2024

Choose a reason for hiding this comment

lapo-luchini commented May 12, 2024 • edited

lapo-luchini commented May 12, 2024

olibu commented May 12, 2024

lapo-luchini commented May 13, 2024

lapo-luchini commented May 23, 2024

olibu commented Apr 20, 2024 •

edited

olibu commented Apr 21, 2024 •

edited

lapo-luchini commented May 12, 2024 •

edited