Feature/translate modal

[luka-nextcloud]

📝 Summary

• Resolves: Translate design feedback #3925

🖼️ Screenshots

Desktop

Mobile1	Mobile2

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[cypress]

Passing run #11310 ↗︎

0

149

2

0

0

Details:

Feature/translate modal
Project: Text	Commit: 8a2b20ab2e
Status: Passed	Duration: 03:52 💡
Started: Jul 25, 2023 8:55 PM	Ended: Jul 25, 2023 8:59 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[juliusknorr]

Follow up bugs to file:

• Line break are not preserved when selecing multiple paragraphs

[juliusknorr]

Pulled in designers for visual review ;)

[marcoambrosini]

Nice work, I just dropped a few style suggestions.

Maybe we could also change the hint into something like:
You can translate parts of the document by selecting the text before using the translate function.

[juliusknorr]

A few more small issues that I think would be worth to address:

• Limit the maximum height of the text areas so that the buttons at the bottom are still visible without scrolling
• The result text area should probably still be scrollable as currently the translated text is being cut off if it is longer then the source
  

[nimishavijay]

Looks good! :) I would be careful about small screens here, it should change to a single column layout.

Also a note on the labels: "source language" and "target language" seem a bit technical, and on Google Translate as well as Deepl, there are no labels at all.

• What do you think about using "Translate from" and "Translate to"?
• Alternatively, we could get rid of labels entirely, make the multiselects to full width and use a right arrow icon in between them to indicate the source and target language.

What do you think @nextcloud/designers ?

[juliusknorr]

@mejo- Could you give this a review? I'd say we could merge this already and do a follow up for the remaining open question to be discussed by the design team.

[mejo-]

Nice work @luka-nextcloud!

Could you address the two issues mentioned by Julius here? Both textareas should have overflow-y: auto and the buttons should always be visible, even with small window height.

Some extra comments:

• I don't find it very intuitive that I have to press 'Translate' after both source and target language have been selected. Why not remove the button and instead start translating immediately after both source and target have been selected? What do you think @nimishavijay and @marcoambrosini?
• On mobile view, label and selection of languages are not aligned properly due to different label length. Maybe always put them in separate lines on mobile? See screenshot:
  

[juliusknorr]

I don't find it very intuitive that I have to press 'Translate' after both source and target language have been selected. Why not remove the button and instead start translating immediately after both source and target have been selected?

Especially with the local translation model this can take quite some time and server resources so unless we can always ensure a fast response I'd try to avoid auto triggering that request

[nimishavijay]

On mobile view, label and selection of languages are not aligned properly due to different label length. Maybe always put them in separate lines on mobile?

True! There definitely needs to be some sort of rearrangement on mobile. We could either:

1. Show the labels and dropdowns on separate lines
2. Shorten the labels
3. Not show external labels at all, instead show internal labels "Translate from German" "Translate to English" inside the dropdowns in the closed state and make the dropdowns full width.

I would vote to show solution 3 (only on mobile), what do you think? @nextcloud/designers

[mejo-]

@luka-nextcloud we're almost there, but some requested changes are still not addressed 😉:

• Limit the maximum height of the text areas so that the buttons at the bottom are still visible without scrolling (as mentioned by @juliushaertl here) -> Still broken when the viewport height is less than 850px. Try it e.g. with height of 800px.
• [Only on mobile] Not show external labels at all, instead show internal labels "Translate from German" "Translate to English" inside the dropdowns in the closed state and make the dropdowns full width. (as mentioned by @nimishavijay here)

[luka-nextcloud]

@mejo- Please check again.

[mejo-]

Nice, good to go from my side ☺️

[mejo-]

/compile

[jancborchardt]

Are the screenshots current or could you post updated ones @luka-nextcloud?
Ideally both for desktop (side by side layout) and mobile (single column layout). :)

[mejo-]

@jancborchardt @luka-nextcloud I took the liberty to now update the screenshots in the original PR description.

[thgoebel]

Is this released? For me the Translate popup still looks like in this screenshot (i.e. it is not side-by-side).

• Firefox 117.0.1 on a laptop, I tried cleaning the browser cache
• Nextcloud Server 27.1.0.7
• Text 3.8.0 (according to /settings/apps). This is the same as when I was on Server 27.0.0, is this expected?

[mejo-]

@thgoebel this PR didn't get backported to Nextcloud 27. It will be released with Nextcloud 28.