Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

migrate react-fontawesome to offical package- BB-358 #317

Merged
merged 2 commits into from Dec 2, 2019
Merged

migrate react-fontawesome to offical package- BB-358 #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
358539f
migrate(font-awesome): install official fontawesome packages and setu…
sbvkrishna Nov 22, 2019
9777d01
migrate(font-awesome): migrate pages- index, layout, callToAction
sbvkrishna Nov 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 37 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Expand Up @@ -39,6 +39,10 @@
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.4.0",
Copy link
Contributor

@MonkeyDo MonkeyDo Nov 12, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This package is not going to be used after everything is changed over.
We'll need to create a sub-task to remove the package and anywhere fontawesome-free appears in the codebase as well as the static assets

"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-brands-svg-icons": "^5.11.2",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/react-fontawesome": "^0.1.7",
"babel-plugin-transform-require-ignore": "^0.1.1",
"babel-runtime": "^6.23.0",
"bluebird": "^3.5.1",
Expand Down
35 changes: 18 additions & 17 deletions src/client/components/pages/index.js
View file
Open in desktop
Expand Up @@ -24,11 +24,12 @@ import * as utilsHelper from '../../helpers/utils';

import {genEntityIconHTMLElement, getEntityLabel} from '../../helpers/entity';

import FontAwesome from 'react-fontawesome';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import {isNil as _isNil} from 'lodash';


const {Alert, Button, Col, Grid, ListGroup, ListGroupItem, Row} = bootstrap;
const {formatDate} = utilsHelper;

Expand Down Expand Up @@ -79,7 +80,7 @@ class IndexPage extends React.Component {
bsStyle="success"
type="submit"
>
<FontAwesome name="search"/>
<FontAwesomeIcon icon="search"/>
</Button>
</span>
</div>
Expand Down Expand Up @@ -117,42 +118,42 @@ class IndexPage extends React.Component {
<h4 className="contact-text">
Contact Us
</h4>
<FontAwesome
<FontAwesomeIcon
className="margin-sides-1 contact-text"
name="circle"
icon="circle"
/>
<a href="//webchat.freenode.net/?channels=#metabrainz">
<FontAwesome
<FontAwesomeIcon
className="contact-text"
name="comment"
icon="comment"
size="2x"
/>
</a>
<FontAwesome
<FontAwesomeIcon
className="margin-sides-1 contact-text"
name="circle"
icon="circle"
/>
<a href="//twitter.com/intent/tweet?screen_name=BookBrainz">
<FontAwesome
<FontAwesomeIcon
className="contact-text"
name="twitter"
icon={['fab', 'twitter']}
size="2x"
/>
</a>
<FontAwesome
<FontAwesomeIcon
className="margin-sides-1 contact-text"
name="circle"
icon="circle"
/>
<a href="mailto:bookbrainz-users@groups.io">
<FontAwesome
<FontAwesomeIcon
className="contact-text"
name="envelope"
icon="envelope"
size="2x"
/>
</a>
<FontAwesome
<FontAwesomeIcon
className="margin-sides-1 contact-text"
name="circle"
icon="circle"
/>
</div>
</Col>
Expand Down Expand Up @@ -188,7 +189,7 @@ class IndexPage extends React.Component {
<hr/>
<Row>
<Col className="text-center margin-top-4" md={2}>
<FontAwesome name="user" size="5x"/>
<FontAwesomeIcon icon="user" size="5x"/>
</Col>
<Col md={10}>
<h2>Join Us!</h2>
Expand Down
19 changes: 10 additions & 9 deletions src/client/containers/layout.js
View file
Open in desktop
Expand Up @@ -25,9 +25,10 @@
/* eslint import/no-commonjs: "warn" */
/* eslint global-require: "warn" */

import '../helpers/setupIconLibrary';
import * as bootstrap from 'react-bootstrap';

import FontAwesome from 'react-fontawesome';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import Footer from './../components/footer';
import PropTypes from 'prop-types';
import React from 'react';
Expand Down Expand Up @@ -105,14 +106,14 @@ class Layout extends React.Component {
*/
const createDropdownTitle = (
<span>
<FontAwesome name="plus"/>
<FontAwesomeIcon icon="plus"/>
{' Add'}
</span>
);

const userDropdownTitle = user && (
<span>
<FontAwesome name="user-circle"/>
<FontAwesomeIcon icon="user-circle"/>
{` ${user.name}`}
</span>
);
Expand Down Expand Up @@ -163,32 +164,32 @@ class Layout extends React.Component {
onMouseDown={this.handleMouseDown}
>
<MenuItem href={`/editor/${user.id}`}>
<FontAwesome fixedWidth name="info"/>
<FontAwesomeIcon fixedWidth icon="info"/>
{' Profile'}
</MenuItem>
<MenuItem {...disableSignUp} href="/logout">
<FontAwesome fixedWidth name="sign-out-alt"/>
<FontAwesomeIcon fixedWidth icon="sign-out-alt"/>
{' Sign Out'}
</MenuItem>
</NavDropdown>
</Nav>
) : (
<Nav pullRight>
<NavItem {...disableSignUp} href="/auth">
<FontAwesome name="sign-in-alt"/>
<FontAwesomeIcon icon="sign-in-alt"/>
{' Sign In / Register'}
</NavItem>
</Nav>
)}
<Nav pullRight>
<NavItem href="/help">
<FontAwesome name="question-circle"/>
<FontAwesomeIcon icon="question-circle"/>
{' Help '}
</NavItem>
</Nav>
<Nav pullRight>
<NavItem href="/statistics">
<FontAwesome name="chart-line"/>
<FontAwesomeIcon icon="chart-line"/>
{' Statistics '}
</NavItem>
</Nav>
Expand All @@ -211,7 +212,7 @@ class Layout extends React.Component {
className="btn btn-success"
type="submit"
>
<FontAwesome name="search"/>
<FontAwesomeIcon icon="search"/>
</button>
</span>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/client/helpers/entity.js
View file
Open in desktop
Expand Up @@ -22,7 +22,7 @@ import * as bootstrap from 'react-bootstrap';

import {get as _get, kebabCase as _kebabCase} from 'lodash';
import {format, isValid, parseISO} from 'date-fns';
import FontAwesome from 'react-fontawesome';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import React from 'react';


Expand Down Expand Up @@ -108,7 +108,7 @@ export function showEntityEditions(entity) {
className="pull-right"
href={`/edition/create?${_kebabCase(entity.type)}=${entity.bbid}`}
>
<FontAwesome name="plus"/>
<FontAwesomeIcon icon="plus"/>
{' Add Edition'}
</Button>
</h2>
Expand Down Expand Up @@ -236,14 +236,14 @@ export const ENTITY_TYPE_ICONS = {
Work: 'pen-nib'
};

export function genEntityIconHTMLElement(entityType, size = '', margin = true) {
export function genEntityIconHTMLElement(entityType, size = '1x', margin = true) {
sbvkrishna marked this conversation as resolved.
Show resolved Hide resolved
if (!ENTITY_TYPE_ICONS[entityType]) { return null; }
return (
<FontAwesome
ariaLabel={entityType}
<FontAwesomeIcon
className={margin ? 'margin-right-0-5' : ''}
name={ENTITY_TYPE_ICONS[entityType]}
icon={ENTITY_TYPE_ICONS[entityType]}
size={size}
title={entityType}
sbvkrishna marked this conversation as resolved.
Show resolved Hide resolved
/>);
}

Expand Down
42 changes: 42 additions & 0 deletions src/client/helpers/setupIconLibrary.js
View file
Open in desktop
@@ -0,0 +1,42 @@
/*
* Copyright (C) 2019 SBVKrishna
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, write to the Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*/

import {config, library} from '@fortawesome/fontawesome-svg-core';
import {
faBook, faCalendarAlt, faChartLine, faCircle, faCircleNotch,
faComment, faEnvelope, faExclamationTriangle, faExternalLinkAlt,
faGlobe, faHistory, faInfo, faPenNib, faPencilAlt, faPencilRuler,
faPlus, faQuestionCircle, faRemoveFormat, faSearch, faSignInAlt,
faSignOutAlt, faSlash, faTimes, faTimesCircle, faTrashAlt,
faUniversity, faUser, faUserCircle, faWindowRestore
} from '@fortawesome/free-solid-svg-icons';
import {fab} from '@fortawesome/free-brands-svg-icons';


// Disable FontAwesome's CSS (to prevent FOUC)
config.autoAddCss = false;

// Add Icons to FontAwesome library
library.add(
fab, faBook, faCalendarAlt, faChartLine, faCircle, faCircleNotch,
faComment, faEnvelope, faExclamationTriangle, faExternalLinkAlt,
faGlobe, faHistory, faInfo, faPenNib, faPencilAlt, faPencilRuler,
faPlus, faQuestionCircle, faRemoveFormat, faSearch, faSignInAlt,
faSignOutAlt, faSlash, faTimes, faTimesCircle, faTrashAlt,
faUniversity, faUser, faUserCircle, faWindowRestore
);
8 changes: 8 additions & 0 deletions src/client/stylesheets/style.less
View file
Open in desktop
Expand Up @@ -191,6 +191,14 @@ body {
.picture-fallback-icon(800%);
}

/**
* Styling for FontAwesome icons, to fix random-sized
* icons appear while the page is loading (FOUC).
*/
.svg-inline--fa{
height: 1em;
}

/* Sticky footer styling */
html {
position: relative;
Expand Down