import { Components, registerComponent, withDocument} from 'meteor/vulcan:core';
import { Posts } from '../../lib/collections/posts';
import IconButton from 'material-ui/IconButton'
import React from 'react';
import { withRouter } from 'react-router';

const SequencesNavigationLink = ({
    slug,
    document,
    documentId,
    documentUrl,
    loading,
    direction,
    router}
  ) => {
    const post = (slug || documentId) && document
    const className = "sequences-navigation-top-" + direction
    const iconStyle = !slug && !documentId ? {color: "rgba(0,0,0,.2)"} : {}
    return (
      <IconButton
        iconStyle={ iconStyle }
        className={ className }
        disabled={ !slug && !documentId }
        iconClassName="material-icons"
        tooltip={post && post.title}
        onClick={() => router.push(documentUrl)}>
        { direction === "left" ? "navigate_before" : "navigate_next" }
       </IconButton>
     )
};

const options = {
  collection: Posts,
  queryName: "SequencesPostNavigationLinkQuery",
  fragmentName: 'SequencesPostNavigationLink',
  enableTotal: false,
}

registerComponent('SequencesNavigationLink', SequencesNavigationLink, [withDocument, options], withRouter);

import { Components, registerComponent, withDocument} from 'meteor/vulcan:core';
import { Posts } from '../../lib/collections/posts';
import IconButton from 'material-ui/IconButton'
import React from 'react';
import { withRouter } from 'react-router';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  normal: {
    "& .material-icons": {
      color: "rgba(0,0,0, 0.5) !important"
    }
  },
  disabled: {
    "& .material-icons": {
      color: "rgba(0,0,0, 0.2) !important"
    }
  },
});

const SequencesNavigationLink = ({
    slug,
    document,
    documentId,
    documentUrl,
    loading,
    direction,
    router,
    classes}
  ) => {
    const post = (slug || documentId) && document
    const disabled = (!slug && !documentId);
    return (
      <IconButton
        className={disabled ? classes.disabled : classes.normal}
        disabled={disabled}
        iconClassName="material-icons"
        tooltip={post && post.title}
        onClick={() => router.push(documentUrl)}>
        { direction === "left" ? "navigate_before" : "navigate_next" }
       </IconButton>
     )
};

const options = {
  collection: Posts,
  queryName: "SequencesPostNavigationLinkQuery",
  fragmentName: 'SequencesPostNavigationLink',
  enableTotal: false,
}

registerComponent('SequencesNavigationLink', SequencesNavigationLink,
  [withDocument, options], withRouter, withStyles(styles, {name: "SequencesNavigationLink"}));

Fix sequences navigation button coloring
Fix sequences navigation button coloring

There was a regression introduced by deleting seemingly-unused SCSS,
because `SequencesNavigationLink` was dynamically constructing the class
names `sequences-navigation-top-left` and `sequences-navigation-top-right`.
Additionally, the SCSS that was incorrectly removed contained a bug,
where the style that was supposed to apply to a disabled button (graying
it out) wasn't applied. Fix all that and move it to JSS.
