Settings toggles to migrate to checkboxes

[hugolpz]

Half of current settings rely on large, double-line OO.ui.ToggleSwitchWidget :

• wpintegration
• twospeed
• hinticon
• coloredwords
• showvideo

See ./popup/popup.js.

We could migrate to single-line checkboxes elements such as

• OO.ui.CheckboxInputWidget
• OO.ui.CheckboxMultiselectWidget
• OO.ui.CheckboxMultiselectInputWidget

The differences of usage of those later 3 must be studied before implementation.

Also : should we do this ? This change would create 2 status in the setting, some larger 2-lines options, and some smaller single-line options. Is this an acceptable UI/UX practice ?

See also : #36

Current	Suggested

[saltykheera]

assign me this issue

[hugolpz]

Assignment to @saltykheera is done.

Side note: the banana i18n system is partially working, I was unable to spread and retrieve banana's value in all parts of the system. So in some places it's still hard coded.

[ayushanand308]

@hugolpz @saltykheera I can work on this if anyone is currently not

[hugolpz]

Hello @ayushanand308, you are welcome to do so. You know a bit about Wikimedia's oojs ? The JS frameworks used there to create those buttons.

Please note : This issue is purely UI-related. In 2024, we wish to totally revamp this web extension toward Manifest v3.0 coding practice. This means the UI code will likely be revamped as well with another framework. While your are welcome to refice our current oojs UI code (#35) if you enjoy coding it and learning on the way as I sometime do, be aware that your code could be replaced in late 2024 by a new UI.

Note: @saltykheera haven't been much active on github this past 6 months, I just removed this issue from its assigned issues.

[pushkar707]

Okay, I understand the issue, and the main motive behind switching from toggle switched to checkboxes seems to be saving to of lines and space, right? I will start working over it.

I would also check these before starting:

OO.ui.CheckboxInputWidget OO.ui.CheckboxMultiselectWidget OO.ui.CheckboxMultiselectInputWidget

[pushkar707]

This is what the checkbox looks like (Implemented using CheckboxInputWidget ) :

If this is okay, I can implement it for all four toggle buttons and make a PR

I have also made the checkbox work as required, i.e. toggle the colored words functionality in this case.

[hugolpz]

@pushkar707 thank you. Yes that the general idea. Also, from memory you may want to inspect the CSS. Those check boxes being smaller they allow to move to display:inline-block for this new icone+text duo.

I assigned you to this issue since you are near to closing it. 🎉 PR welcome.

Ps: I spent the day initing a manifest v3 revamp, checking this new ecosystem to prepare the 2024 to do.

[pushkar707]

@hugolpz Thanks for assigning this issue to me. I will implement the icon-text duo via CSS, and implement a checkbox for all the toggle buttons.

Also, it so great that this project has initiate the revamp towards manifest v3.

[pushkar707]

@hugolpz please check PR #59 . I have done it