playing around with flashes #83

ajb · 2015-05-05T22:43:37Z

Just did this for fun... and because I wanted to learn a bit more about CSS transitions. Here's a quick screencast: http://take.ms/wNWbD

Flashes now "stack" instead of simply covering each other
I remove the .flash_close button, I have literally never clicked it before
I inverted the flash background/color, it feels friendlier this way

I couldn't get the CSS transition to look totally 👌. I'd be super interested to learn how you do it, @jrubenoff.

Also, is this a direction that you'd want to build in?

dobthound · 2015-05-05T22:43:44Z

vendor/assets/javascripts/dvl/core/transition.js

+  // ============================================================
+
+  function transitionEnd() {
+    var el = document.createElement('bootstrap')


Missing semicolon.

ajb · 2015-05-12T22:22:24Z

@jrubenoff: didya get a chance to check this out?

jrubenoff · 2015-05-13T23:23:16Z

This is pretty slick. Added some refinements... let me know if you have any questions re: my comments.

I also added some nicer colors for the flashes.

ajb · 2015-05-14T13:15:24Z

Thanks for the comments, I learned a lot! I never would have thought to move the entire .wrapper up...

I think it looks pretty great too, but the one thing that bugs me about the current transition is that it looks like the Star Wars credits. Maybe if it animated less, or was a little more subtle?

If you want to merge this soon, we could, or if you want to wait until you do your larger refactor of our components, that might make sense too.

jrubenoff · 2015-05-14T17:00:19Z

I don't really see the "Star Wars credits" thing, but removing the scale transform will do the trick if it's bothering you.

jrubenoff · 2015-05-14T17:00:40Z

Also, I'm down for merging this in whenever.

ajb · 2015-05-15T00:40:30Z

Alright, a few reasons this isn't ready... but it's gonna be awesome. I removed the scale transform and it's much better... I also added translateZ(0) which makes it smoother.

I added link styles, but they look kinda shoddy:

The current behavior is that alerts don't hide when they're hovered over, but with the new .wrapper animation, this gets janky: http://take.ms/7M8Gv

Should we remove that behavior and add the "persist alerts that have actions" (#88) behavior instead? Or should we fix that behavior?

jrubenoff · 2015-05-20T17:40:36Z

Yeah, I would like to merge this because it's a good first step for turning flashes into a more ambient notifications system like Atom's... more prominent, but easier to ignore when you need to.

ajb · 2015-05-20T17:46:15Z

Yeah, I want to merge too, but I still don't know how to implement persistent flashes.

Trigger a persistent flash
Trigger a non-persistent flash
When does the persistent flash disappear?

In #88 you mention:

the flash should stay onscreen until the user performs another action

But I'm not sure what you mean by an "action".

Maybe when step 2 happens in the process above, we just start stacking up the non-persisted flashes until the persistent flash is dismissed? This might actually be Atom's behavior: https://cloud.githubusercontent.com/assets/69169/5176406/350d0e80-73fd-11e4-8101-1776b9d6d8bf.gif

(This is when I start to wonder if we're getting too complex.)

jrubenoff · 2015-05-20T17:58:41Z

So, currently, I think the answer is simple: Flash 1 hides when 2 appears. We don't have passive notifications, so flashes will always be caused by the user deliberately doing something.

In the future, maybe we want to add passive notifications which have nothing to do with the current user's activity, like:

"Max Ophuls just invited Robert Bresson to Web Design RFP"
"Barack Obama submitted a response"

Etc. In that case, we would need to make this more complex.

ajb · 2015-05-20T18:01:17Z

....So then shouldn't we just hide any notification when another one
appears?

On Wed, May 20, 2015 at 1:58 PM, Josh Rubenoff notifications@github.com
wrote:

So, currently, I think the answer is simple: Flash #1
#1 hides when #2
#2 appears. We don't have
passive notifications, so flashes will always be caused by the user
deliberately doing something.

In the future, maybe we want to add passive notifications which have
nothing to do with the current user's activity, like:

"Max Ophuls just invited Robert Bresson to Web Design RFP"

"Barack Obama submitted a response"

Etc. In that case, we would need to make this more complex.

—
Reply to this email directly or view it on GitHub
#83 (comment).

Adam Becker
(951) 9-BECKER
@AdamJacobBecker

jrubenoff · 2015-05-20T18:23:45Z

...yes, but like the current behavior, we need to give each flash enough time on the screen to be read, which means they might stack if they appear one after the other?

ajb · 2015-05-20T18:25:22Z

Alright, let me try developing this and then we can reason about it more.

On Wed, May 20, 2015 at 2:23 PM, Josh Rubenoff notifications@github.com
wrote:

...yes, but like the current behavior, we need to give each flash enough
time on the screen to be read, which means they might stack if they appear
one after the other?

—
Reply to this email directly or view it on GitHub
#83 (comment).

Adam Becker
(951) 9-BECKER
@AdamJacobBecker

ajb · 2015-05-21T14:10:10Z

@jrubenoff: take a look at the current implementation. The code is prototype-quality, but I'm wondering if this behavior works?

Another potential problem, though: we're getting rid of the "close" link, which means that if a persistent flash is on top of e.g. a nav item, there's no way to click that nav item. What should we do about this?

ajb · 2015-05-25T12:27:27Z

I've gotten this branch to a place that I'm 👍 on shipping, which is a simplified version of what we've been working on, with:

Persistent flashes
Better styles (display: inline-block)
Only 1 flash visible at a time

But I'd like us to figure this out, first:

Another potential problem, though: we're getting rid of the "close" link, which means that if a persistent flash is on top of e.g. a nav item, there's no way to click that nav item. What should we do about this?

ajb · 2015-06-03T23:19:48Z

Ideas:

Double-clicking on a flash hides it
Add a close button for persistent flashes
Add a close button for all flashes

ajb · 2015-06-05T02:47:40Z

Other ideas:

Make sure that the flash never overlaps any other actionable content

From Gmail:

ajb · 2015-07-31T15:33:05Z

Just merged-in master. Getting this figured out would make me really happy.

jrubenoff · 2015-09-21T23:01:24Z

How do I test persistent flashes? They're not in the style guide.

Let's add a close button only for persistent flashes.

ajb · 2015-09-21T23:05:01Z

Without looking at the code:

DvlFlash('info', 'blah', true)

On Mon, Sep 21, 2015 at 7:01 PM, Josh Rubenoff notifications@github.com
wrote:

How do I test persistent flashes? They're not in the style guide.

Let's add a close button only for persistent flashes.

—
Reply to this email directly or view it on GitHub
#83 (comment).

Adam Becker
(951) 9-BECKER
@AdamJacobBecker

jrubenoff · 2015-09-21T23:24:48Z

Not sure why PhantomJS is missing in the tests above, but this looks good! I cleaned up the styles a bit and updated from master.

I encountered the bug below a few times, where a persistent flash appears multiple times, but I have no idea to reproduce:

(Even the GIF above was made by pressing the trigger link in rapid succession, so... I have no idea what I did to cause the actual bug.)

ajb · 2015-09-22T15:01:25Z

I'm seeing that bug too. I also don't really dig the location of the flashes on the page. If they're not going to be centered, I think they should be even further towards the top-right corner. Right now, they look like they're floating in no-man's land.

I think the best thing to do is figure out what we like about this approach, and then I'll try and re-implement off of master to see if I can make it less buggy.

Here's what I think we've concluded on:

Non-persistent flashes don't have a "close" button, persistent flashes do
Only one flash is shown at once

(Anything I'm missing?)

Here's what we still need to decide:

Where are flashes located?
What does the close button look like?

ajb · 2015-10-16T19:08:14Z

Not really sure where we're at (and that's OK), but just popping in to say that I'm a big fan of Google Docs' flash:

It persists for about 10 seconds, which gives the user more than enough time to read and react to it, and the "Dismiss" and "Undo" links, while a bit cramped, are pretty clean.

jrubenoff · 2015-10-28T03:10:49Z

I moved flashes to the bottom right corner of the screen, which grounds them a little better. We could add a close button to all flashes (including those which aren't persistent) if we're worried about overlapping important content.

Mockup in Sketch with new icons:

jrubenoff · 2015-10-28T03:55:37Z

Also: added icons to help colorblind users better distinguish between different types of flashes.

ajb assigned jrubenoff May 5, 2015

dobthound reviewed May 5, 2015
View reviewed changes

ajb added the todo_upcoming label May 14, 2015

ajb assigned ajb and unassigned jrubenoff May 14, 2015

ajb assigned jrubenoff and unassigned ajb May 15, 2015

ajb removed the todo_upcoming label May 15, 2015

ajb assigned jrubenoff and unassigned ajb May 25, 2015

ajb removed the todo_upcoming label May 25, 2015

ajb mentioned this pull request Jun 3, 2015

Persistent flashes with actions #88

Closed

ajb mentioned this pull request Jun 30, 2015

Style guide + visual redesign #105

Closed

ajb mentioned this pull request Jul 10, 2015

Flashes have unreadable contrast ratio #115

Closed

new flash styles

79f1b65

ajb force-pushed the experimental/flashes branch from 968d2ce to 79f1b65 Compare October 28, 2015 15:08

allow for server-side flashes with links

ab1c0f6

ajb mentioned this pull request Oct 28, 2015

New flash styles #196

Merged

ajb closed this Oct 28, 2015

ajb deleted the experimental/flashes branch October 28, 2015 22:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

playing around with flashes #83

playing around with flashes #83

ajb commented May 5, 2015

dobthound May 5, 2015

ajb commented May 12, 2015

jrubenoff commented May 13, 2015

ajb commented May 14, 2015

jrubenoff commented May 14, 2015

jrubenoff commented May 14, 2015

ajb commented May 15, 2015

jrubenoff commented May 20, 2015

ajb commented May 20, 2015

jrubenoff commented May 20, 2015

ajb commented May 20, 2015

jrubenoff commented May 20, 2015

ajb commented May 20, 2015

ajb commented May 21, 2015

ajb commented May 25, 2015

ajb commented Jun 3, 2015

ajb commented Jun 5, 2015

ajb commented Jul 31, 2015

jrubenoff commented Sep 21, 2015

ajb commented Sep 21, 2015

jrubenoff commented Sep 21, 2015

ajb commented Sep 22, 2015

ajb commented Oct 16, 2015

jrubenoff commented Oct 28, 2015

jrubenoff commented Oct 28, 2015

playing around with flashes #83

playing around with flashes #83

Conversation

ajb commented May 5, 2015

dobthound May 5, 2015

Choose a reason for hiding this comment

ajb commented May 12, 2015

jrubenoff commented May 13, 2015

ajb commented May 14, 2015

jrubenoff commented May 14, 2015

jrubenoff commented May 14, 2015

ajb commented May 15, 2015

jrubenoff commented May 20, 2015

ajb commented May 20, 2015

jrubenoff commented May 20, 2015

ajb commented May 20, 2015

jrubenoff commented May 20, 2015

ajb commented May 20, 2015

ajb commented May 21, 2015

ajb commented May 25, 2015

ajb commented Jun 3, 2015

ajb commented Jun 5, 2015

ajb commented Jul 31, 2015

jrubenoff commented Sep 21, 2015

ajb commented Sep 21, 2015

jrubenoff commented Sep 21, 2015

ajb commented Sep 22, 2015

ajb commented Oct 16, 2015

jrubenoff commented Oct 28, 2015

jrubenoff commented Oct 28, 2015