592117 - [EB] Success message styling, copy, and interactions

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Collections, defect, P2)

Description

[Justin Scott [:fligtar]]

Creating a new collection (not quick-create) should go to the newly created collection with a success message that says:

Collection created!
Your new collection is shown below. You can <a href="#">edit additional settings</a> if you'd like.

When editing a collection, the success should return to the same page but with a success message:

Collection updated!
<a href="#">View your collection</a> to see the changes.

Assigning to chowse for mock, color values, and assets. Please assign to :potch after.

Comment 1

[Chris Howse [:chowse]]

Attachment: Message Mockup

Mock-up of the success message, with an alert/error message thrown in for good measure.

The necessary images can be found here:
http://people.mozilla.com/~chowse/drop/amo/icons/icon-valid-large.png
http://people.mozilla.com/~chowse/drop/amo/icons/icon-error-large.png
http://people.mozilla.com/~chowse/drop/amo/icons/icon-close.png
http://people.mozilla.com/~chowse/drop/amo/icons/icon-close-hover.png

Here's how to style it:
* Place it in the main column, below the title but above any content.
* Give it a 28px bottom margin.
* Give it 13px of internal padding.
* The border and shadow on the message should be the same weight as those
  on pop-up boxes.
* The border of the success message is #1d4900, the error message #550b00.
* The large icons are 32x32px, with a 13px gap between the icon and the text.
* The text is #444 13px Helvetica Neue (the default page font).
* The heading is the same font, but boldface.
* The close button is 16x16px, with a 26px gap between it and the text.
* If you want to add an animation to the close action, I'd recommend fading
  the opacity to 0, then shrinking the height to 0. No more than 1 sec total.

Comment 2

[Justin Scott [:fligtar]]

We can drop the close button and its JS.

Comment 3

[Potch [:potch]]

I've taken a look at this:

1) will this be the new message style global to all of AMO? we have a mechanism in place for these messages with existing styles. (edit the contributors of a collection to see an example)
2) messages with multiple parts/links may not be possible with django's messaging support. Jeff, can you provide any clarity here?
3) Seeing as we have an existing way to provide some form of messaging to the user, it is far more likely that I'm going to use that system for this, and any further modifications/enhancements will be beyond 5.11.9- it's far too late in the game to be making those sorts of changes.

Comment 4

[Potch [:potch]]

http://github.com/jbalogh/zamboni/commit/fdb1086

Comment 5

[Justin Scott [:fligtar]]

(In reply to comment #3)
> 1) will this be the new message style global to all of AMO? we have a mechanism
> in place for these messages with existing styles. (edit the contributors of a
> collection to see an example)

Yes, but that's not necessary for this bug. I'll file a separate bug for later about using this style everywhere.

> 3) Seeing as we have an existing way to provide some form of messaging to the
> user, it is far more likely that I'm going to use that system for this, and any
> further modifications/enhancements will be beyond 5.11.9- it's far too late in
> the game to be making those sorts of changes.

I understand and should have realized we didn't have proper success/error message copy and styling until now. Here's a patch that should take care of the styling: http://github.com/fligtar/zamboni/commit/4a47394bb9af18182779826ba035e3980e43d737

I also looked into the multipart messaging problem as well and couldn't figure out a non-hacky way without patching django, so we'll have to wait for the experts on that.

Comment 6

[Jeff Balogh (:jbalogh)]

Where is your "info" styling?  We are currently using info, success, and error.

Comment 7

[Justin Scott [:fligtar]]

What are examples of info-type messages?

Comment 8

[Wil Clouser [:clouserw]]

I think the user registration uses one to say an email has been sent.  It's just a generic icon.

Comment 9

[Justin Scott [:fligtar]]

I'm only concerned about collections for this, so if there isn't a collection info box we can tackle that in the follow-up bug.

Comment 10

[Wil Clouser [:clouserw]]

To summarize this bug:

We currently send messages with messages.success('blah').  The mockup has 2 strings in each message and Django's framework doesn't support that.

We should extend Django's messages class with our own, and add functions that accept 2 strings and modify the template to print one as a header, and one as the content of the message.

Comment 11

[Potch [:potch]]

this requires a bit more django sauce than I'm up to.

Comment 12

[Wil Clouser [:clouserw]]

I took a stab at this.  Not the most elegant thing, but it does work.  A concern is that we haven't allowed HTML in any of our messages before.  In order to make this work, I've had to mark everything as safe.  I don't think it's a problem now, but could make for XSS in the future if we aren't vigilant.

Looking for feedback: http://github.com/clouserw/zamboni/compare/master...random

Comment 13

[Wil Clouser [:clouserw]]

Alright then.  

http://github.com/jbalogh/zamboni/commit/a0db14c027a3778d963b7cb51eba1249c5f25ae3
http://github.com/jbalogh/zamboni/commit/104d92d5b238332b757a932eb934fae9986458fb
http://github.com/jbalogh/zamboni/commit/cc8e40d9bbcd99fa98962e2aefc5c7afe489d81c

Comment 14

[Justin Scott [:fligtar]]

The notifications seem to work and the style is good, but the images are missing: http://grab.by/6ckJ

Comment 15

[Wil Clouser [:clouserw]]

That was your code!  http://github.com/jbalogh/zamboni/commit/2e5a3c9eb6acaf7de97d924aa98d24f4a5e6feee

Also, those images should be sprited

Comment 16

[Chris Howse [:chowse]]

Since you're spriting, there's an 'info' icon too if you need it at some point:

http://people.mozilla.com/~chowse/drop/amo/icons/icon-info-large.png

Comment 17

[Justin Scott [:fligtar]]

Thanks chowse. We'll sprite and add the info stuff with the follow-up bug for using this style everywhere.

(In reply to comment #15)
> That was your code! 

It worked fine on my dev copy!