mdSpeedDial: Implement floating-action-button menu

[marcysutton]

The "speed dial" component inspired by Google Inbox allows for a small number of items to animate out from a floating action button (FAB). In the Material Design spec although there isn't any detail for this specific component, there are a few patterns and requirements noted for items animating out of FABs:

• The FAB should be attached/anchored to something and not in a random location
• A FAB menu has to contain related items. Consider an overflow menu for unrelated items.

There are a few inspirations:
Implementation: http://nobitagit.github.io/ng-material-floating-button/ (needs accessibility)
Design: https://dribbble.com/shots/1788016-Inbox-Speed-Dial-Animation
Google Inbox SpeedDial UX: MP4

Similar to a Bottom Sheet, the speed dial component is a mobile-focused component, and should be noted in the docs.

h/t to #1368.

[m4cx]

Looks great ...

[epelc]

+10 would love to see this. I'll probably have to roll my own in the mean time. I'll share if it turns out good.

[asm0dey]

👍

[ghost]

If anyone has implemented this (using the md directives), please share!

Waiting for this and md-menu in 0.10, waiting for .9.0!

[imjoeybrennan]

These guys have it down pretty nice http://ui.lumapps.com/css/fab

[marcysutton]

@imjoeybrennan unless you're using a keyboard or a screen reader.

[imjoeybrennan]

@marcysutton yas queen. angular material is boss.

[scriptsure]

Awesome ++1

[klederson]

please +1

[ajoslin]

A start: http://codepen.io/ionic/pen/xbNrzV

[epelc]

@ajoslin Looks good.

I don't know if it's going to a be a 1:1 with inbox but if it is they show the mini fabs whenever you hover anywhere in the blue box(basically the mini-fabs area + some margin).

[ajoslin]

Then fix it and open a PR 😉

[marcysutton]

Thanks for the Codepen @ajoslin!

@epelc although mdSpeedDial won't be an exact 1-1 with Inbox (which currently has limited keyboard support), a larger hover area would help usability of the menu. The demo shows the animation working pretty well though!

[ThomasBurleson]

Material Design Specifcation released for SpeedDial

Includes both FAB buttons and toolbar slideouts:

[topherfangio]

Hi folks. I've just created a basic prototype using MD so that we can begin discussing some thoughts.

You can view the demo and get the code at http://profoundry-us.github.io/md-fab-test/

Of note, here are some of my thoughts:

• Currently, this supports basic keyboard navigation via the tab and shift+tab keys. Ideally, we'll support the arrow keys too, but I ran into some difficulty getting that to work and wanted to share what I had before spending a significant amount of time on it.
• All of the animation is currently done via CSS using scaling and the order property. This could very well need to change to support more functionality, but was a quick way to start.
• Currently, the md-direction support is also CSS-only (which is kinda cool!) and this would probably need to change to be a proper attribute or scope object.
• I've separated this into three components/directives:

  1. The main directive that wraps everything (md-fab)

  2. The trigger directive which wraps the always-visible element (the plus in this case: md-fab-trigger)

  3. The speed dial directive which wraps the popup (md-fab-speed-dial)

     This allows a decent level of separation and would allow us to add new presentation/behavior by adding a different nested component (for example: md-fab-toolbar).

• Obviously, this is VERY prototype-code; I would start from scratch to create a proper component within the project; I just wanted something to play with and share :-)

So, the basic usage code looks something like this:

<md-fab md-direction="up">
    <md-fab-trigger>
        <md-button><md-icon path="/images/plus.svg"></md-icon></md-button>
    </md-fab-trigger>

    <md-fab-speed-dial>
        <md-button><md-icon path="/images/pencil.svg"></md-icon></md-button>
        <md-button><md-icon path="/images/user.svg"></md-icon></md-button>
        <md-button><md-icon path="/images/group.svg"></md-icon></md-button>
    </md-fab-speed-dial>
</md-fab>

In theory, this actually allows any HTML inside of the trigger or speed dial (perhaps a search box or other input field), but I haven't tried it since it seemed kinda silly.

In any case, I would love some feedback! I actually have today and tomorrow off so I could spend some time getting a basic component working if we think this approach is good.

[ThomasBurleson]

@topherfangio - This looks very interesting. Perhaps you could:

• Support direction="left || right"
• Support also a toolbar [with FABs] slideout [instead of floating FAB buttons].

[victorsoliveira]

++1

[topherfangio]

@ThomasBurleson I am definitely great with adding the additional suggestions you mentioned, however, I was hoping to get some feedback on the actual architectural choices (such has how I've broken out the directives, and whether to use CSS for the ordering, etc) before investing a significant amount of time in it.

As this is the first component I would be contributing, I'd like to hear some other people's thoughts on how to make sure it fits best with your existing ecosystem to make sure I'm not doing something really wonky :-)

Also, is there a document describing what browsers MD officially supports? I've only tested this with Chrome...

[benbeadle]

+1

Keep up the awesome work, @topherfangio!

[mismith]

What about touc support? Is the aim is to create a "mobile-focused component" the the current (0.10.0) implementation isn't really there yet. Also, is there a built-in to support tooltips like the Google Inbox one does? I have done implemented tooltips myself and could share some code/contribute if need be since using the native md-tooltip directive currently break the hover/mouse events.

[topherfangio]

@mismith I am currently working to bring the SpeedDial many new features including touch support. I have already fixed the issue with the hover/mouse events and tooltips, I just haven't submitted a PR quite yet; so it should be coming soon and should be a much more robust component in the near future :-)

[mismith]

Amazing, let me know if I can help!

[topherfangio]

@mismith PRs are always welcome ;-)

Here is the current list of issues that I am working through: https://github.com/angular/material/issues/assigned/topherfangio

The team and I are attempting to assign everything dealing with speed dial/toolbar to me, so if you see one somewhere else, please ping me about it.

[sjlynch]

Any updates to this recently? Would love to use the floating text in my app.

[topherfangio]

@sjlynch I am slowly but steadily working on it. I am finishing up a huge contract this week and should have a lot more time after that to finish this out (including next week when I am on vacation). I'm hoping to get everything squared away ASAP, but I'm looking at a potential redesign due to how awkward it is sometimes to use.

I will be pushing to have this component as production-ready as possible by 0.11.0.

In the meantime, the latest master speed dial is mostly working :-)

[ghost]

@topherfangio When the speed dial is open, you should display the tool-tips like it does on android/inbox.

[sjlynch]

@topherfangio Hey great news! But try to take it easy on your vacation, unless that is how you relax haha. Love the speed dial thus far.

[topherfangio]

@sjlynch I unfortunately took it a bit easier than I planned on my vacation and didn't get much done. Apparently, chasing a toddler around a cabin in the woods is harder than I thought (especially when there are two other kids he is chasing after).

In any case, I am now 100% focused on material and will be pushing to get a bunch of stuff done this week :-)

[mismith]

How's it going? Did 0.10.1 push any changes here?

[topherfangio]

I think there were a few small fixes in 0.10.1, but the majority of fixes will be pushed in 0.11 which we are working on now.

I actually just finished what should be my last PR for the speed dial/toolbar for a while, so as soon as it is merged, it will be available and should be mostly ready. We have some plans post 1.0, but will likely only have bug fixes until then.

[mismith]

Cool, thanks for the update. And cheers for all your efforts!

[pmoelgaard]

Thanks for the great effort so far, looking forward to the update... really, need it now, but no complaints ! 👍

[topherfangio]

Speed dial should now be feature complete and was merged into master this morning. Please let us know if you find more issues!

[sjlynch]

@topherfangio The tooltips look great, thanks for your work!

Edit: Is there any way to show the tooltips automatically expanded e.g. without first hovering over them?

[Splaktar]

Fixed in 545582d.