Draft
Conversation
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.
Remove a bunch of lines of code determining "hours ago" elapsed time ranges, replacing it with moment.js functions. Moment is already installed in the repo. Change the `title` strings to include formatted date/time strings and a little more info. Add a "restore from..." header to the dropdown to provide a little context clue for what the buttons do.
This is not related to the overall PR, but it's breaking things if no dismisskeys property is set in localStorage. Adds a default value (empty array).
Clicking a menu item that opens a submenu shouldn't trigger a snippet generator, it should only open the submenu. This commit removes the gen methods from these types of snippets.
Most changes here are to the nodes that contain the snippet buttons and menus, and the snippets themselves. The snippetbar now contains two subgroups: snippets, and the "other ones". The "other ones" are the smaller buttons, called 'tools' and includes the editors (which is a somewhat awkward grouping). The 'tools' are further grouped into history tools, code tools (aka CM tools), and the editor buttons. Snippets get revamped into html `popover`s with CSS anchor positioning. They become click-only activated.
The changes to this file are numerous, and I because I removed a lot of redundant code and re-ordered stuff there are few untouched lines in the diff at this point.
Moving the entirety of this file into `client/.../navbar.jsx` since this isn't actually shared with anything.
- bring in old nav.jsx structures to consolidate - class to functional components - use CGPT to help rework entire navbar into something more akin to a menubar - top level menus now take a click to open, unless one is already open in which case hover works - clicking outside of menu closes it - submenus require click to open and close - reorganize navitems dramatically to reduce navbar clutter
helps to monitor which menus are open, so they can be closed at the correct times.
moving from nav.jsx to navbar.jsx, components were renamed and so where they are used I updated the names.
moved from "help out" to just "patreon" for better clarity. I feel like users neither want to be sent to a patreon page unexpectedly, nor will know that "help out" just means "give us money"....some users who just want to donate may avoid "help out" thinking it's a call to submit code.
This holds HB specific things, like a link to the NatCrit landing page, the changelog, help links, patreon etc.
editPage, homePage, newPage get new navbars. The rest will come later. Tried to group similar items together, like "create new, save, load, and recents". Thinks still need to be done, like Save, Save errors, save status, brew info/metadata.
More effort needs to be done to condense/simplify stuff, like not defining navItem 3 times. Generalize for the snippetbar, too.
temporary fixes here to get it to build.
a 'root' element to attach dialogs to via React Portal.
A new Dialog component that uses the HTML Dialog element and `showModal` method. Includes subcomponents Title, Content, and Footer. Footer holds a "Close" button, but can take additional children as well for other buttons.
The idea here is that the ErrorBar component largely is used to display HTML errors, and those errors should be displayed closer to where they actually are: the Editor. If there are HTML errors, those can be highlighted somehow in the editor, with options to scroll to those errors.
Some HTML restructuring and CSS changes to achieve certain appearances.
Change the Google Drive transfer toggle so that it opens a modal, rather than be a straight up transfer button. The modal UI gives the opportunity to add more services in the future-- multiple services can be listed and chosen from. Additionally, the modal gives more information about what is actually happening (more can be added, or linked to in the FAQ). Further, any errors incurred can be displayed directly in the same modal before closing the modal. There is stuff in this commit that might not make sense right away, particularly around states.
removing stuff that is built-in to the navbar now, and adding the icon.
This moves a bunch of state properties into an 'alerts' property to build into one alerts object. Items that may be alerted to the user. This is largely for my own organization and seemed relatively harmless.
The alerts get a small visual icon up by the title. Currently, they are just icons (except the pending autosave, which when clicked triggers a save). But in the future, they could also be buttons to open additional information in a Dialog.
calculuschild
added a commit
that referenced
this pull request
Jul 29, 2025
Just to reduce the number of changes needed to review on the UI overhaul #4122 PR
Member
|
I am going to please ask that the |
Collaborator
Author
Okay. |
at calcs request, put all the errors back into a single file.
Collaborator
|
I just wanted to state that, on the whole, I really like this work. |
Adds required roles to menubar items.
Makes it easier to navigate to these locations with a screen reader.
I think this just happens in the newbrew.navitem.jsx when the file import happens, with `splitTextStyleAndMetadata(newBrew)`. Don't think we need to keep it?
Member
|
5k?! gee |
Collaborator
Author
|
Here is a link that I want to keep: https://blog.jim-nielsen.com/2025/icons-in-menus/ |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Only Homepage, Edit Page, Share Page, and New Page works right now
Navbar
The current navbar is a hodgepodge of many functions, and is crowded on anything but larger screens. Now:
Errors are now displayed as icons next to the title. This includes:
Editor Pane
Split Pane
Preview Pane
Everywhere
To-do
Related Issues or Discussions
Gallery
HTML errors in the code editor no longer user the ErrorBar across the top of the brewRender. Instead, they appear in a panel above the CodeEditor, and provide a button to jump to a particular line. Additionally, line widgets and styling are added to the error'd lines. The line widgets may be overkill-- I added them before implementing the panel. And in the brewRenderer there is a 'splash image' that gives some sense of the issue without providing the detail list of errors-- something that can be presented in the Share screen as well.
The picker for storage is moved to a dialog, and arranged as a list of buttons such that additional options can be easily added later (in terms of design) if needed. The list, theoretically, can automatically sort options into "available" and "needs sign-in" groups so that users know before making a choice that it is actually currently available. Buttons in the "need sign-in" group would kick the user to the NaturalCrit log-in page so they could link whatever account is needed.
The HeaderNav is now a full height panel on the right side of the window. It remains collapsible. When it is open, it doesn't obscure the brewRenderer content.
The splitPane divider is now smaller in overall size, and no longer obsures the editor scrollbar or other buttons. It still allows for dragging for repositioning the divider via the grip or anywhere on the divider. But it can also be snapped to the left (to hide the editor) by clicking on it once, and can be re-opened to the prior position with another click on it. This is handy for mobile screens, because you don't need to drag from the edge of the screen and risk navigating back in the tab history when you try drag the divider from the edge of the screen-- just click on the divider and it'll pop back out from the edge.
Further, the little grip/button tab flips to the other side of the divider if it's brought all the way to the right side of the window, so it doesn't disappear.
The panes are swappable, left/right. The "jump to" buttons have their icons flip as a result so they remain accurate.
Error pages feature a vector graphic for whimsy. Right now there is just a single default image of gandalf, but it's easy to add an svg along with an attribution line to specific errors.
hiding this until later
QA Instructions, Screenshots, Recordings
Replace this line with instructions on how to test or view your changes, as well as any before/after
screenshots or recordings for UI changes.
Reviewer Checklist
Replace the list below with specific features you want reviewers to look at.
*Reviewers, refer to this list when testing features, or suggest new items *