1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

replace GlyphIcons by FontAwesome icons

This commit is contained in:
Steffen Vogel 2018-06-09 14:52:12 +02:00
parent 74a3cf4d4b
commit d4f02c2961
14 changed files with 156 additions and 81 deletions

30
package-lock.json generated
View file

@ -4,6 +4,36 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@fortawesome/fontawesome": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz",
"integrity": "sha512-c0/MtkPVT0fmiFcCyYoPjkG9PkMOvfrZw2+0BaJ+Rh6UEcK1AR/LaRgrHHjUkbAbs9LXxQJhFS8CJ4uSnK2+JA==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.1.7"
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
"integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
},
"@fortawesome/fontawesome-free-solid": {
"version": "5.0.13",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz",
"integrity": "sha512-b+krVnqkdDt52Yfev0x0ZZgtxBQsLw00Zfa3uaVWIDzpNZVtrEXuxldUSUaN/ihgGhSNi8VpvDAdNPVgCKOSxw==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.1.7"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.0.20.tgz",
"integrity": "sha512-0a1VYxlCU1oQZzxXK2KIlVArQJSGG3BgBwelLNbR5f2CD6+zQhXXMC9Vm8V4VLO1ZWDeGdjAJZmf7VL/zuuBGQ==",
"requires": {
"humps": "^2.0.1",
"prop-types": "^15.5.7"
}
},
"abab": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",

View file

@ -3,6 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/react-fontawesome": "0.0.20",
"babel-runtime": "^6.26.0",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",

View file

@ -20,8 +20,10 @@
******************************************************************************/
import React from 'react';
import { FormGroup, ControlLabel, Button, Glyphicon } from 'react-bootstrap';
import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
import Icon from '../icon';
import Table from '../table';
import TableColumn from '../table-column';
@ -67,7 +69,7 @@ class EditWidgetColorZonesControl extends React.Component {
changeCell = (event, row, column) => {
// change row
const widget = this.state.widget;
if (column === 1) {
widget.zones[row].strokeStyle = event.target.value;
} else if (column === 2) {
@ -96,7 +98,7 @@ class EditWidgetColorZonesControl extends React.Component {
checkedCell = (row, event) => {
// update selected rows
const selectedZones = this.state.selectedZones;
if (event.target.checked) {
if (selectedZones.indexOf(row) === -1) {
selectedZones.push(row);
@ -122,8 +124,8 @@ class EditWidgetColorZonesControl extends React.Component {
<TableColumn title="Maximum" dataKey="max" inlineEditable onInlineChange={this.changeCell} />
</Table>
<Button onClick={this.addZone} disabled={!this.props.widget.colorZones}><Glyphicon glyph="plus" /> Add</Button>
<Button onClick={this.removeZones} disabled={!this.props.widget.colorZones}><Glyphicon glyph="minus" /> Remove</Button>
<Button onClick={this.addZone} disabled={!this.props.widget.colorZones}><Icon icon="plus" /> Add</Button>
<Button onClick={this.removeZones} disabled={!this.props.widget.colorZones}><Icon icon="minus" /> Remove</Button>
</FormGroup>;
}
}

View file

@ -21,7 +21,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Glyphicon, FormControl } from 'react-bootstrap';
import { FormControl } from 'react-bootstrap';
import Icon from './icon';
class EditableHeader extends React.Component {
titleInput = null;
@ -64,7 +65,7 @@ class EditableHeader extends React.Component {
float: 'left'
};
const glyphStyle = {
const iconStyle = {
float: 'left',
marginLeft: '10px',
@ -84,8 +85,8 @@ class EditableHeader extends React.Component {
<FormControl type='text' bsSize='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus />
</form>
<a onClick={this.save}><Glyphicon glyph='ok' style={glyphStyle} /></a>
<a onClick={this.cancel}><Glyphicon glyph='remove' style={glyphStyle} /></a>
<a onClick={this.save}><Icon icon='check' style={iconStyle} /></a>
<a onClick={this.cancel}><Icon icon='times' style={iconStyle} /></a>
</div>;
}
@ -94,7 +95,7 @@ class EditableHeader extends React.Component {
{this.state.title}
</h1>
<a onClick={this.edit}><Glyphicon glyph='pencil' style={glyphStyle} /></a>
<a onClick={this.edit}><Icon icon='edit' style={iconStyle} /></a>
</div>;
}
}

View file

@ -20,7 +20,8 @@
******************************************************************************/
import React from 'react';
import { Col, Button, Glyphicon } from 'react-bootstrap';
import { Col, Button } from 'react-bootstrap';
import Icon from './icon';
class Header extends React.Component {
render() {
@ -31,7 +32,7 @@ class Header extends React.Component {
</Col>
<Col xs={2} smHidden mdHidden lgHidden style={{ paddingLeft: 'auto', paddingRight: 0 }}>
{this.props.showMenuButton &&
<Button bsStyle="link" onClick={this.props.onMenuButton} style={{ float: 'right', marginRight: '10px' }}><Glyphicon glyph="menu-hamburger" className="menu-icon" /></Button>
<Button bsStyle="link" onClick={this.props.onMenuButton} style={{ float: 'right', marginRight: '10px' }}><Icon size="3x" icon="bars" className="menu-icon" /></Button>
}
</Col>
</header>

35
src/components/icon.js Normal file
View file

@ -0,0 +1,35 @@
/**
* File: icon.js
* Author: Steffen Vogel <stvogel@eonerc.rwth-aachen.de>
* Date: 09.06.2018
*
* This file is part of VILLASweb.
*
* VILLASweb 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 3 of the License, or
* (at your option) any later version.
*
* VILLASweb 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 VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import '@fortawesome/fontawesome-free-solid';
class Icon extends React.Component {
render() {
return <FontAwesomeIcon size={this.props.size} style={this.props.style} icon={this.props.icon} />
}
}
export default Icon;

View file

@ -21,8 +21,9 @@
import React, { Component } from 'react';
import _ from 'lodash';
import { Table, Button, Glyphicon, FormControl, Label, Checkbox } from 'react-bootstrap';
import { Table, Button, FormControl, Label, Checkbox } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Icon from './icon';
class CustomTable extends Component {
constructor(props) {
@ -97,11 +98,11 @@ class CustomTable extends Component {
// add buttons
if (child.props.editButton) {
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onEdit(index)} disabled={child.props.onEdit == null}><Glyphicon glyph='pencil' /></Button>);
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onEdit(index)} disabled={child.props.onEdit == null}><Icon icon='edit' /></Button>);
}
if (child.props.deleteButton) {
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Glyphicon glyph='remove' /></Button>);
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Icon icon='trash' /></Button>);
}
if (child.props.checkbox) {
@ -111,7 +112,7 @@ class CustomTable extends Component {
}
if (child.props.exportButton) {
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Glyphicon glyph='export' /></Button>);
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Icon icon='download' /></Button>);
}
return cell;

View file

@ -21,7 +21,7 @@
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { Button, Glyphicon } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import FileSaver from 'file-saver';
import AppDispatcher from '../app-dispatcher';
@ -30,6 +30,7 @@ import UserStore from '../stores/user-store';
import VisualizationStore from '../stores/visualization-store';
import SimulationStore from '../stores/simulation-store';
import Icon from '../components/icon';
import CustomTable from '../components/table';
import TableColumn from '../components/table-column';
import NewVisualzationDialog from '../components/dialog/new-visualization';
@ -128,7 +129,7 @@ class Visualizations extends Component {
if (confirmDelete === false) {
return;
}
}
AppDispatcher.dispatch({
type: 'visualizations/start-remove',
@ -190,7 +191,7 @@ class Visualizations extends Component {
onModalKeyPress = (event) => {
if (event.key === 'Enter') {
event.preventDefault();
this.confirmDeleteModal();
}
}
@ -206,19 +207,19 @@ class Visualizations extends Component {
<CustomTable data={this.state.visualizations}>
<TableColumn title='Name' dataKey='name' link='/visualizations/' linkKey='_id' />
<TableColumn
width='100'
editButton
deleteButton
<TableColumn
width='100'
editButton
deleteButton
exportButton
onEdit={(index) => this.setState({ editModal: true, modalData: this.state.visualizations[index] })}
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.visualizations[index] })}
onEdit={(index) => this.setState({ editModal: true, modalData: this.state.visualizations[index] })}
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.visualizations[index] })}
onExport={index => this.exportVisualization(index)}
/>
</CustomTable>
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Visualization</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Visualization</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
<NewVisualzationDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
<EditVisualizationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} visualization={this.state.modalData} />

View file

@ -21,13 +21,14 @@
import React from 'react';
import { Container } from 'flux/utils';
import { Button, Glyphicon } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import AppDispatcher from '../app-dispatcher';
import ProjectStore from '../stores/project-store';
import UserStore from '../stores/user-store';
import SimulationStore from '../stores/simulation-store';
import Icon from '../components/icon';
import Table from '../components/table';
import TableColumn from '../components/table-column';
import NewProjectDialog from '../components/dialog/new-project';
@ -117,14 +118,14 @@ class Projects extends React.Component {
const simulations = this.state.simulations.filter(simulation => {
return simulation.models.length > 0;
});
return simulations.length > 0;
}
onModalKeyPress = (event) => {
if (event.key === 'Enter') {
event.preventDefault();
this.confirmDeleteModal();
}
}
@ -140,7 +141,7 @@ class Projects extends React.Component {
<TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.projects[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.projects[index] })} />
</Table>
<Button onClick={() => this.setState({ newModal: true })} disabled={!this.hasValidSimulation()}><Glyphicon glyph='plus' /> Project</Button>
<Button onClick={() => this.setState({ newModal: true })} disabled={!this.hasValidSimulation()}><Icon icon='plus' /> Project</Button>
{!this.hasValidSimulation() &&
<span><i> Simulation with at least one simulation-model required!</i></span>

View file

@ -21,7 +21,7 @@
import React from 'react';
import { Container } from 'flux/utils';
import { Button, Glyphicon } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import FileSaver from 'file-saver';
import _ from 'lodash';
@ -31,6 +31,7 @@ import SimulationModelStore from '../stores/simulation-model-store';
import UserStore from '../stores/user-store';
import AppDispatcher from '../app-dispatcher';
import Icon from '../components/icon';
import Table from '../components/table';
import TableColumn from '../components/table-column';
import ImportSimulationModelDialog from '../components/dialog/import-simulation-model';
@ -146,7 +147,7 @@ class Simulation extends React.Component {
simulationModel.simulation = this.state.simulation._id;
console.log(simulationModel);
AppDispatcher.dispatch({
type: 'simulationModels/start-add',
data: simulationModel,
@ -173,7 +174,7 @@ class Simulation extends React.Component {
exportModel(index) {
// filter properties
const model = Object.assign({}, this.state.simulationModels[index]);
delete model.simulator;
delete model.simulation;
@ -222,7 +223,7 @@ class Simulation extends React.Component {
}
if (action.data.action === 'start') {
action.data.parameters = this.state.simulationModels[index].startParameters;
action.data.parameters = this.state.simulationModels[index].startParameters;
}
AppDispatcher.dispatch({
@ -248,31 +249,31 @@ class Simulation extends React.Component {
<TableColumn title='Simulator' dataKey='simulator' modifier={(simulator) => this.getSimulatorName(simulator)} />
<TableColumn title='Output' dataKey='outputLength' width='100' />
<TableColumn title='Input' dataKey='inputLength' width='100' />
<TableColumn
title=''
width='70'
deleteButton
<TableColumn
title=''
width='70'
deleteButton
exportButton
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulationModels[index], modalIndex: index })}
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulationModels[index], modalIndex: index })}
onExport={index => this.exportModel(index)}
/>
</Table>
<div style={{ float: 'left' }}>
<SimulatorAction
runDisabled={this.state.selectedSimulationModels.length === 0}
<SimulatorAction
runDisabled={this.state.selectedSimulationModels.length === 0}
runAction={this.runAction}
actions={[
{ id: '0', title: 'Start', data: { action: 'start' } },
{ id: '1', title: 'Stop', data: { action: 'stop' } },
{ id: '2', title: 'Pause', data: { action: 'pause' } },
{ id: '3', title: 'Resume', data: { action: 'resume' } }
{ id: '0', title: 'Start', data: { action: 'start' } },
{ id: '1', title: 'Stop', data: { action: 'stop' } },
{ id: '2', title: 'Pause', data: { action: 'pause' } },
{ id: '3', title: 'Resume', data: { action: 'resume' } }
]}/>
</div>
<div style={{ float: 'right' }}>
<Button onClick={this.addSimulationModel} style={buttonStyle}><Glyphicon glyph="plus" /> Simulation Model</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
<Button onClick={this.addSimulationModel} style={buttonStyle}><Icon icon="plus" /> Simulation Model</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
</div>
<div style={{ clear: 'both' }} />

View file

@ -21,7 +21,7 @@
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { Button, Glyphicon } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import FileSaver from 'file-saver';
import AppDispatcher from '../app-dispatcher';
@ -30,6 +30,7 @@ import UserStore from '../stores/user-store';
import SimulatorStore from '../stores/simulator-store';
import SimulationModelStore from '../stores/simulation-model-store';
import Icon from '../components/icon';
import Table from '../components/table';
import TableColumn from '../components/table-column';
import NewSimulationDialog from '../components/dialog/new-simulation';
@ -101,7 +102,7 @@ class Simulations extends Component {
token: this.state.sessionToken
});
}
if (simulatorIds.length > 0) {
AppDispatcher.dispatch({
type: 'simulators/start-load',
@ -190,7 +191,7 @@ class Simulations extends Component {
onModalKeyPress = (event) => {
if (event.key === 'Enter') {
event.preventDefault();
this.confirmDeleteModal();
}
}
@ -259,9 +260,9 @@ class Simulations extends Component {
}
if (action.data.action === 'start') {
action.data.parameters = Object.assign({}, this.state.simulations[index].startParameters, simulationModel.startParameters);
action.data.parameters = Object.assign({}, this.state.simulations[index].startParameters, simulationModel.startParameters);
}
AppDispatcher.dispatch({
type: 'simulators/start-action',
simulator,
@ -284,32 +285,32 @@ class Simulations extends Component {
<Table data={this.state.simulations}>
<TableColumn checkbox onChecked={(index, event) => this.onSimulationChecked(index, event)} width='30' />
<TableColumn title='Name' dataKey='name' link='/simulations/' linkKey='_id' />
<TableColumn
width='100'
editButton
deleteButton
exportButton
onEdit={index => this.setState({ editModal: true, modalSimulation: this.state.simulations[index] })}
onDelete={index => this.setState({ deleteModal: true, modalSimulation: this.state.simulations[index] })}
<TableColumn
width='100'
editButton
deleteButton
exportButton
onEdit={index => this.setState({ editModal: true, modalSimulation: this.state.simulations[index] })}
onDelete={index => this.setState({ deleteModal: true, modalSimulation: this.state.simulations[index] })}
onExport={index => this.exportSimulation(index)}
/>
</Table>
<div style={{ float: 'left' }}>
<SimulatorAction
runDisabled={this.state.selectedSimulations.length === 0}
<SimulatorAction
runDisabled={this.state.selectedSimulations.length === 0}
runAction={this.runAction}
actions={[
{ id: '0', title: 'Start', data: { action: 'start' } },
{ id: '1', title: 'Stop', data: { action: 'stop' } },
{ id: '2', title: 'Pause', data: { action: 'pause' } },
{ id: '3', title: 'Resume', data: { action: 'resume' } }
actions={[
{ id: '0', title: 'Start', data: { action: 'start' } },
{ id: '1', title: 'Stop', data: { action: 'stop' } },
{ id: '2', title: 'Pause', data: { action: 'pause' } },
{ id: '3', title: 'Resume', data: { action: 'resume' } }
]}/>
</div>
<div style={{ float: 'right' }}>
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Simulation</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Simulation</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
</div>
<div style={{ clear: 'both' }} />

View file

@ -21,7 +21,7 @@
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { Button, Glyphicon } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import FileSaver from 'file-saver';
import _ from 'lodash';
@ -29,6 +29,7 @@ import AppDispatcher from '../app-dispatcher';
import SimulatorStore from '../stores/simulator-store';
import UserStore from '../stores/user-store';
import Icon from '../components/icon';
import Table from '../components/table';
import TableColumn from '../components/table-column';
import NewSimulatorDialog from '../components/dialog/new-simulator';
@ -175,7 +176,7 @@ class Simulators extends Component {
}
isSimulatorOnline(state) {
return state != '' && state !== 'shutdown' && state !== 'unknown';
return state !== '' && state !== 'shutdown' && state !== 'unknown';
}
stateLabelStyle = (state, simulator) => {
@ -245,8 +246,8 @@ class Simulators extends Component {
</div>
<div style={{ float: 'right' }}>
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Simulator</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Simulator</Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
</div>
<div style={{ clear: 'both' }} />

View file

@ -21,12 +21,13 @@
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { Button, Glyphicon } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import AppDispatcher from '../app-dispatcher';
import UserStore from '../stores/user-store';
import UsersStore from '../stores/users-store';
import Icon from '../components/icon';
import Table from '../components/table';
import TableColumn from '../components/table-column';
import NewUserDialog from '../components/dialog/new-user';
@ -102,14 +103,14 @@ class Users extends Component {
getHumanRoleName(role_key) {
const HUMAN_ROLE_NAMES = {admin: 'Administrator', user: 'User', guest: 'Guest'};
return HUMAN_ROLE_NAMES.hasOwnProperty(role_key)? HUMAN_ROLE_NAMES[role_key] : '';
}
onModalKeyPress = (event) => {
if (event.key === 'Enter') {
event.preventDefault();
this.confirmDeleteModal();
}
}
@ -127,7 +128,7 @@ class Users extends Component {
<TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
</Table>
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> User</Button>
<Button onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> User</Button>
<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />

View file

@ -373,10 +373,6 @@ body {
text-decoration: none;
}
.section-header .glyphicon {
font-size: 0.8em;
}
.section-buttons-group-right {
height: auto !important;