Just checked this, together with @Dbrant – we think this task is ready for dev.

Hi @scblr, I have two design questions:

#1 What should we use to indicate the "selected" item in the app? Should we have a proper design that matches the Android OS?

Per discussion on Slack, Google Photos is a good inspiration for this. Feel free to suggest a way to achieve this and LMK if you need more design guidance.

#2 Where should we put the image icon on the toolbar? The order of icons in the Android app is quite different.

After the <ul> and <ol> icons for now.

Also, can you replace the 'Template' icon and string with this icon:

https://commons.wikimedia.org/wiki/OOUI_icons#code

And the 'reference' icon and string with this one:

https://commons.wikimedia.org/wiki/OOUI_icons#reference

This will make it consistent with the Web and iOS.

Hi @SNowick_WMF

Please check whether we should track the wikitext keyboard actions using the breadcrumb schema. The wikitext keyboard includes functions like insert media, insert a link, bolden text...etc.

@cooltey Thanks, yes I think we should track these events. If the breadcrumb event names clearly indicate each step we can use that, otherwise we will need a glossary of event name meaning for the data we track.
We will mainly want a count of attempted image or link adds and successful image or link adds to verify engagement with this new feature.

Hi @scblr

The implementation is completed, please download the APK from the ticket description.

@cooltey – this is AMAZING! 👏 You did a great job at “translating” iOS to Android!

I fined tuned the designs a bit in this Figma file 🎨, and here are the suggested changes:

01) Update the design of this view:

Implementation	Design

• Update app title bar font-size to 20sp (font_group_6)
• Adapted the margins between the app bar title and a placeholder image
• Using a 16:9 image ratio and a background color for the canvas behind the illustration
• Change the illustration in dark and black mode to this one (from tagging images)
• Reuse the search component from the Explore feed/Notifications/Talk pages

02) After tapping the search bar on the previous screen

Implementation	Design

• Make sure to use the same placeholder text in the input field (in this example Tristan Harris instead of Tristan_Harris)
• Make sure that the search term is highlighted to convey what is happening to users better

03) Upload flow and behavior

Implementation	Design	Commons file page

• Make sure the canvas for the image (16:9), always remains the same size (this pattern derives from adding images, remember?), and the images adapt to it. In this example, a portrait image adapts to the size of the canvas
• Remove the image description overlay from the image (we will show that in the next screen, see 04)
• Add pinch-to-zoom functionality and a zoom button/icon to the image. Tapping the zoom icon/button takes users to the native Commons file detail page.
• Change the green tick color to color_group_3

04) Adding an image caption + alternative text

Implementation	Design	Design (filled)

• Add a tap target to the image and text: it should pop up the file’s bottom sheet, like in the Suggested edits image captions workflow
• Update app title bar font-size to 20sp (font_group_6)
• Change image size to 72 x 72
• Change font-size of Uploaded image label to Medium 14sp and 21sp line height (font-group-3) [that’s the same font-size as the image description below it]
• Please confirm the text field components on this screen are using our default component
• Change style of Advanced settings

Hi @scblr

In T312094#8147888, @scblr wrote:

@cooltey – this is AMAZING! 👏 You did a great job at “translating” iOS to Android!

😄

---

01) Update the design of this view:

• Update app title bar font-size to 20sp (font_group_6)
• Adapted the margins between the app bar title and a placeholder image
• Using a 16:9 image ratio and a background color for the canvas behind the illustration
• Change the illustration in dark and black mode to this one (from tagging images)
• Reuse the search component from the Explore feed/Notifications/Talk pages

Done

02) After tapping the search bar on the previous screen

• Make sure to use the same placeholder text in the input field (in this example Tristan Harris instead of Tristan_Harris)
• Make sure that the search term is highlighted to convey what is happening to users better

Done

03) Upload flow and behavior

Implementation	Design	Commons file page

• Make sure the canvas for the image (16:9), always remains the same size (this pattern derives from adding images, remember?), and the images adapt to it. In this example, a portrait image adapts to the size of the canvas
• Remove the image description overlay from the image (we will show that in the next screen, see 04)
• Add pinch-to-zoom functionality and a zoom button/icon to the image. Tapping the zoom icon/button takes users to the native Commons file detail page.
• Change the green tick color to color_group_3

Done.

However, the pinch-to-zoom may not be very useful in this case, since the image sticks to the top of the screen, and it will be slightly difficult to zoom in.

Also, due to the "foldable" toolbar title on the screen, the touch event may be conflicted. I recommend not enabling the pinch-to-zoom for the selected image.

04) Adding an image caption + alternative text

• Add a tap target to the image and text: it should pop up the file’s bottom sheet, like in the Suggested edits image captions workflow
• Update app title bar font-size to 20sp (font_group_6)
• Change image size to 72 x 72
• Change font-size of Uploaded image label to Medium 14sp and 21sp line height (font-group-3) [that’s the same font-size as the image description below it]
• Please confirm the text field components on this screen are using our default component
• Change style of Advanced settings

Done

These are great updates @cooltey – we’re close!

1) Adjust this gap to the same as above the search input field (for visual balance)

2) When tapping the search field with a search term that consists of two text strings, an underline (_) between strings is added. Please use the exact text string as in the search. Tapping back copies the underline _ to the previous screen.

3) Tapping this area should take users to the Commons file page.

(And I think we should keep the pinch-to-zoom gesture, it works ok IMO)

4) Please enable the Caption input field when arriving on this page

Implementation	vs	Design

5) Change label color to color_group_11

6) Please make sure to apply similar spacing and sizes (e.g. thumbnail image: is it 72dp * 72dp?) from the designs on Figma.

Implementation vs. Design:

7) Can we detect if the “cursor” is within image markup? Tapping the image would lead to image #2 below, and the text label could say UPDATE instead of INSERT

Hi @scblr

1) Adjust this gap to the same as above the search input field (for visual balance)

Done.

2) When tapping the search field with a search term that consists of two text strings, an underline (_) between strings is added. Please use the exact text string as in the search. Tapping back copies the underline _ to the previous screen.

Done.

3) Tapping this area should take users to the Commons file page.

Done.

(And I think we should keep the pinch-to-zoom gesture, it works ok IMO)

Looks like if we make the entire view clickable, the image will not be able to support the pinch-to-zoom feature.

4) Please enable the Caption input field when arriving on this page

Done.

5) Change label color to color_group_11

Done.

6) Please make sure to apply similar spacing and sizes (e.g. thumbnail image: is it 72dp * 72dp?) from the designs on Figma.

Implementation vs. Design:

Done. The thumbnail image size is 72dp*72dp. Based on the different dpi of each device, the actual visual size may be different.

7) Can we detect if the “cursor” is within image markup? Tapping the image would lead to image #2 below, and the text label could say UPDATE instead of INSERT

This is possible. But can we create a sub ticket for this advanced feature since this change requires extra time to complete?

Great work @cooltey and almost ready for the next column 👏

1) I noticed that the initial state with the placeholder image and the image-preview state canvas have different heights, which causes the interface to jump – see this video:

https://www.dropbox.com/s/ilchqfqixr40tmg/screen-20220819-173708.mp4?dl=0

Please change it to always use the height of the image-preview state:

2) Please de-emphasize the INSERT button when no caption and alternative text has been added. It should still be clickable at any time, but we want to encourage people to add image captions and alternative text (for accessibility reasons)

3)

@scblr: Can we detect if the “cursor” is within image markup? Tapping the image would lead to image #2 below, and the text label could say UPDATE instead of INSERT

@cooltey: This is possible. But can we create a sub ticket for this advanced feature since this change requires extra time to complete?

Task created: T315680 ✅

Hi @scblr

In T312094#8169472, @scblr wrote:

Great work @cooltey and almost ready for the next column 👏

---

1) I noticed that the initial state with the placeholder image and the image-preview state canvas have different heights, which causes the interface to jump – see this video:

https://www.dropbox.com/s/ilchqfqixr40tmg/screen-20220819-173708.mp4?dl=0

Please change it to always use the height of the image-preview state:

Done.

2) Please de-emphasize the INSERT button when no caption and alternative text has been added. It should still be clickable at any time, but we want to encourage people to add image captions and alternative text (for accessibility reasons)

Done.

3)

@scblr: Can we detect if the “cursor” is within image markup? Tapping the image would lead to image #2 below, and the text label could say UPDATE instead of INSERT

@cooltey: This is possible. But can we create a sub ticket for this advanced feature since this change requires extra time to complete?

Task created: T315680 ✅

Thanks!

2) Please de-emphasize the INSERT button when no caption and alternative text has been added. It should still be clickable at any time, but we want to encourage people to add image captions and alternative text (for accessibility reasons)

Done.

@cooltey – minor thing before moving it to the next column → can we emphasize INSERT (turn blue) when both input fields contain text. Currently, INSERT turns blue when one of the two inputs has been filled out. thanks!

@scblr

@cooltey – minor thing before moving it to the next column → can we emphasize INSERT (turn blue) when both input fields contain text. Currently, INSERT turns blue when one of the two inputs has been filled out. thanks!

Done.

谢谢 @cooltey 👏

Generally looks good on 2.7.50420-alpha-2022-09-21

Found this small issue - T318738

Thanks for catching that @ABorbaWMF