SpeedDial with material-ui

SpeedDial.css

.cover {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1100; /* just above title bar */
  transition: opacity 0.2s ease-in-out;
  opacity: 1;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5dc1b2+0,1fbcd2+100 */
  background: #5dc1b2; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #5dc1b2 0%, #1fbcd2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #5dc1b2 0%, #1fbcd2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #5dc1b2 0%, #1fbcd2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.closed .cover {
  opacity: 0;
  transition: opacity 0.2s ease-in-out, height 0s linear 0.2s;
}

.actions {
  position: absolute;
}

.closed .actions {
  transition: top 0s linear 0.2s;
}

.container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  text-align: center;
  z-index: 1110;
}

.button {
  transition: transform 0.2s ease-in-out;
}

.closed .button {
  transform: scale(0, 0);
}

.action {
  position: relative;
  margin-bottom: 20px;
}

.tooltip {
  position: absolute;
  right: 75px;
  top: 18px;
  color: white;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.closed .tooltip {
  opacity: 0;
}

.opened .main svg {
  transform: rotate(135deg);
}

SpeedDial.jsx

import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {FormattedMessage} from 'react-intl'

import FloatingActionButton from 'material-ui/FloatingActionButton'

import AddIcon from 'material-ui/svg-icons/content/add'
import CartIcon from 'material-ui/svg-icons/action/shopping-cart'
import EventIcon from 'material-ui/svg-icons/action/event'
import CheckIcon from 'material-ui/svg-icons/action/assignment-turned-in'
import PasteIcon from 'material-ui/svg-icons/content/content-paste'
import PollIcon from 'material-ui/svg-icons/social/poll'

import Link from '../components/Link'

import css from './SpeedDial.css'

const color = 'rgb(95,193,178)'

const actions = [
  {icon: <PollIcon />, id: 'polls'},
  {icon: <PasteIcon />, id: 'notes'},
  {icon: <CheckIcon />, id: 'tasks'},
  {icon: <EventIcon />, id: 'events'},
  {icon: <CartIcon />, id: 'bills'},
]

class SpeedDial extends Component {
  static propTypes = {
    // from redux:
    height: PropTypes.number.isRequired,
  }

  constructor(props) {
    super(props)
    this.state = {
      open: false,
    }
    this.handleToggle = this.handleToggle.bind(this)
  }

  handleToggle() {
    this.setState({
      open: !this.state.open,
    })
  }

  render() {
    const actionButtons = actions.map((action, index) => {
      const link = <Link to={{pathname: '/' + action.id + '/new'}} />

      const delay = (30 * (this.state.open ? (actions.length - index) : index))

      return (
        <div className={css.action} key={action.id}>
          <div className={css.tooltip} style={{transitionDelay: delay + 'ms'}}>
            <FormattedMessage id={action.id + '_new'} />
          </div>
          <div className={css.button} style={{transitionDelay: delay + 'ms'}}>
            <FloatingActionButton backgroundColor="white" iconStyle={{fill: color}} containerElement={link}>
              {action.icon}
            </FloatingActionButton>
          </div>
        </div>
      )
    })

    return (
      <div className={(this.state.open ? css.opened : css.closed)}>
        <div className={css.cover} style={{height: this.state.open ? this.props.height + 'px' : 0}} onTouchTap={this.handleToggle} />
        <div className={css.container}>
          <div className={css.actions} style={{top: this.state.open ? `${actions.length * -76}px` : '100px'}}>
            {actionButtons}
          </div>
          <FloatingActionButton onMouseUp={this.handleToggle} className={css.main} backgroundColor={color}>
            <AddIcon />
          </FloatingActionButton>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  height: state.app.height, // synced with window.innerHeight
})

export default connect(mapStateToProps)(SpeedDial)