adding share button to share route info to different social media platforms #570
Conversation
|
Need feedback on button color - should not be blue obviously |
|
It would be nice to have something like the "English" button on the Material UI website (white with no background and a caret pointing down):
|
|
Kinda like this: https://material-ui.com/components/app-bar/#app-bar-with-menu |
|
I'd suggest using the typical share icons instead of the word "share" |
There was a problem hiding this comment.
So to recap:
- Use the share icon from here
- Use the white link with no background color (not a button; see my earlier post)
- Have your dropdown use other icons from here (like for twitter, etc.)
|
Feel free to take a look at PR
|
| <Menu | ||
| elevation={0} | ||
| getContentAnchorEl={null} | ||
| anchorOrigin={{ | ||
| vertical: 'bottom', | ||
| horizontal: 'center', | ||
| }} | ||
| transformOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'center', | ||
| }} | ||
| {...props} |
There was a problem hiding this comment.
I think it looks a bit weird for the menu to pop down from the center of the share button. It would be better if the share button and the share menu were left-aligned.
There was a problem hiding this comment.
I would still suggest this change.
There was a problem hiding this comment.
It loads from the right hand side now
Since it's right aligned to the page
| const shareComponents = { | ||
| twitter: TwitterShareButton, | ||
| reddit: RedditShareButton, | ||
| facebook: FacebookShareButton, | ||
| }; | ||
| const iconComponents = { | ||
| twitter: TwitterIcon, | ||
| reddit: RedditIcon, | ||
| facebook: FacebookIcon, | ||
| }; | ||
| const dropDownItems = [ | ||
| { | ||
| shareComponent: shareComponents.twitter, | ||
| icon: iconComponents.twitter, | ||
| label: 'Twitter', | ||
| }, | ||
| { | ||
| shareComponent: shareComponents.reddit, | ||
| icon: iconComponents.reddit, | ||
| label: 'Reddit', | ||
| }, | ||
| { | ||
| shareComponent: shareComponents.facebook, | ||
| icon: iconComponents.facebook, | ||
| label: 'Facebook', | ||
| }, |
There was a problem hiding this comment.
I might get rid of the shareComponents and iconComponents objects and just reference the TwitterShareButton, TwitterIcon, etc. in the dropDownItems directly. That makes it easier to add new sharing buttons later.
|
Chris, it looks like you might have to change some code now that the UI has been changed a lot. The share button will probably have to go in the white bar on the route screen:
|
|
note from our call: put the share button in the white header bar on the routes page (to the right of the date/time/route selectors). It doesn't make sense to add the share button to the header bar, because it doesn't make sense adding it to the blue bar (since that would imply that sharing is available on the entire app... and it makes less sense on the about page or the homepage). |
|
I'll review this. |
| const classes = useStyles(); | ||
| const { flex } = classes; | ||
| const url = window.location.href; | ||
| const theme = createMuiTheme({ |
| {selectedDirection ? ( | ||
| <> | ||
| <FormControl className={classes.formControl}> | ||
| <ReactSelect | ||
| onChange={onSelectFirstStop} | ||
| inputId="fromstop" | ||
| textFieldProps={{ | ||
| label: ( | ||
| <span style={labelStyle}> | ||
| Origin Stop{' '} | ||
| {graphParams.startStopId ? ( |
There was a problem hiding this comment.
Did you change this, or was this imported from master?
| <Menu | ||
| elevation={0} | ||
| getContentAnchorEl={null} | ||
| anchorOrigin={{ | ||
| vertical: 'bottom', | ||
| horizontal: 'center', | ||
| }} | ||
| transformOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'center', | ||
| }} | ||
| {...props} |
There was a problem hiding this comment.
I would still suggest this change.
frontend/src/components/Share.jsx
Outdated
|
|
||
| const StyledMenu = withStyles({ | ||
| paper: { | ||
| border: '1px solid #d3d4d5', |
There was a problem hiding this comment.
Can you get a color from the MuiTheme provider here instead of hardcoding one?
| <span style={labelStyle}> | ||
| Direction{' '} | ||
| {graphParams.directionId ? ( | ||
| <div className={classes.shareContainer}> |
There was a problem hiding this comment.
changes are due to whitespace from me adding CSS to include the Share drop down now
Added div with styling (shareContainer class)
Fixes #517
Proposed changes
Add a share button using Material UI to show a drop down of platforms to share routes to
Screenshot