On the translation form being ported, most of the CSS and JavaScript code written for the previous Drupal 7 version still works, but not entirely. For instance:

  • CSS issues (the markup slightly changed): mostly suggestions.
  • JS: dialog boxes opened when you click on action links (small icons), unlike D7 version. The "decline" action might not be functional.

Module: l10n_community
URL: group/GROUP_ID/translate (you first need to activate a language and to create a translation group).

CommentFileSizeAuthor
#16 3320795-alignment-fix-Screenshot_20240307_175354.png46.88 KBshmy
#12 d7_version.png135.43 KBteebeecoder
#10 alert.png68.78 KBfmb
#10 new.png78.06 KBfmb
#10 old.png76.61 KBfmb

Issue fork l10n_server-3320795

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

FMB created an issue. See original summary.

fmb’s picture

fmb commented

Also, a suggestion textarea with an .error class should be visually emphasized (or maybe this is an issue with the theme). Currently nothing happens.

fmb’s picture

fmb commented

Also, can we get rid of the clearfix class in TranslateForm::translationListItem()?

TeeBeeCoder made their first commit to this issue’s fork.

TeeBeeCoder opened merge request !11

fmb’s picture

fmb commented
Status: Active » Needs work

Oops I honestly do not understand what is happening here, but there is an issue with the merge request #1. No commit can be seen. @TeeBeeCoder is it fixable?

ptt-homme’s picture

ptt-homme commented

Here we are @FMB. Sorry, I don't know why the commit was missing, but I pushed it back.

For instance, I styled the filter form using the style currently used on the localize website. As I said, it would be nice to use CSS modern implementation in a second time. When all the decisions will be made for UX/UI, I'll adjust it to a more modern CSS code.

ptt-homme’s picture

ptt-homme commented
Status: Needs work » Needs review

fmb’s picture

fmb commented
Status: Needs review » Needs work
StatusFileSize
new old.png76.61 KB
new new.png78.06 KB
new alert.png68.78 KB

Thanks @ptt-homme!

Is it just me, or the D9+ version:

D9+ translation form

still does not look exactly like the D7 version:

D7 translation form

Also, when I click on the "Translate" icon, I get this alert box, which does not appear in the D7 version:

Alert box

teebeecoder’s picture

teebeecoder commented

@FMB,

I'll check it!

teebeecoder’s picture

teebeecoder commented
StatusFileSize
new d7_version.png135.43 KB

@FMB,

I found a way to reproduce the alert box on the D7 version, please see attached file. I think that the behavior is the one expected, but I'm not sure about the UX.

Steps:
- go on https://localize.drupal.org/translate/languages/fr/translate?project=dru...
- click on the pen
- see the alert box

fmb’s picture

fmb commented

Indeed, but no alert is triggered when the field is "empty", i.e. when it contains the string "<New translation>", unlike the D9 version. I guess there is something wrong with this string.

shmy’s picture

shmy commented
Assigned: Unassigned » shmy

I confirm that the UI / UX differs as described in #10 + #12 + #13. Already found and fixed the #13 issue locally. Will continue soon'ish.

fmb’s picture

fmb commented

Great @shmy, I am looking forward to seeing what it was!

shmy’s picture

shmy commented
StatusFileSize
new 3320795-alignment-fix-Screenshot_20240307_175354.png46.88 KB

Alignment should be ok now:

Alignment fix

How do i reproduce the .error class as mentioned in #1? I've seen how it looks on D7 (when adding the class manually) but would be nice too know how / when its set.

fmb’s picture

fmb commented

How do i reproduce the .error class as mentioned in #1? I've seen how it looks on D7 (when adding the class manually) but would be nice too know how / when its set.

It happens when the source string contains an argument, such as "%page" in "404 error: %page not found." and you submit a suggestion without said argument.

shmy changed the visibility of the branch 3.0.x to hidden.

shmy opened merge request !46

shmy’s picture

shmy commented
Assigned: shmy » Unassigned
Status: Needs work » Needs review

:face_palm: While working with this old code base and seeing so much code copied from 7.x-1.x it didn't cross my mind that there could a form validation implementation and instead i did a quick grep for any 'error' string.

Anyway i've addressed the above mentioned issues.

shmy’s picture

shmy commented

By the way the in the latest commit of the MR 46 i've reverted #3396437 partly but omitted the revert for the submissions.js file because its part of l10n_statistics submodule. Not sure how to handle this (re-opening the issue? new issue?).

fmb’s picture

fmb commented

By the way the in the latest commit of the MR 46 i've reverted #3396437 partly but omitted the revert for the submissions.js file because its part of l10n_statistics submodule. Not sure how to handle this (re-opening the issue? new issue?).

You can handle this in a new issue.

fmb’s picture

fmb commented
Status: Needs review » Fixed

Thank you so much for your work @shmy, much appreciated!

  • shmy committed 36f567d7 on 3.0.x 
    Issue #3320795: Fix word diff highlighting on hover

This commit...

  • shmy committed 3dc7fe6b on 3.0.x 
    Issue #3320795: Fix a few styling issues on the translation form

I.e...

  • shmy committed a868c847 on 3.0.x 
    Issue #3320795: Add missing HMTL attributes on actions elements...

  • shmy committed 8fb10dc0 on 3.0.x 
    Issue #3320795: Access 'defaultValue' property through JQuery's prop...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.