Speed dial overlay with labels next to buttons

[jcdenton]

Hi,

speed-dial component is useful to group actions but icons cannot always be intuitive to the end user and describe well the action each button does. The Android native component has an optional overlay when the speed dial shows its items and a label next to each button describing the action.

Can this be accomplished in Onsen’s speed dial?

Haven’t tried something yet. Just thinking in theory…

I don’t know if isOpen() method could help to know when the buttons are visible and then adding a specific overlay class to the body (without overlaying speed-dial component too).

[IliaSky]

I am not completely sure that I understand what you mean. I’m guessing something similar to the left canvas in the middle of this article. We don’t have anything specifically like that as technically it can be achieved with a simple fab and a div. WIth the speed-dial which we’re providing we have some specific logic for the sequence of the animations of the items.

If you just want labels next to the inner fabs you can just add the labels together with the following css:

.speed-dial__item {
  overflow: visible;
}
.speed-dial__item div {
  position: absolute;
  top: 0;
  right: 45px;
}

If you want an overlay you could add that too and just toggle it when you press the main fab.

Here’s a Demo of both features together.

Actually I think I’ve seen more apps with something similar to this demo rather than design in the article.

And about your last question - yes you could show and hide the mask based on the result of isOpen(). If you use angular you could do that using the ng-show directive. However in the most basic case where you write something like ng-show="dial.isOpen()" it will change the display property directly, so even though it will work you won’t be able to create a simple transition in the opacity without more code.

About how to make the overlay not cover the speed-dial - you need to make sure that the css property z-index of the speed-dial is higher than that of the overlay. Alternatively you could just put the overlay inside the speed-dial and it may be easier to manage in that case. You could even cheat it purely with the css :before selector, so that you don’t need an element for it. (I actually modified the demo that way in the end :D )

[jcdenton]

@IliaSky

Respect :) ! Your pen is what I was thinking about.

This behavior (with a little more tweaking) is actually Android’s native behavior. So it would be a good idea to keep this as a demo for the speed dial component.

[IliaSky]

I’m glad you like it (^_^)

[jcdenton]

@IliaSky

Tweaking your pen, found that speed-dial was opening while clicking anywhere in the body. This rule content:'' on ons-speed-dial:before was causing the issue.

Changed the CSS to this, fixed it keeping the rest of the behavior the same:

ons-speed-dial:before {
  content: '';
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  transition: visibility 0s linear, opacity 0.2s ease-in-out;
}
ons-speed-dial.open:before {
  visibility: visible;
  opacity: 1;
}

[IliaSky]

oops - I guess I missed to do that :D . I really didn’t try to click elsewhere. Thanks for pointing that out. I just updated it with your version so that other people seeing it won’t have the same issue.

Thanks :)