ubc-carnap-team / Rudolf

Truth Tree Widget for Carnap
2 stars 3 forks source link

Refactor component hierarchy style fix #96

Closed mbecker20 closed 4 years ago

mbecker20 commented 4 years ago

This fix makes the widget behave better when inserted into an html page. There is an issue with wide trees though. They will overflow to the right within the tree bounder, but the archer lines are not drawn on the overflowing content.

The right click menu will now drop down directly below where it is clicked, as opposed to being left aligned with the parent div (which was a problem when the parent was much wider than the text on the row the right click was made).

There are also some style changes to check out. Fonts are smaller to match better with the textbook, and feedback borders are rounded slightly to match the inputs. Also, the tree border's color now reflects feedback.success.

mbecker20 commented 4 years ago

I made all the changes you mentioned. Another issue is that the feedback CustomTooltip covers the Menu. I have been trying to at least style the menu above the tooltip, but strangely the trivial fix with zIndex isn't doing the trick. We could potentially manually control the visibility of the tooltip to have it hide on context menu clicks, but there could be some unexpected behavior in doing so. We could also control visibility with a button / move its location.

Theres also a visual bug (noticeable in Firefox) with the tree border oversizing the bottom of the tree. I think it may be related to ArcherContainer. I can make an issue about it later as well.

McTano commented 4 years ago

I made all the changes you mentioned. Awesome. I'm going to merge this.

Another issue is that the feedback CustomTooltip covers the Menu. I have been trying to at least style the menu above the tooltip, but strangely the trivial fix with zIndex isn't doing the trick. We could potentially manually control the visibility of the tooltip to have it hide on context menu clicks, but there could be some unexpected behavior in doing so. We could also control visibility with a button / move its location.

I got the z-index fix to work by setting the Menu's zIndex to 2000. It was apparently getting calculated as 1300. You're welcome to play around with it if you want to narrow that range down or find a more elegant solution. I'm fine with it for now.

Theres also a visual bug (noticeable in Firefox) with the tree border oversizing the bottom of the tree. I think it may be related to ArcherContainer. I can make an issue about it later as well.

I'm not really sure what you mean by this. Please include a screenshot when you make an issue.