Repository navigation
feat(toolbar): use icon-only buttons where the icon is clear - #468
Open
Dhruv-Sharma29 wants to merge 1 commit into
Open
Dhruv-Sharma29 wants to merge 1 commit into
Dhruv-Sharma29 wants to merge 1 commit into
Conversation
The toolbar wrapped button labels onto a second line at ordinary window widths. Open, Project, Save, Browser, Focus, Preview, AI, Cite and Publication now show only their icon. Export formats (HTML, PDF, DOCX) and the font-size controls keep their text. - Each icon-only button has a tooltip and an aria-label. The tooltip shows the button's shortcut, read from the shared shortcut table, so it is correct on each platform (Save used to say Ctrl+S on macOS). - Toggle buttons expose aria-pressed and share one active style. The Publication button no longer has its own styling. - Project uses its own icon so it no longer looks like Show in Finder. - The toolbar wraps onto a second row in narrow windows instead of overflowing. - Add a toolbar reference to the user guide, and point the docs at the new button names. Closes petertzy#457
This branch has not been deployed
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
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.
Closes #457
Problem
At ordinary window widths (~800px), the toolbar's buttons were so crowded that their labels wrapped under their icons.
Changes
Icons only: Open file 📂, Open project folder 🗂️, Save 💾, Open in browser 🌐, Focus Mode 🧠, Preview 👁, AI Assistant 🤖, Citations 📚, Publication 📝. Dark mode was already icon-only.
Text kept:
Usability and accessibility
aria-label. The emoji itself isaria-hidden.DEFAULT_SHORTCUTS), so they are correct on each platform. Before, Save's tooltip said "Ctrl+S" on macOS too.aria-pressedand share one active style. The Publication button no longer has its own styling, which included a brokendark:class.Layout
IconButtoncomponent replaces nine copies of the same button markup, so a future button is one line.flex-wrap: on narrow windows the toolbar moves to a second row instead of overflowing or hiding buttons.Docs
docs/UserGuide.mdgets a Toolbar section: a table of each icon, its name and what it does.Testing
npm test,npx tsc --noEmit,npm run lint,npm run buildall pass.aria-pressedstates are correct.This branch is independent of #467 and merges cleanly with it. Once #467 lands, the Focus, Preview and Open-project tooltips will also show their new shortcuts, because the tooltips look shortcuts up by id.