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).
putting the `pageInput - 1` modifier in the `scrollToPage` method allows for more understandable button function ('back button' is `- 1` and 'forward button' is `+ 1`).
Changing input type to text removes the "spinner" controls from within the text box. The spinner buttons are an accessibility issue (the tiny buttons are tiny), and we already have better buttons for incrementing/decrementing page number.
Text box only accepts numbers.
Moved onChange handler function to a component method and simplified it a smidge.
Must use parseInt now because the input type will change to 'text' rather than 'number'
totalPages shouldn't need to be in state, since this component won't be changing it.
renamed pageNumberInput to just pageInput. Was just something that happened in the course of working on it.
currentPage doesn't need to have it's own state separate from pageInput, they should always be the same *value*.
Set as relative position, the toolbar (and mysteriously, the pageInfo box) would jump up 29px (toolbar height) when the "next page" button was clicked. absolute pos fixes this.
The website UI should stay out of the iframe if possible. Otherwise, users can style the UI on their brew which may or may not be a pain, and it's simple enough to avoid it.
Moved the zoomLevel state assignment to a newer useState hook function, making it easier (and shorter) to update that state within event handlers.
The slider onChange is a single easy line, and the buttons handlers are two lines for clarity.
Remove the 'in'/'out' parameter of the function and just have the buttons send postive or negative integers equal to the desired change in the zoom. No need for if/else statements using strings.
The makeZoom function is redundant if we just insert the style a little further down when the `.pages` div is initialized, as a `style` attribute on the tag.
Mostly change some properties from things like "transparent" to "unset". A lot of things that are just overriding the default Naturalcrit "colored button". Moved some properties to the top level `.toolbar` class and let it cascade down.
more closely match the properties editor behavior. removed some unnecessary (unused) properties. Outline only appears when element is focused (rather than on hover as well).
replace column-/row-gap with a single gap at 5px. Padding on each child element will provide the space. Set a height on toolbar, so child elements can be set to 100% height to improve bg color change on hover.
Doesn't need to be Sticky positioning, relative is fine (it is still fixed above the iframe). Allows us to remove a bunch of extra properties.
Add a smidgen of padding.
Avoid over-styling of browser-defined slider, but still apply a HB appropriate color scheme. Prevents us from having to create our own tick marks, so we can just define the `option`s in the datalist and get tick marks in the right spot.
Themes contain both CSS and Snippets. The brewRenderer only cares about the CSS, but other components need the Snippets. Better to have the parent "editPage", etc. load the theme bundles and pass them down to each child that needs it, rather than trying to pass from the child up.
This also fixes the `metadataEditor.jsx` not being able to change themes live; A new theme bundle is now loaded when a new theme is selected, instead of only the first time the BrewRenderer mounts.
Also renamed to "fetchThemeBundle"
`renderStyle` is still necessary; it allows us to update the style live in the component render step as the user types into the style tab. Otherwise the style is only rendered once and never updates.
React also discourages directly editing the DOM ourselves, because it makes changes to the DOM that react cannot track; we should aim to provide all DOM writes inside of the component render function instead of using `document.createElement`, etc.
Too that end, this commit reduces the `loadAllStylesAndSnippets` function to just fetch and parse the data; actual rendering is moved back to `renderStyle()`
This removes the existing endpoints and replaces them with /theme.
/theme/:id - return a theme bundle containing all styling from this USER theme and any parents.
/theme/:engine/:id - return a theme bundle containing all styling from this STATIC theme and any parents
The theme bundle returns a marshalled JSON object containing:
styles - an array of strings representing the collected styles in loading order
snippets - an array ( currently empty ) of collected snippets.
The various bits of theme rendering code for <style> an style <link> have been swapped out with an 'onDidMount' call that loads the thendpoint and appends a series of <style> blocks to the brewRender's head.
This loses some caching advantages, but probably won't matter in the long run.
