| AAlhazwani-WMF | |
| Dec 12 2023, 11:09 AM |
| F42398029: image.png | |
| Mar 5 2024, 10:11 AM |
| F42398024: image.png | |
| Mar 5 2024, 10:04 AM |
| F42398022: image.png | |
| Mar 5 2024, 10:04 AM |
| F42398020: Screenshot from 2024-03-05 10-59-38.png | |
| Mar 5 2024, 10:00 AM |
| F42398017: Screenshot from 2024-03-05 10-57-40.png | |
| Mar 5 2024, 9:58 AM |
| F42398015: Screenshot from 2024-03-05 10-57-30.png | |
| Mar 5 2024, 9:58 AM |
| F42398012: Screenshot from 2024-03-05 10-53-54.png | |
| Mar 5 2024, 9:58 AM |
| Restricted File | |
| Mar 4 2024, 7:46 PM |
Despite being limited to 100 characters, when function descriptions are longer than ~70 chars on desktop and ~45 chars on mobile they are cut out by the width of the input field.
If we would use the cdx-text-area we would have the text flow/wrap to the next line, while keeping the length limit unvaried.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Use text-area for description input | mediawiki/extensions/WikiLambda | master | +9 -8 |
@AAlhazwani-WMF Do we wanna use textarea for descriptions in the Function Editor as well?
yes! 🙌🏼
nit: if we could display the char counter on the right (for LTR languages, and left for RLT) it would be great! similarly to this demo https://doc.wikimedia.org/codex/latest/components/demos/field.html#fieldset-with-custom-help-text-content
Hi @AAlhazwani-WMF what do we mean by 'LTR' and 'RLT'? Google says, 'long term relationship' and 'revocable living trust' 😆 .
At first I thought it might be 'left to right' but then that would mean it would be 'RTL' for 'right to left' but it's 'RLT' 🤔 so I didn't know anymore.
@ecarg your first thought is correct! LTR is left to right languages, eg. english, italian, german, and RTL is right to left languages, eg. arabic, hebrew, persian. apologies for the acronyms!
This is a thoughtful idea! As I'm looking at your link + Codex docs, I'm not sure we can support this as long as we use Codex as described here? 🤔
Hmm.. maybe we can add some conditional using a CSS wrapper or via PHP? Will do some more research.
From what I see so far, it doesn't seem like we have a way of detect/marking if a language reads from LTR or RTL yet. Because any text I enter regardless of the language, it defaults LTR.
Is this true in your experience so far too?
If so, I think this would be a new feature, so should be a new task? :)
Change 1007965 had a related patch set uploaded (by Ecarg; author: Ecarg):
[mediawiki/extensions/WikiLambda@master] Use text-area for description input
I think the nit should be a new task because it seems a bit more complicated than just adding an isolated way to read LTR or RTL just from the text box. If I go to https://www.wikifunctions.org/view/he/Z10000 (already set to a different language, for ex. Hebrew), the page knows to set RTL; however, if we are wanting just the text box to detect a Hebrew selection when we're on an English page (i.e. https://www.wikifunctions.org/view/en/Z10000), manipulating that does not seem straightforward to me. What do you guys think @AAlhazwani-WMF @Jdforrester-WMF @gengh
{F42396702}
(Attached screenshot: The direction of the read is coming from MW main and it seems like we would need to use that info to update the text box read direction, depending on language selected, independent from the language of the actual page.)
If we add a float: right property to the __counter css, when the page is rtl, it will replace that style with float: left automatically:
So, for en:
And for ar:
There's also a possibility of adding dir=rtl special styles like we do in the ExpandedToggle component (see line 118 of https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikiLambda/+/refs/heads/master/resources/ext.wikilambda.edit/components/base/ExpandedToggle.vue) but this would not be necessary in this case :)
@AAlhazwani-WMF I initially thought this task was for the description field in the about widget.
Do we wanna change the about widget description field to a textarea too?
If we add a float: right property to the __counter css, when the page is rtl, it will replace that style with float: left automatically:
+1 to what @gengh said! one more thing, we want to flip the alignment of the character counter only if the UI language is a RTL language.
no matter the language that you pick, if your UI language is a LTR language, we keep the char counter aligned to the right.
but if your UI language is a RTL language, then yes, we flip the character counter to the left.
@AAlhazwani-WMF I initially thought this task was for the description field in the about widget.
Do we wanna change the about widget description field to a textarea too?
yes!
should i file a separate task or do we want to use this one?
JFYI we also have a task for doing similar work for the aliases, meaning swapping the current component (on both the function page and the about widget) with the codex chip input container T334738: Replace Alias Chip component with Codex FilterChip.
one more thing, we want to flip the alignment of the character counter only if the UI language is a RTL language.
Yes. Setting float: right explicitly would make it aligned to the right with LTR and will flip it to float:left when the language is RTL. This is flipped automatically by ResourceLoader, but the counter field needs to have an explicit CSS property to be correctly flipped.
should i file a separate task or do we want to use this one?
I think we can do it separately :)
I filed one: https://phabricator.wikimedia.org/T359158
JFYI we also have a task for doing similar work for the aliases
This task is a bit more complex, it requires replacing an internal component with a codex one, but the switch is not so seamless as this one, there's some logic that we embedded in our component which needs to be taken somewhere else.
Change 1007965 merged by jenkins-bot:
[mediawiki/extensions/WikiLambda@master] Use text-area for description input