Page MenuHomePhabricator

Create tutorial screen for description editing.
Closed, ResolvedPublic3 Estimated Story Points

Description

This is to implement the "tutorial" portion of the editing interface.

  • The tutorial should be shown automatically when starting the editing activity for the first time (and not shown automatically for subsequent launches), or shown via the "question" icon in the toolbar.
  • The tutorial consists of two custom Views (with static elements based on design) inside a ViewPager. The ViewPager itself can be a custom View that can be placed inside a DialogFragment or a separate Activity.

Event Timeline

Dbrant set the point value for this task to 3.Oct 21 2016, 6:09 PM

Change 325424 had a related patch set uploaded (by Mholloway):
Description editing tutorial, pt. 1

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

Hey @RHo, I'm getting similar errors to last time when attempting to import the SVG assets from Zeplin:

In illustration_description_onboard_1.svg:

ERROR@ line 6 <defs> is not supported
ERROR@ line 31 <text> is not supported
ERROR@ line 32 <tspan> is not supported
ERROR@ line 35 <text> is not supported
ERROR@ line 36 <tspan> is not supported
ERROR@ line 38 <mask> is not supported
ERROR@ line 39 <use> is not supported
ERROR@ line 42 <use> is not supported
ERROR@ line 43 <use> is not supported
ERROR@ line 48 <use> is not supported
ERROR@ line 49 <use> is not supported
ERROR@ line 53 <use> is not supported
ERROR@ line 54 <use> is not supported
ERROR@ line 57 <use> is not supported
ERROR@ line 58 <use> is not supported
ERROR@ line 65 <mask> is not supported
ERROR@ line 66 <use> is not supported
ERROR@ line 68 <use> is not supported
WARNING@ line 29 We don't scale the stroke width!
WARNING@ line 30 We don't scale the stroke width!
WARNING@ line 51 We don't scale the stroke width!
WARNING@ line 60 We don't scale the stroke width!
WARNING@ line 64 We don't scale the stroke width!

In illustration_description_onboard_2.svg:

ERROR@ line 6 <defs> is not supported
ERROR@ line 28 <text> is not supported
ERROR@ line 29 <tspan> is not supported
ERROR@ line 32 <text> is not supported
ERROR@ line 33 <tspan> is not supported
ERROR@ line 35 <mask> is not supported
ERROR@ line 36 <use> is not supported
ERROR@ line 39 <use> is not supported
ERROR@ line 40 <use> is not supported
ERROR@ line 41 <use> is not supported
ERROR@ line 46 <use> is not supported
ERROR@ line 47 <use> is not supported
ERROR@ line 48 <use> is not supported
ERROR@ line 50 Unsupported URL value: url(#linearGradient-5)
ERROR@ line 50 Unsupported URL value: url(#linearGradient-5)
ERROR@ line 57 <mask> is not supported
ERROR@ line 58 <use> is not supported
ERROR@ line 60 <use> is not supported
WARNING@ line 26 We don't scale the stroke width!
WARNING@ line 27 We don't scale the stroke width!
WARNING@ line 50 We don't scale the stroke width!
WARNING@ line 51 We don't scale the stroke width!
WARNING@ line 55 We don't scale the stroke width!
WARNING@ line 56 We don't scale the stroke width!

Hi @Mholloway – it's because Vector Drawables do not seem to be able to render SVG gradients well, nor text :(

If we absolutely must import these as Vector Drawables, you can use this slightly simplified version of the illustrations with gradients removed:




Note the example wikidata description text in the yellow space on each illustration is: Roboto Italic 16sp #000

Otherwise, might it be easier to import these as PNGs at the various resolutions instead from the Zeplin?

Change 325695 had a related patch set uploaded (by Mholloway):
Description editing tutorial, pt. 2

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

In general we strongly prefer to use vector drawables where we can, but it seems like this is a problem that's coming up often with the more complex images in the mocks. After giving it some more thought it probably does make more sense to use the PNGs in cases like this, as you suggested. @Dbrant, thoughts?

FWIW, here are the simplified Drawables versus original illustrations for comparison:

illustration_description_onboard_1 - og.png (266×270 px, 19 KB)
illustration_description_onboard_1.png (266×270 px, 5 KB)
illustration_description_onboard_2 - og.png (266×270 px, 17 KB)
illustration_description_onboard_2.png (266×270 px, 4 KB)

My strong preference is to go with PNGs since the banding is a bit janky and looks as though the image didn't load properly, especially on the Mona Lisa example.

Change 325859 had a related patch set uploaded (by Niedzielski):
Demo: encapsulate DescriptionEditTutorialPageView children

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

Change 325954 had a related patch set uploaded (by Niedzielski):
Demo: encapsulate DescriptionEditTutorialPageView children (clone)

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

Change 325695 abandoned by Mholloway:
Description editing tutorial, pt. 2

Reason:
Consolidated in I67c9d0960e979929ab832323e6435c4d1ce3dd6d

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

Change 325954 abandoned by Niedzielski:
Demo: encapsulate DescriptionEditTutorialPageView children (clone)

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

Change 325954 restored by Niedzielski:
Demo: encapsulate DescriptionEditTutorialPageView children (clone)

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

Change 325954 abandoned by Niedzielski:
Demo: encapsulate DescriptionEditTutorialPageView children (clone)

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

Change 326172 had a related patch set uploaded (by Niedzielski):
Demo: refactor description edit tutorial page views

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

Change 326172 abandoned by Niedzielski:
Demo: refactor description edit tutorial page views

Reason:
demoed

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

No luck importing either with Inkscape or svg2android. I'll add PNGs in the next revision.

Change 326505 had a related patch set uploaded (by Mholloway):
Description edit tutorial: replace vector drawables with PNGs

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

Change 326172 restored by Niedzielski:
Demo: refactor description edit tutorial page views

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

Change 326172 abandoned by Niedzielski:
Demo: refactor description edit tutorial page views

Reason:
demoed

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

Change 326505 abandoned by Mholloway:
Description edit tutorial: replace vector drawables with PNGs

Reason:
Merged this with the upstream patch.

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

Change 325424 merged by jenkins-bot:
Description editing tutorial

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

Change 328840 had a related patch set uploaded (by Mholloway):
Add page indicator view to description edit tutorial

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

Change 330314 had a related patch set uploaded (by Mholloway):
Add DescriptionEditTutorialPageViewTest

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

Change 328840 merged by jenkins-bot:
Add page indicator view to description edit tutorial

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

Change 330722 had a related patch set uploaded (by Mholloway):
Description editing tutorial: further design tweaks

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

Change 325859 abandoned by Niedzielski:
Demo: encapsulate DescriptionEditTutorialPageView children

Reason:
I think this was supposed to be abandoned. No idea what it's doing here

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

Change 330722 merged by jenkins-bot:
Description editing tutorial: further design tweaks

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

Change 330314 merged by jenkins-bot:
Add DescriptionEditTutorialPageViewTest

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