Skip to content

GitLab

W
whats-open-web
Commit 4eea8edf authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files
Options

changing the favorite button to onHover

parent f3245ca0
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 72 deletions
package.json
View file @ 4eea8edf
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"array-sort": "^0.1.4",
"autosuggest-highlight": "^3.1.0",
"classnames": "^2.2.5",
"fuzzysearch": "^1.0.3",
......
src/components/AppBar.js
View file @ 4eea8edf
......@@ -13,7 +13,7 @@ import classNames from 'classnames';
function customAppBar({ classes, handleMenuClick, isOpen}) {
return (
<div >
<div>
<AppBar position="absolute" >
<Toolbar>
{/* <IconButton onClick={handleMenuClick} color="contrast" aria-label="Menu">
......
src/components/CardContainer.js
View file @ 4eea8edf
......@@ -4,7 +4,7 @@ import FacilityCard from '../containers/FacilityCard'
import Grid from 'material-ui/Grid';
import fuzzysearch from 'fuzzysearch';
const CardContainer = ({classes, searchTerm,facilities}) => {
const CardContainer = ({classes, searchTerm,facilities,favorites}) => {
const filterCards = (facility) => {
const name = facility.facility_name.toLowerCase()
return name.includes(searchTerm.toLowerCase())
......
src/components/FavoriteButton.js
View file @ 4eea8edf
......@@ -4,16 +4,18 @@ import pink from 'material-ui/colors/pink';
import FavoriteBorderIcon from 'material-ui-icons/FavoriteBorder';
import FavoriteIcon from 'material-ui-icons/Favorite';
import PropTypes from 'prop-types';
import classNames from 'classnames';
class FavoriteButton extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
isHovered: false,
}
}
handleClick(e) {
handleClick = (e) => {
e.stopPropagation(); //Stops the card from being selected in the sidebar.
if (this.props.isFavorite) {
......@@ -23,12 +25,15 @@ class FavoriteButton extends React.Component {
}
}
render() {
const {heart,heartFavorited,heartHover,heartNoHover} = this.props.classes;
const {isHovered} = this.props;
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 = {
addFavoriteFacility: PropTypes.func.isRequired,
removeFavoriteFacility: PropTypes.func.isRequired,
};
const sizeScale = .75
const styleSheet = {
heart: {
position: 'absolute',
top: '0px',
right: '0px',
height: '24px',
width: '24px',
padding: '5px',
top: 0,
right: 0,
height: 24*sizeScale,
width: 24*sizeScale,
padding: 5*sizeScale,
cursor: 'pointer',
color: pink[500]
},
heartFavorited:{
color:pink[500]
},
heartHover:{
color:'grey'
},
heartNoHover:{
color:'rgba(0,0,0,0)'
}
};
......
src/containers/FacilityCard.js
View file @ 4eea8edf
......@@ -39,10 +39,15 @@ import {
const materialColors = [red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green,
lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey];
const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar}) => {
const handleClick = () => {
setSidebar(facility)
class FacilityCard extends React.Component {
constructor(props){
super(props)
this.state = {
isHovered:false
}
}
handleClick = () => {
setSidebar(this.props.facility)
};
/**
......@@ -53,7 +58,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
* @returns {string} The initials.
* @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.
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
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.
*
......@@ -83,7 +87,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
* @return {string} The color code (in hex format) of a material color.
* @deprecated
*/
const materialColorFromSlug = slug => {
materialColorFromSlug = slug => {
/*
Generates the hash code...
......@@ -111,15 +115,26 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
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,
* -webkit-line-clamp will show ellipsis. This checks to see if the browser is webkit and uses
* an appropriate class.
*/
const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis;
return (
<Card onClick={handleClick} className={classes.root} raised>
render(){
const {classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar} = this.props
const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis;
return (
<Card onClick={this.handleClick} className={classes.root} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={classes.media}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
......@@ -130,7 +145,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/>
addFavoriteFacility={addFavoriteFacility} isHovered={this.state.isHovered} removeFavoriteFacility={removeFavoriteFacility}/>
<CardContent className={classes.cardContent}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
......@@ -163,10 +178,12 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
</CardActions>
</Card>
)
}
};
const sizeScale = .75
const styleSheet = {
root: {
width: 250,
width: 250 * sizeScale,
borderRadius: '5px',
position: 'relative'
},
......@@ -181,21 +198,21 @@ const styleSheet = {
},
media: {
flex: 1,
height: '115px',
height: 115*sizeScale,
},
logoContainer: {
width: '100px',
height: '100px',
width: 100 * sizeScale,
height: 100 * sizeScale,
margin: 'auto',
marginTop: '-60px',
borderRadius: '90px',
border: '5px solid white',
},
logo: {
width: '100px',
height: '100px',
width: 100 * sizeScale,
height: 100 * sizeScale,
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)',
},
extraInfoWrapper: {
......
src/containers/Layout.js
View file @ 4eea8edf
......@@ -13,42 +13,7 @@ import Icon from 'material-ui/Icon';
import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
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 {
constructor(props){
......@@ -75,9 +40,9 @@ class Layout extends React.Component {
<AppBar isOpen={false} handleMenuClick={ ()=>{} }/>
<div className={classes.container}>
<div className={classes.mainContent}>
<SearchBar styles={styleSheet.searchBar} suggestions={suggestions}/>
<SearchBar styles={styleSheet.searchBar} suggestions={{}}/>
<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 className={classes.sidebarToggleContainer}>
......@@ -149,6 +114,7 @@ const styleSheet = {
function mapStateToProps(state) {
return {
facilities: state.facilities.data,
favorites:state.ui.favorites,
searchTerm:state.ui.search.term,
isLoading: state.facilities.isLoading,
sidebarFacility:state.ui.sidebar.facility,
......
src/reducers/api.js
View file @ 4eea8edf
import { SET_FACILITIES,GET_FACILITIES } from '../actions/action-types'
const defaultState = {
isLoading:false,
data:[]
......@@ -12,6 +11,7 @@ export const facilities = (state = defaultState, action) => {
isLoading:true,
});
case SET_FACILITIES:
return {
data:action.facilities,
isLoading:false
......
yarn.lock
View file @ 4eea8edf
......@@ -266,6 +266,14 @@ array-reduce@~0.0.0:
version "0.0.0"
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:
version "1.0.2"
resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
......@@ -1938,6 +1946,12 @@ deepmerge@^1.5.1:
version "1.5.1"
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:
version "1.0.0"
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:
version "4.0.1"
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:
version "0.1.7"
resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
......@@ -4177,6 +4195,10 @@ kind-of@^4.0.0:
dependencies:
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:
version "1.3.1"
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