Implement - Choose page background color

This issue has been migrated from mozilla/webmaker-android#1541.

It was originally written by xmatthewx on Thu Apr 23 2015 and had the following description:

depends on mozilla/webmaker-android#1532

On Fri Apr 24 2015, xmatthewx commented:

We need to examine what swatches made in tinker mode will look like, and how they'll behave when there's none, one, some.

On Fri Apr 24 2015, xmatthewx commented:

UX in build deck

On Mon Apr 27 2015, vazquez commented:

Leave UI Feedback: http://invis.io/BK2M18Q28

On Mon Apr 27 2015, xmatthewx commented:

+1

On Tue Apr 28 2015, vazquez commented:

:boom: Closing.

On Mon May 04 2015, vazquez commented:

Design Documentation

Scenario: While in the Page View, user taps on the Page Background icon.

Page Background Screen

The UI will change a little bit:

1. Neighbouring tiles are removed out of view.
2. Main buttons slide down.
3. Colour selection bar slides up

Notes

• The colour selection bars behaves the same way as in the Colour Options or Text Options screen. That is, we show a small circle inside of the selected colour.

[unflagged]

Page Background Tinker Mode

• If the user taps on the purple button :zap:, they will enter Tinker Mode. This Tinker Mode experience is the same as any other colour Tinker Mode.

Notes

• What is important to note is that once the user creates a new colour in Tinker Mode, we must save this colour and display it on the Page Background Screen.

[unflagged]

Page Background Screen With New Colour

• The Page Background Screen now displays two rows of colour, with the newly created colour selected.
• We will show empty colour swatches if the user has less than 6 custom colours. You can view the empty colour swatch treatment below:

On Mon May 11 2015, flukeout commented:

**@**vazquez **@**xmatthewx Let's use this issue for implementation instead of mozilla/webmaker-android#1702 - this one is more thorough.

Needed Updates

• Put "Page Background Color" as the header title instead of the name of the project
• Update how this view is reached (from the map view via the new 'page background' icon)
• Include a sample element on the Page being edited to show that it's a preview of the tile with content, not just the Page by itself

Questiona about UX

• When changing the background from the map view, I'd like to zoom in on the so it fills up the page, then zoom back out when the user has finished. Is this doable?
• Should we persist the edge tiles in this view for consistency in the Page Editor?
  • If so, should we make pages swipe-able here so you can move between pages and change their colors quickly?

Let's address these and update the ticket.

Thoughts?

On Mon May 11 2015, thisandagain commented:

Removing from critical path for 1.0.0

On Thu May 14 2015, xmatthewx commented:

**@**flukeout suggests that we choose a random color if it's the first page of a new project. If adding second page, default is last-set page background color.