Commit 4eea8edf authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

changing the favorite button to onHover

parent f3245ca0
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"array-sort": "^0.1.4",
"autosuggest-highlight": "^3.1.0", "autosuggest-highlight": "^3.1.0",
"classnames": "^2.2.5", "classnames": "^2.2.5",
"fuzzysearch": "^1.0.3", "fuzzysearch": "^1.0.3",
......
...@@ -13,7 +13,7 @@ import classNames from 'classnames'; ...@@ -13,7 +13,7 @@ import classNames from 'classnames';
function customAppBar({ classes, handleMenuClick, isOpen}) { function customAppBar({ classes, handleMenuClick, isOpen}) {
return ( return (
<div > <div>
<AppBar position="absolute" > <AppBar position="absolute" >
<Toolbar> <Toolbar>
{/* <IconButton onClick={handleMenuClick} color="contrast" aria-label="Menu"> {/* <IconButton onClick={handleMenuClick} color="contrast" aria-label="Menu">
......
...@@ -4,7 +4,7 @@ import FacilityCard from '../containers/FacilityCard' ...@@ -4,7 +4,7 @@ import FacilityCard from '../containers/FacilityCard'
import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid';
import fuzzysearch from 'fuzzysearch'; import fuzzysearch from 'fuzzysearch';
const CardContainer = ({classes, searchTerm,facilities}) => { const CardContainer = ({classes, searchTerm,facilities,favorites}) => {
const filterCards = (facility) => { const filterCards = (facility) => {
const name = facility.facility_name.toLowerCase() const name = facility.facility_name.toLowerCase()
return name.includes(searchTerm.toLowerCase()) return name.includes(searchTerm.toLowerCase())
......
...@@ -4,16 +4,18 @@ import pink from 'material-ui/colors/pink'; ...@@ -4,16 +4,18 @@ import pink from 'material-ui/colors/pink';
import FavoriteBorderIcon from 'material-ui-icons/FavoriteBorder'; import FavoriteBorderIcon from 'material-ui-icons/FavoriteBorder';
import FavoriteIcon from 'material-ui-icons/Favorite'; import FavoriteIcon from 'material-ui-icons/Favorite';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames';
class FavoriteButton extends React.Component { class FavoriteButton extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
this.handleClick = this.handleClick.bind(this); isHovered: false,
}
} }
handleClick(e) { handleClick = (e) => {
e.stopPropagation(); //Stops the card from being selected in the sidebar. e.stopPropagation(); //Stops the card from being selected in the sidebar.
if (this.props.isFavorite) { if (this.props.isFavorite) {
...@@ -23,12 +25,15 @@ class FavoriteButton extends React.Component { ...@@ -23,12 +25,15 @@ class FavoriteButton extends React.Component {
} }
} }
render() { render() {
const {heart,heartFavorited,heartHover,heartNoHover} = this.props.classes;
const {isHovered} = this.props;
if (this.props.isFavorite) { if (this.props.isFavorite) {
return (<FavoriteIcon onClick={this.handleClick} className={this.props.classes.heart}/>); return (<FavoriteIcon onClick={this.handleClick} className={classNames(heart,heartFavorited)}/>);
} }
return (<FavoriteBorderIcon onClick={this.handleClick} className={this.props.classes.heart}/>); return (<FavoriteBorderIcon onClick={this.handleClick} className={classNames(heart,{[heartHover]:isHovered,[heartNoHover]:!isHovered})}/>);
} }
} }
...@@ -39,17 +44,25 @@ FavoriteButton.propTypes = { ...@@ -39,17 +44,25 @@ FavoriteButton.propTypes = {
addFavoriteFacility: PropTypes.func.isRequired, addFavoriteFacility: PropTypes.func.isRequired,
removeFavoriteFacility: PropTypes.func.isRequired, removeFavoriteFacility: PropTypes.func.isRequired,
}; };
const sizeScale = .75
const styleSheet = { const styleSheet = {
heart: { heart: {
position: 'absolute', position: 'absolute',
top: '0px', top: 0,
right: '0px', right: 0,
height: '24px', height: 24*sizeScale,
width: '24px', width: 24*sizeScale,
padding: '5px', padding: 5*sizeScale,
cursor: 'pointer', cursor: 'pointer',
color: pink[500] },
heartFavorited:{
color:pink[500]
},
heartHover:{
color:'grey'
},
heartNoHover:{
color:'rgba(0,0,0,0)'
} }
}; };
......
...@@ -39,10 +39,15 @@ import { ...@@ -39,10 +39,15 @@ import {
const materialColors = [red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, const materialColors = [red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green,
lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey]; lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey];
const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar}) => { class FacilityCard extends React.Component {
constructor(props){
const handleClick = () => { super(props)
setSidebar(facility) this.state = {
isHovered:false
}
}
handleClick = () => {
setSidebar(this.props.facility)
}; };
/** /**
...@@ -53,7 +58,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -53,7 +58,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
* @returns {string} The initials. * @returns {string} The initials.
* @deprecated * @deprecated
*/ */
const getInitials = name => { getInitials = name => {
//TODO: May want to allow initials to be more than 2 characters or use a different strategy to decide which characters to use. //TODO: May want to allow initials to be more than 2 characters or use a different strategy to decide which characters to use.
let words = removeBrackets(name).split(/[ -]+/); //TODO: Add case change to the regex (ex. IndAroma should be IA, not I). let words = removeBrackets(name).split(/[ -]+/); //TODO: Add case change to the regex (ex. IndAroma should be IA, not I).
...@@ -75,7 +80,6 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -75,7 +80,6 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
return words[0].substring(0, 1).toUpperCase() + words[words.length - 1].substring(0, 1).toUpperCase(); return words[0].substring(0, 1).toUpperCase() + words[words.length - 1].substring(0, 1).toUpperCase();
}; };
/** /**
* Gets a material color based off the facility's slug. * Gets a material color based off the facility's slug.
* *
...@@ -83,7 +87,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -83,7 +87,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
* @return {string} The color code (in hex format) of a material color. * @return {string} The color code (in hex format) of a material color.
* @deprecated * @deprecated
*/ */
const materialColorFromSlug = slug => { materialColorFromSlug = slug => {
/* /*
Generates the hash code... Generates the hash code...
...@@ -111,15 +115,26 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -111,15 +115,26 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
return materialColors[Math.abs(hash) % 19][((Math.abs(hash) % 7) + 3) * 100]; return materialColors[Math.abs(hash) % 19][((Math.abs(hash) % 7) + 3) * 100];
}; };
handleMouseEnter = () =>{
this.setState({
isHovered:true
})
}
handleMouseLeave = () =>{
this.setState({
isHovered:false
})
}
/** /**
* By adding this property to an element, the text will not exceed 2 lines. On webkit browsers, * By adding this property to an element, the text will not exceed 2 lines. On webkit browsers,
* -webkit-line-clamp will show ellipsis. This checks to see if the browser is webkit and uses * -webkit-line-clamp will show ellipsis. This checks to see if the browser is webkit and uses
* an appropriate class. * an appropriate class.
*/ */
const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis; render(){
const {classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar} = this.props
return ( const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis;
<Card onClick={handleClick} className={classes.root} raised> return (
<Card onClick={this.handleClick} className={classes.root} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={classes.media} <CardMedia className={classes.media}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/> image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
...@@ -130,7 +145,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -130,7 +145,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)} <FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/> addFavoriteFacility={addFavoriteFacility} isHovered={this.state.isHovered} removeFavoriteFacility={removeFavoriteFacility}/>
<CardContent className={classes.cardContent}> <CardContent className={classes.cardContent}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}> <Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
...@@ -163,10 +178,12 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -163,10 +178,12 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
</CardActions> </CardActions>
</Card> </Card>
) )
}
}; };
const sizeScale = .75
const styleSheet = { const styleSheet = {
root: { root: {
width: 250, width: 250 * sizeScale,
borderRadius: '5px', borderRadius: '5px',
position: 'relative' position: 'relative'
}, },
...@@ -181,21 +198,21 @@ const styleSheet = { ...@@ -181,21 +198,21 @@ const styleSheet = {
}, },
media: { media: {
flex: 1, flex: 1,
height: '115px', height: 115*sizeScale,
}, },
logoContainer: { logoContainer: {
width: '100px', width: 100 * sizeScale,
height: '100px', height: 100 * sizeScale,
margin: 'auto', margin: 'auto',
marginTop: '-60px', marginTop: '-60px',
borderRadius: '90px', borderRadius: '90px',
border: '5px solid white', border: '5px solid white',
}, },
logo: { logo: {
width: '100px', width: 100 * sizeScale,
height: '100px', height: 100 * sizeScale,
margin: 'auto', margin: 'auto',
borderRadius: '90px', borderRadius: '50%',
boxShadow: '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)', boxShadow: '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
}, },
extraInfoWrapper: { extraInfoWrapper: {
......
...@@ -13,42 +13,7 @@ import Icon from 'material-ui/Icon'; ...@@ -13,42 +13,7 @@ import Icon from 'material-ui/Icon';
import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft'; import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
import KeyboardArrowRight from 'material-ui-icons/KeyboardArrowRight'; import KeyboardArrowRight from 'material-ui-icons/KeyboardArrowRight';
const suggestions = [
{ label: 'Afghanistan' },
{ label: 'Aland Islands' },
{ label: 'Albania' },
{ label: 'Algeria' },
{ label: 'American Samoa' },
{ label: 'Andorra' },
{ label: 'Angola' },
{ label: 'Anguilla' },
{ label: 'Antarctica' },
{ label: 'Antigua and Barbuda' },
{ label: 'Argentina' },
{ label: 'Armenia' },
{ label: 'Aruba' },
{ label: 'Australia' },
{ label: 'Austria' },
{ label: 'Azerbaijan' },
{ label: 'Bahamas' },
{ label: 'Bahrain' },
{ label: 'Bangladesh' },
{ label: 'Barbados' },
{ label: 'Belarus' },
{ label: 'Belgium' },
{ label: 'Belize' },
{ label: 'Benin' },
{ label: 'Bermuda' },
{ label: 'Bhutan' },
{ label: 'Bolivia, Plurinational State of' },
{ label: 'Bonaire, Sint Eustatius and Saba' },
{ label: 'Bosnia and Herzegovina' },
{ label: 'Botswana' },
{ label: 'Bouvet Island' },
{ label: 'Brazil' },
{ label: 'British Indian Ocean Territory' },
{ label: 'Brunei Darussalam' },
];
class Layout extends React.Component { class Layout extends React.Component {
constructor(props){ constructor(props){
...@@ -75,9 +40,9 @@ class Layout extends React.Component { ...@@ -75,9 +40,9 @@ class Layout extends React.Component {
<AppBar isOpen={false} handleMenuClick={ ()=>{} }/> <AppBar isOpen={false} handleMenuClick={ ()=>{} }/>
<div className={classes.container}> <div className={classes.container}>
<div className={classes.mainContent}> <div className={classes.mainContent}>
<SearchBar styles={styleSheet.searchBar} suggestions={suggestions}/> <SearchBar styles={styleSheet.searchBar} suggestions={{}}/>
<div className={classes.cardContainer}> <div className={classes.cardContainer}>
<CardContainer styles={styleSheet.cardContainer}searchTerm={this.props.searchTerm} facilities={this.props.facilities}/> <CardContainer styles={styleSheet.cardContainer}searchTerm={this.props.searchTerm} favorites={this.props.favorites} facilities={this.props.facilities}/>
</div> </div>
</div> </div>
<div className={classes.sidebarToggleContainer}> <div className={classes.sidebarToggleContainer}>
...@@ -149,6 +114,7 @@ const styleSheet = { ...@@ -149,6 +114,7 @@ const styleSheet = {
function mapStateToProps(state) { function mapStateToProps(state) {
return { return {
facilities: state.facilities.data, facilities: state.facilities.data,
favorites:state.ui.favorites,
searchTerm:state.ui.search.term, searchTerm:state.ui.search.term,
isLoading: state.facilities.isLoading, isLoading: state.facilities.isLoading,
sidebarFacility:state.ui.sidebar.facility, sidebarFacility:state.ui.sidebar.facility,
......
import { SET_FACILITIES,GET_FACILITIES } from '../actions/action-types' import { SET_FACILITIES,GET_FACILITIES } from '../actions/action-types'
const defaultState = { const defaultState = {
isLoading:false, isLoading:false,
data:[] data:[]
...@@ -12,6 +11,7 @@ export const facilities = (state = defaultState, action) => { ...@@ -12,6 +11,7 @@ export const facilities = (state = defaultState, action) => {
isLoading:true, isLoading:true,
}); });
case SET_FACILITIES: case SET_FACILITIES:
return { return {
data:action.facilities, data:action.facilities,
isLoading:false isLoading:false
......
...@@ -266,6 +266,14 @@ array-reduce@~0.0.0: ...@@ -266,6 +266,14 @@ array-reduce@~0.0.0:
version "0.0.0" version "0.0.0"
resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b" resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
array-sort@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-0.1.4.tgz#662855eaeb671b4188df4451b2f24a0753992b23"
dependencies:
default-compare "^1.0.0"
get-value "^2.0.6"
kind-of "^5.0.2"
array-union@^1.0.1: array-union@^1.0.1:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39" resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
...@@ -1938,6 +1946,12 @@ deepmerge@^1.5.1: ...@@ -1938,6 +1946,12 @@ deepmerge@^1.5.1:
version "1.5.1" version "1.5.1"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.1.tgz#c053bf06fd7276f1994f70c09a0760cb61a56237" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.1.tgz#c053bf06fd7276f1994f70c09a0760cb61a56237"
default-compare@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
dependencies:
kind-of "^5.0.2"
default-require-extensions@^1.0.0: default-require-extensions@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8" resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
...@@ -2946,6 +2960,10 @@ get-stdin@^4.0.1: ...@@ -2946,6 +2960,10 @@ get-stdin@^4.0.1:
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe" resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
get-value@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
getpass@^0.1.1: getpass@^0.1.1:
version "0.1.7" version "0.1.7"
resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa" resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
...@@ -4177,6 +4195,10 @@ kind-of@^4.0.0: ...@@ -4177,6 +4195,10 @@ kind-of@^4.0.0:
dependencies: dependencies:
is-buffer "^1.1.5" is-buffer "^1.1.5"
kind-of@^5.0.2:
version "5.1.0"
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
klaw@^1.0.0: klaw@^1.0.0:
version "1.3.1" version "1.3.1"
resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439" resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment