diff --git a/package-lock.json b/package-lock.json index e09d39d80c9b6dbfc78c2caf8c5d40964545e1fa..69b9218930ce48df2966dfa84d0d0a31786b6d14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1251,35 +1251,6 @@ } } }, - "@fortawesome/fontawesome-common-types": { - "version": "0.2.32", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz", - "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==" - }, - "@fortawesome/fontawesome-svg-core": { - "version": "1.2.32", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz", - "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==", - "requires": { - "@fortawesome/fontawesome-common-types": "^0.2.32" - } - }, - "@fortawesome/free-solid-svg-icons": { - "version": "5.15.1", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz", - "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==", - "requires": { - "@fortawesome/fontawesome-common-types": "^0.2.32" - } - }, - "@fortawesome/react-fontawesome": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.12.tgz", - "integrity": "sha512-kV6HtqotM3K4YIXlTVvomuIi6QgGCvYm++ImyEx2wwgmSppZ6kbbA29ASwjAUBD63j2OFU0yoxeXpZkjrrX0qQ==", - "requires": { - "prop-types": "^15.7.2" - } - }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -13372,6 +13343,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz", "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==" }, + "react-icons": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz", + "integrity": "sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg==" + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index d69868728b3882666188dbd69d1f067abe408c3c..115952d7fa64ccbfeea9327502ebe0f3aead1531 100644 --- a/package.json +++ b/package.json @@ -12,12 +12,10 @@ "version": "0.1.0", "private": true, "dependencies": { - "@fortawesome/fontawesome-svg-core": "1.2.32", - "@fortawesome/free-solid-svg-icons": "5.15.1", - "@fortawesome/react-fontawesome": "0.1.12", "react": "^17.0.1", "react-bootstrap": "1.4.0", "react-dom": "^17.0.1", + "react-icons": "4.1.0", "react-router-dom": "5.2.0", "react-scripts": "4.0.0", "react-tabs": "3.1.2", diff --git a/src/components/experiment-list/experiment-list-element.css b/src/components/experiment-list/experiment-list-element.css index f45970b4109246b1302fb5ce1f85a74457d0abd3..42334bef2bdeafe5b5f9ba4b11cb61620f4ac026 100644 --- a/src/components/experiment-list/experiment-list-element.css +++ b/src/components/experiment-list/experiment-list-element.css @@ -118,4 +118,12 @@ .entity-thumbnail { max-width: 230px; max-height: 160px; +} + +.icon { + margin-right: 3px; +} + +.experiment-details { + margin-top: 10px; } \ No newline at end of file diff --git a/src/components/experiment-list/experiment-list-element.js b/src/components/experiment-list/experiment-list-element.js index 68e08a6473268032ffdcc6529d59b6a7bda29264..0d6f4ceb26d783c2e2f4eff5ea5e50396551aac1 100644 --- a/src/components/experiment-list/experiment-list-element.js +++ b/src/components/experiment-list/experiment-list-element.js @@ -1,4 +1,8 @@ import React from 'react'; +import { FaPlay, FaTrash, FaFileExport, FaShareAlt, FaClone } from 'react-icons/fa'; +import { VscTriangleUp, VscTriangleDown } from 'react-icons/vsc'; +import { GoFileSubmodule } from 'react-icons/go'; + import timeDDHHMMSS from '../../utility/time-filter.js'; import ExperimentStorageService from '../../services/experiments/storage/experiment-storage-service.js'; import ExperimentExecutionService from '../../services/experiments/execution/experiment-execution-service.js'; @@ -139,7 +143,7 @@ export default class ExperimentListElement extends React.Component { </div> {this.state.selected && - <div style={{ position: 'relative' }} > + <div className='experiment-details' > <i> Timeout: {timeDDHHMMSS(exp.configuration.timeout)} @@ -172,7 +176,7 @@ export default class ExperimentListElement extends React.Component { disabled={this.isLaunchDisabled()} className='btn btn-default' title={this.launchButtonTitle} > - <i className='fa fa-plus'></i> Launch + <FaPlay className='icon' />Launch </button> : null} @@ -180,35 +184,38 @@ export default class ExperimentListElement extends React.Component { this.props.availableServers.length > 0 && exp.configuration.experimentFile && exp.configuration.bibiConfSrc ? <button className='btn btn-default'> - <i className='fa fa-plus'></i> Launch in Single Process Mode + <FaPlay className='icon' />Launch in Single Process Mode </button> : null} {this.canLaunchExperiment && this.props.availableServers.length > 1 && exp.configuration.experimentFile && exp.configuration.bibiConfSrc ? <button className='btn btn-default' > - <i className='fa fa-layer-group'></i> Launch Multiple + <FaPlay className='icon' />Launch Multiple </button> : null} {/* isPrivateExperiment */} {this.canLaunchExperiment ? <button className='btn btn-default'> - <i className='fa fa-times'></i> Delete + <FaTrash className='icon' />Delete </button> : null} {/* Records button */} {this.canLaunchExperiment ? <button className='btn btn-default'> - <i className='fa fa-sign-in'></i> Recordings » + {this.state.showRecordings ? + <VscTriangleUp className='icon' /> : <VscTriangleDown className='icon' /> + } + Recordings </button> : null} {/* Export button */} {this.canLaunchExperiment ? <button className='btn btn-default'> - <i className='fa fa-file-export'></i> Export + <FaFileExport className='icon' />Export </button> : null} @@ -218,7 +225,10 @@ export default class ExperimentListElement extends React.Component { onClick={() => { this.setState({ showSimDetails: !this.state.showSimDetails }); }}> - <i className='fa fa-sign-in'></i> Simulations » + {this.state.showSimDetails ? + <VscTriangleUp className='icon' /> : <VscTriangleDown className='icon' /> + } + Simulations </button> : null} @@ -226,21 +236,21 @@ export default class ExperimentListElement extends React.Component { {config.canCloneExperiments && (!exp.configuration.privateStorage || (exp.configuration.experimentFile && exp.configuration.bibiConfSrc)) ? <button className='btn btn-default'> - <i className='fa fa-pencil-alt'></i> Clone + <FaClone className='icon' />Clone </button> : null} {/* Files button */} {this.canLaunchExperiment ? <button className='btn btn-default' > - <i className='fa fa-list-alt'></i> Files + <GoFileSubmodule className='icon' />Files </button> : null} {/* Shared button */} {this.canLaunchExperiment ? <button className='btn btn-default'> - <i className='fas fa-share-alt'></i> Share + <FaShareAlt className='icon' />Share </button> : null} </div> diff --git a/src/components/experiment-list/simulation-details.css b/src/components/experiment-list/simulation-details.css index 249712ed8353d94fd4c8d8e343ebcaa591fc2cbf..7e7bf837be4668223da294095609ff3fb6d90ee5 100644 --- a/src/components/experiment-list/simulation-details.css +++ b/src/components/experiment-list/simulation-details.css @@ -1,5 +1,8 @@ .simulations-details-wrapper { - width: 640px; + width: 90%; + text-align: center; + align-items: center; + align-content: center; } .table-header { @@ -11,11 +14,15 @@ .table-row { display: grid; gap: 10px; - grid-template-columns: repeat(5, 120px); + grid-template-columns: repeat(4, 120px) auto; padding-top: 10px; } .table-column-last { grid-area: 1 / -2 / 2 / -1; +} + +.icon { + margin-right: 3px; } \ No newline at end of file diff --git a/src/components/experiment-list/simulation-details.js b/src/components/experiment-list/simulation-details.js index 98fbd4a6ca85151cdd2c565c090d33d2ac742ce7..430e9fc31304ac1a62525d97eb439a96efba4fdd 100644 --- a/src/components/experiment-list/simulation-details.js +++ b/src/components/experiment-list/simulation-details.js @@ -1,4 +1,6 @@ import React from 'react'; +import { FaStop, FaStopCircle } from 'react-icons/fa'; +import { ImEnter } from 'react-icons/im'; import timeDDHHMMSS from '../../utility/time-filter.js'; import { EXPERIMENT_STATE } from '../../services/experiments/experiment-constants.js'; @@ -78,7 +80,7 @@ export default class SimulationDetails extends React.Component { simulation.stopping || joinExperiment(simulation, exp);"*/ type="button" className="btn btn-default" disabled={this.isJoinDisabled(simulation)}> - Join » + <ImEnter className='icon' />Join </button> {/* Stop button enabled provided simulation state is consistent */} <button /*analytics-on analytics-event="Stop" analytics-category="Experiment"*/ @@ -86,7 +88,7 @@ export default class SimulationDetails extends React.Component { type="button" className="btn btn-default" disabled={this.isStopDisabled(simulation)} title={this.state.titleButtonStop}> - <i className="fa fa-spinner fa-spin" ng-if="simulation.stopping"></i> Stop + <FaStop className='icon' />Stop </button> </div> </div> @@ -95,7 +97,9 @@ export default class SimulationDetails extends React.Component { } <div className='table-row'> - <button className='table-column-last'>Stop All</button> + <button className='table-column-last'> + <FaStopCircle className='icon' />Stop All + </button> </div> </div > ); diff --git a/src/components/user-menu/user-menu.js b/src/components/user-menu/user-menu.js index d9cda5522d1f643c5e8a5eecf976dbab64894442..a287c8620d25ab87dcf6068bbf47e830b3bbebb4 100644 --- a/src/components/user-menu/user-menu.js +++ b/src/components/user-menu/user-menu.js @@ -1,7 +1,6 @@ import React from 'react'; import Dropdown from 'react-bootstrap/Dropdown'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faUserCircle, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; +import { FaUserCircle, FaSignOutAlt } from 'react-icons/fa'; import NrpUserService from '../../services/proxy/nrp-user-service.js'; import AuthenticationService from '../../services/authentication-service.js'; @@ -45,7 +44,7 @@ export default class UserMenu extends React.Component { variant='success' id='dropdown-basic' > - <FontAwesomeIcon icon={faUserCircle} className='user-icon' /> + <FaUserCircle className='user-icon' /> <div className='user-name'> {this.state.user ? this.state.user.displayName : 'pending ...'} </div> @@ -56,7 +55,7 @@ export default class UserMenu extends React.Component { className='dropdown-item' onClick={this.onClickLogout} > - <FontAwesomeIcon icon={faSignOutAlt} className='user-icon' /> + <FaSignOutAlt className='user-icon' /> Logout </Dropdown.Item> </Dropdown.Menu>