mdSpeedDial: Implement floating-action-button menu

Question

mdSpeedDial: Implement floating-action-button menu

Closed this issue 9 years ago · 41 comments

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.

asm0dey commented 9 years ago

👍

klederson commented 9 years ago

please +1

victorsoliveira commented 9 years ago

++1

Answer 1 · 2015-02-10T12:18:54.000Z

Looks great ...

Answer 2 · 2015-03-21T01:38:18.000Z

+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.

Answer 3 · 2015-03-26T16:46:25.000Z

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

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

Answer 4 · 2015-04-01T20:56:28.000Z

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

Answer 5 · 2015-04-01T20:57:50.000Z

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

Answer 6 · 2015-04-02T01:17:31.000Z

@marcysutton yas queen. angular material is boss.

Answer 7 · 2015-04-02T02:41:24.000Z

Awesome ++1

Answer 8 · 2015-04-06T20:02:51.000Z

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

Answer 9 · 2015-04-06T20:51:39.000Z

@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).

Answer 10 · 2015-04-07T16:55:01.000Z

Then fix it and open a PR 😉

Answer 11 · 2015-04-09T01:53:25.000Z

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!

Answer 12 · 2015-04-14T23:42:48.000Z

Material Design Specifcation released for SpeedDial

Includes both FAB buttons and toolbar slideouts:

Answer 13 · 2015-04-16T18:08:03.000Z

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.

Answer 14 · 2015-04-16T18:15:35.000Z

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

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

Answer 15 · 2015-04-17T00:21:20.000Z

@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...

Answer 16 · 2015-04-21T15:17:18.000Z

Just a quick note, I am currently working on a PR for this. Code is available at https://github.com/profoundry-us/material/tree/contrib/md-fab-speed-dial if anyone is interested.

Right now, it supports the basic speed dial presentation. I am planning to submit the PR once I have added the toolbar presentation and signed the CLA.

Answer 17 · 2015-05-04T06:56:43.000Z

Just a quick update: I have added a basic toolbar presentation along with completely refactoring the code into two separate components (and fixing some issues with the speed dial while I was at it).

However, things took a bit longer than expected and there is still some work to be done:

Toolbar needs directional support (only comes from the left at the moment)
Some values are hard-coded in CSS for the demo; should be calculated by the directive
Speed dial SCSS is kinda complex; needs refactoring
Merge it with y'alls latest updates and make sure I didn't somehow break something else :-)

You can still keep up with the latest at https://github.com/profoundry-us/material/tree/contrib/md-fab-speed-dial. I'll try to finish it up this week if anyone happens to be waiting for it.

Answer 18 · 2015-05-05T18:22:04.000Z

Have you guys seen this?

http://nobitagit.github.io/ng-material-floating-button/
https://github.com/nobitagit/ng-material-floating-button

Answer 19 · 2015-05-05T18:24:32.000Z

Yes, the css isn't the best and it wasn't initially made for ng-material. @topherfangio is working on a proper version.

Answer 20 · 2015-05-28T12:47:26.000Z

Is the PR merged into master?

Answer 21 · 2015-05-28T13:37:30.000Z

@senthilprabhut No. See #2842 .

Essentially there seems to be a functional version in the PR made by @topherfangio . And he's currently working out some of the finer details with members of the Angular Material team before merging.

Answer 22 · 2015-06-08T19:16:35.000Z

+1

Keep up the awesome work, @topherfangio!

Answer 23 · 2015-06-25T23:24:16.000Z

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.

Answer 24 · 2015-06-26T02:07:15.000Z

@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 :-)

Answer 25 · 2015-06-28T22:18:35.000Z

Amazing, let me know if I can help!

Answer 26 · 2015-06-29T00:37:31.000Z

@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.

Answer 27 · 2015-07-21T16:00:37.000Z

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

Answer 28 · 2015-07-21T17:05:19.000Z

@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 :-)

Answer 29 · 2015-07-21T17:56:05.000Z

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

Answer 30 · 2015-07-22T16:46:57.000Z

@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.

Answer 31 · 2015-08-03T16:39:15.000Z

@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 :-)

Answer 32 · 2015-08-12T00:11:23.000Z

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

Answer 33 · 2015-08-12T16:19:12.000Z

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.

Answer 34 · 2015-08-12T16:33:51.000Z

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

Answer 35 · 2015-08-13T02:18:49.000Z

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

Answer 36 · 2015-08-14T16:35:30.000Z

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

Answer 37 · 2015-08-17T15:02:35.000Z

@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?

Answer 38 · 2019-06-11T05:54:01.000Z

Fixed in 545582d.