Page MenuHomePhabricator

ZCode.vue: Disable the code field until language is chosen
Closed, ResolvedPublic

Description

Since anything you input will be discarded when you choose a programming language.

Event Timeline

Jdforrester-WMF moved this task from To triage to Backlog on the Abstract Wikipedia team board.

Un-assigning, as it has been several months with no updates.

Jdforrester-WMF renamed this task from Disable the code field until language is chosen to ZCode.vue: Disable the code field until language is chosen.Jun 13 2024, 6:53 PM
DSmit-WMF changed the task status from Open to In Progress.Jun 19 2024, 11:46 AM

Change #1047501 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] ZCode.vue: Disable the code field until language is chosen

https://gerrit.wikimedia.org/r/1047501

Since anything you input will be discarded when you choose a programming language.

i'm wondering if instead of hiding the text editor before selecting a programming language

image.png (1×1 px, 177 KB)

we could still display it (as a feedforward) but in an inactive/disabled state. thou, i don't know if the ace text editor actually support something like disabled.

image.png (1×1 px, 182 KB)

nice to have: if contributors try to tap/click on the text editor, we could display an inline message below the programming language select.

image.png (322×832 px, 19 KB)

what do you think @DSmit-WMF?

@AAlhazwani-WMF I didnt hide the text editor? It is showing but indeed in read-only state. I will check if the code editor has a disabled state other then read only.

I can add a disabled background color. The color you used is #f0f0f0, but that one is not inside Codex color tokens.

About the inline message: I can do that if you want?

@AAlhazwani-WMF I didnt hide the text editor? It is showing but indeed in read-only state. I will check if the code editor has a disabled state other then read only.

ops, sorry @DSmit-WMF! i totally mis-read the task. then it looks great. forget what i said.

I can add a disabled background color. The color you used is #f0f0f0, but that one is not inside Codex color tokens.

yeah, that would be great. we could use @background-color-disabled-subtle which is the same token used for the disabled TextInput or TextArea.

About the inline message: I can do that if you want?

if it's trivial, that would be awesome. if not, we can keep it as a nice to have. and monitor if people find the disabled code editor confusing without additional messagining.

I added it all in the patch!
background-color + message.

Change #1047501 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] ZCode.vue: Disable the code field until language is chosen

https://gerrit.wikimedia.org/r/1047501

Change #1049390 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] en.json: copy change for language missing message

https://gerrit.wikimedia.org/r/1049390

Change #1049390 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] en.json: copy change for language missing message

https://gerrit.wikimedia.org/r/1049390