games/factorio-server-manager
games/factorio-server-manager
1
0
Fork 0
mirror of https://github.com/OpenFactorioServerManager/factorio-server-manager.git synced 2025-01-10 04:19:38 +02:00
Code Issues Releases Activity

made custom FontAwesome Component

Browse Source
This commit is contained in:
knoxfighter 2018-08-11 17:57:10 +02:00
parent 6fc68ab984
commit eb112d4ad1
19 changed files with 281 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -31,6 +31,7 @@
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.1.3",
"bootstrap-fileinput": "^4.4.9",
"classnames": "^2.2.6",
"cross-env": "^5.2.0",
"jquery": "^3.3.1",
"laravel-mix": "^2.1.11",

9
ui/App/components/ConfigContent.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import {Link} from 'react-router-dom';
import Settings from './Config/Settings.jsx';
import FontAwesomeIcon from "./FontAwesomeIcon";
//https://stackoverflow.com/a/1414175
function stringToBoolean(string) {
@ -243,8 +244,12 @@ class ConfigContent extends React.Component {
<small className="float-sm-right">
<ol className="breadcrumb">
<li className="breadcrumb-item"><Link to="/"><i className="fa fa-tachometer-alt"></i>Server Control</Link></li>
<li className="breadcrumb-item active"><i className="fa fa-cogs"></i>Game configurations</li>
<li className="breadcrumb-item">
<Link to="/"><FontAwesomeIcon icon="tachometer-alt"/>Server Control</Link>
</li>
<li className="breadcrumb-item active">
<FontAwesomeIcon icon="cogs"/>Game configurations
</li>
</ol>
</small>
</h1>

9
ui/App/components/ConsoleContent.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import {Link} from 'react-router-dom';
import PropTypes from 'prop-types';
import FontAwesomeIcon from "./FontAwesomeIcon";
class ConsoleContent extends React.Component {
constructor(props) {
@ -97,8 +98,12 @@ class ConsoleContent extends React.Component {
<small className="float-sm-right">
<ol className="breadcrumb">
<li className="breadcrumb-item"><Link to="/"><i className="fa fa-tachometer-alt"></i>Server Control</Link></li>
<li className="breadcrumb-item active"><i className="fa fa-terminal"></i>Console</li>
<li className="breadcrumb-item">
<Link to="/"><FontAwesomeIcon icon="tachometer-alt"/>Server Control</Link>
</li>
<li className="breadcrumb-item active">
<FontAwesomeIcon icon="terminal"/>Console
</li>
</ol>
</small>
</h1>

30
ui/App/components/FontAwesomeIcon.jsx Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
class FontAwesomeIcon extends React.Component {
constructor(props) {
super(props);
console.log("huhu");
}
render() {
let classes = classNames(this.props.prefix, {
"fas": !this.props.prefix,
}, 'fa-' + this.props.icon, this.props.className);
console.log(classes);
return (
<i className={classes} {...this.props}></i>
);
}
}
FontAwesomeIcon.propTypes = {
icon: PropTypes.string.isRequired,
prefix: PropTypes.string,
className: PropTypes.string
};
export default FontAwesomeIcon;

20
ui/App/components/Header.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
import FontAwesomeIcon from "./FontAwesomeIcon";
class Header extends React.Component {
constructor(props) {
@ -31,12 +32,12 @@ class Header extends React.Component {
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to="/settings">
<i className="fa fa-cogs fa-fw"></i>Settings
<FontAwesomeIcon icon="cogs" className="fa-fw"/>Settings
</Link>
</li>
<li className="nav-item">
<a href="javascript:void(0)" onClick={this.onLogout} className="nav-link">
<i className="fa fa-lock fa-fw"></i>Logout
<FontAwesomeIcon icon="lock" className="fa-fw"/>Logout
</a>
</li>
</ul>
@ -46,26 +47,13 @@ class Header extends React.Component {
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" data-widget="pushmenu" href="#">
<i className="fa fa-bars"></i>
<FontAwesomeIcon icon="bars"/>
</a>
</li>
</ul>
{loginMenu}
</nav>
// <header className="main-header">
// <Link className="logo" to="/"><span className="logo-lg"><b>Factorio</b>SM</span></Link>
//
// <nav className="navbar navbar-static-top" role="navigation">
// <a href="#" className="sidebar-toggle" data-toggle="offcanvas" role="button">
// <span className="sr-only">Toggle navigation</span>
// </a>
// <div className="navbar-custom-menu">
// {loginMenu}
// </div>
// </nav>
// </header>
)
}
}

317
ui/App/components/HiddenSidebar.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import {NavLink} from 'react-router-dom';
import PropTypes from 'prop-types';
import FontAwesomeIcon from "./FontAwesomeIcon";
class HiddenSidebar extends React.Component {
constructor(props) {
@ -17,173 +18,175 @@ class HiddenSidebar extends React.Component {
username = <p>{this.props.username}</p>
}
return(
<aside id="control-sidebar" className="control-sidebar control-sidebar-dark">
<ul className="nav nav-tabs nav-justified control-sidebar-tabs">
<li className="active"><a href="control-sidebar-theme-demo-options-tab" data-toggle="tab"><i className="fa fa-wrench"></i></a></li>
<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i className="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i className="fa fa-cogs"></i></a></li>
</ul>
<div className="tab-content">
<div className="tab-pane" id="control-sidebar-home-tab">
<h3 className="control-sidebar-heading">Recent Activity</h3>
<ul className="control-sidebar-menu">
<li>
<NavLink to="/login" activeClassName="active">
<i className="menu-icon fa fa-birthday-cake bg-red"></i>
return (
<aside id="control-sidebar" className="control-sidebar control-sidebar-dark">
<ul className="nav nav-tabs nav-justified control-sidebar-tabs">
<li className="active">
<a href="control-sidebar-theme-demo-options-tab" data-toggle="tab"><FontAwesomeIcon icon="wrench"/></a>
</li>
<li>
<a href="#control-sidebar-home-tab" data-toggle="tab"><FontAwesomeIcon icon="home"/></a>
</li>
<li>
<a href="#control-sidebar-settings-tab" data-toggle="tab"><FontAwesomeIcon icon="cogs"/></a>
</li>
</ul>
<div className="tab-content">
<div className="tab-pane" id="control-sidebar-home-tab">
<h3 className="control-sidebar-heading">Recent Activity</h3>
<ul className="control-sidebar-menu">
<li>
<NavLink to="/login" activeClassName="active">
<FontAwesomeIcon icon="birthday-cake" className="menu-icon bg-red"/>
<div className="menu-info">
<i className="menu-icon fa fa-lock bg-green"></i>
<h4 className="control-sidebar-subheading">Login</h4>
</div>
</NavLink>
</li>
<li>
<a href="javascript:void(0)">
<i className="menu-icon fa fa-lock bg-yellow"></i>
<div className="menu-info">
<FontAwesomeIcon icon="lock" className="menu-icon bg-green"/>
<h4 className="control-sidebar-subheading">Login</h4>
</div>
</NavLink>
</li>
<li>
<a href="javascript:void(0)">
<FontAwesomeIcon icon="lock" className="menu-icon bg-yellow"/>
<div className="menu-info">
<h4 className="control-sidebar-subheading">Logout</h4>
</div>
</a>
</li>
</ul>
<div className="menu-info">
<h4 className="control-sidebar-subheading">Logout</h4>
</div>
</a>
</li>
</ul>
<h3 className="control-sidebar-heading">Tasks Progress</h3>
<h3 className="control-sidebar-heading">Tasks Progress</h3>
<div className="table-responsive">
<table className="table table-border">
<thead>
<tr>
</tr>
</thead>
<tbody>
{Object.keys(this.props.serverStatus).map(function(key) {
return(
<tr key={key}>
<td>{this.capitalizeFirstLetter(key)}</td>
<td>{this.props.serverStatus[key]}</td>
</tr>
)
}, this)}
</tbody>
</table>
<table className="table table-border">
<tbody>
{Object.keys(this.props.serverStatus).map(function (key) {
return (
<tr key={key}>
<td>{this.capitalizeFirstLetter(key)}</td>
<td>{this.props.serverStatus[key]}</td>
</tr>
)
}, this)}
</tbody>
</table>
</div>
<ul className="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 className="control-sidebar-subheading">
Custom Template Design
<span className="label label-danger pull-right">70%</span>
</h4>
<ul className="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 className="control-sidebar-subheading">
Custom Template Design
<span className="label label-danger pull-right">70%</span>
</h4>
<div className="progress progress-xxs">
<div className="progress-bar progress-bar-danger"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 className="control-sidebar-subheading">
Update Resume
<span className="label label-success pull-right">95%</span>
</h4>
<div className="progress progress-xxs">
<div className="progress-bar progress-bar-danger"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 className="control-sidebar-subheading">
Update Resume
<span className="label label-success pull-right">95%</span>
</h4>
<div className="progress progress-xxs">
<div className="progress-bar progress-bar-success"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 className="control-sidebar-subheading">
Laravel Integration
<span className="label label-warning pull-right">50%</span>
</h4>
<div className="progress progress-xxs">
<div className="progress-bar progress-bar-success"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 className="control-sidebar-subheading">
Laravel Integration
<span className="label label-warning pull-right">50%</span>
</h4>
<div className="progress progress-xxs">
<div className="progress-bar progress-bar-warning"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 className="control-sidebar-subheading">
Back End Framework
<span className="label label-primary pull-right">68%</span>
</h4>
<div className="progress progress-xxs">
<div className="progress-bar progress-bar-warning"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 className="control-sidebar-subheading">
Back End Framework
<span className="label label-primary pull-right">68%</span>
</h4>
<div className="progress progress-xxs">
<div className="progress-bar progress-bar-primary"></div>
</div>
</a>
</li>
</ul>
<div className="progress progress-xxs">
<div className="progress-bar progress-bar-primary"></div>
</div>
</a>
</li>
</ul>
</div>
<div className="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 className="control-sidebar-heading">General Settings</h3>
<div className="form-group">
<label className="control-sidebar-subheading">
Report panel usage
<input type="checkbox" className="pull-right" checked=""/>
</label>
<p>
Some information about this general settings option
</p>
</div>
<div className="form-group">
<label className="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" className="pull-right" checked=""/>
</label>
<p>
Other sets of options are available
</p>
</div>
<div className="form-group">
<label className="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" className="pull-right" checked=""/>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<h3 className="control-sidebar-heading">Chat Settings</h3>
<div className="form-group">
<label className="control-sidebar-subheading">
Show me as online
<input type="checkbox" className="pull-right" checked=""/>
</label>
</div>
<div className="form-group">
<label className="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" className="pull-right"/>
</label>
</div>
<div className="form-group">
<label className="control-sidebar-subheading">
Delete chat history
<a href="javascript:void(0)" className="text-red pull-right"><i
className="far fa-trash-alt"></i></a>
</label>
</div>
</form>
</div>
</div>
<div className="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 className="control-sidebar-heading">General Settings</h3>
<div className="form-group">
<label className="control-sidebar-subheading">
Report panel usage
<input type="checkbox" className="pull-right" checked="" />
</label>
<p>
Some information about this general settings option
</p>
</div>
<div className="form-group">
<label className="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" className="pull-right" checked="" />
</label>
<p>
Other sets of options are available
</p>
</div>
<div className="form-group">
<label className="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" className="pull-right" checked="" />
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<h3 className="control-sidebar-heading">Chat Settings</h3>
<div className="form-group">
<label className="control-sidebar-subheading">
Show me as online
<input type="checkbox" className="pull-right" checked="" />
</label>
</div>
<div className="form-group">
<label className="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" className="pull-right" />
</label>
</div>
<div className="form-group">
<label className="control-sidebar-subheading">
Delete chat history
<a href="javascript:void(0)" className="text-red pull-right"><i className="far fa-trash-alt"></i></a>
</label>
</div>
</form>
</div>
</div>
</aside>
</aside>
)
}
}

6
ui/App/components/Index.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import {Link} from 'react-router-dom';
import ServerCtl from './ServerCtl/ServerCtl.jsx';
import ServerStatus from './ServerCtl/ServerStatus.jsx';
import FontAwesomeIcon from "./FontAwesomeIcon";
class Index extends React.Component {
constructor(props) {
@ -28,7 +28,9 @@ class Index extends React.Component {
<small className="float-sm-right">
<ol className="breadcrumb">
<li className="breadcrumb-item active"><i className="fa fa-tachometer-alt"></i>Server Control</li>
<li className="breadcrumb-item active">
<FontAwesomeIcon icon="tachometer-alt"/>Server Control
</li>
</ol>
</small>
</h1>

10
ui/App/components/LogsContent.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import {Link} from 'react-router-dom';
import LogLines from './Logs/LogLines.jsx';
import FontAwesomeIcon from "./FontAwesomeIcon";
class LogsContent extends React.Component {
constructor(props) {
@ -39,9 +40,12 @@ class LogsContent extends React.Component {
<small className="float-sm-right">
<ol className="breadcrumb">
<li className="breadcrumb-item"><Link to="/"><i className="fa fa-tachometer-alt"></i>Server
Control</Link></li>
<li className="breadcrumb-item active"><i className="far fa-file-alt"></i>Logs</li>
<li className="breadcrumb-item">
<Link to="/"><FontAwesomeIcon icon="tachometer-alt"/>Server Control</Link>
</li>
<li className="breadcrumb-item active">
<FontAwesomeIcon icon="file-alt" prefix="far"/>Logs
</li>
</ol>
</small>
</h1>

7
ui/App/components/Mods/Mod.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import SemVer from 'semver';
import FontAwesomeIcon from "../FontAwesomeIcon";
class Mod extends React.Component {
constructor(props) {
@ -106,9 +107,9 @@ class Mod extends React.Component {
if(this.state.newVersionAvailable) {
let faArrow;
if(SemVer.gt(this.state.newVersion.version, this.props.mod.version)) {
faArrow = "fa fa-arrow-circle-up";
faArrow = "arrow-circle-up";
} else {
faArrow = "fa fa-arrow-circle-down";
faArrow = "arrow-circle-down";
}
version = <span>{this.props.mod.version}
@ -132,7 +133,7 @@ class Mod extends React.Component {
this.state.updateInProgress ?
<div className='loader' style={{width: 15, height: 15, marginRight: 0, borderWidth: 3,}}></div>
:
<i className={faArrow} title="Update Mod" style={{fontSize: "15pt"}}></i>
<FontAwesomeIcon icon={faArrow} title="Update Mod" style={{fontSize: "15pt"}}/>
}
</a>
</span>;

11
ui/App/components/Mods/ModOverview.jsx
View File

@ -8,6 +8,7 @@ import ModPacks from "./packs/ModPackOverview.jsx";
import {instanceOfModsContent} from "./ModsPropTypes.js";
import ModLoadSave from "./ModLoadSave.jsx";
import {ReactSwalNormal} from './../../../js/customSwal';
import FontAwesomeIcon from "../FontAwesomeIcon";
class ModOverview extends React.Component {
constructor(props) {
@ -62,7 +63,7 @@ class ModOverview extends React.Component {
role="button"
style={{cursor: "pointer"}}
>
<i className="fa fa-plus"></i>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Add Mod</h3>
{this.props.loggedIn ?
<div className="box-tools pull-right">
@ -94,7 +95,7 @@ class ModOverview extends React.Component {
role="button"
style={{cursor: "pointer"}}
>
<i className="fa fa-plus"></i>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Upload Mod</h3>
</div>
@ -114,7 +115,7 @@ class ModOverview extends React.Component {
role="button"
style={{cursor: "pointer"}}
>
<i className="fa fa-plus"></i>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Load Mods From Save</h3>
</div>
@ -134,7 +135,7 @@ class ModOverview extends React.Component {
role="button"
style={{cursor: "pointer"}}
>
<i className="fa fa-minus"></i>
<FontAwesomeIcon icon="minus"/>
<h3 className="box-title">Manage Mods</h3>
<div className="box-tools float-sm-right">
{
@ -183,7 +184,7 @@ class ModOverview extends React.Component {
role="button"
style={{cursor: "pointer"}}
>
<i className="fa fa-plus"></i>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Manage Modpacks</h3>
</div>

5
ui/App/components/Mods/packs/ModPackOverview.jsx
View File

@ -5,6 +5,7 @@ import {instanceOfModsContent} from "../ModsPropTypes.js";
import locks from "locks";
import PropTypes from "prop-types";
import {ReactSwalNormal, ReactSwalDanger} from './../../../../js/customSwal';
import FontAwesomeIcon from "../../FontAwesomeIcon";
class ModPackOverview extends React.Component {
constructor(props) {
@ -448,7 +449,7 @@ class ModPackOverview extends React.Component {
aria-controls={modpack.name}
style={{cursor: "pointer"}}
>
<i className="fa fa-plus"></i>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">{modpack.name}</h3>
<div className="box-tools pull-right">
<NativeListener onClick={this.downloadModPack}>
@ -483,7 +484,7 @@ class ModPackOverview extends React.Component {
<div className="box">
<div className="box-header" style={{cursor: "pointer"}} onClick={this.createModPack}>
<i className="fa fa-plus"></i>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Add ModPack with current installed mods</h3>
</div>
</div>

9
ui/App/components/ModsContent.jsx
View File

@ -5,6 +5,7 @@ import ModOverview from './Mods/ModOverview.jsx';
import locks from "locks";
import SemVer from 'semver';
import {ReactSwalNormal, ReactSwalDanger} from './../../js/customSwal';
import FontAwesomeIcon from "./FontAwesomeIcon";
class ModsContent extends React.Component {
constructor(props) {
@ -541,8 +542,12 @@ class ModsContent extends React.Component {
<small className="float-sm-right">
<ol className="breadcrumb">
<li className="breadcrumb-item"><Link to="/"><i className="fa fa-tachometer-alt fa-fw"></i>Server Control</Link></li>
<li className="breadcrumb-item active"><i className="fa fa-pencil-alt"></i>Mods</li>
<li className="breadcrumb-item">
<Link to="/"><FontAwesomeIcon icon="tachometer-alt"/>Server Control</Link>
</li>
<li className="breadcrumb-item active">
<FontAwesomeIcon icon="pencil-alt"/>Mods
</li>
</ol>
</small>
</h1>

3
ui/App/components/Saves/CreateSave.jsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import FontAwesomeIcon from "../FontAwesomeIcon";
class CreateSave extends React.Component {
constructor(props) {
@ -39,7 +40,7 @@ class CreateSave extends React.Component {
if (this.state.loading) {
loadingOverlay =
<div className="overlay">
<i className="fa fa-refresh fa-spin"></i>
<FontAwesomeIcon icon="refresh" className="fa-spin"/>
</div>
} else {
loadingOverlay = ""

10
ui/App/components/Saves/Save.jsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import FontAwesomeIcon from "../FontAwesomeIcon";
class Save extends React.Component {
render() {
@ -22,10 +23,11 @@ class Save extends React.Component {
className="btn btn-danger btn-small"
ref="saveInput"
type="button"
onClick={this.props.removeSave.bind(this, this.props.saves[this.props.index].name)}>
<i className="fa fa-trash"></i>
&nbsp;
Delete
onClick={this.props.removeSave.bind(this, this.props.saves[this.props.index].name)}
>
<FontAwesomeIcon icon="trash"/>
&nbsp;
Delete
</button>
</td>
</tr>

10
ui/App/components/SavesContent.jsx
View File

@ -3,6 +3,7 @@ import {Link} from 'react-router-dom';
import SavesList from './Saves/SavesList.jsx';
import CreateSave from './Saves/CreateSave.jsx';
import UploadSave from './Saves/UploadSave.jsx';
import FontAwesomeIcon from "./FontAwesomeIcon";
class SavesContent extends React.Component {
constructor(props) {
@ -38,9 +39,12 @@ class SavesContent extends React.Component {
<small className="float-sm-right">
<ol className="breadcrumb">
<li className="breadcrumb-item"><Link to="/"><i className="fa fa-tachometer-alt fa-fw"></i>Server
Control</Link></li>
<li className="breadcrumb-item active"><i className="far fa-save"></i>Saves</li>
<li className="breadcrumb-item">
<Link to="/"><FontAwesomeIcon icon="tachometer-alt" className="fa-fw"/>Server Control</Link>
</li>
<li className="breadcrumb-item active">
<FontAwesomeIcon icon="save" prefix="far"/>Saves
</li>
</ol>
</small>
</h1>

13
ui/App/components/ServerCtl/ServerCtl.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {ReactSwalNormal} from './../../../js/customSwal';
import FontAwesomeIcon from "../FontAwesomeIcon";
class ServerCtl extends React.Component {
constructor(props) {
@ -113,19 +114,19 @@ class ServerCtl extends React.Component {
<div className="row">
<div className="col-md-4">
<button className="btn btn-block btn-success" type="submit">
<i className="fa fa-play fa-fw"></i>Start Factorio Server
<FontAwesomeIcon icon="play" className="fa-fw"/>Start Factorio Server
</button>
</div>
<div className="col-md-4">
<button className="btn btn-block btn-warning" type="button" onClick={this.stopServer}>
<i className="fa fa-stop fa-fw"></i>Stop &amp; Save Factorio Server
<FontAwesomeIcon icon="stop" className="fa-fw"/>Stop &amp; Save Factorio Server
</button>
</div>
<div className="col-md-4">
<button className="btn btn-block btn-danger" type="button" onClick={this.killServer}>
<i className="fa fa-close fa-fw"></i>Stop Factorio Server without Saving
<FontAwesomeIcon icon="close" className="fa-fw"/>Stop Factorio Server without Saving
</button>
</div>
</div>
@ -151,7 +152,7 @@ class ServerCtl extends React.Component {
aria-controls="serverCtlAdvanced"
>
<div className="box-header with-border">
<i className="fa fa-plus fa-fw"></i>
<FontAwesomeIcon icon="plus" className="fa-fw"/>
<div className="box-title">Advanced</div>
</div>
</button>
@ -178,10 +179,10 @@ class ServerCtl extends React.Component {
/>
<div className="input-group-btn">
<button type="button" className="btn btn-primary" onClick={this.incrementPort}>
<i className="fa fa-arrow-up"></i>
<FontAwesomeIcon icon="arrow-up"/>
</button>
<button type="button" className="btn btn-primary" onClick={this.decrementPort}>
<i className="fa fa-arrow-down"></i>
<FontAwesomeIcon icon="arrow-down"/>
</button>
</div>
</div>

19
ui/App/components/Sidebar.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import {Link, NavLink} from 'react-router-dom';
import PropTypes from 'prop-types';
import FontAwesomeIcon from './FontAwesomeIcon.jsx';
class Sidebar extends React.Component {
constructor(props) {
@ -9,9 +10,9 @@ class Sidebar extends React.Component {
render() {
if(this.props.serverRunning === "running") {
var serverStatus = <Link to="/" className="d-block text-success"><i className="fa fa-circle"></i>Server Online</Link>
var serverStatus = <Link to="/" className="d-block text-success"><FontAwesomeIcon icon="circle"/>Server Online</Link>
} else {
var serverStatus = <Link to="/" className="d-block text-danger"><i className="fa fa-circle"></i>Server Offline</Link>
var serverStatus = <Link to="/" className="d-block text-danger"><FontAwesomeIcon icon="circle"/>Server Offline</Link>
}
return (
@ -47,37 +48,37 @@ class Sidebar extends React.Component {
<li className="nav-header">MENU</li>
<li className="nav-item">
<NavLink exact to="/" activeClassName="active" className="nav-link">
<i className="nav-icon fa fa-tachometer-alt"></i><p>Server Control</p>
<FontAwesomeIcon icon="tachometer-alt" className="nav-icon"/><p>Server Control</p>
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/mods" activeClassName="active" className="nav-link">
<i className="nav-icon fa fa-pencil-alt"></i><p>Mods</p>
<FontAwesomeIcon icon="pencil-alt" className="nav-icon"/><p>Mods</p>
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/logs" activeClassName="active" className="nav-link">
<i className="nav-icon far fa-file-alt"></i><p>Logs</p>
<FontAwesomeIcon icon="file-alt" className="nav-icon" prefix="far"/><p>Logs</p>
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/saves" activeClassName="active" className="nav-link">
<i className="nav-icon far fa-save"></i><p>Saves</p>
<FontAwesomeIcon icon="save" className="nav-icon" prefix="far"/><p>Saves</p>
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/config" activeClassName="active" className="nav-link">
<i className="nav-icon fa fa-cogs"></i><p>Game Configuration</p>
<FontAwesomeIcon icon="cogs" className="nav-icon"/><p>Game Configuration</p>
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/settings" activeClassName="active" className="nav-link">
<i className="nav-icon fa fa-cog"></i><p>Settings</p>
<FontAwesomeIcon icon="cog" className="nav-icon"/><p>Settings</p>
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/console" activeClassName="active" className="nav-link">
<i className="nav-icon fa fa-terminal"></i><p>Console</p>
<FontAwesomeIcon icon="terminal" className="nav-icon"/><p>Console</p>
</NavLink>
</li>
</ul>

3
ui/App/components/Users/AddUser.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {ReactSwalNormal} from './../../../js/customSwal';
import FontAwesomeIcon from "../FontAwesomeIcon";
class AddUser extends React.Component {
constructor(props) {
@ -110,7 +111,7 @@ class AddUser extends React.Component {
</div>
<button className="btn btn-block btn-success" type="submit">
<i className="fa fa-plus fa-fw"></i>
<FontAwesomeIcon icon="plus" className="fa-fw"/>
Add User
</button>
</form>

9
ui/App/components/UsersContent.jsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import {Link} from 'react-router-dom';
import UserTable from './Users/UserTable.jsx';
import AddUser from './Users/AddUser.jsx';
import FontAwesomeIcon from "./FontAwesomeIcon";
class UsersContent extends React.Component {
constructor(props) {
@ -41,8 +42,12 @@ class UsersContent extends React.Component {
<small className="float-sm-right">
<ol className="breadcrumb">
<li className="breadcrumb-item"><Link to="/"><i className="fa fa-tachometer-alt fa-fw"></i>Server Control</Link></li>
<li className="breadcrumb-item active"><i className="fa fa-cog"></i>Settings</li>
<li className="breadcrumb-item">
<Link to="/"><FontAwesomeIcon icon="tachometer-alt"/>Server Control</Link>
</li>
<li className="breadcrumb-item active">
<FontAwesomeIcon icon="cog"/>Settings
</li>
</ol>
</small>
</h1>