From 998249697956d814d78b4c0e4ed07d2e28fae156 Mon Sep 17 00:00:00 2001 From: Ted Date: Fri, 15 Mar 2019 15:12:43 -0400 Subject: [PATCH] Add react-fontawesome and use it for add disposition so icons change in sample --- javascript/Checkin/Swipe.jsx | 8 +- .../Settings/Dispositions/DispositionForm.jsx | 125 +++++++++--------- package-lock.json | 64 ++++++--- package.json | 6 + 4 files changed, 121 insertions(+), 82 deletions(-) diff --git a/javascript/Checkin/Swipe.jsx b/javascript/Checkin/Swipe.jsx index 8caa6da..4c13fa2 100644 --- a/javascript/Checkin/Swipe.jsx +++ b/javascript/Checkin/Swipe.jsx @@ -131,7 +131,7 @@ class Swipe extends ErrorTimeout { className="form-control" value={this.state.visitor}/> button = @@ -139,15 +139,15 @@ class Swipe extends ErrorTimeout { return (
-
+

Welcome! Please Check-in

Swipe your AppCard to get started

Don't have your AppCard?
Enter your Banner ID number instead.

{field}
-
- {button} + {button} +
) diff --git a/javascript/Settings/Dispositions/DispositionForm.jsx b/javascript/Settings/Dispositions/DispositionForm.jsx index 53f192d..19e1789 100644 --- a/javascript/Settings/Dispositions/DispositionForm.jsx +++ b/javascript/Settings/Dispositions/DispositionForm.jsx @@ -2,6 +2,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import {TextInput, PickColor,} from '../Mixins' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { fas } from '@fortawesome/free-solid-svg-icons' /* global $ */ @@ -10,7 +12,8 @@ export default class DispositionForm extends Component { super(props) this.state = { title: '', - color: 'default', + color: null, + iconPrefix: '', icon: null, formError: '', dispositionId: 0, @@ -70,9 +73,9 @@ export default class DispositionForm extends Component { } - pickIcon(icon, event) { + pickIcon(iconPrefix, icon, event) { event.preventDefault() - this.setState({icon: icon}) + this.setState({iconPrefix: iconPrefix, icon: icon}) } render() { @@ -85,11 +88,11 @@ export default class DispositionForm extends Component { } let sample = - sample = '';// till we can figure out how to force font awesome to redraw icons - + return (
{alert} @@ -134,18 +137,19 @@ DispositionForm.defaultProps = { title: '' } -const CurrentIcon = ({color, icon, title}) => { +const CurrentIcon = ({color, iconPrefix, icon, title}) => { const buttonClass = 'btn btn-block btn-lg btn-' + color const iconClass = icon const iconTitle = (title === null || title.length === 0) ? 'Sample' : title - + const spacer = (color == null) ? '' :
return (
- + {spacer}
) } @@ -162,63 +166,64 @@ const DispositionIcons = ({handleClick}) => { - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - + + + + + + + + + @@ -231,11 +236,11 @@ DispositionIcons.propTypes = { handleClick: PropTypes.func } -const IconButton = ({prefix, label, handleClick,}) => { +const IconButton = ({iconPrefix, label, handleClick}) => { const iconClassName = label return ( - ) } diff --git a/package-lock.json b/package-lock.json index 1ce838f..3e826a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -805,6 +805,44 @@ "to-fast-properties": "^2.0.0" } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.15.tgz", + "integrity": "sha512-ATBRyKJw1d2ko+0DWN9+BXau0EK3I/Q6pPzPv3LhJD7r052YFAkAdfb1Bd7ZqhBsJrdse/S7jKxWUOZ61qBD4g==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.15", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.15.tgz", + "integrity": "sha512-M/sHyl4g2VBtKYkay1Z+XImMyTVcaBPmehYtPw4HKD9zg2E7eovB7Yx98aUfZjPbroGqa+IL4/+KhWBMOGlHIQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.15" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.7.2.tgz", + "integrity": "sha512-ZO+zQcncfT7omTsTIjBkugj/dFXiSnoK44I5p0/WAoNX8aX2Au7j+uxq1qFX4bevkfGFGsPeJUYU1+Q1PB/5pQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.15" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.7.2.tgz", + "integrity": "sha512-iujcXMyAvIbWM8W3jkOLpvJbR+rPpdN1QyqhZeJaLRdHPH4JmuovIAYP4vx5Sa1csZVXfRD1eDWqVZ/jGM620A==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.15" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz", + "integrity": "sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==", + "requires": { + "humps": "^2.0.1", + "prop-types": "^15.5.10" + } + }, "@webassemblyjs/ast": { "version": "1.8.5", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", @@ -3793,6 +3831,11 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", "dev": true }, + "humps": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz", + "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=" + }, "iconv-lite": { "version": "0.4.23", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", @@ -4162,8 +4205,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "jsesc": { "version": "2.5.2", @@ -4353,7 +4395,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -4818,8 +4859,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-component": { "version": "0.0.3", @@ -5336,7 +5376,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -5536,8 +5575,7 @@ "react-is": { "version": "16.8.4", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz", - "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==", - "dev": true + "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==" }, "react-lifecycles-compat": { "version": "3.0.4", @@ -5556,16 +5594,6 @@ "react-input-autosize": "^2.1.2" } }, - "react-tabs": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-2.3.0.tgz", - "integrity": "sha512-pYaefgVy76/36AMEP+B8YuVVzDHa3C5UFZ3REU78zolk0qMxEhKvUFofvDCXyLZwf0RZjxIfiwok1BEb18nHyA==", - "dev": true, - "requires": { - "classnames": "^2.2.0", - "prop-types": "^15.5.0" - } - }, "react-tooltip": { "version": "3.9.2", "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-3.9.2.tgz", diff --git a/package.json b/package.json index 0386d0d..d4d07db 100644 --- a/package.json +++ b/package.json @@ -43,5 +43,11 @@ "license": "GPL-3.0", "bugs": { "url": "https://github.com/AppStateESS/counseling/issues" + }, + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.15", + "@fortawesome/free-regular-svg-icons": "^5.7.2", + "@fortawesome/free-solid-svg-icons": "^5.7.2", + "@fortawesome/react-fontawesome": "^0.1.4" } }