sipp11
/
grunt-front
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

FontAwesome refactoring

dev
sipp11 6 years ago
parent
4a87a75674
commit
f4f1fd10fc
11 changed files with 61 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 20
      src/App.js
  3. 7
      src/components/CalendarList.js
  4. 14
      src/components/FareAttributesDetail.js
  5. 5
      src/components/FareList.js
  6. 11
      src/components/FloatPane.js
  7. 9
      src/components/Login.js
  8. 15
      src/components/Nav.js
  9. 3
      src/components/RouteList.js
  10. 3
      src/components/Spinner.js
  11. 5
      src/components/StopList.js

1
package.json
Unescape View File

@ -25,6 +25,7 @@
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-scripts": "1.1.4", "react-scripts": "1.1.4",
"react-select": "^2.0.0-beta.7", "react-select": "^2.0.0-beta.7",
"react-visibility-sensor": "^5.0.1",
"redux": "^4.0.0", "redux": "^4.0.0",
"redux-api-middleware": "^2.3.0", "redux-api-middleware": "^2.3.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",

20
src/App.js
Unescape View File

@ -2,8 +2,11 @@ import React from 'react'
// import './App.css' // import './App.css'
import { Switch, Route } from 'react-router-dom' import { Switch, Route } from 'react-router-dom'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import {
import { faGhost, faSpinner } from '@fortawesome/free-solid-svg-icons' faGhost, faSpinner, faPlus, faSignInAlt, faSignOutAlt, faEnvelope,
faCheck, faExclamationTriangle, faKey, faSearch, faAlignJustify,
faCodeBranch, faSquare, faCheckSquare, faCompass,
} from '@fortawesome/free-solid-svg-icons'
import Main from './container/Main' import Main from './container/Main'
import Geo from './container/Geo' import Geo from './container/Geo'
@ -12,7 +15,20 @@ import Public from './container/Public'
import { LOGIN_PATH } from './constants/path' import { LOGIN_PATH } from './constants/path'
library.add(faGhost) library.add(faGhost)
library.add(faPlus)
library.add(faSignOutAlt)
library.add(faSignInAlt)
library.add(faSpinner) library.add(faSpinner)
library.add(faSearch)
library.add(faKey)
library.add(faCheck)
library.add(faEnvelope)
library.add(faExclamationTriangle)
library.add(faAlignJustify)
library.add(faCodeBranch)
library.add(faSquare)
library.add(faCheckSquare)
library.add(faCompass)
const App = () => ( const App = () => (
<Switch> <Switch>

7
src/components/CalendarList.js
Unescape View File

@ -2,6 +2,7 @@ import React, { Component } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { getCalendar } from '../actions/calendar' import { getCalendar } from '../actions/calendar'
import store from '../store' import store from '../store'
@ -27,8 +28,8 @@ margin-bottom: 1rem;
const CheckboxIcon = (props) => ( const CheckboxIcon = (props) => (
<GapBox checked={props.checked}> <GapBox checked={props.checked}>
{props.checked === true && <span><i className="fas fa-check-square"></i></span>} {props.checked === true && <span><FontAwesomeIcon icon="check-square" /></span>}
{props.checked !== true && <span><i className="fas fa-square"></i></span>} {props.checked !== true && <span><FontAwesomeIcon icon="square" /></span>}
</GapBox> </GapBox>
) )
@ -51,7 +52,7 @@ class CalendarList extends Component {
<nav className="level is-mobile"> <nav className="level is-mobile">
<p className="level-item has-text-centered"> <p className="level-item has-text-centered">
<Link className="link is-info" to={`${match.url}/new`}> <Link className="link is-info" to={`${match.url}/new`}>
<i className="fas fa-plus" /> New service <FontAwesomeIcon icon="plus" /> New service
</Link> </Link>
</p> </p>
</nav> </nav>

14
src/components/FareAttributesDetail.js
Unescape View File

@ -3,6 +3,7 @@ import styled from 'styled-components'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Redirect, Link } from 'react-router-dom' import { Redirect, Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import VisibilitySensor from 'react-visibility-sensor'
import { import {
PaymentMethodChoices, TransferChoices PaymentMethodChoices, TransferChoices
@ -11,6 +12,7 @@ import { getItemFromList } from '../utils'
import { getFareAttr, getFareRule } from '../actions/fare' import { getFareAttr, getFareRule } from '../actions/fare'
import store from '../store' import store from '../store'
import { FareRulesOne } from './FareRulesDetail' import { FareRulesOne } from './FareRulesDetail'
import Spinner from './Spinner'
const StyledFareAttributesDetail = styled.div` const StyledFareAttributesDetail = styled.div`
padding: 1rem; padding: 1rem;
@ -112,7 +114,7 @@ class FareAttributesDetail extends Component {
const { attribID } = this.props.match.params const { attribID } = this.props.match.params
const ones = results.filter(ele => ele.id === +attribID) const ones = results.filter(ele => ele.id === +attribID)
if (this.state.fetching || fetching) if (this.state.fetching || fetching)
return <div>Waiting...</div> return <Spinner show />
if (ones.length < 1) if (ones.length < 1)
return <Redirect to='/fare' /> return <Redirect to='/fare' />
@ -121,11 +123,13 @@ class FareAttributesDetail extends Component {
<div> <div>
{this.renderItem(ones[0])} {this.renderItem(ones[0])}
<Link className="link is-info" to={`/fare/rules/new?fareattr=${ones[0].id}`}> <Link className="link is-info" to={`/fare/rules/new?fareattr=${ones[0].id}`}>
<i className="fas fa-plus" /> New fare rule <FontAwesomeIcon icon="plus" /> New fare rule
</Link> </Link>
{farerule.results && farerule.results.map(ele => <FareRulesOne item={ele} />)} {farerule.results && farerule.results.map(ele => <FareRulesOne key={`ff-${ele.id}`} item={ele} />)}
{farerule.fetching && <FontAwesomeIcon icon="spinner" pulse/>} <Spinner show={farerule.fetching} />
{farerule.next && <a onClick={this.handleFetchMoreRules}>More</a>} {(!farerule.fetching && farerule.results.length > 10 && farerule.next) && <VisibilitySensor onChange={this.handleFetchMoreRules}>
<div>More</div>
</VisibilitySensor>}
</div> </div>
) )
} }

5
src/components/FareList.js
Unescape View File

@ -2,6 +2,7 @@ import React, { Component } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { getFareAttr, getFareRule } from '../actions/fare' import { getFareAttr, getFareRule } from '../actions/fare'
import store from '../store' import store from '../store'
@ -37,7 +38,7 @@ class FareList extends Component {
<nav className="level is-mobile"> <nav className="level is-mobile">
<p className="level-item has-text-centered"> <p className="level-item has-text-centered">
<Link className="link is-info" to={`${match.url}/attributes/new`}> <Link className="link is-info" to={`${match.url}/attributes/new`}>
<i className="fas fa-plus" /> New fare attributes <FontAwesomeIcon icon="plus" /> New fare attributes
</Link> </Link>
</p> </p>
</nav> </nav>
@ -50,7 +51,7 @@ class FareList extends Component {
<nav className="level is-mobile"> <nav className="level is-mobile">
<p className="level-item has-text-centered"> <p className="level-item has-text-centered">
<Link className="link is-info" to={`${match.url}/rules/new`}> <Link className="link is-info" to={`${match.url}/rules/new`}>
<i className="fas fa-plus" /> New fare rule <FontAwesomeIcon icon="plus" /> New fare rule
</Link> </Link>
</p> </p>
</nav> </nav>

11
src/components/FloatPane.js
Unescape View File

@ -2,6 +2,7 @@ import React, { Component } from 'react'
import { Link, Route, Switch } from 'react-router-dom' import { Link, Route, Switch } from 'react-router-dom'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import styled from 'styled-components' import styled from 'styled-components'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { logout } from '../utils/Auth' import { logout } from '../utils/Auth'
import RouteList from './RouteList' import RouteList from './RouteList'
@ -76,7 +77,7 @@ const SimpleAgencyList = (props) => (
</p> </p>
<p className="panel-tabs"> <p className="panel-tabs">
<Link className="link is-info" to={`/agency/new`}> <Link className="link is-info" to={`/agency/new`}>
<i className="fas fa-plus" /> New agency <FontAwesomeIcon icon="plus"/> New agency
</Link> </Link>
</p> </p>
{props.agencies.map(ele => ( {props.agencies.map(ele => (
@ -108,7 +109,7 @@ class FloatPane extends Component {
<a className="button is-small is-primary" <a className="button is-small is-primary"
onClick={() => store.dispatch(polygonReset())}> onClick={() => store.dispatch(polygonReset())}>
<span className="icon"> <span className="icon">
<i className="fas fa-sign-out-alt"></i> <FontAwesomeIcon icon="sign-out-alt" />
</span> </span>
<span>Clear PG</span> <span>Clear PG</span>
</a> </a>
@ -116,7 +117,7 @@ class FloatPane extends Component {
<a className="button is-small is-outlined" <a className="button is-small is-outlined"
onClick={() => logout()}> onClick={() => logout()}>
<span className="icon"> <span className="icon">
<i className="fas fa-sign-out-alt"></i> <FontAwesomeIcon icon="sign-out-alt" />
</span> </span>
<span>Logout</span> <span>Logout</span>
</a> </a>
@ -124,7 +125,7 @@ class FloatPane extends Component {
{!loggedIn && {!loggedIn &&
<Link className="button is-small is-outlined is-info" to='/login'> <Link className="button is-small is-outlined is-info" to='/login'>
<span className="icon"> <span className="icon">
<i className="fas fa-sign-in-alt"></i> <FontAwesomeIcon icon="sign-in-alt" />
</span> </span>
<span>Sign in</span> <span>Sign in</span>
</Link> </Link>
@ -150,7 +151,7 @@ class FloatPane extends Component {
return ( return (
<StyledFloatPane hidePane={hidePane}> <StyledFloatPane hidePane={hidePane}>
<StyledPaneToggler hidePane={hidePane} onClick={this.togglePane.bind(this)}> <StyledPaneToggler hidePane={hidePane} onClick={this.togglePane.bind(this)}>
<i className='fas fa-align-justify' /> <FontAwesomeIcon icon='align-justify' />
</StyledPaneToggler> </StyledPaneToggler>
{this.renderTopLevel(loggedIn)} {this.renderTopLevel(loggedIn)}
<Breadcrumb {...this.state.breadcrumb} /> <Breadcrumb {...this.state.breadcrumb} />

9
src/components/Login.js
Unescape View File

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
let invalidEmail = false let invalidEmail = false
let goodPassword = null let goodPassword = null
@ -16,11 +17,11 @@ const Login = (props) => (
onChange={props.updateField} onChange={props.updateField}
placeholder="yourname@example.com" /> placeholder="yourname@example.com" />
<span className="icon is-small is-left"> <span className="icon is-small is-left">
<i className="fas fa-envelope"></i> <FontAwesomeIcon icon="envelope"/>
</span> </span>
{ invalidEmail && { invalidEmail &&
<span className="icon is-small is-right"> <span className="icon is-small is-right">
<i className="fas fa-exclamation-triangle"></i> <FontAwesomeIcon icon="exclamation-triangle" />
</span>} </span>}
</div> </div>
{ invalidEmail && { invalidEmail &&
@ -36,11 +37,11 @@ const Login = (props) => (
onKeyPress={(e) => {(e.key === 'Enter') && props.fetchAuth()}} onKeyPress={(e) => {(e.key === 'Enter') && props.fetchAuth()}}
placeholder="Password" /> placeholder="Password" />
<span className="icon is-small is-left"> <span className="icon is-small is-left">
<i className="fas fa-key"></i> <FontAwesomeIcon icon="key"/>
</span> </span>
{ goodPassword === true && { goodPassword === true &&
<span className="icon is-small is-right"> <span className="icon is-small is-right">
<i className="fas fa-check"></i> <FontAwesomeIcon icon="check"/>
</span> } </span> }
</div> </div>
{ goodPassword === true && { goodPassword === true &&

15
src/components/Nav.js
Unescape View File

@ -2,6 +2,7 @@ import React, { Component } from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import styled from 'styled-components' import styled from 'styled-components'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { logout } from '../utils/Auth' import { logout } from '../utils/Auth'
import { polygonReset } from '../actions' import { polygonReset } from '../actions'
@ -26,11 +27,11 @@ class Nav extends Component {
</StyledLink> </StyledLink>
<div className="navbar-dropdown is-boxed"> <div className="navbar-dropdown is-boxed">
<StyledLink to={`/fare/rules/new`} className="navbar-item"> <StyledLink to={`/fare/rules/new`} className="navbar-item">
<i className="fas fa-plus" /> <FontAwesomeIcon icon="plus"/>
&nbsp; new fare rule &nbsp; new fare rule
</StyledLink> </StyledLink>
<StyledLink to={`/fare/attributes/new`} className="navbar-item"> <StyledLink to={`/fare/attributes/new`} className="navbar-item">
<i className="fas fa-plus" /> <FontAwesomeIcon icon="plus"/>
&nbsp; new fare attributes &nbsp; new fare attributes
</StyledLink> </StyledLink>
</div> </div>
@ -41,7 +42,7 @@ class Nav extends Component {
</StyledLink> </StyledLink>
<div className="navbar-dropdown is-boxed"> <div className="navbar-dropdown is-boxed">
<StyledLink to={`/calendar/new`} className="navbar-item"> <StyledLink to={`/calendar/new`} className="navbar-item">
<i className="fas fa-plus" /> <FontAwesomeIcon icon="plus"/>
&nbsp; new service calendar &nbsp; new service calendar
</StyledLink> </StyledLink>
</div> </div>
@ -58,7 +59,7 @@ class Nav extends Component {
</StyledLink> </StyledLink>
))} ))}
<StyledLink to={`/agency/new`} className="navbar-item"> <StyledLink to={`/agency/new`} className="navbar-item">
<i className="fas fa-plus" /> <FontAwesomeIcon icon="plus"/>
&nbsp;Add new agency &nbsp;Add new agency
</StyledLink> </StyledLink>
</div> </div>
@ -96,7 +97,7 @@ class Nav extends Component {
<a className="button is-primary" <a className="button is-primary"
onClick={() => polygonReset()}> onClick={() => polygonReset()}>
<span className="icon"> <span className="icon">
<i className="fas fa-sign-out-alt"></i> <FontAwesomeIcon icon="sign-out-alt"/>
</span> </span>
<span>Clear polygons</span> <span>Clear polygons</span>
</a> </a>
@ -106,7 +107,7 @@ class Nav extends Component {
<a className="button is-primary" <a className="button is-primary"
onClick={() => logout()}> onClick={() => logout()}>
<span className="icon"> <span className="icon">
<i className="fas fa-sign-out-alt"></i> <FontAwesomeIcon icon="sign-out-alt"/>
</span> </span>
<span>Logout</span> <span>Logout</span>
</a> </a>
@ -114,7 +115,7 @@ class Nav extends Component {
{!loggedIn && {!loggedIn &&
<Link className="button is-primary" to='/login'> <Link className="button is-primary" to='/login'>
<span className="icon"> <span className="icon">
<i className="fas fa-sign-in-alt"></i> <FontAwesomeIcon icon="sign-in-alt"/>
</span> </span>
<span>Sign in</span> <span>Sign in</span>
</Link> </Link>

3
src/components/RouteList.js
Unescape View File

@ -2,6 +2,7 @@ import React, { Component } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Spinner from './Spinner' import Spinner from './Spinner'
import { getRoute } from '../actions' import { getRoute } from '../actions'
@ -52,7 +53,7 @@ class RouteList extends Component {
className="panel-block" className="panel-block"
to={`/map/${agencyId}/route/${ele.route_id}`}> to={`/map/${agencyId}/route/${ele.route_id}`}>
<span className="panel-icon"> <span className="panel-icon">
<i className="fas fa-code-branch" aria-hidden="true"></i> <FontAwesomeIcon icon="code-branch" ariaHidden="true"/>
</span> </span>
<div> <div>
{ele.short_name} {ele.short_name}

3
src/components/Spinner.js
Unescape View File

@ -1,9 +1,10 @@
import React from 'react' import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Spinner = (props) => ( const Spinner = (props) => (
<span> <span>
{props.show && <span className={props.className}> {props.show && <span className={props.className}>
<i className="far fa-compass fa-pulse" /></span>} <FontAwesomeIcon icon="compass" pulse /></span>}
</span> </span>
) )

5
src/components/StopList.js
Unescape View File

@ -2,6 +2,7 @@ import React, { Component } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import store from '../store' import store from '../store'
import { STOP_REQUEST } from '../constants/ActionTypes' import { STOP_REQUEST } from '../constants/ActionTypes'
@ -46,7 +47,7 @@ class StopList extends Component {
</p> </p>
<p className="panel-tabs"> <p className="panel-tabs">
<Link className="link is-info" to={`/map/stop/new`}> <Link className="link is-info" to={`/map/stop/new`}>
<i className="fas fa-plus" /> New stop <FontAwesomeIcon icon="plus" /> New stop
</Link> </Link>
<a className="link is-info" onClick={this.fetchStopNearby.bind(this)}>Near</a> <a className="link is-info" onClick={this.fetchStopNearby.bind(this)}>Near</a>
</p> </p>
@ -59,7 +60,7 @@ class StopList extends Component {
onChange={(e) => { this.handleStopSearch(e) } } onChange={(e) => { this.handleStopSearch(e) } }
onKeyPress={(e) => { (e.key === 'Enter') && this.handleStopSearch(e) }} /> onKeyPress={(e) => { (e.key === 'Enter') && this.handleStopSearch(e) }} />
<span className="icon is-small is-left"> <span className="icon is-small is-left">
<i className="fas fa-search" aria-hidden="true"></i> <FontAwesomeIcon icon="search" ariaHidden="true"/>
</span> </span>
</p> </p>
</div> </div>

Write Preview
Loading…
Cancel
Save