Because fragment previews use "display: unset" or "display: contents", they cannot all be highlighted by changing background color. For previews, we could highlight them by adding a color overlay using the same position and size of the generated fragment.
Description
Description
Details
Details
Related Changes in Gerrit:
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Jdforrester-WMF | T411686 [26Q3] Launch Abstract Wikipedia in initial, local-only form | |||
| Resolved | gengh | T411688 Build the initial version of the Abstract Wikipedia software | |||
| Resolved | gengh | T411705 Set up the user interface for creating and editing abstract content | |||
| Resolved | DSmit-WMF | T417770 Improve highlight method for Fragment Previews in Vuejs |
Event Timeline
Comment Actions
Change #1240260 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):
[mediawiki/extensions/WikiLambda@master] Add highlight overlay composable to fix display:unset on highlights using background-color. Also style the highlights a bit differently by adding a border and a bit of padding and a bit of animation.
Comment Actions
- We probably need a bit of work on how we want the style the highlight visually.
 |  |
| as a background | as a background |
- But we can also do some kind of visual editor approach and use it as an overlay.
The problem with this is that they use css tokens. SO we should probably find a Codex token way if we want this.
 |  |
| as overlay using Visual Editor's colors | as overlay using Visual Editor's colors |
Comment Actions
Change #1240260 merged by jenkins-bot:
[mediawiki/extensions/WikiLambda@master] AbstractFragment: Replace highlights with an overlay to fix display:unset on highlights using background-color