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
Split 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-scripts": "1.1.4",
"react-select": "^2.0.0-beta.7",
"react-visibility-sensor": "^5.0.1",
"redux": "^4.0.0",
"redux-api-middleware": "^2.3.0",
"redux-logger": "^3.0.6",

20
src/App.js
Unescape View File

@ -2,8 +2,11 @@ import React from 'react'
// import './App.css'
import { Switch, Route } from 'react-router-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGhost, faSpinner } from '@fortawesome/free-solid-svg-icons'
import {
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 Geo from './container/Geo'
@ -12,7 +15,20 @@ import Public from './container/Public'
import { LOGIN_PATH } from './constants/path'
library.add(faGhost)
library.add(faPlus)
library.add(faSignOutAlt)
library.add(faSignInAlt)
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 = () => (
<Switch>

7
src/components/CalendarList.js
Unescape View File

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

14
src/components/FareAttributesDetail.js
Unescape View File

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

5
src/components/FareList.js
Unescape View File

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

9
src/components/Login.js
Unescape View File

@ -1,4 +1,5 @@
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
let invalidEmail = false
let goodPassword = null
@ -16,11 +17,11 @@ const Login = (props) => (
onChange={props.updateField}
placeholder="yourname@example.com" />
<span className="icon is-small is-left">
<i className="fas fa-envelope"></i>
<FontAwesomeIcon icon="envelope"/>
</span>
{ invalidEmail &&
<span className="icon is-small is-right">
<i className="fas fa-exclamation-triangle"></i>
<FontAwesomeIcon icon="exclamation-triangle" />
</span>}
</div>
{ invalidEmail &&
@ -36,11 +37,11 @@ const Login = (props) => (
onKeyPress={(e) => {(e.key === 'Enter') && props.fetchAuth()}}
placeholder="Password" />
<span className="icon is-small is-left">
<i className="fas fa-key"></i>
<FontAwesomeIcon icon="key"/>
</span>
{ goodPassword === true &&
<span className="icon is-small is-right">
<i className="fas fa-check"></i>
<FontAwesomeIcon icon="check"/>
</span> }
</div>
{ 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 styled from 'styled-components'
import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { logout } from '../utils/Auth'
import { polygonReset } from '../actions'
@ -26,11 +27,11 @@ class Nav extends Component {
</StyledLink>
<div className="navbar-dropdown is-boxed">
<StyledLink to={`/fare/rules/new`} className="navbar-item">
<i className="fas fa-plus" />
<FontAwesomeIcon icon="plus"/>
&nbsp; new fare rule
</StyledLink>
<StyledLink to={`/fare/attributes/new`} className="navbar-item">
<i className="fas fa-plus" />
<FontAwesomeIcon icon="plus"/>
&nbsp; new fare attributes
</StyledLink>
</div>
@ -41,7 +42,7 @@ class Nav extends Component {
</StyledLink>
<div className="navbar-dropdown is-boxed">
<StyledLink to={`/calendar/new`} className="navbar-item">
<i className="fas fa-plus" />
<FontAwesomeIcon icon="plus"/>
&nbsp; new service calendar
</StyledLink>
</div>
@ -58,7 +59,7 @@ class Nav extends Component {
</StyledLink>
))}
<StyledLink to={`/agency/new`} className="navbar-item">
<i className="fas fa-plus" />
<FontAwesomeIcon icon="plus"/>
&nbsp;Add new agency
</StyledLink>
</div>
@ -96,7 +97,7 @@ class Nav extends Component {
<a className="button is-primary"
onClick={() => polygonReset()}>
<span className="icon">
<i className="fas fa-sign-out-alt"></i>
<FontAwesomeIcon icon="sign-out-alt"/>
</span>
<span>Clear polygons</span>
</a>
@ -106,7 +107,7 @@ class Nav extends Component {
<a className="button is-primary"
onClick={() => logout()}>
<span className="icon">
<i className="fas fa-sign-out-alt"></i>
<FontAwesomeIcon icon="sign-out-alt"/>
</span>
<span>Logout</span>
</a>
@ -114,7 +115,7 @@ class Nav extends Component {
{!loggedIn &&
<Link className="button is-primary" to='/login'>
<span className="icon">
<i className="fas fa-sign-in-alt"></i>
<FontAwesomeIcon icon="sign-in-alt"/>
</span>
<span>Sign in</span>
</Link>

3
src/components/RouteList.js
Unescape View File

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

3
src/components/Spinner.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save