UI for page background color

[xmatthewx]

Let's consider an approach that utilizes an element-editor-like view. Unique UI for this one feature is too heavy of a lift.

This view could include our typical color picker and maybe later an option to set a background image.

see: #63

[xmatthewx]

This could be accessed via an icon on either the page editor or the project editor (if we still have a selected page state). Wherever it fits more super chilly.

[vazquez]

Design Annotation

[xmatthewx]

Implementation notes:

• [ ] shorten the header to just Page Background
• [ ] apply most recently used color on newly created pages (if we need to, let's add a column in DB for a project's recent/default element and page styles)

[alanmoo]

@vazquez Is that paint fill icon already in the repo somewhere?

[xmatthewx]

I don't love this paint bucket. It's a bit hard to read.

[alanmoo]

As I'm building this I'm simply using the paint brush as a placeholder. Do we keep that for consistency?

[vazquez]

The paint brush can be a good alternative since we removed the paint brush in all other views in favour of the pencil.

[vazquez]

@xmatthewx We can also try

or

[xmatthewx]

I like the palette.

If we use the paintbrush, let's adjust it so it looks less like the pencil. Current, both point down from top-right to bottom-left. They don't have enough contrast. Brush could be oriented like the wand above, with brush upward.

[vazquez]

I think I like the palette better.

Palette icon (with svgo optimization): https://dl.dropboxusercontent.com/u/43783651/Mozilla/Android/palette-icon.svg

[xmatthewx]

R+ on the palette

[alanmoo]

@vazquez Default color options? Normal set with transparent replaced by that dark one in the comps? If so, what is that one color?

[xmatthewx]

Dark one is probably the same as text color on text element.

Wondering: should we swap the blue for the yellow. If page background often match the app header, things might get a bit weird.

[alanmoo]

Yeah I was wondering if we should have a different palette altogether. I'm not sure how often the default colors get used for elements vs tinkered ones, but new colors here that complement the default element ones could result in more good looking projects.

[vazquez]

Let's have these colours:

We have a blackish colour, a greyish colour, and some colours that are complementary with a blue header.

New Colour Values:

• Black: #484B50
• Grey: #6D7886
• Green: @green LESS variable
• Orange: @orange LESS variable
• Purple: @purple LESS variable

[alanmoo]

Transparent vs white? Thoughts?

[vazquez]

I don't have a strong preference. @xmatthewx what do you think? How should we communicate "white" in this case?

[xmatthewx]

Good point. White is probably better. (I bet most people read that as none, not transparent. But still, white requires less thinking.)

[alanmoo]

Turns out it's not actually white, but an off-white #f2f6fc. After a quick in person discussion (!), @xmatthewx and I decided we should use that instead of #FFF in the palette.