⚓ T380379 Basic topic selection: Dialog responsivenes when adjusting suggestions

Basic topic selection: Dialog responsivenes when adjusting suggestions
Open, MediumPublic4 Estimated Story Points
Actions

Assigned To

Authored By

	Pginer-WMF
	Nov 20 2024, 2:46 PM

Description

In T368422, an initial version was implemented to support basic topic selection in order to customize translation suggestions. The "Adjust suggestions view" provides a list of topics for users to select. This is intended to work similar to a Codex dialog component. While it takes the full view on narrow screens, for wider ones the dialog may need some adjustments:

Reduce maximum width. Currently, the dialog looks too wide, making it look stretched. We could use a max-width size of size-3200 (512px) based on the Dialog component and Size tokens from Codex.
Add an overlay. The standard overlay from the Dialog component should be used. In this way, all elements from the background become less distracting while still providing context for user orientation.

This will help users on wider devices such as tablets, and make it ready for desktop eventually too. Examples of current and proposed states are shown below:

Current	Proposed

Details

	Subject	Repo	Branch	Lines +/-
	CX3 Build 0.2.0+20241216	mediawiki/extensions/ContentTranslation	master	+3 K -3 K
	Standardize dialog width and overlay color and opacity	mediawiki/extensions/ContentTranslation	master	+21 -41

Customize query in gerrit

Related Objects
Search...

View Standalone Graph

This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Status	Assigned	Task
		· · ·
Open	None	T113257 Custom translation suggestions: Find opportunities to translate in topic areas selected by the user
Open	SBisson	T380379 Basic topic selection: Dialog responsivenes when adjusting suggestions
		· · ·

Event Timeline

Pginer-WMF created this task.Nov 20 2024, 2:46 PM

Pginer-WMF mentioned this in T368422: Custom translation suggestions: Basic topic selection.Nov 20 2024, 3:01 PM

SBisson claimed this task.Nov 22 2024, 3:11 PM

SBisson triaged this task as Medium priority.

SBisson moved this task from Backlog to In-progress on the LPL Hypothesis board.

@Pginer-WMF While working on this I noticed that our dialog component has a customizable overlay. From a quick search, here are the values used throughout the app:

Context	Overlay opacity
Login	0.25
Translation deletion	0.7
Confirm translation start	0.7
Language selector	0
Article search	0
Publish animation	0.85
Publish captcha	0.65
Publish options	0.7
Block template status	0.7
Confirm back navigation	0.7

Is there an intention behind those values or do you think it could be standardized to what the codex dialog is using (0.65, not configurable as far as I can see)?

AnnaMariaKoshka unsubscribed.Nov 22 2024, 5:39 PM

In T380379#10348927, @SBisson wrote:

@Pginer-WMF While working on this I noticed that our dialog component has a customizable overlay. From a quick search, here are the values used throughout the app:

Context Overlay opacity

Login 0.25

Translation deletion 0.7

Confirm translation start 0.7

Language selector 0

Article search 0

Publish animation 0.85

Publish captcha 0.65

Publish options 0.7

Block template status 0.7

Confirm back navigation 0.7

Is there an intention behind those values or do you think it could be standardized to what the codex dialog is using (0.65, not configurable as far as I can see)?

I think it makes sense to standardize around the value used on codex (0.65). Especially since it is quite similar to most of the cases listed above. "Publish animation" may be the only exception (more on this below).

For the few outliers, we may want to verify that nothing gets broken. For Login, Language selector, and Article search where the current overlay is less visible, having a more visible overlay is not expected to cause problems since there is no strong requirement for reading what is in the background.

However, for "Publish animation", if it refers to the case illustrated below with a screenshot, we may want to be careful since the overlay is used differently. Since text is placed directly on top of the overlay, a more solid background is needed. In fact, there was a request to make it even more visible (0.95) to ensure legibility: T273964: Adjust the overlay opacity to 95%

Nikerabbit set the point value for this task to 4.Nov 26 2024, 8:15 AM

dr0ptp4kt unsubscribed.Nov 26 2024, 7:52 PM

SBisson attached a referenced file: F34092890: publish-feedback.png. (Show Details)Thu, Nov 28, 7:31 PM

Thanks @Pginer-WMF, I propose to keep the overlay configurable in the dialog component but instead of accepting any numerical value, there would be only a few named values: medium: 0.65 (default), high: 0.95. This would keep enough flexibility for handling the two cases we currently see but in the spirit of the design tokens, it would restrict the options to a few "good" values.