Add Scroll Buttons to Top Instructions#9283
Conversation
And remove the existing scrollbar. We wanted to override the scrollbar for a couple of reasons; first, on OSX the scrollbar is hidden unless you're actually scrolling, making it potentially difficult to discover the "scrollability" of the region. Second, on other browsers, the scrollbar was ugly and in the wrong place. The new functionality adds appropriately-styled arrow buttons underneath the hide button, which when clicked will scroll the instructions area. The buttons are hidden when in collapsed mode or when the instructions area is at its maximum height.
0af6033 to
de558bc
Compare
|
i wonder if we want the triangles to look a little more rounded, and also maybe not quite so flush with the top/bottom? perhaps worth asking the ui-ux room what they think |
|
I'll give em a little padding and see what the room thinks. Re: rounding, I can pretty easily do something that looks like this |
| RESIZER_HEIGHT + margins; | ||
| const leftColHeight = minIconHeight, | ||
| middleColHeight = minInstructionsHeight, | ||
| rightColHeight = collapseButtonHeight + scrollButtonsHeight; |
There was a problem hiding this comment.
we dont generally use this style of declaring multiple variables with a single var/const. I don't know that there's any good reason for it, but it's nice to be consistent and I might just use three consts
|
Code generally lgtm. Some things worth checking out: |
|
I develop on Windows, so that part's definitely good! Tested on a level with an image and one with an expandable |
|
PTA(quick)L |
| * collapsed | ||
| */ | ||
| getMinHeight() { | ||
| getMinHeight(collapsed=this.props.collapsed) { |
There was a problem hiding this comment.
Should prob add an @param comment to the function
|
couple nits, otherwise lgtm |
And remove the existing scrollbar. We wanted to override the scrollbar
for a couple of reasons; first, on OSX the scrollbar is hidden unless
you're actually scrolling, making it potentially difficult to discover
the "scrollability" of the region. Second, on other browsers, the
scrollbar was ugly and in the wrong place.
The new functionality adds appropriately-styled arrow buttons underneath
the hide button, which when clicked will scroll the instructions area.
The buttons are hidden when in collapsed mode or when the instructions
area is at its maximum height.