[Feature] Built-in dictionary + redesign

[realgooseman]

Hi @vitonsky and contributors,

As the title says, a built-in dictionary that gives word definition, synonyms,...
For the sources, I personally use TheFreeDictionary and Wiktionary for my definitions as they are the easiest to use and accurate. But I don't know if they can get implemented or if they have a free API.

I made quick mockups of the dictionary feature + redesigned the translation pop-up to give ideas.

How would it work ?

If one word is selected on a page = translation + dictionary pop-up shows up
If a few words/sentence selected = only translation pop-up shows up

Translation pop-up redesign :

Single word translation + dictionary :

[Terkyz]

This is a million times more elegant and modern than the current design, it looks absolutely great!

[vitonsky]

Looks good, thanks for your efforts!

I think it is not a big deal to find API for dictionary, so i will implement the feature in near next release.
Let's fix some cases in UI before i start to code it.

Mobile appearance

Let's think how popup will appears on mobile devices.

For now mobile version uses Modal Window instead of Popup. Layout on mobile version are vertical with buttons that fit all horizontal space.

Block with original text are loosed

For now the popup have block with original text. Here you can speak text on original language, it is important feature, so we have to keep it. Could you include this feature in your design.

Languages direction layout

We have to consider that languages names may be long. On my screenshot below it takes 2 words, but for some locales languages may have 4 words. We have to consider this cases.

I like the compact view on your "Single word translation + dictionary" screenshot, but in case if user will choose another language in list, popup have to expand, so TTS and Dictionary buttons will be moved, this is a bad when UI jump out of user cursor.

We gotta come up with something, to popup will never expand width after appearance.

[realgooseman]

Linguist on mobile only works via Firefox right ? Because Chromium-based mobile browsers don't support extensions I think.

Anyway, for mobile just copy the V2 mockups below and expand the blocks horizontally + put the buttons at the bottom.

Translation pop-up V2

Translation + Dictionary pop-up V2

Let me know what you think, I'm gonna sleep and be back tomorrow.

[vitonsky]

Looks much better. Yes, Linguist available on Firefox for android, but some Chromium browsers supports extensions too (like Yandex Browser).

I see the problem with TTS button, user have to choose which one TTS should be played, it may annoyed a users who frequently speak text. The ideal behavior i see is to allow user press button to immediately speak text.

Maybe we should have 2 buttons for TTS? We could to place TTS button on text block instead text length counter (btw counter actually useless i think, because text are not limited). In this case we could even add TTS button for "Translation + Dictionary pop-up V2" state, to voice the term definition.

Only one problem this design have is user can't voice original text if not press "Show original text". To alleviate this problem, we could to remember button state, to user may click there only once and original text always will be opened/closed

[realgooseman]

I agree, placing TTS button on textblock above the "copy to clipboard button" will be clean too. We get rid of the word counter and place a small volume button there. Should we replace the TTS button at the bottom with something else or just keep Bookmark/history buttons only ?

For the TTS button on dictionary block, where will it be placed ? Above the language & external link buttons ?
And should we also add TTS button for single translated word block on Dictionary pop-up or not (next to clipboard button) ?

Remembering the user's pop-up state to normal/expanded with original text might be a solution for people who need to always see the language pairs, or for the ones who only want to see the translation.

[vitonsky]

For the TTS button on dictionary block, where will it be placed ?

TTS button for dictionary view can be at any place where i drawn on this draft

We even can place TTS buttons exactly as on my screenshot, but i not like how TTS button looks for the source word, visual style looks asymmetric due to copy button.

If you want, you can try to remove copy button for dictionary view. I'm not sure if users needs to copy one word. Although it may be good for consistent UI if we allow to copy any text. On other hand, we don't have copy button for a text definition, so maybe we no need it at all for dictionary view. Feel free with experiments here

[realgooseman]

What about this ?

I added a separate TTS button for the single word translation, as the textblock is large enough for most words

Translation pop-up V3

Dictionary pop-up V3

[vitonsky]

I think it's looks fine. I prefer to not split a block with original word and round borders not too much, but generally your design looks cool.

Your design also allow to implement editing text in popup in next iterations.

I will ask people from issue #301 to review your design. When we will have vision how it should looks, i will add it to queue to implement. Thanks for your work!

[realgooseman]

You're welcome, I'm just making quick mockups of what I think looks clean. But of course, you and the contributors should do what's best for Linguist. Code and usability wise.

Also, keep a dark theme variant in mind when working on the refreshed design. A lot of people's eyes would appreciate it.

[Flashwalker]

I vote for both buttons, tts and copy