mdSpeedDial: Implement floating-action-button menu
Closed this issue ยท 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.
Looks great ...
+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.
๐
If anyone has implemented this (using the md directives), please share!
Waiting for this and md-menu in 0.10, waiting for .9.0!
These guys have it down pretty nice http://ui.lumapps.com/css/fab
@imjoeybrennan unless you're using a keyboard or a screen reader.
@marcysutton yas queen. angular material is boss.
Awesome ++1
please +1
A start: http://codepen.io/ionic/pen/xbNrzV
@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).
Then fix it and open a PR ๐
Material Design Specifcation released for SpeedDial
Includes both FAB buttons and toolbar slideouts:
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
andshift+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:
-
The main directive that wraps everything (
md-fab
) -
The trigger directive which wraps the always-visible element (the plus in this case:
md-fab-trigger
) -
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.
@topherfangio - This looks very interesting. Perhaps you could:
- Support
direction="left || right"
- Support also a toolbar [with FABs] slideout [instead of floating FAB buttons].
++1
@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...
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.
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.
Yes, the css isn't the best and it wasn't initially made for ng-material. @topherfangio is working on a proper version.
Is the PR merged into master?
@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.
+1
Keep up the awesome work, @topherfangio!
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.
@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 :-)
Amazing, let me know if I can help!
@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.
Any updates to this recently? Would love to use the floating text in my app.
@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 :-)
@topherfangio When the speed dial is open, you should display the tool-tips like it does on android/inbox.
@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.
@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 :-)
How's it going? Did 0.10.1 push any changes here?
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.
Cool, thanks for the update. And cheers for all your efforts!
Thanks for the great effort so far, looking forward to the update... really, need it now, but no complaints ! ๐
Speed dial should now be feature complete and was merged into master this morning. Please let us know if you find more issues!
@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?