Toolbar is hidden while publishing an article #682
Conversation
|
@danboyce92 is attempting to deploy a commit to the Codú Team on Vercel. A member of the Team first needs to authorize it. |
|
Hello @danboyce92, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work! |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
This works great but there could be an easier solution if you don't mind the change request? If you don't have time let me know and I'll merge it and open up an issue with this comment.
If you make the toolbar have a lower z-index we might avoid all the logic. I'm not sure how we do that off the top of my head. Here are the results by just toggling z-index:
If this proves too difficult here's a nuclear option:
I'm also open to removing the fixed property as this toolbar is temporary until we have the new toolbar which will open when you highlight text like this:
I'm playing with designs here https://www.figma.com/file/yKc7ind3lHUTpqkjTePy1N/codu.co?type=design&node-id=0%3A1&mode=design&t=ZrC8BZjxWoPsnPAn-1
|
Yeah that z-index approach is way simpler, with less mess! Made the change there in the second commit. Good stuff! |
✨ Codu Pull Request 💻
Pull Request details:
This PR is in response to issue #505
In this PR I added a piece of state 'toolbarVis' in the useCreatePage hook. From there I had it imported into the alpha/new client.tsx where it was passed down as props into the editor component and from there it was passed into the Toolbar component. It is used in the Toolbar component to swap the css class whenever the 'open' state is changed.
There is an additional class added to the bottom of the Toolbar.module.css called .hide
which changes the visibility to hidden;
The 'open' state is monitored in the alpha/new client.tsx with an additional useEffect which changes the state of toolbarVis depending on if the publish button has been clicked or not.
Any Breaking changes:
None as far as I'm aware everything seems to be working fine.
I'm aware it's probably not ideal passing state through multiple components before it gets to where it's needed as it can get messy fast. Usually I would use a redux store. If there is a simpler solution please let me know and I'll get to work.
Associated Screenshots: