Making some changes to the reset.less so that some default UA button styling is removed.
Then, changing core.less so that the classic "HB" button styling is scoped to a certain class `.colorButton`. This will make it easier to use the button element in other places.
This commit only renames things, changes no logic. Any mention of "book", "view", or "mode" is renamed in relation to "spreads".
The AnchoredBox.jsx file is renamed to Anchored.jsx
Extra icons are deleted, and the remaining ones are renamed.
Big change to how the AnchoredBox component is structured so that it can be used in more than just one spot. Now composed of the wrapper Anchored, with two children AnchoredTrigger and AnchoredBox, each of which can have their own arbitrary children.
Next steps will involve renaming the component file to Anchored.jsx, moving most styling out of the attached stylesheet (and into brewRenderer.less), and adding props to pass in Anchor Positioning properties.
If there were two inputs sending styles to the same target (ie row and column gap), they would override each other.
This change fixes that by deepening the merges. Admittedly, I turned to cGPT to help me with this as the nesting was throwing me for a loop. It works, though, and I understand it now that I can read it.
defaultValue matches the normal styled values of the gap property on the .pages element.
removed the "tooltip" that showed the current value from the range sliders inside the anchoredbox (the gap sliders).
Refactoring the AnchoredBox component because I wanted to set focus on the trigger button when the expanded box was closed. Wrapping the trigger into it's own component, with forwardRef, allows for passing the `ref` to the actual DOM node. Then the `.focus()` method will work on it.
Rather than a single button with three states, it is three buttons. Went with buttons with `role='radio'` rather than true radios mostly because that is what Radix does.
the `-alt` icons have better sizing/readability than the originals. The originals likely will be removed.
Also adds back in 'fit-width' icon which was mistakenly overwritten earlier.
Adds a new AnchoredBox component that is functionally a clone of the "saving error" notifications, but drops a lot of the JS in favor of the new (chrome-only!) CSS Anchor Positioning API. In subsequent commits, either alternate styling or a polyfill will be added non-supported browsers.
The box contains a few inputs that modify the CSS applied to `.pages`, most critically a "start on right" toggle for the Facing Pages mode.
The range slider should only display a tooltip for the value if the value attribute exists. For example, the difference between controlled and uncontrolled inputs.
Update toolBar.less
Adding class name so that it can be toggled between 'recto' and 'verso'. Verso being the normal left/right configuration, no styling is needed. With recto, the first page is shifted to the second slot, or right side.
Adding the margin resets back in because otherwise each .page margin is set to "auto" on the sides, and that makes them zoom awkwardly when in facing and flow modes.
Fixes an issue where tags with duplicate values would all update to the same value after editing just one.
Also an adjustment to the parameters that are passed to handleInputKeyDown-- they are now one object. This helps handle an "options" object where more optional features can be turned on and off.
Simplified and unified some font-size declarations, adjusted the "descriptions" for various inputs to be similar structure and appearance, change the components h1 label from "Brew" to "Properties Editor", updated the comment about Publishing.
New button that triggers `submitTag()` method directly (rather than throw onKeyDown event) and passes `null` as the newValue. New `if` condition checks for null on newValue and if true, removes the tag that matches the originalValue.
This *does* currently delete all duplicate tags if they match the one you are deleting. Not sure when you'd ever want duplicate tags, but regardless i'll likely switch this to work via Index, not value.
Component now accepts new tags entered in the always-present input field. Entering a value and hitting Enter submits the tag, and it appears as a new tag.
Updated the tag list keys to be unique (via `index`).
To-Do: empty 'new tag' input after submitting.
Now brew metadata is actually updated and preserved across reloads to match updated tag values. useEffect calls the props.onChange event from the parent component on every change to the valueContext state of this component (right now, after hitting Enter in a tag input).
Currently uses uncontrolled inputs with a `defaultValue` attribute set to the values passed in via props. The input can then be edited, and when `Enter` is pressed, it updates the stored value state. Later, this can be updated to be trigger with `Tab` or clicking outside the active input element.
Clicking on a readTag now converts that tag to a text input, and maintains the tag value. It also closes any other open text inputs amongst the tags (but leaves the "new tag" input open).
Tags are now either "readTag" or "writeTag", with the former being a div with the tag value and the latter a text input with the value.
Minor class name change in LESS.
Take an array of values from props, load it into valueContext state with an "editing" boolean for each value. Then, when rendering the component, take each value in the valueContext array and create a div for each --
at this point, if the value is "being edited", it returns a div with text "editing". If not being edited, it returns a div with the value as text.
Nothing is being edited at this point since that functionality doesn't exist yet.
No actual functionality implemented yet, just renames the component from "StringArrayEditor" to "TagInput", for brevity at the possible cost of clarity. For now, the original StringArrayEditor is kept and named "TagInput-class.jsx" so that I can reference it as I work on the functional component.
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.
This was previously in the .pageInfo widget, probably not for any good reason, but I'm moving it to the popups div for probably not a good reason.
It's used to get the parent .pane div, and pull its `height` value which is then passed to the `.brewRenderer` div to set the height.
I tried alternate methods that would make this obsolete (CSS methods mostly), but due to some complexity am just ditching those alternatives and popping this sucker into `.popups` for now.
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.
handleScroll is replaced by getCurrentPage(), which effectively does the same thing. The math is slightly different, though very similar, and result seems to be the same.
Gazook89