Page MenuHomePhabricator

Table contexts on mobile look a bit broken
Closed, ResolvedPublic

Assigned To
Authored By
Esanders
Mar 20 2022, 2:09 PM
Referenced Files
F35042980: image.png
Apr 7 2022, 11:51 PM
F35042982: image.png
Apr 7 2022, 11:51 PM
F35042987: image.png
Apr 7 2022, 11:51 PM
F35042990: image.png
Apr 7 2022, 11:51 PM
F35041562: image.png
Apr 6 2022, 10:23 PM
F35041584: image.png
Apr 6 2022, 10:23 PM
F35041580: image.png
Apr 6 2022, 10:23 PM
F35041560: image.png
Apr 6 2022, 10:23 PM

Description

Selecting some cells on desktop:

image.png (275×452 px, 28 KB)

The same selection on mobile:

image.png (508×438 px, 22 KB)

Issues:

  • Large empty body area
  • "Merge" button becomes an edit pencil (but works)
  • "Copy" action added to every context (instead of just the last one?)

Event Timeline

Change 772022 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Call parent #setup method in Merge/SumCellsContextItem

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

Change 772022 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Call parent #setup method in Merge/SumCellsContextItem

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

Change 772534 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (fc0e3ed33)

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

Change 772534 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (fc0e3ed33)

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

This fixes the "Large empty body area", but not the other issues.

BeforeAfter
image.png (1×1 px, 51 KB)
image.png (1×1 px, 43 KB)

Change 772023 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Context: Move copy/delete buttons to MobileActionsContextItem

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

This next patch moves the copy/delete actions into a separate context item, solving the duplicate copy action issue, and also adding the missing "delete" action for table cell selections (which blanks the selected table cells; tables are deleted using another button in the table context button in the top left corner).

image.png (544×438 px, 31 KB)

Change 772913 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Always show label-only button for MergeCellsContextItem button

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

Change 772913 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Always show label-only button for MergeCellsContextItem button

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

Change 776211 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (05fbb163c)

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

Change 776211 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (05fbb163c)

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

Change 772023 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Context: Move copy/delete buttons to MobileActionsContextItem

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

Change 775352 had a related patch set uploaded (by Bartosz Dziewoński; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (41653c74a)

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

Change 775352 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (41653c74a)

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

The changes also affect how various other context items look, although the changes are minor. Screenshots below for reference:

Tablet size – BeforeTablet size – AfterPhone size – BeforePhone size – After
Image
image.png (1×2 px, 302 KB)
image.png (1×2 px, 302 KB)
image.png (1×750 px, 248 KB)
image.png (1×750 px, 252 KB)
Table cells
image.png (1×2 px, 103 KB)
image.png (1×2 px, 108 KB)
image.png (1×750 px, 72 KB)
image.png (1×750 px, 75 KB)
Alien context
image.png (1×2 px, 33 KB)
image.png (1×2 px, 37 KB)
image.png (1×750 px, 18 KB)
image.png (1×750 px, 23 KB)
Two contexts at once
image.png (1×2 px, 71 KB)
image.png (1×2 px, 71 KB)
image.png (1×750 px, 53 KB)
image.png (1×750 px, 53 KB)

Notable changes:

  • In all contexts, the buttons and white space shift slightly
  • In all contexts, at tablet size, the close button is at the edge of the screen instead of aligned
  • Copy/Delete buttons now display correctly for table cells
  • Alien context now has a close button and looks consistent with others
  • Copy/Delete buttons now display at the bottom even for multiple contexts

I'm not sure if they were all intentional, but they seemed okay to me.

Notable changes:

  • In all contexts, the buttons and white space shift slightly

The changes seems sensible and probably more consistent.

  • In all contexts, at tablet size, the close button is at the edge of the screen instead of aligned

This should probably be fixed

  • Copy/Delete buttons now display correctly for table cells

This is correct, they expose actions that were not possible or hard to do before on mobile.

  • Alien context now has a close button and looks consistent with others

This is correct, and an improvement

  • Copy/Delete buttons now display at the bottom even for multiple contexts

This is correct, and an improvement

Change 778258 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Fix position of close button on wide tablet

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

Change 778262 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Match padding of mobile context header & footer

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

This should probably be fixed

Fixed in https://gerrit.wikimedia.org/r/778258

The changes seems sensible and probably more consistent.

Slightly increased the vertical padding of the header to match the footer in https://gerrit.wikimedia.org/r/778262

Change 778258 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Fix position of close button on wide tablet

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

Change 778262 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Match padding of mobile context header & footer

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

Change 778365 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (0fde38782)

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

Change 778365 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (0fde38782)

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

Tablet size – After v2Phone size – After v2
Image
image.png (1×2 px, 302 KB)
image.png (1×750 px, 247 KB)
Table cells
image.png (1×2 px, 107 KB)
image.png (1×750 px, 72 KB)
Tablet size – After v2Phone size – After v2
Image
image.png (1×2 px, 302 KB)
image.png (1×750 px, 247 KB)
Table cells
image.png (1×2 px, 107 KB)
image.png (1×750 px, 72 KB)

Thanks for documenting your observations with helpful screenshots.

Given this as the expected behaviour, this can can be verified since I get the same result.

ppelberg claimed this task.
ppelberg subscribed.

Thanks for documenting your observations with helpful screenshots.

+1