Commit 8607f3ca authored by Andrew Hrdy's avatar Andrew Hrdy

Changed all button and icon buttons to use material-components-web-react

parent 55875b3f
Pipeline #3118 failed with stage
in 1 minute and 37 seconds
......@@ -251,6 +251,118 @@
"resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
"integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
},
"@material/animation": {
"version": "0.39.0",
"resolved": "https://registry.npmjs.org/@material/animation/-/animation-0.39.0.tgz",
"integrity": "sha512-f3BGCba0GdYY+eGFnK0L08HLyljgEyBvMLoJoutP225IpvzsLLTqumL/796nFCsouWn6E3G+8BUVjAtzTjU2lA=="
},
"@material/base": {
"version": "0.39.0",
"resolved": "https://registry.npmjs.org/@material/base/-/base-0.39.0.tgz",
"integrity": "sha512-B+vMqnOR2JU2dzv/5UPKQUAZAj739pMkJkt3Zy7sJaQnw3j8wTKxiUMUhd9ZHaPx1FBlUNMn2PwOq8YZIn0svA=="
},
"@material/button": {
"version": "0.39.3",
"resolved": "https://registry.npmjs.org/@material/button/-/button-0.39.3.tgz",
"integrity": "sha512-O4QcglZ9kgixhHbUk+vLZYm5LKgImqd8VUeClBXL3sDrqNSQX047D17fLk6Fy3n3WKroZ1WkVbM9T9gQTBmaxA==",
"requires": {
"@material/elevation": "^0.39.1",
"@material/ripple": "^0.39.3",
"@material/rtl": "^0.39.1",
"@material/theme": "^0.39.1",
"@material/typography": "^0.39.0"
}
},
"@material/elevation": {
"version": "0.39.1",
"resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-0.39.1.tgz",
"integrity": "sha512-ir0lqwpkXhJxUQ6KdCTsM2wZze3Oc54knUMbCUnitOWzIRBvlXUO0zlpld5pj3Mb6ApESA6BiaJb4JfEZmX2MA==",
"requires": {
"@material/animation": "^0.39.0",
"@material/theme": "^0.39.1"
}
},
"@material/icon-button": {
"version": "0.39.3",
"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-0.39.3.tgz",
"integrity": "sha512-qogYy2MCC3PjOZt+93fD9sWgFYOVexXF3xjiZhDuP3zBy4fdSfaq0xx6P3vPZDEgG6JgDkedRuM6EBAU8FfU3A==",
"requires": {
"@material/base": "^0.39.0",
"@material/ripple": "^0.39.3",
"@material/theme": "^0.39.1"
}
},
"@material/react-button": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@material/react-button/-/react-button-0.5.0.tgz",
"integrity": "sha512-+VOMVGwBCMsyGY3xv+RyOpYTcrTqQyar8WyHMlo75kDBRPYT/rT8wemNljDZBs2J+nM1bSeqNFYaiiR19tjz/Q==",
"requires": {
"@material/button": "^0.39.0",
"@material/react-ripple": "^0.5.0",
"classnames": "^2.2.5",
"prop-types": "^15.6.1",
"react": "^16.4.2"
}
},
"@material/react-icon-button": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/@material/react-icon-button/-/react-icon-button-0.5.3.tgz",
"integrity": "sha512-sRXqGqD2shBf0AL9aSfJZwt4+V/dntS+J28E6oNHGMkTxBJHSOzgJgdZR9lisUHzpQ/eBvxmOg7YjERL7tpDjw==",
"requires": {
"@material/icon-button": "^0.39.0",
"@material/react-ripple": "^0.5.0",
"classnames": "^2.2.5",
"prop-types": "^15.6.1",
"react": "^16.3.2"
}
},
"@material/react-material-icon": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@material/react-material-icon/-/react-material-icon-0.5.0.tgz",
"integrity": "sha512-x9vLDLNhDDZBNY6I8tW1MDFa9hAdmgh/qDBB0CpoggPw9z5iNCN4spxPEBOHj6Y+Kf0+d7frQqUrNpPery9kpA==",
"requires": {
"@material/react-ripple": "^0.5.0",
"classnames": "^2.2.5",
"prop-types": "^15.6.1",
"react": "^16.4.2"
}
},
"@material/react-ripple": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@material/react-ripple/-/react-ripple-0.5.0.tgz",
"integrity": "sha512-Dlhzf4NuzT8vfE/yCEIWTAkHzv5DPFVD8kLpYqbs8LFWJ22oM5dj/PUn0r4Uqu4Nje2Xo5h8gDqVaU6EInKY/Q==",
"requires": {
"@material/ripple": "^0.39.0",
"classnames": "^2.2.5",
"prop-types": "^15.6.1",
"react": "^16.4.2"
}
},
"@material/ripple": {
"version": "0.39.3",
"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.39.3.tgz",
"integrity": "sha512-MwQjgwK9h13MdKGJT3RTDf9NjCoAS3LmnFpz1fxXgExA1QnoUbB1o7cEaPmqAtZopKVDCf52w1l6Mpf9qEhnCQ==",
"requires": {
"@material/animation": "^0.39.0",
"@material/base": "^0.39.0",
"@material/theme": "^0.39.1"
}
},
"@material/rtl": {
"version": "0.39.1",
"resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-0.39.1.tgz",
"integrity": "sha512-6RcXv6tQladbl+SboEHUykiDAz7dE5DjBuLNV0KD7yEUCcUV41WXZ5e4oUd1nDWnK0vHzFtNM7D6BGMPZ2T3zA=="
},
"@material/theme": {
"version": "0.39.1",
"resolved": "https://registry.npmjs.org/@material/theme/-/theme-0.39.1.tgz",
"integrity": "sha512-c7xjzzHdF4kBl66VJfATBAV9cwD/6TOyVPOWiK5rPxmu9g7uEAe1HmupqJRR1pMFCPX2w85gfvIsxh79EU6YJA=="
},
"@material/typography": {
"version": "0.39.0",
"resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.39.0.tgz",
"integrity": "sha512-S7YTR2mXuAaPvsgX6jyT1YvWQhH2xHWi+SKJvlunoF/Dw6vq6Ud+APmqigHVRPNCcFt4zkbM7C64IxYjjkIApQ=="
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
......
......@@ -4,6 +4,9 @@
"homepage": "./",
"private": true,
"dependencies": {
"@material/react-button": "0.5.0",
"@material/react-icon-button": "0.5.3",
"@material/react-material-icon": "0.5.0",
"array-sort": "^0.1.4",
"classnames": "^2.2.5",
"mapbox-gl": "^0.49.0",
......
......@@ -31,6 +31,7 @@
<link rel="manifest" href="./manifest.json">
<link rel="shortcut icon" href="./favicon.png">
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
......
......@@ -2,9 +2,9 @@ import React from 'react';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import Button from '@material/react-button/dist';
import IconButton from '@material/react-icon-button/dist';
import MaterialIcon from '@material/react-material-icon/dist';
import SearchBar from '../containers/SearchBar';
import classNames from 'classnames';
import AlertContainer from '../containers/AlertContainer';
......@@ -51,7 +51,7 @@ class CustomAppBar extends React.Component {
})}/>
<IconButton onClick={this.toggleExpand} aria-label="Menu"
className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
<MenuIcon/>
<MaterialIcon icon="menu" />
</IconButton>
</div>
<div
......
......@@ -3,12 +3,12 @@ import Dialog from 'material-ui/Dialog';
import Grid from 'material-ui/Grid';
import FacilityLabels from './FacilityLabels';
import WeekHours from './WeekHours';
import Button from 'material-ui/Button';
import Button from '@material/react-button/dist';
import Avatar from 'material-ui/Avatar';
import Typography from 'material-ui/Typography';
import MapDialog from './MapDialog';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import IconButton from '@material/react-icon-button/dist';
import MaterialIcon from '@material/react-material-icon/dist';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
......@@ -39,7 +39,7 @@ class FacilityDialog extends React.Component {
paper: 'fd-dialog-paper'
}} open={isOpen} onClose={onClose}>
<IconButton className={'fd-close-btn'} onClick={onClose}>
<CloseIcon />
<MaterialIcon icon="close" />
</IconButton>
<Grid container className={'fd-container'} justify={'center'}>
<Grid item className={'fd-header-container'}>
......
......@@ -2,8 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import Dialog from 'material-ui/Dialog';
import FacilitiesMap from './FacilitiesMap';
import IconButton from 'material-ui/IconButton';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from '@material/react-icon-button/dist';
import MaterialIcon from '@material/react-material-icon/dist';
class MapDialog extends React.Component {
handleRequestClose = () => {
......@@ -20,7 +20,7 @@ class MapDialog extends React.Component {
width: width || '100%'
}}>
<IconButton className={'map-dialog-close-btn'} onClick={this.handleRequestClose}>
<CloseIcon />
<MaterialIcon icon="close" />
</IconButton>
<FacilitiesMap
......
......@@ -8,8 +8,8 @@ import FacilitiesMap from '../components/FacilitiesMap';
import MapDialog from '../components/MapDialog';
import classNames from 'classnames';
import WeekHours from './WeekHours';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import IconButton from '@material/react-icon-button/dist';
import MaterialIcon from '@material/react-material-icon/dist';
import {removeBrackets} from '../utils/nameUtils';
import phoneFormatter from 'phone-formatter';
import ReactPiwik from 'react-piwik';
......@@ -53,7 +53,7 @@ class Sidebar extends React.Component {
<Paper
className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
<IconButton className={'sidebar-close-btn'} onClick={this.handleSidebarClose}>
<CloseIcon />
<MaterialIcon icon="close"/>
</IconButton>
<div className={'sidebar-row1'}>
<Avatar className={'sidebar-avatar'} src={facility.logo} />
......
import React from 'react';
import {findDOMNode} from 'react-dom';
import IconButton from 'material-ui/IconButton';
import IconButton from '@material/react-icon-button/dist';
import MaterialIcon from '@material/react-material-icon/dist';
import Popover from 'material-ui/Popover';
import Alert from '../components/Alert';
import NotificationsIcon from 'material-ui-icons/Notifications';
import CloseIcon from 'material-ui-icons/Close';
import Typography from 'material-ui/Typography';
import {connect} from 'react-redux';
import {viewAlert} from '../actions/api';
......@@ -51,9 +50,7 @@ class AlertContainer extends React.Component {
const activeAlerts = alerts.filter(this.isAlertActive);
return (
<div>
<IconButton classes={{
root: 'alert-container-btn'
}} ref={this.handleBtnRef} onClick={this.handleOpen}>
<IconButton className="alert-container-btn" ref={this.handleBtnRef} onClick={this.handleOpen}>
{activeAlerts.filter((alert) => !alert.viewed).length !== 0 &&
<span className={'alert-container-number'}>
<Typography type={'caption'} className={'alert-container-number-text'}>
......@@ -61,8 +58,7 @@ class AlertContainer extends React.Component {
</Typography>
</span>}
<NotificationsIcon>
</NotificationsIcon>
<MaterialIcon icon="notifications" />
</IconButton>
<Popover
open={this.state.isOpen}
......@@ -82,7 +78,7 @@ class AlertContainer extends React.Component {
Alerts
</Typography>
<IconButton className={'alert-container-close-btn'} onClick={this.handleClose}>
<CloseIcon className={'alert-container-close-icon'}/>
<MaterialIcon icon="close" className={'alert-container-close-icon'} />
</IconButton>
</div>
{
......
......@@ -2,10 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {setCampusRegion, setSearchTerm} from '../actions/ui';
import SearchIcon from 'material-ui-icons/Search';
import CloseIcon from 'material-ui-icons/Close';
import ArrowBackIcon from 'material-ui-icons/ArrowBack';
import IconButton from 'material-ui/IconButton';
import IconButton from '@material/react-icon-button';
import MaterialIcon from '@material/react-material-icon';
import Input from 'material-ui/Input';
import Paper from 'material-ui/Paper';
import {MenuItem} from 'material-ui/Menu';
......@@ -92,11 +90,11 @@ class SearchBar extends React.Component {
return (
<Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus',
this.state.value && 'search-bar-has-value', this.state.isMobileOpen && 'search-bar-mobile-open')}>
<IconButton onClick={this.handleMobileExpand} disableRipple className={'search-bar-search-btn'}>
<SearchIcon className={'search-bar-search-icon'}/>
<IconButton onClick={this.handleMobileExpand} className={'search-bar-search-btn'}>
<MaterialIcon icon="search" className={'search-bar-search-icon'} />
</IconButton>
<IconButton onClick={this.handleMobileCollapse} disableRipple className={'search-bar-back-btn'}>
<ArrowBackIcon className={'search-bar-back-icon'}/>
<IconButton onClick={this.handleMobileCollapse} className={'search-bar-back-btn'}>
<MaterialIcon icon="arrow_back" className={'search-bar-back-icon'} />
</IconButton>
<Input
placeholder="Name, Location, etc."
......@@ -113,8 +111,8 @@ class SearchBar extends React.Component {
inputRef={(el) => this.inputElement = el}
value={this.state.value}
/>
<IconButton onClick={this.clear} disableRipple className={'search-bar-close-btn'}>
<CloseIcon/>
<IconButton onClick={this.clear} className={'search-bar-close-btn'}>
<MaterialIcon icon="close" />
</IconButton>
<FormControl className={'search-bar-campus-control'}>
<Select
......
@import '../variables';
@import '@material/button/mixins';
.app-bar {
background-color: white !important;
......@@ -20,6 +21,10 @@
align-items: center;
}
.app-bar-link-button {
@include mdc-button-filled-accessible(white);
}
@media screen and (min-width: map-get($breakpoints, lg)) {
.app-bar-logo-name {
margin-right: auto !important;
......
@import '../variables';
@import '@material/button/mixins';
@import '@material/icon-button/mixins';
.fd-small-grid {
padding: 4px !important;
......@@ -15,11 +17,11 @@
}
.fd-close-btn {
position: absolute !important;
width: 24px !important;
height: 24px !important;
position: absolute;
top: 5px;
right: 5px;
@include mdc-icon-button-size(24px, 24px, 0);
}
.fd-header-container {
......@@ -79,6 +81,8 @@
.fd-toggle-map-btn {
width: 100%;
@include mdc-button-filled-accessible(white);
}
//Above sm
......
@import '@material/icon-button/mixins';
.map-dialog-close-btn {
position: absolute !important;
position: absolute;
z-index: 100;
top: 10px;
left: 10px;
width: 30px !important;
height: 30px !important;
background-color: white !important;
border-radius: 5px !important;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
@include mdc-icon-button-size(30px, 30px, 0);
}
\ No newline at end of file
@import '../_variables.scss';
@import '../_mixins.scss';
@import '@material/icon-button/mixins';
.sidebar-label-row {
display: flex;
......@@ -35,11 +36,11 @@
}
.sidebar-close-btn {
position: absolute !important;
width: 24px !important;
height: 24px !important;
position: absolute;
top: 5px;
right: 5px;
@include mdc-icon-button-size(24px, 24px, 0);
}
.sidebar-root::-webkit-scrollbar {
......
@import '@material/icon-button/mixins';
.alert-container-btn {
color: rgba(0, 0, 0, 0.4) !important;
color: rgba(0, 0, 0, 0.4);
}
.alert-container-popover {
......@@ -8,13 +10,13 @@
}
.alert-container-close-btn {
width: 20px !important;
height: 20px !important;
}
.alert-container-close-icon {
width: 20px !important;
height: 20px !important;
@include mdc-icon-button-size(20px, 20px, 0);
.alert-container-close-icon {
font-size: 20px;
height: 20px;
width: 20px;
}
}
.alert-container-header {
......
@import '../_variables.scss';
@import '@material/icon-button/mixins';
.search-bar-paper-background {
height: 44px;
......@@ -10,13 +11,23 @@
}
.search-bar-search-btn {
width: 44px !important;
height: 44px !important;
cursor: default !important;
cursor: default;
@include mdc-icon-button-size(44px, 44px, 0);
&:before {
content: none;
}
}
.search-bar-back-btn {
display: none !important;
color: rgba(0, 0, 0, 0.54);
&:before {
content: none;
}
}
.search-bar-search-icon, .search-bar-arrow-icon {
......@@ -24,6 +35,12 @@
color: rgba(0, 0, 0, 0.54);
}
.search-bar-close-btn {
&:before {
content: none;
}
}
.search-bar-arrow-icon {
display: none !important;
}
......@@ -35,9 +52,14 @@
}
.search-bar-close-btn {
width: 44px !important;
height: 44px !important;
display: none !important;
display: none;
color: rgba(0, 0, 0, 0.54);
@include mdc-icon-button-size(44px, 44px, 0);
&:before {
content: none;
}
}
.search-bar-campus-control {
......
@import '@material/react-button/index';
@import '@material/react-icon-button/index';
@import '@material/react-material-icon/index';
\ No newline at end of file
@import './material/material.scss';
@import './variables.scss';
@import './mixins.scss';
/* Components */
......
......@@ -36,7 +36,12 @@ const scssLoader = {
'style-loader',
'css-loader',
postCssLoader,
'sass-loader'
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules']
}
}
]
};
......
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