Preview Tools + Header Navigation #479
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Decided to do this for *all* images, not just those being injected. In case someone wants to automatically apply wrapping to images inside a stat block, etc.
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.
Realized this method is filling the preview pane, and that toFit would force the zoom to show the entirety of a single page at once.
Adding a real toFit() button that takes the page with the largest single dimension (height or width) and makes it fit within the pane.
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.
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.
Bumps [@googleapis/drive](https://github.com/googleapis/google-api-nodejs-client) from 8.13.1 to 8.14.0. - [Release notes](https://github.com/googleapis/google-api-nodejs-client/releases) - [Changelog](https://github.com/googleapis/google-api-nodejs-client/blob/main/release-please-config.json) - [Commits](googleapis/google-api-nodejs-client@drive-v8.13.1...drive-v8.14.0) --- updated-dependencies: - dependency-name: "@googleapis/drive" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]>
This sets the focus on the editor (and thus reveals cursor position) between editor changes (style to text to meta and back).
…nd_yarn/googleapis/drive-8.14.0 Bump @googleapis/drive from 8.13.1 to 8.14.0
Bumps [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) from 28.8.0 to 28.8.2. - [Release notes](https://github.com/jest-community/eslint-plugin-jest/releases) - [Changelog](https://github.com/jest-community/eslint-plugin-jest/blob/main/CHANGELOG.md) - [Commits](jest-community/eslint-plugin-jest@v28.8.0...v28.8.2) --- updated-dependencies: - dependency-name: eslint-plugin-jest dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]>
…nd_yarn/eslint-plugin-jest-28.8.2 Bump eslint-plugin-jest from 28.8.0 to 28.8.2
Up version to v3.14.3
Bumps [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) from 7.35.0 to 7.35.1. - [Release notes](https://github.com/jsx-eslint/eslint-plugin-react/releases) - [Changelog](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/CHANGELOG.md) - [Commits](jsx-eslint/eslint-plugin-react@v7.35.0...v7.35.1) --- updated-dependencies: - dependency-name: eslint-plugin-react dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]>
…nd_yarn/eslint-plugin-react-7.35.1 Bump eslint-plugin-react from 7.35.0 to 7.35.1
…Switch Set Focus on Editor after Tab Switches
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.
I don't think the Edit and Share pages need to have this extra prop, since there is currently no logic that alters it's value from True.
Early work on moving the HeaderNav toggle button to the Preview Toolbar. Future work will separate the displayed ID link list from the toggle button, so that the list is displayed as a separate div/component below the toolbar (rather than inside of it).
Add a handler for clicking the HeaderNav toggle and pass that down via props to the Toolbar.
Moves the iframe and the headerNav into a 'row' div which is styled with flex, so the elements are side by side. This is a choice to have the header navigation not overlap the brew when it's open, but instead squish that iframe area but keep it fully visible (the zoom to fit button can be used to resize the page if needed).
This sets the HeaderNav and Iframe row to have flex styling (side by side). Likely more could be done here, such as flex-wrap if on a very small screen so that the toc is on top or something, but not worrying about that now. I could likely get away with targeting just `.content` and skip `.pane` but this felt more explicit (/share/ doesn't have `.pane`).
The button to toggle the HeaderNav is pulled away from the component itself and will go into the Toolbar component. Only the actual navigation portion will remain in this component, opening and closing based on that Toolbar button. Much of the styling for that button is removed as well.
HeaderNav toggle goes into Toolbar, and small changes to state variables which keep track of whether it is open or not in order to change classNames. Toolbar is reconfigured as well to have "start" and "end" groups which push their children to the start or end of the toolbar rather than centering. add state variable
|
I do need to take another look at this-- the links don't actually work right now. They do update the URL with the id, but they don't scroll to the page. Edit: oh, it's because it is moved outside of the iframe. okay. hm |
|
There seem to be a lot of irons in the fire regarding the BrewRenderer right now, so I'm going to close this PR and let you continue doing what you are doing without trying to throw my opinions in it right away. When your PR is merged and the other stuff settles, we can see where things are at. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
_Here is my take on the Header Navigation working with the Preview Tools. Note, this is a PR on your fork, not on the main naturalcrit/homebrewery fork. So if you like this, you can marge into your fork and then continue working on it before opening a PR on the main repo.
Or, I can open a PR directly on the main fork if you prefer, and it would include your work to this point + mine._
This moves the toggle button for the HeaderNav into the Toolbar component.
onClicktoggles the HeaderNav, opening it on the right-side of the Preview Pane as an adjacent sibling of the iframe. This means that the HeaderNav doesn't overlap the brew when you have it open-- it is much easier to just have it open if a user prefers. With the new zoom to fit buttons, it's trivial to adjust the size of the pages in the iframe if the pages are clipped by the iframe edges.This PR also includes the latest work on toggling the Preview Toolbar-- there are some minor improvements to it. In summary, I think the changes allow the HeaderNav to be open if the Toolbar is open or closed, without making compromises.
Here it is in action:
Sep-04-2024.22-44-55.mp4