Make video and wiktionary blocks optional

[hugolpz]

Some language communities may have and therefore need :

• only wiktionary
• both
• only the sign language videos.

Also, we would gain to make these blocks optional, based on the language ui used and user settings.

Actions

• [x] clean and normalize SignItCoreContent.js and popup's classes, ids names.
  #68
• [x] create proper panels (html structure), check for responsive html, css in SignItCoreContent.js
• [x] create initial setting and customizable settings in background.js and popup.js

[saltykheera]

something just like this !!!

[hugolpz]

Hello @saltykheera,

✅ In settings toggle

As long overdue I wanted to implement this showvideo toggle setting along the usual setting approach such as #35, which gather all settings in the same place. Your recent proposal also pushed me to dive back into the code and to push forward, so I did so yesterday :

• e606faf87b80f5a7e1e8c21e094891ba2c361140 translations files
• 88f16a8ed702557a85b4efb0bdbb982142619db1 JS changes : creating the button, adding the setting storage, adding the beavior.
• d2bc0f659471c577cdb5e78f94656984db591cba toggle the separator as well. It functionally works.

Modal size

I finished the CSS, should be okish now.

• 7c45c487135b3ce3f5a4dc6a5114209f6258f587 add signItModalWidth() switch
• b37dfe55243f12f2c32ac96c1fb7dc16b89c2721
• https://github.com/lingua-libre/SignIt/blob/d2bc0f659471c577cdb5e78f94656984db591cba/content_scripts/signit.js#L171

🤔 In modal toggle

Hello @saltykheera, Your idea of putting this setting right in the interface is interesting and more human friendly. (I see my in settings solution hides this important setting too much.) Ideal would be to have both approach working, in settings and in modal, with UI and value storage synchronised. We can continue to work in this direction, first by getting it to be well design and work in isolation (should be doable). Then to synch it up with the deep setting (this will be a bit complex due to web-extensions scopes). I isolated your code proposal into a new clean commit for readability :

• 2cb068b7235aa7c21676c7d868f7405f6f7250cd isolated new clean commit for readability
• dd0165b586d8234fed115fae862a2927010b9568 former commit mixed with syntax cleanup, for reference

Current

Wanted

Reflexion

These codes are moving forward but something better is need. Since this is not a 0|1 switch but potentially a tri-switch with:

• video + definition
• definition alone
• video alone

There are still better design to think : select input ? etc. Anyway, these recent codes helps to dive in and assess the existing side effect codes to consider, mostly : localStorage ; modal resizing ; css edits.

[hugolpz]

@saltykheera if we want to keep a consistent code this seems a larger project than I formerly anticipated. I will therefore split this issue in sub-issues :

• [x] In settings toggle
• [x] In settings tri-switch
• [x] In modal toggle : to explore further.

Are you interested to join or follow this effort ? 👯

[pushkar707]

Hi, I would like to do in modal toggle, how should we go about it? We can add a dropdown menu in the model to select three of the following options:-

1) Show only video 2) Show only text 3) Show both video and text.

Another approach to do this is that we have two toggle buttons as:- 1) Show/Hide Video 2) Show/Hide definition

Personally, I feel second approach is bit more user-friendly, but either can be done

[saltykheera]

@hugolpz i am very much interested in solving this issue. under your guidance. i will start working on it from 17april.

[hugolpz]

• ✅ Initial request : make individually optional panels have been satisfied.
• 🛑 (declined): in-modal toggle.

In-modal toggle

@saltykheera hello, I'm closing this ticket, I removed yours and my JS exploration for in-modal toggle. Kabir is revamping this web extension, the toggle feature is available via the settings. We keep it simple in the code and on github for now. Note: I kept your CSS within the css file since its design is witty. 👍🏼 See f75a4187d0626a501182f7a924cb6b818ec1bb53 .