From eb112d4ad1f6629ef33db47a4c70ccc25e20f821 Mon Sep 17 00:00:00 2001 From: knoxfighter Date: Sat, 11 Aug 2018 17:57:10 +0200 Subject: [PATCH] made custom FontAwesome Component --- package.json | 1 + ui/App/components/ConfigContent.jsx | 9 +- ui/App/components/ConsoleContent.jsx | 9 +- ui/App/components/FontAwesomeIcon.jsx | 30 ++ ui/App/components/Header.jsx | 20 +- ui/App/components/HiddenSidebar.jsx | 317 +++++++++--------- ui/App/components/Index.jsx | 6 +- ui/App/components/LogsContent.jsx | 10 +- ui/App/components/Mods/Mod.jsx | 7 +- ui/App/components/Mods/ModOverview.jsx | 11 +- .../components/Mods/packs/ModPackOverview.jsx | 5 +- ui/App/components/ModsContent.jsx | 9 +- ui/App/components/Saves/CreateSave.jsx | 3 +- ui/App/components/Saves/Save.jsx | 10 +- ui/App/components/SavesContent.jsx | 10 +- ui/App/components/ServerCtl/ServerCtl.jsx | 13 +- ui/App/components/Sidebar.jsx | 19 +- ui/App/components/Users/AddUser.jsx | 3 +- ui/App/components/UsersContent.jsx | 9 +- 19 files changed, 281 insertions(+), 220 deletions(-) create mode 100644 ui/App/components/FontAwesomeIcon.jsx diff --git a/package.json b/package.json index 4203274..a7b9bcc 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/ui/App/components/ConfigContent.jsx b/ui/App/components/ConfigContent.jsx index a030c61..0090dc9 100644 --- a/ui/App/components/ConfigContent.jsx +++ b/ui/App/components/ConfigContent.jsx @@ -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 {
    -
  1. Server Control
    2. -
  2. Game configurations
    3. +
  3. + Server Control +
    4. +
  4. + Game configurations +
diff --git a/ui/App/components/ConsoleContent.jsx b/ui/App/components/ConsoleContent.jsx index 26cfe0d..9f07031 100644 --- a/ui/App/components/ConsoleContent.jsx +++ b/ui/App/components/ConsoleContent.jsx @@ -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 {
    -
  1. Server Control
    2. -
  2. Console
    3. +
  3. + Server Control +
    4. +
  4. + Console +
diff --git a/ui/App/components/FontAwesomeIcon.jsx b/ui/App/components/FontAwesomeIcon.jsx new file mode 100644 index 0000000..c7e77e0 --- /dev/null +++ b/ui/App/components/FontAwesomeIcon.jsx @@ -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 ( + + ); + } +} + +FontAwesomeIcon.propTypes = { + icon: PropTypes.string.isRequired, + prefix: PropTypes.string, + className: PropTypes.string +}; + +export default FontAwesomeIcon; diff --git a/ui/App/components/Header.jsx b/ui/App/components/Header.jsx index e314ec3..670466f 100644 --- a/ui/App/components/Header.jsx +++ b/ui/App/components/Header.jsx @@ -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 { @@ -46,26 +47,13 @@ class Header extends React.Component { {loginMenu} - - //
- // FactorioSM - // - // - //
) } } diff --git a/ui/App/components/HiddenSidebar.jsx b/ui/App/components/HiddenSidebar.jsx index fa06c60..aa62947 100644 --- a/ui/App/components/HiddenSidebar.jsx +++ b/ui/App/components/HiddenSidebar.jsx @@ -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 =

{this.props.username}

} - return( - + ) } } diff --git a/ui/App/components/Index.jsx b/ui/App/components/Index.jsx index 4f4ca68..b6816a4 100644 --- a/ui/App/components/Index.jsx +++ b/ui/App/components/Index.jsx @@ -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 {
    -
  1. Server Control
    2. +
  2. + Server Control +
diff --git a/ui/App/components/LogsContent.jsx b/ui/App/components/LogsContent.jsx index ca9c8a7..0d58dfa 100644 --- a/ui/App/components/LogsContent.jsx +++ b/ui/App/components/LogsContent.jsx @@ -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 {
    -
  1. Server - Control
    2. -
  2. Logs
    3. +
  3. + Server Control +
    4. +
  4. + Logs +
diff --git a/ui/App/components/Mods/Mod.jsx b/ui/App/components/Mods/Mod.jsx index 8225a5a..f365b8c 100644 --- a/ui/App/components/Mods/Mod.jsx +++ b/ui/App/components/Mods/Mod.jsx @@ -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 = {this.props.mod.version} @@ -132,7 +133,7 @@ class Mod extends React.Component { this.state.updateInProgress ?
: - + } ; diff --git a/ui/App/components/Mods/ModOverview.jsx b/ui/App/components/Mods/ModOverview.jsx index 00698f0..84d1678 100644 --- a/ui/App/components/Mods/ModOverview.jsx +++ b/ui/App/components/Mods/ModOverview.jsx @@ -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"}} > - +

Add Mod

{this.props.loggedIn ?
@@ -94,7 +95,7 @@ class ModOverview extends React.Component { role="button" style={{cursor: "pointer"}} > - +

Upload Mod

@@ -114,7 +115,7 @@ class ModOverview extends React.Component { role="button" style={{cursor: "pointer"}} > - +

Load Mods From Save

@@ -134,7 +135,7 @@ class ModOverview extends React.Component { role="button" style={{cursor: "pointer"}} > - +

Manage Mods

{ @@ -183,7 +184,7 @@ class ModOverview extends React.Component { role="button" style={{cursor: "pointer"}} > - +

Manage Modpacks

diff --git a/ui/App/components/Mods/packs/ModPackOverview.jsx b/ui/App/components/Mods/packs/ModPackOverview.jsx index dc961e3..250b980 100644 --- a/ui/App/components/Mods/packs/ModPackOverview.jsx +++ b/ui/App/components/Mods/packs/ModPackOverview.jsx @@ -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"}} > - +

{modpack.name}

@@ -483,7 +484,7 @@ class ModPackOverview extends React.Component {
- +

Add ModPack with current installed mods

diff --git a/ui/App/components/ModsContent.jsx b/ui/App/components/ModsContent.jsx index 4f8e3f9..128a897 100644 --- a/ui/App/components/ModsContent.jsx +++ b/ui/App/components/ModsContent.jsx @@ -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 {
    -
  1. Server Control
    2. -
  2. Mods
    3. +
  3. + Server Control +
    4. +
  4. + Mods +
diff --git a/ui/App/components/Saves/CreateSave.jsx b/ui/App/components/Saves/CreateSave.jsx index 15032f3..e04a81a 100644 --- a/ui/App/components/Saves/CreateSave.jsx +++ b/ui/App/components/Saves/CreateSave.jsx @@ -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 =
- +
} else { loadingOverlay = "" diff --git a/ui/App/components/Saves/Save.jsx b/ui/App/components/Saves/Save.jsx index 99a2a2f..53e7575 100644 --- a/ui/App/components/Saves/Save.jsx +++ b/ui/App/components/Saves/Save.jsx @@ -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)}> - -   - Delete + onClick={this.props.removeSave.bind(this, this.props.saves[this.props.index].name)} + > + +   + Delete diff --git a/ui/App/components/SavesContent.jsx b/ui/App/components/SavesContent.jsx index c2b15b1..6cd6427 100644 --- a/ui/App/components/SavesContent.jsx +++ b/ui/App/components/SavesContent.jsx @@ -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 {
    -
  1. Server - Control
    2. -
  2. Saves
    3. +
  3. + Server Control +
    4. +
  4. + Saves +
diff --git a/ui/App/components/ServerCtl/ServerCtl.jsx b/ui/App/components/ServerCtl/ServerCtl.jsx index 00206df..801daa5 100644 --- a/ui/App/components/ServerCtl/ServerCtl.jsx +++ b/ui/App/components/ServerCtl/ServerCtl.jsx @@ -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 {
@@ -151,7 +152,7 @@ class ServerCtl extends React.Component { aria-controls="serverCtlAdvanced" >
- +
Advanced
@@ -178,10 +179,10 @@ class ServerCtl extends React.Component { />
diff --git a/ui/App/components/Sidebar.jsx b/ui/App/components/Sidebar.jsx index 5c923bb..ec75939 100644 --- a/ui/App/components/Sidebar.jsx +++ b/ui/App/components/Sidebar.jsx @@ -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 = Server Online + var serverStatus = Server Online } else { - var serverStatus = Server Offline + var serverStatus = Server Offline } return ( @@ -47,37 +48,37 @@ class Sidebar extends React.Component {
  • MENU
  • -

    Server Control

    +

    Server Control
  • -

    Mods

    +

    Mods
  • -

    Logs

    +

    Logs
  • -

    Saves

    +

    Saves
  • -

    Game Configuration

    +

    Game Configuration
  • -

    Settings

    +

    Settings
  • -

    Console

    +

    Console
    • diff --git a/ui/App/components/Users/AddUser.jsx b/ui/App/components/Users/AddUser.jsx index 8777040..8c53ebd 100644 --- a/ui/App/components/Users/AddUser.jsx +++ b/ui/App/components/Users/AddUser.jsx @@ -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 { diff --git a/ui/App/components/UsersContent.jsx b/ui/App/components/UsersContent.jsx index 6461cab..b645d12 100644 --- a/ui/App/components/UsersContent.jsx +++ b/ui/App/components/UsersContent.jsx @@ -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 {
      -
    1. Server Control
      2. -
    2. Settings
      3. +
    3. + Server Control +
      4. +
    4. + Settings +