Position of toolbar icons on mobile web version of Wikipedia preview
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	SGautam_WMF
	Jun 28 2023, 2:49 PM

Description

Problem

The "change" (pencil icon) and "delete" (trash bin icon) toolbars sit on top of the preview card on the right side, which is fine on desktop but hides preview content on mobile web.

Design

01 - overflow menu collapsed.png (780×360 px, 69 KB)

02 - overflow menu expanded.png (780×360 px, 70 KB)

Add an overflow menu to the preview card.
Upon tapping the overflow icon, a dropdown menu will appear beneath it, showcasing two options: "Change" (with a pencil icon) and "Delete" (with a trash bin icon).
Tapping on the change option should navigate the user to a search screen, where they can query to find alternative previews.
Tapping on the delete option will remove the Wikipedia preview from the selected word or phrase in the content.
Tapping outside the menu should dismiss it.
Keep the touch targets to 44x44.

Design file.

close.zip571 BDownload

overflow.zip524 BDownload

Acceptance Criteria

The overflow menu (kebab menu) should be placed adjacent to the close icon.
The dimensions for the touch target of the overflow menu should be at least 44x44 pixels.
Tapping on the overflow menu should display the options menu below it.
The options menu should contain two options: "Change" (represented with a pencil icon) and "Delete" (represented with a trash bin icon).
Tapping "Change" should navigate the user to a search screen where they can find other previews to replace the current one.
Tapping "Delete" should remove the preview from the word.
Tapping outside the menu should dismiss it.

QA Results - WordPress: DEV

AC	Status	Details
1	✅	https://phabricator.wikimedia.org/T340660 here
2	✅	https://phabricator.wikimedia.org/T340660
3	✅	https://phabricator.wikimedia.org/T340660
4	❌	https://phabricator.wikimedia.org/T340660
5	✅	https://phabricator.wikimedia.org/T340660
6	✅	https://phabricator.wikimedia.org/T340660
7	✅	https://phabricator.wikimedia.org/T340660

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		None	T327100 Improve Experience for Site Owners & Readers using Wikipedia Preview Plugin
		Resolved		hueitan	T340660 Position of toolbar icons on mobile web version of Wikipedia preview

Event Timeline

SGautam_WMF created this task.Jun 28 2023, 2:49 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 28 2023, 2:49 PM

SGautam_WMF updated the task description. (Show Details)Jun 28 2023, 3:28 PM

• PWaigi-WMF triaged this task as Low priority.Aug 1 2023, 3:43 PM

SGautam_WMF renamed this task from Improve mobile web experience for adding Wikipedia Previews in wordpress posts to Position of toolbar icons on mobile web version of Wikipedia preview .Aug 8 2023, 6:22 AM

SGautam_WMF updated the task description. (Show Details)

• PWaigi-WMF updated the task description. (Show Details)Aug 8 2023, 2:46 PM

• PWaigi-WMF moved this task from Definition to Ready for Dev on the Inuka-Team (Kanban) board.

• PWaigi-WMF added a parent task: T327100: Improve Experience for Site Owners & Readers using Wikipedia Preview Plugin.Aug 30 2023, 2:20 PM

I personally like how it currently looks on mobile with the toolbar partly on top of the preview.

eamedina claimed this task.Sep 11 2023, 2:34 PM

eamedina moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.

SGautam_WMF updated the task description. (Show Details)Sep 12 2023, 3:56 PM

https://github.com/wikimedia/wikipediapreview-wordpress/pull/94

eamedina moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Sep 13 2023, 8:17 PM

SBisson reassigned this task from eamedina to hueitan.Sep 19 2023, 1:49 PM

SBisson added a subscriber: eamedina.

hueitan moved this task from Code Review to Dev on the Inuka-Team (Kanban) board.Sep 20 2023, 9:56 AM

hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Sep 22 2023, 8:40 AM

SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Oct 3 2023, 4:52 PM

@hueitan Please see the findings below, thanks! It looks like the new design from the description is not in DEV yet?

Status: ❌ Fail
Environment: WordPress Dev Version 1.11.0
OS: macOS Sonoma 14.0
Browser: Chrome 117
Device: MBA M2
Emulated Device:: n/a
Test Links:
http://dev-test.local/wp-admin/post.php?post=6&action=edit

✅AC1: The overflow menu (kebab menu) should be placed adjacent to the close icon.

2023-10-09_14-56-06.png (938×564 px, 114 KB)

❌AC2: The dimensions for the touch target of the overflow menu should be at least 44x44 pixels.- Is this what you are talking about?

2023-10-09_14-19-17.png (941×570 px, 118 KB)

❌AC3: Tapping on the overflow menu should display the options menu below it.-Seem to have the old design for mobile in DEV.

2023-10-10_08-31-48.png (938×565 px, 100 KB)

❌AC4: The options menu should contain two options: "Change" (represented with a pencil icon) and "Delete" (represented with a trash bin icon). -It's represented with "Remove", not "Delete" for the trash bin icon

2023-10-09_14-56-06.png (938×564 px, 111 KB)

✅AC5: Tapping "Change" should navigate the user to a search screen where they can find other previews to replace the current one.

2023-10-09_15-00-05.mp4.gif (1×738 px, 298 KB)

✅AC6: Tapping "Delete" should remove the preview from the word.

2023-10-09_15-01-58.mp4.gif (962×602 px, 422 KB)

✅AC7: Tapping outside the menu should dismiss it.

2023-10-09_15-05-10.mp4.gif (1×718 px, 253 KB)

@hueitan The only thing that failed was that it represents with "Remove", not "Delete" for the trash bin icon. If that is fine, can you update the task description to say "Remove" besides "Delete"?

Status: ❌ Fail
Environment: WordPress Dev Version 1.11.0; Lastest patch: 10/3
OS: macOS Sonoma 14.0
Browser: Chrome 117
Device: MBA M2
Emulated Device:: n/a
Test Links:
http://dev-test.local/wp-admin/post.php?post=6&action=edit

✅AC1: The overflow menu (kebab menu) should be placed adjacent to the close icon.

✅AC2: The dimensions for the touch target of the overflow menu should be at least 44x44 pixels.- Is this what you are talking about?

2023-10-13_14-54-11.png (964×777 px, 128 KB)

✅AC3: Tapping on the overflow menu should display the options menu below it.-Seem to have the old design for mobile in DEV.

2023-10-13_14-58-07.mp4.gif (960×808 px, 473 KB)

✅AC5: Tapping "Change" should navigate the user to a search screen where they can find other previews to replace the current one.

2023-10-13_15-04-14.mp4.gif (964×818 px, 366 KB)

✅AC6: Tapping "Delete" should remove the preview from the word.

2023-10-13_15-05-39.mp4.gif (972×838 px, 507 KB)

✅AC7: Tapping outside the menu should dismiss it.

2023-10-13_15-06-56.mp4.gif (962×816 px, 303 KB)

GMikesell-WMF updated the task description. (Show Details)Oct 13 2023, 10:14 PM

❌AC4: The options menu should contain two options: "Change" (represented with a pencil icon) and "Delete" (represented with a trash bin icon). -It's represented with "Remove", not "Delete" for the trash bin icon

yes, this is confirmed. we remain "Remove", same as desktop.

SGautam_WMF moved this task from Design sign off to Product sign off on the Inuka-Team (Kanban) board.Oct 24 2023, 11:16 AM

• PWaigi-WMF closed this task as Resolved.Oct 26 2023, 10:52 AM

	F38223426: image.png
	Oct 13 2023, 10:11 PM

	F38223452: image.png
	Oct 13 2023, 10:11 PM

Position of toolbar icons on mobile web version of Wikipedia preview Closed, ResolvedPublicActions