Page MenuHomePhabricator

Customize highlighting
Open, Needs TriagePublic24 Estimated Story PointsFeature

Description

The end user should be able to customize the highlighting by turning on and off (for the different "levels") and changing the appearance. Preferably, an example of what the highlighting looks like should be shown in the preferences. This would probably require some custom Javascript for the preference page. Example of this in the Translate extension: https://github.com/wikimedia/mediawiki-extensions-Translate/search?q=appendFromSelect&unscoped_q=appendFromSelect.

On and off should be easy enough by just adding a checkbox in preferences and the functionality shouldn't be too hard to implement.

Customizing appearance can be done in a few different ways:

  1. Letting the user change the CSS themselves in commons.css T178270
    • Easy/nothing to implement, only requires instructions on how to do so.
    • May be too tech heavy for some users.
  2. Changing colour etc. in preferences, see M169
    • Requires overriding the default CSS rules from the preferences.
    • Preferably with some kind of fancy colour picker.

Event Timeline

Sebastian_Berlin-WMSE changed the subtype of this task from "Task" to "Feature Request".Jul 26 2021, 11:36 AM

An alternative to give the user totally free choice of what colors to use, would be to give them a number of alternatives instead. This way, we can avoid complicated implementation of how exactly the user enters for examble RGBA colour code.

Another good thing to check could be the following:
Komplettera färg med annat visuellt element såsom understrykning

Furthermore, it's a good idea to put the highlighting system into the POC (Parts of Content - settings) if a user does not want highlighting at all.

An alternative to give the user totally free choice of what colors to use, would be to give them a number of alternatives instead. This way, we can avoid complicated implementation of how exactly the user enters for examble RGBA colour code.

Sounds good. I think either one drop down with sentence, word combinations or two to allow custom combinations could work. I think the preference page is quite strict about what elements you can add, but It would be good to have a preview sentence that shows the colours. Though it looks like I found a way to add Javascript in the task description.

You could also have an "advanced" setting where you can add the CSS-values for each highlighting. That'd probably be a follow up task.

Another good thing to check could be the following:
Komplettera färg med annat visuellt element såsom understrykning

That's generally true, but I'm not sure if it applies here. This is more "adding something" than "just changing colours". Still, having an alternative that adds underline (and maybe overline) should be easy enough since it's all CSS.

Something to be aware of is not to change how much space the text takes, e.g. font size, bold, borders(?). This would cause things to move around and be generally unpleasant.

Furthermore, it's a good idea to put the highlighting system into the POC (Parts of Content - settings) if a user does not want highlighting at all.

Not sure I follow. Do you mean an option to turn it off all together? If so yes, there should be that.

Yes, a preview sentence is a good idea!

Its true about the space it all takes, if underline seems easy and not causing anything unpleasant, then that could be one of the alternatives in combination to color.

I mean to turn of just highlighting, I commented a bit more about this in T407346. But I think it's better we discuss that on tomorrows checkin.

When starting on this task, I think the main focus for now will be to get it to work, not to focus on chosing the exactly right colors (I already spent too much time on that 😅), since we can probably get a lot of great input from the target group organizations.

First focus will be to:

  1. Create a setting with a dropdown list for the user to chose a color combination of sentence + word
  2. Implement the logic so that the selected option maps to a specific pair of CSS classes