Dev.ej/translate route buttons

[joanise]

PR Goal?

Right now, the Studio / Editor / Privacy buttons on the top right of the Studio and Editor are shown in English on the French and Spanish versions. This PR wants to translate them.

Feedback sought?

This should be rubber stamping, but the longer words for Privacy (Privacidad and, much worse, Confidentialité) make the buttons too wide. E.g., on iPhone SE: fr es vs English

At a more reasonable screen size, in English, you fully see the buttons down to 437 pixels wide, and that's perfectly acceptable, but in French you need at least 500 pixels wide to see "Confidentialité" in full. Is there a way to have each of the three buttons auto-shrink when they stop fitting? Ideally, each of the three words would be partially trimmed on the right so that you still see some of each button's text even on a narrow cell phone with 375 pixels wide.

Priority?

medium

How to test?

load the PR preview in each language and play with simulated narrow screens

Confidence?

still low because of the size problems

Version change?

no

[semanticdiff-com[bot]]

Review changes with SemanticDiff.

Analyzed 8 of 8 files.

Overall, the semantic diff is 10% smaller than the GitHub diff.

	Filename	Status
:heavy_check_mark:	packages/studio-web/project.json	Analyzed
:heavy_check_mark:	packages/studio-web/src/i18n/messages.es.json	15.03% smaller
:heavy_check_mark:	packages/studio-web/src/i18n/messages.fr.json	14.04% smaller
:heavy_check_mark:	packages/studio-web/src/i18n/messages.json	23.58% smaller
:heavy_check_mark:	packages/studio-web/src/app/app.component.html	7.87% smaller
:heavy_check_mark:	packages/studio-web/src/app/material.module.ts	Analyzed
:heavy_check_mark:	packages/studio-web/src/app/shepherd.steps.ts	Analyzed
:heavy_check_mark:	packages/studio-web/src/app/editor/editor.component.html	4.35% smaller

[github-actions[bot]]

PR Preview Action v1.4.8 :---: Preview removed because the pull request was closed. 2024-10-30 20:54 UTC

[joanise]

Rebased this PR to the reverted main branch so it can be reviewed properly. It's on top of other PRs, but should still be reviewed by itself.

[joanise]

And it still needs a solution for seeing all three buttons when the text is wider, in French and Spanish, as I initially commented.

[roedoejet]

Yes, there's a way to do that. at a minimum we could put overflow: scroll; on the toolbar which would allow people to scroll. However I think maybe a better thing to do would be to collapse the toolbar into a ☰ icon for small viewports which expands a menu when clicked. I.e. https://material.angular.io/components/menu/overview. I've made a PR here for this.

[joanise]

Thanks @roedoejet for this suggestion. I've merged it here, with some improvements Del suggested.

I think this PR is now ready to review, and hopefully to merge, although I'll clean up the commit history before I do so.