Page MenuHomePhabricator

Make it possible to collapse the "All entered languages" section when at the end of the section
Closed, ResolvedPublic

Description

When an item has labels, descriptions and/or aliases defined in a significant number of languages, the list of entries shown after expanding the "All entered languages" section is rather long, see e.g. https://www.wikidata.org/wiki/Q666?useformat=mobile.

In particular on mobile phone screen it is fairly inconvenient, after scrolling down the list, to need to scroll up back to the top to be able to collapse the "All entered languages" section back.
When the section is expanded, there should also be a "Fewer languages" button at its end.
For consistency, the label of the button expanding/collapsing the section on top of the section should be saying "Fewer languages" when the section is expanded.

TODO: mocks - @Hanna_Petruschat_WMDE would you mind helping with finding the appropriate mocks?

Note: The user experience of the user using the "All entered languages" section is going to be significantly improved once the floating button to collapse the section is added (T205608)

Acceptance criteria:

  • There is a "Fewer languages" button at the end of the "All entered languages" section when expanded, styled as on mocks
  • Clicking the "Fewer languages" buttons:
    • collapses the "All entered languages" section
    • scrolls back the collapsed termbox into view
    • puts focus back on the "All Entered Languages" button
  • When the "All entered languages" section is expanded, the button used to expand becomes a collapsing button, labeled "Fewer languages" and styled like in mocks.

Event Timeline

Change 534766 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[wikibase/termbox@master] AllEnteredLanguagesExpandable: button below list

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

https://gerrit.wikimedia.org/r/534766 was done when this issue was first discussed and may or may not help with resolving this, now that there is a formal ticket for it.

@Lydia_Pintscher https://www.figma.com/file/g86G4bYOcUoIPwEbN041nq/180607_Termbox-Mobile-Sprint?node-id=1741%3A2211 contains the "^ Fewer Languages" in the mock up, so I'll rely on that unless @Hanna_Petruschat_WMDE says that's not it

@Pablo-WMDE thanks for attaching the old patch, I'll try to take out of it anything that might be useful/convenient for this task

@Hanna_Petruschat_WMDE

from AC

When the "All entered languages" section is collapsed the button used to expand becomes a collapsing button, labeled "Fewer languages" and styled like in mocks.

not sure I get this correctly (probably the first "collapsed" in the sentence must be "expanded", then it sounds sound to me, or?)

Does it mean that the same button at the top "All entered languages" that is used to also changes to the same "^ Fewer Languages" like the one that will be added to the bottom to (resulting in both buttons being identical), when the All entered languages section is collapsed expanded ?

@Hanna_Petruschat_WMDE

from AC

When the "All entered languages" section is collapsed the button used to expand becomes a collapsing button, labeled "Fewer languages" and styled like in mocks.

not sure I get this correctly (probably the first "collapsed" in the sentence must be "expanded", then it sounds sound to me, or?)

Does it mean that the same button at the top "All entered languages" that is used to also changes to the same "^ Fewer Languages" like the one that will be added to the bottom to (resulting in both buttons being identical), when the All entered languages section is collapsed expanded ?

Nevermind.. I confirmed my suspicion after reading the task description again, which contains "For consistency, the label of the button expanding/collapsing the section on top of the section should be saying "Fewer languages" when the section is expanded." .. Fixed that AC phrasing accordingly too.

Change 540420 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[wikibase/termbox@master] Support 'Fewer Languages' button in All Entered Languages section

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

Change 540420 merged by jenkins-bot:
[wikibase/termbox@master] Support 'Fewer Languages' button in All Entered Languages section

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

Change 541238 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[mediawiki/extensions/Wikibase@master] Pull restyling and "fewer languages" in termbox into Wikibase

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

Change 541238 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Pull restyling and "fewer languages" in termbox into Wikibase

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

Personal opinion: in edit mode, form fields inside the grayed-out areas look like they are read-only now (tried here).

Bildschirmfoto von 2019-10-08 18-50-51.png (1×1 px, 104 KB)

Edit: this should actually have been reported on T223452: Restyle "more languages" & "all languages" sections

Applying white backgrounds to input fields would look like this.

image.png (832×588 px, 50 KB)

Will follow up with a patch, in case UX decides it looks good. For reference, the color used in screenshot is #FFFFFF

Change 542068 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[wikibase/termbox@master] Apply white background to input fields in edit mode

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

Talked to @Hanna_Petruschat_WMDE and we decided to include in this task scope:
[ ] white background for input fields
[ ] fix vertical spacing according to Figma mockups

Wrong task .. correct one (with updated AC T223452: Restyle "more languages" & "all languages" sections

@alaa_wmde I would really like to add the "jumping back to the termbox" after collapsing "all entered languages" by clicking on the lower "fewer languages" button as an AC. Otherwise the meaning of the lower button is redundant as it is meant to keep the user from endless scrolling.

@Hanna_Petruschat_WMDE yeap apologies I forgot to add this AC eventhough we talked about it before. Adding it to task description now and will work on it asap

Change 542431 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[wikibase/termbox@master] Scroll to and focus on "All entered languages" after collapsing

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

No apologies needed @alaa_wmde
I just like to explain UX decisions so everyone following or stumbling upon this task later has the chance to understand. Thanks for adding it to the AC!

Change 534766 abandoned by Pablo Grass (WMDE):
AllEnteredLanguagesExpandable: button below list

Reason:
I6a7e672d07c649c39adf8e0a1783ce2623f950d4 solved this (I believe)

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

Observation: two "fewer languages" buttons can look funny if there are no "more all languages" at all. (observed with latest termbox on my dev system)

Bildschirmfoto von 2019-10-17 17-44-49.png (1×1 px, 205 KB)

I saw that as well already but am hoping that these gaps are filled little by little rather than making things more complicated on our side by trying to hide one of these buttons if there is no entry at all.

Change 542431 merged by jenkins-bot:
[wikibase/termbox@master] Scroll to and focus on "All entered languages" after collapsing

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

alaa_wmde added a subscriber: Jan_Dittrich.

@Hanna_Petruschat_WMDE @Jan_Dittrich
The behavior described in AC should be available fully in beta. Please have a look and test for any problems that fall into not fulfilling the AC of this task. Once you approve it, we can plan for shipping it to production on next train.

I guess this is still just in beta?

sarhan.alaa subscribed.

I guess this is still just in beta?

Yeap .. We need to patch Wikibase with the latest version of Termbox (or at least up to the version/commit of this change), and bump up the version of Termbox cache version so that older SSR renderings get purged automatically, as this task have caused changes in Termbox markup.

Moving to To Do for now, as I might steal half-an-hour to do that patch next week.

Change 550479 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[mediawiki/extensions/Wikibase@master] Update termbo version on wikibase

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

Change 550479 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Update termbox version on wikibase

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

Jakob_WMDE subscribed.

The "scrolls back the collapsed termbox into view" part of the AC is now also visible on beta.