[SpeedDial] New component by mbrookes · Pull Request #9539 · mui/material-ui

mbrookes · 2017-12-18T13:14:22Z

Thought I would give this its first public airing for feedback and initial code review.

To do:

~~Complete the keyboard navigation story~~
Tests (in progress)
.d.ts

oliviertassinari · 2017-12-18T13:20:41Z

  dialog: 1500,
  layer: 2000,
  popover: 2100,
+  speedDial: 2800,


2500 to be safer?

mbrookes · 2017-12-18T16:12:17Z

~~On the keyboard navigation / accesibility question: I'm stuck as to whether up / down should follow the visible layout of the buttons (up to select the next item), or follow the DOM layout:~~

<FAB>
<First Action>
<Second Action>
<Third Action>

~~This would behave more like a menu (down is next, up is previous), and might be more natural for a visually impaired user.~~

Support both!

oliviertassinari

A first batch of comment.

oliviertassinari · 2017-12-18T17:41:43Z

@@ -0,0 +1,83 @@
+// @flow weak


We have removed flow from the demos.

oliviertassinari · 2017-12-18T17:42:39Z

+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Button from 'material-ui/Button';
+import SpeedDialButton from 'material-ui/SpeedDial/SpeedDialButton';


It's a good occasion to think of:

import SpeedDial from 'material-ui/SpeedDial'; import SpeedDialButton from 'material-ui/SpeedDialButton';

Sure, if that's agreed. (I'm supporting it, but lets give others a chance to have a say).

I like the way it's exported below, so it can be imported like:

import SpeedDial, { SpeedDialButton } from 'material-ui/SpeedDial';

This still groups imports by the component they're used with.

oliviertassinari · 2017-12-18T17:42:53Z

+import ShareIcon from 'material-ui-icons/Share';
+import DeleteIcon from 'material-ui-icons/Delete';
+
+const styles = () => ({


No need for the function, it can be an object.

oliviertassinari · 2017-12-18T20:02:00Z

  .readFileSync(require.resolve('docs/src/pages/demos/buttons/FloatingActionButtons'), 'utf8')
 `,
        },
+


oliviertassinari · 2017-12-18T20:02:52Z

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import classNames from 'classnames';


I try to sort the import by scope. Maybe you would want to do the same and to keep it before the material-ui imports.

oliviertassinari · 2017-12-18T20:03:43Z

+    width: 56,
+    textAlign: 'center',
+    zIndex: theme.zIndex.speedDial,
+    transition: 'transform 0.1s ease-in-out',


Shouldn't we use our transition creator (for animation curve consistency)?

oliviertassinari · 2017-12-18T20:04:02Z

+    transition: 'transform 0.1s ease-in-out',
+  },
+  hidden: {
+    transform: 'scale(0, 0)',


Does it need to be 2D?

oliviertassinari · 2017-12-18T20:05:44Z

+
+  return (
+    <div className={classes.root} {...other}>
+      <Tooltip title={tooltip} placement="left">


We might want to add a TooltipProps and a ButtonProps property.

oliviertassinari · 2017-12-18T20:07:36Z

+
+  const children = React.Children.map(childrenProp, (child, childIndex) => {
+    if (!React.isValidElement(child)) return null;
+    const delay = 30 * (open ? childrenProp.length - childIndex : childIndex);


Humm. I would rather be incrementing a counter to account for the null children that can be provided.

Could you explain a bit?

oliviertassinari · 2017-12-18T20:08:06Z

+  const rootClassName = classNames(
+    classes.root,
+    hidden && classes.hidden,
+    hidden && classes.hidden,


twice the same line.

oliviertassinari · 2017-12-18T20:11:33Z

Did you benchmark any other implementations?

mbrookes · 2017-12-18T23:28:45Z

Did you benchmark any other implementations?

Not sure what you mean by benchmark. I took a look, they mostly suck.

Edit: Which is not to say that this is perfect by any means!

Here are the ones I've found so far - I didn't come across all of these before:

oliviertassinari · 2017-12-19T22:21:53Z

@@ -0,0 +1,144 @@
+// @flow weak


You can remove flow

oliviertassinari · 2017-12-19T22:22:39Z

+import { withStyles } from 'material-ui/styles';
+import Button from 'material-ui/Button';
+import Icon from 'material-ui/Icon';
+import AddIcon from 'material-ui-icons/Add';


No, we don't rely on material-ui-icons. It needs to be an internal svg icons. We already have ~6 of them.

Oops, I should know that! (SpeedDial started as a docs demo, and grew from there, so was using originally material-ui-icons)

oliviertassinari · 2017-12-19T22:23:35Z

+
+  const children = React.Children.map(childrenProp, (child, childIndex) => {
+    if (!React.isValidElement(child)) return null;
+    const delay = 30 * (open ? childIndex : childrenProp.length - childIndex);


My point was that the index can jump from 0, 1 to 3,4,5 if we have two null children along the way.
Hence, the delay will be wrong.

Struggling to imagine a situation where that would be the case? If somone's using other than SpeedDialButton, that's an error. Could you give an example?

oliviertassinari · 2017-12-19T22:25:03Z

+  return (
+    <div className={rootClassName} {...other}>
+      <Button
+        id={label}


Humm. I'm wondering about id escaping here. string -> id might not be as straightforward.

Mmm... good point. I originally had a separate prop, but was trying to keep the API surface down. I've added a regex to filter the label.

oliviertassinari · 2017-12-19T22:25:48Z

+  /**
+   * If `true`, the SpeedDial is open.
+   */
+  open: PropTypes.bool,


Should it be required?

Makes sense.

oliviertassinari · 2017-12-19T22:25:57Z

@@ -0,0 +1,99 @@
+// @flow weak


You can remove flow

Oops, thought I had done. Done now.

oliviertassinari · 2017-12-19T22:26:54Z

-import MenuList from 'src/Menu/MenuList';
-import MenuItem from 'src/Menu/MenuItem';
+import MenuList from 'src/MenuList/MenuList';
+import MenuItem from 'src/MenuItem/MenuItem';


Wait, what?

Bah, sorry, stray change from the flat-src-dir experiment. I need to be more careful with what git add . adds (or doesn't - I see how that got missed from the other commit...)

oliviertassinari · 2017-12-19T22:28:27Z

@mbrooks This is true benchmarking 💃 !

mbrookes · 2017-12-20T20:15:45Z

@oliviertassinari I've added up/down arrow key support. I solved the accessibility dilemma (should up/down follow the visual presentation, or the DOM structure) by supporting both.

Whichever key ('up', or 'down') is used to move focus from the base FAB to the first action is thereafter the "next" key, with the opposite focusing the previous action, (or the base FAB if there is no previous action).

It's pretty intuitive in use, and worth the extra few lines of code, and use of state IMHO.

Additional review feedback is also fixed (I hope!) in a657b7b . ~~(Except the outstanding null child question).~~

Regarding the API, are you happy with SpeedDialButton (a la BottomNavigationButton), or would SpeedDialItem (like ListItem and MenuItem) be preferable, (or even SpeedDialAction)?

Also, should tooltipTitle just be label for simplicity, or keep it explicit as to its use? (For ARIA it is used for aria-label though).

Edit 2: This is done: ~~Edit: also, should the SpeedDialButton icon be its child, as it is now, or an icon prop, like BottomNavigationButton? (Point 2. here suggests the latter.)~

oliviertassinari · 2017-12-22T21:50:18Z

+const styles = {
+  speedDial: {
+    position: 'fixed',
+    bottom: 20,


bottom: theme.spacing.unit, so we get as much geometric symmetry as possible. Same for right.

Inbox isn't a good example to follow 😁

oliviertassinari · 2017-12-22T21:59:21Z

+  root: {
+    width: 56,
+    textAlign: 'center',
+    zIndex: theme.zIndex.speedDial,


oliviertassinari · 2017-12-22T21:59:48Z

+
+const styles = theme => ({
+  root: {
+    width: 56,


I don't think that it's needed.

oliviertassinari · 2017-12-22T22:00:17Z

+const styles = theme => ({
+  root: {
+    width: 56,
+    textAlign: 'center',


I don't think that it's needed.

oliviertassinari · 2017-12-22T22:02:33Z

+    flexDirection: 'column-reverse', // Display the first action at the bottom.
+    marginBottom: 16,
+  },
+  closedActions: {


For consistency with the other classes names on the codebase: actionsClosed

oliviertassinari · 2017-12-22T22:08:30Z

+    const actionsClassName = classNames(classes.actions, { [classes.closedActions]: !open });
+    const children = React.Children.map(childrenProp, (child, childIndex) => {
+      if (!React.isValidElement(child)) return null;
+      const delay = 30 * (open ? childIndex : childrenProp.length - childIndex);


Missing index counter to counterbalance the potential null children.

oliviertassinari · 2017-12-22T22:09:26Z

+        <div
+          id={`${id}-actions`}
+          className={actionsClassName}
+          aria-labelledby={id}


From what I can see on the Inbox implementation, the aria-labeledby should be targeting an element with some text. Here. I think that you can remove this property and the regexp that comes with it.

I may be mistaken, but I understood that this would in turn respect the label applied with aria-label to the element referenced by id - in our case the aria-label appied to the base Button based on the label prop.

@oliviertassinari Reading around, I think you're right. I've removed it.

oliviertassinari · 2017-12-22T22:11:07Z

+  root: {
+    position: 'relative',
+  },
+  actionButton: {


maybe button is enough.

oliviertassinari · 2017-12-22T22:11:16Z

+    opacity: 1,
+    color: theme.palette.text.secondary,
+  },
+  closedActionButton: {


buttonClosed

oliviertassinari · 2017-12-22T22:11:55Z

+    }),
+  },
+  hiddenFab: {
+    transform: 'scale3d(0, 0, 1)',


Why using scale 3d and not?

transform: 'scale(0)',

Bacause I used scale, and you asked why I wasn't using scale3d. LOL!

mbrookes · 2017-12-22T22:19:20Z

@oliviertassinari I've made an attempt to deal with null children. It required two counters, as we need the total number of valid children to calculate the reverse timing for the closing animation. I'm wide-open to alternative implementations.

oliviertassinari · 2017-12-22T22:20:12Z

+/**
+ * @ignore - internal component.
+ */
+let Add = props => (


To move with #9601

leMaik · 2017-12-25T10:47:28Z

+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Button from 'material-ui/Button';
+import SpeedDialButton from 'material-ui/SpeedDial/SpeedDialButton';


I like the way it's exported below, so it can be imported like:

import SpeedDial, { SpeedDialButton } from 'material-ui/SpeedDial';

This still groups imports by the component they're used with.

leMaik · 2017-12-25T10:49:26Z

+        icon = <Icon>{iconProp}</Icon>;
+      }
+    } else {
+      icon = <AddIcon className={fabIconClassName} />;


It would be nice to be able to use a different icon when hovered (e.g. a plus when not hovered and a pen icon when hovered, like in Google Inbox). Maybe by adding an activeIcon prop? 🤔

leMaik · 2017-12-25T10:50:26Z

+    const actionsClassName = classNames(classes.actions, { [classes.actionsClosed]: !open });
+
+    // Filter the label for valid id characters.
+    const id = label.replace(/^[^a-z]+|[^\w:.-]+/gi, '');


So... a unique label is required?

Yes. The alternative was an explicit id prop, but I was trying to minimize the API surface. Given that you'd only ever have one SpeedDial visible, and if there's more than one they presumably have different purposes, it didn't seem like a major limitation, but I should probably add a note to the prop docs.

leMaik · 2017-12-25T10:53:55Z

+Add = pure(Add);
+Add.muiName = 'SvgIcon';
+
+export default Add;


Unrelated to this PR, but would it be possible to import these icons from material-ui-icons instead of copying them?

We'd end up with a circular dependancy (material-ui-icons depends on material-uo/SvgIcon), so not sure how that would work out in practice.

Oh, you're right. I guess this would be possible by npm linking packages/material-ui into packages/material-ui-icons (tools like lerna might even do this automagically, but I'm not sure). Maybe we should keep it as is then.

yarn workspace is another option.

mbrookes · 2017-12-28T02:42:27Z

@leMaik openIcon is done:

oliviertassinari

I'm still facing the same keyboard issue. Here is me pressing the down array key multiple times:

Otherwise. I can't see any important issue. I can find some time to polish the implementation if you need.

oliviertassinari · 2017-12-29T15:55:17Z

+    });
+
+    return (
+      <div>


For the demos. Have you considered the option to embedded the element in the demo block?
Right now, we have two demos. I can show both speed dial. They overlap.

oliviertassinari · 2017-12-29T15:59:13Z

@@ -0,0 +1,2 @@
+export { default } from './SpeedDial';
+export { default as SpeedDialButton } from './SpeedDialButton';


SpeedDialIcon ?

oliviertassinari · 2017-12-29T16:02:53Z

+            data-mui-test="SpeedDialButton"
+            {...ButtonProps}
+          >
+            <SpeedDialIcon icon={icon} openIcon={openIcon} open={open} {...SpeedDialIconProps} />


What about reversing the abstraction: exposing SpeedDialIcon in the demos instead of the SpeedDialIconProps property? So people keep full control over what they add.

oliviertassinari · 2017-12-29T16:03:43Z

@@ -1,5 +1,5 @@
 ---
-components: Button, IconButton, ButtonBase
+components: Button, IconButton, ButtonBase, SpeedDial, SpeedDialButton


SpeedDialIcon?

mbrookes · 2017-12-30T00:15:36Z

Regarding down = up: as I mentioned when you raised this concern before, this is by design. Please see: #9539 (comment)

When I saw your screenshot I thought you were now saying it loops from top to bottom, but just realise when I couldn't reproduce it that it's just your gif looping! (How are you taking a screenshot that doesn't inclue the time it takes to stop the recording? 😄)

mbrookes · 2017-12-30T00:31:15Z

@oliviertassinari Regarding the API, are you happy with SpeedDialButton (a la BottomNavigationButton), or would SpeedDialItem (like ListItem and MenuItem) be preferable (Speed Dial is a sort of menu)? Or perhaps SpeedDialAction, since the MD spec calls these actions?

oliviertassinari · 2018-01-01T11:10:17Z

@mbrookes The material specification is using the "action" wording on the bottom navigation page too. I would vote for BottomNavigationAction and SpeedDialAction .

mbrookes · 2018-01-01T12:56:11Z

Cool, thanks! I was leaning towards Action for SpeedDial, so great that BottomNav is the same. I'll change that in a separate PR.

…ction (#9692) This is for consistency with the spec, and with the upcoming SpeedDial component. Motivated by: #9539 (comment) ### Breaking change -Rename the `BottomNavigationButton` component ```diff -import BottomNavigation, { BottomNavigationButton } from 'material-ui/BottomNavigation'; +import BottomNavigation, { BottomNavigationAction } from 'material-ui/BottomNavigation'; ```

@oliviertassinari

[SpeedDial] Fix index.js [SpeedDial] Add to supported components [SpeedDial] Fix most review feedback, reinstate lost commit for flex-direction [SpeedDial] Improve the ARIA labelling Follow: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html [SpeedDial] Simplify layout [SpeedDial] Add keyboard support [SpeedDial] Support bi-directional arrow keys [SpeedDial] Use relative imports [SpeedDialButton] Give delay a default and make it optional (easier to test) [SpeedDial] Use icon prop instead of children [SpeedDial] Add some basic tests [SpeedDial] Add regression test [SpeedDial] Revert some unintended changes [SpeedDial] add defaults for bool props [SpeedDialButton] Handle enter / space key with onClick The Tooltip wasn't closing when a SpeedDialButton was selected using the enter / space key. By usiing a controlled Tooltip, linking the open state of the Tooltip to the open state of the actions, and triggering the onClick handler when a relevent key event occurs, we can ensure that the Tooltip closes when an action is initiated by key press. [SpeedDial] Add support for open on hover / focus [SpeedDial] Add API docs [SpeedDial] Tidy up tests Note: 'SpeedDialButton should call handleTooltipOpen & handleTooltipClose on mouseOver & blur' test is failing. Not sure why, or how to debug... [SpeedDial] Add support for null children [SpeedDial] Move Add icon to internal/svg-icons [SpeedDial] Move Add icon to internal/svg-icons [docs] Use theme.spacing.unit for SpeedDial fixed positioning [SpeedDialButton] Simplify class names {SpeedDial] Fix additional review feedback. Thanks @oliviertassinari! [SpeedDial] Improve ARIA labelling [SpeedDial] Add escape key support Follows: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html [SpeedDial] Test for fab ref I have *no* clue if this is the right way to go about this! [SpeedDial] Update API docs [SpeedDial] Add openIcon prop & docs demo [SpeedDial] Use Fade transition This prevents focus conflicts when more than one SpeedDial is present but hidden. [SpeedDial] Refactor icon code into spearate component, and fix tests [SpeedDial] Update API docs [SpeedDial] Expose the SpeedDialIcon component [SpeedDial] Rename label prop to ariaLabel to better reflect its purpose Also remove the API docs comment regarding unique names, as using the Fade transition with mitigates this issue. [SpeedDial] Render within Demo container [SpeedDial] Add Zoom transition component [SpeedDial] Persist the chosen key direction [SpeedDial] better zIndex [SpeedDial] Fix tests failing after rebase, and code changes [SpeedDial] Rename SpeedDialButton to SpeedDialAction

gregnb · 2018-01-09T23:36:12Z

I was looking at what components still needed to be done for v1 and I saw that the Floating action Button - Toolbar: https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions

I didn't want to try to work on something that was being done so I searched and came across this thread. Now I know it's not the same exact component, but I was wondering though, since these all fold under FOB what if it had one general component to call that you could apply which type it was?

  <ActionButton type="Toolbar|SpeedDial|Morph|Full screen">
    ...
  </ActionButton>
   
  or

  <FloatingAction type="Toolbar|SpeedDial|Morph|Full screen">
    ...
  </FloatingAction>

Or, is it better to just keep these separate? If so, I would like to work on that Toolbar one if it's ok

mbrookes · 2018-01-10T00:46:40Z

@gregnb Thanks for raising this.

I could very easily have missed one (it's not like I've checked every app, so please correct me here!), but I'm not aware of any applications that use the FAB Toolbar approach.

gregnb · 2018-01-10T00:50:11Z

@mbrookes Ah ok, I will have to defer to you on this one. I really have not done the research on the FAB Toolbar usage. Was just browsing what was on the todo list for V1 :)

mbrookes · 2018-01-10T01:33:11Z

Todo list?

gregnb · 2018-01-10T01:34:40Z

Sorry, this list here of what is supported and what is not:
https://material-ui.com/getting-started/supported-components/

mbrookes · 2018-01-10T10:45:58Z

Ah, right. We don't aim to (directly) support every use case, that's just to show what is supported.

RuneKR · 2018-02-08T21:38:43Z

any news on when this gets merged?

sambegin · 2018-02-12T14:58:59Z

post v1 milestone just been added to this issue. That means we won't see it released any soon ? Any help we could provide to accelerate the process of releasing this feature ?

oliviertassinari · 2018-02-12T19:53:07Z

post v1 milestone just been added to this issue.

@sambegin I believe we can defer the work on this enhancement. It doesn't mean @mbrookes won't push it forward.

mbrookes · 2018-02-12T20:23:32Z

@oliviertassinari Shall I open a PR for the WIP lab package?

oliviertassinari · 2018-02-12T20:25:59Z

@mbrookes Sure :)

mbrookes · 2018-02-13T22:44:11Z

Closed for #10288.

raymondsze · 2018-03-02T08:28:34Z

I grabbed the pull request and used in my project. Seems there is performance issue in Safari.
When the SpeedDial button is clicked, only the first SpeedDialAction is shown. The second and later SpeedDialAction show after a long delay.

oliviertassinari · 2018-03-02T08:30:25Z

@raymondsze The component was pushed on npm under @material-ui/lab.

mbrookes · 2018-03-02T16:54:40Z

@raymondsze I'm looking at docs demo in Safari, and not seeing an issue. I'd suggest using the published version as @oliviertassinari mentioned.

oliviertassinari reviewed Dec 18, 2017

View reviewed changes

oliviertassinari added the type: new feature Expand the scope of the product to solve a new problem. label Dec 18, 2017

oliviertassinari reviewed Dec 18, 2017

View reviewed changes

oliviertassinari reviewed Dec 19, 2017

View reviewed changes

oliviertassinari reviewed Dec 22, 2017

View reviewed changes

mbrookes requested a review from leMaik December 23, 2017 21:22

leMaik reviewed Dec 25, 2017

View reviewed changes

oliviertassinari reviewed Dec 29, 2017

View reviewed changes

oliviertassinari assigned mbrookes Dec 31, 2017

mbrookes mentioned this pull request Jan 1, 2018

[BottomNavigation] Rename BottomNavigationButton to BottomNavigationAction #9692

Merged

oliviertassinari added the package: lab Specific to the lab. label Feb 3, 2018

mbrookes mentioned this pull request Feb 9, 2018

Component Request Fab Menu #10220

Closed

oliviertassinari added this to the post v1 milestone Feb 11, 2018

mbrookes closed this Feb 13, 2018

mbrookes mentioned this pull request Feb 20, 2018

[FloatingActionButton] Support horizontal and vertical speed dials #2851

Closed

mbrookes deleted the speed-dial branch March 2, 2018 09:37

aarontropy mentioned this pull request Apr 3, 2018

[SpeedDial] Add a prop to change orientation of actions #10895

Closed

1 task

oliviertassinari added scope: speed dial Changes related to the speed dial. and removed package: lab Specific to the lab. labels Jan 9, 2021

		@@ -0,0 +1,2 @@
		export { default } from './SpeedDial';
		export { default as SpeedDialButton } from './SpeedDialButton';

Uh oh!

Uh oh!

Conversation

mbrookes commented Dec 18, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mbrookes commented Dec 18, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oliviertassinari left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari commented Dec 18, 2017

Uh oh!

mbrookes commented Dec 18, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mbrookes Dec 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mbrookes Dec 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari commented Dec 19, 2017

Uh oh!

mbrookes commented Dec 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

mbrookes commented Dec 18, 2017 •

edited

Loading

mbrookes commented Dec 18, 2017 •

edited

Loading

mbrookes commented Dec 18, 2017 •

edited

Loading

mbrookes Dec 20, 2017 •

edited

Loading

mbrookes Dec 20, 2017 •

edited

Loading

mbrookes commented Dec 20, 2017 •

edited

Loading

mbrookes Dec 22, 2017 •

edited

Loading