Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/interface clarifications #513

Merged
merged 50 commits into from
Jun 30, 2022
Merged

Conversation

BeritJanssen
Copy link
Member

@BeritJanssen BeritJanssen commented Nov 29, 2021

This branch adds tooltips, and loads of i18n tags. I also added the i18next-parser to the package.json, and started writing a gulp script to compile messages. That's where I got stuck. @jgonggrijp : this is the branch I mentioned that might help with requesting translations soon.

This was linked to issues Nov 30, 2021
Copy link
Member

@jgonggrijp jgonggrijp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work @BeritJanssen. How would you like to proceed? Would you like to figure out the parsing yourself (with help, since you got stuck), or defer that work to someone else?

Some general remarks/questions:

  • It looks like you identified all the translatable strings in the templates, but I'm not seeing any similar changes in TypeScript files. Sometimes translatable strings are set in TS and then passed to the template or even injected dynamically. Those need to be passed through a i18next.t() function call instead of the #i18n block helper (by heart, I know you can see an example of this in frontend/src/semantic-search/dropdown-constants.ts). Did you check for translatable strings in TS modules?
  • I think the Gulp task that extracts the strings using i18next-parser need not be integrated into other tasks. We will need to run it only a few times, manually, because it will generate JSON files that we then commit to source.

Some more specific comments below.

frontend/src/index.hbs Show resolved Hide resolved
frontend/src/item-metadata/item-metadata-template.hbs Outdated Show resolved Hide resolved
frontend/src/panel-annotation/annotation-edit-template.hbs Outdated Show resolved Hide resolved
frontend/src/panel-annotation/annotation-template.hbs Outdated Show resolved Hide resolved
frontend/src/panel-annotation/annotation-template.hbs Outdated Show resolved Hide resolved
@BeritJanssen
Copy link
Member Author

@jgonggrijp I won't be able to work on this this week anymore, so if you have time tomorrow, please do pick it up from here. (And I agree to all your comments.)

@jgonggrijp jgonggrijp self-assigned this Jan 4, 2022
@jgonggrijp jgonggrijp mentioned this pull request Feb 24, 2022
Some parts of some templates seem to have previously escaped attention,
especially placeholder, data-tooltip and aria-label attributes. Besides
those, there were some changes that were added in parallel on develop,
as well as a few pieces where alternative orthography or sentence
structure of other languages needed to be taken into account.
jgonggrijp added a commit that referenced this pull request Mar 15, 2022
Adding these changes here as part of #517 instead of in #513 because
the latter is outdated compared to the former with regard to these
templates.

@JeltevanBoheemen FYI
jgonggrijp added a commit that referenced this pull request Mar 16, 2022
Adding these changes here as part of #517 instead of in #513 because
the latter is outdated compared to the former with regard to these
views. This is a follow-up on the previous commit, which regarded the
templates.

@JeltevanBoheemen FYI
@jgonggrijp jgonggrijp force-pushed the feature/interface-clarifications branch from 4176497 to 34900a9 Compare May 2, 2022 00:24
@jgonggrijp jgonggrijp force-pushed the feature/interface-clarifications branch from 9886bf9 to 6e87767 Compare June 13, 2022 18:56
@jgonggrijp
Copy link
Member

@BeritJanssen I suspect I'm more or less done with this branch, although I'm a bit fuzzy on what was its original goal. Please help me decide!

I have done the following:

  • Create infrastructure to automatically extract all the translation strings with their keys from the source code. Command to run: yarn localize.
  • Reorganize the translation keys by topic and context (after discussing this with @JeltevanBoheemen) and uniformly use kebab-case for keys (because the underscore has special meaning to i18next, and camelCase is potentially less readable for translators).
  • Identify a few remaining places where user-visible text needed to be i18n-ified.
  • Generalize TooltipView so it can also be attached to subelements of other views and can also work with a model other than a FlatItem. I factored out the logic that extracts skos:definition or rdfs:comment from a FlatItem to a separate TooltipModel adapter. TooltipView now expects a model with just a text attribute, which is still expected to arrive async due to i18next.
  • Add helper functions for adding tooltips to a view in bulk.
  • Move some tooltips from template-based (with data-tooltip) to view-based (with TooltipView and its associated helper functions) in order to be able to position them more freely and comfortably.
  • Expand a bit on some tooltips to give more guidance to users.
  • Add a few more tooltips to the menu (which has changed since you started this branch) and to the AnnotationPanel.

I have not done the following (but maybe I should?):

  • Exhaustively look for opportunities to add tooltips or other clarifications.

Since translatable strings are everywhere, changes are also everywhere. If you would like to look at the code, the most interesting changes are in the frontend/src/{i18n,tooltip} directories, the new frontend/i18next-parser-config.mjs, and frontend/src/panel-annotation/annotation-{view.ts,template.hbs}.

// i18next.t('button.sample-sources', 'Sample sources');
// i18next.t('button.my-items', 'My items');
// i18next.t('button.sample-items', 'Sample items');
title: i18next.t(i18nKey, title),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comments should probably go?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, they are needed to ensure that i18next-parser doesn't purge these keys on the next scan.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you elaborate on this? Why is there a difference in behaviour between commented code and removed code?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not outcommented. It's a "clarification" (for the parser) of what the next line means.

@@ -1,5 +1,5 @@
<figure class="footer-dh">
<p>Developed by</p>
<p>{{#i18n 'footer.developed-by'}}Developed by{{/i18n}}</p>
<a href="https://dig.hum.uu.nl" target="_blank"><img class="dhlab"
src="{{static 'image/dighum-logo-blue.svg'}}"></a>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we already proactively change the Footer to only include the UU logo and DHLab name?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If that has been agreed, I suppose we should. I'll defer that to a separate ticket, though.

"begin": "Thank you for signing up. You can now "
}
}
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this file?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it prevents the contained strings from becoming empty in the non-old version.

// i18next.t('property.typeHints.base64Binary')
// i18next.t('property.typeHints.gYear')
// i18next.t('property.typeHints.string')
const typesWithHints = ['integer', 'base64Binary', 'gYear', 'string'];
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stray comments?

Copy link
Member Author

@BeritJanssen BeritJanssen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice reorganization of the labels, and it's a good decision to have the tooltip work on plain text! Cannot click on "approve" since I'm the PR author, but I do approve.

@jgonggrijp jgonggrijp merged commit e18b6b5 into develop Jun 30, 2022
@jgonggrijp jgonggrijp deleted the feature/interface-clarifications branch June 30, 2022 15:22
@jgonggrijp jgonggrijp added this to the Next Release milestone Jul 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Interface translations More tooltips
3 participants