Reduce the visual prominence of the page input by using a darker background and a text color that matches the rest of the toolbar icons. Darker background still indicates this is an interactive item (is an input), hopefully.
Bad commit here with too much stuff. I apologize.
This sets up two Intersection Observers: the first captures every page that is at least 30% visible inside the `.pages` container, and the second captures every page that has at least one pixel on the horizontal center line of `.pages`. Both can be arrays of integers (page index).
The "visiblePages" array is duplicated and formatted into a "formattedPages" state, which gets displayed in the toolbar.
The toolbar displays that, unless the user clicks into the page input and enters their own integer (only a single integer, no range), which can then jump the preview to that page on Enter or blur().
The Arrow 'change page' buttons jump the preview back and forth by a 'full set'.
If one page is viewed at a time, this is moved on page a time, and if 10 pages are viewed at a time it jumps the pages by 10.
Left to do: adapt the "jump editor to match preview" divider button to work with new "centerPage".
Toggles a state variable to either visible or hidden which is used to set a related class on the toolbar. The hiding is done with CSS, just reducing the width of the toolbar and the opacity of the tools.
All zoom buttons run through same handler now.
They no longer take only the delta of the current zoom and desired zoom-- they take the actual desired zoom.
calculateZoom is now calculateChange, to help get the desired delta.
Removes icons as components, uses mask-image instead.
Sets a size on the .fac icons to 1em so by default they are 1em and retain their aspect ratio.
rename the icon files for consistency.
Reintroducing handlePageChange() method to handle the page input separately from the scroll function. It tests the regex pattern on the string, parses to integer, and sets pageNum state.
scrollToPage also now sets the pageNum state after performing the scroll so the input box matches the new current page.
stylelint has a problem with the `:horizontal` pseudo selector in brewRenderer.jsx, which is being used to apply some styling to the custom scrollbars. As far as i can tell, the selector is not standards-track, so that is probably why. Not sure if we want to adjsut our stylelint config to allow it?
Moved the single-line handler to operate directly in the onChange handler of the input that is calling it.
Considered doing the same with handleZoomChange, but that handler is used by two buttons rather than just one.
New icons for Zoom to Fit, and Fit Width buttons. Used SVGR online tool to create react components and then combined them.
If doing in future, be sure to set currentColor on `fill` property in the SVG itself. Make the SVGs as closed curves only (don't rely on stroke). set only a width property, not height.
Reduce overlap of the two functions and just require a 'mode' parameter. Could like roll a 'manual' mode into this for the zoom slider, as well, but skipping for now.
Adds a toFit() method to determine the delta/change needed to the current zoomLevel to fit the page to the pane, so that the widest page fits just inside the pane.
Treat each input and button as a direct child of the `.group` class, removing the intermediate div and reassign the `tool` classname to those inputs and buttons. One item, the current / total page "set", is wrapped in a .tool div because they should be considered one item (even within the .group container).
And then a bunch of CSS adjustments to match the new structure.
Make it so that if a user enters a page number higher than the total page count, it jumps them to last page. if lower than 1, it jumps them to first page.
Displaying the total page count near the current page number means we can lose the bottom right toolbar entirely (the renderer could be added to top toolbar, or just left for the metadata info in title bar).
