diff options
Diffstat (limited to 'frontend/src')
22 files changed, 93 insertions, 71 deletions
diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js index 54709482..7cbb45c0 100644 --- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js +++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js @@ -1,6 +1,6 @@ import React from 'react' import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants' -import './ScaleIndicatorComponent.css' +import './ScaleIndicatorComponent.sass' const ScaleIndicatorComponent = ({ scale }) => ( <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}> diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js index e0e4d554..f372734d 100644 --- a/frontend/src/components/app/map/controls/ToolPanelComponent.js +++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js @@ -1,7 +1,7 @@ import React from 'react' import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer' import ExportCanvasComponent from './ExportCanvasComponent' -import './ToolPanelComponent.css' +import './ToolPanelComponent.sass' const ToolPanelComponent = () => ( <div className="tool-panel"> diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js index e1760d5e..f7368f54 100644 --- a/frontend/src/components/app/sidebars/Sidebar.js +++ b/frontend/src/components/app/sidebars/Sidebar.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types' import classNames from 'classnames' import React from 'react' -import './Sidebar.css' +import './Sidebar.sass' class Sidebar extends React.Component { static propTypes = { diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index c03b826f..569166d8 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -1,50 +1,78 @@ -import React from 'react' +import React, { useState } from 'react' +import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap' import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer' import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer' -const UnitTabsComponent = () => ( - <div> - <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> - <li className="nav-item"> - <a className="nav-link active" data-toggle="tab" href="#cpu-units" role="tab"> - CPU - </a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> - GPU - </a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#memory-units" role="tab"> - Memory - </a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#storage-units" role="tab"> - Stor. - </a> - </li> - </ul> - <div className="tab-content"> - <div className="tab-pane active" id="cpu-units" role="tabpanel"> - <UnitAddContainer unitType="cpu" /> - <UnitListContainer unitType="cpu" /> - </div> - <div className="tab-pane" id="gpu-units" role="tabpanel"> - <UnitAddContainer unitType="gpu" /> - <UnitListContainer unitType="gpu" /> - </div> - <div className="tab-pane" id="memory-units" role="tabpanel"> - <UnitAddContainer unitType="memory" /> - <UnitListContainer unitType="memory" /> - </div> - <div className="tab-pane" id="storage-units" role="tabpanel"> - <UnitAddContainer unitType="storage" /> - <UnitListContainer unitType="storage" /> - </div> +const UnitTabsComponent = () => { + const [activeTab, setActiveTab] = useState('cpu-units') + const toggle = (tab) => { + if (activeTab !== tab) setActiveTab(tab) + } + + return ( + <div> + <Nav tabs> + <NavItem> + <NavLink + className={activeTab === 'cpu-units' && 'active'} + onClick={() => { + toggle('cpu-units') + }} + > + CPU + </NavLink> + </NavItem> + <NavItem> + <NavLink + className={activeTab === 'gpu-units' && 'active'} + onClick={() => { + toggle('gpu-units') + }} + > + GPU + </NavLink> + </NavItem> + <NavItem> + <NavLink + className={activeTab === 'memory-units' && 'active'} + onClick={() => { + toggle('memory-units') + }} + > + Memory + </NavLink> + </NavItem> + <NavItem> + <NavLink + className={activeTab === 'storage-units' && 'active'} + onClick={() => { + toggle('storage-units') + }} + > + Stor. + </NavLink> + </NavItem> + </Nav> + <TabContent activeTab={activeTab}> + <TabPane tabId="cpu-units"> + <UnitAddContainer unitType="cpu" /> + <UnitListContainer unitType="cpu" /> + </TabPane> + <TabPane tabId="gpu-units"> + <UnitAddContainer unitType="gpu" /> + <UnitListContainer unitType="gpu" /> + </TabPane> + <TabPane tabId="memory-units"> + <UnitAddContainer unitType="memory" /> + <UnitListContainer unitType="memory" /> + </TabPane> + <TabPane tabId="storage-units"> + <UnitAddContainer unitType="storage" /> + <UnitListContainer unitType="storage" /> + </TabPane> + </TabContent> </div> - </div> -) + ) +} export default UnitTabsComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js index aa7a4f8f..12be26bd 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -1,7 +1,7 @@ import React from 'react' import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer' import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer' -import './MachineListComponent.css' +import './MachineListComponent.sass' const MachineListComponent = ({ machineIds }) => { return ( diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index d7127114..ca41bf57 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -3,7 +3,7 @@ import BackToRoomContainer from '../../../../../containers/app/sidebars/topology import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer' import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer' import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer' -import './RackSidebarComponent.css' +import './RackSidebarComponent.sass' import AddPrefabContainer from '../../../../../containers/app/sidebars/topology/rack/AddPrefabContainer' const RackSidebarComponent = () => { diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js index 095fb939..42bdab8a 100644 --- a/frontend/src/components/home/ContactSection.js +++ b/frontend/src/components/home/ContactSection.js @@ -1,6 +1,6 @@ import React from 'react' import FontAwesome from 'react-fontawesome' -import './ContactSection.css' +import './ContactSection.sass' import ContentSection from './ContentSection' const ContactSection = () => ( diff --git a/frontend/src/components/home/ContentSection.js b/frontend/src/components/home/ContentSection.js index ba2e4ec3..9d4832d9 100644 --- a/frontend/src/components/home/ContentSection.js +++ b/frontend/src/components/home/ContentSection.js @@ -1,7 +1,7 @@ import classNames from 'classnames' import PropTypes from 'prop-types' import React from 'react' -import './ContentSection.css' +import './ContentSection.sass' const ContentSection = ({ name, title, children }) => ( <div id={name} className={classNames(name + '-section', 'content-section')}> diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js index f7af4cd9..7b410679 100644 --- a/frontend/src/components/home/JumbotronHeader.js +++ b/frontend/src/components/home/JumbotronHeader.js @@ -1,5 +1,5 @@ import React from 'react' -import './JumbotronHeader.css' +import './JumbotronHeader.sass' const JumbotronHeader = () => ( <section className="jumbotron-header"> diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js index d0ff54bd..c987d5d0 100644 --- a/frontend/src/components/home/ScreenshotSection.js +++ b/frontend/src/components/home/ScreenshotSection.js @@ -1,7 +1,7 @@ import classNames from 'classnames' import React from 'react' import ContentSection from './ContentSection' -import './ScreenshotSection.css' +import './ScreenshotSection.sass' const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => ( <ContentSection name={name} title={title}> diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js index 293049e1..7a1c2462 100644 --- a/frontend/src/components/navigation/AppNavbarComponent.js +++ b/frontend/src/components/navigation/AppNavbarComponent.js @@ -2,7 +2,7 @@ import React from 'react' import FontAwesome from 'react-fontawesome' import { Link } from 'react-router-dom' import Navbar, { NavItem } from './Navbar' -import './Navbar.css' +import './Navbar.sass' const AppNavbarComponent = ({ project, fullWidth }) => ( <Navbar fullWidth={fullWidth}> diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js index 798d1b97..e22933af 100644 --- a/frontend/src/components/navigation/HomeNavbar.js +++ b/frontend/src/components/navigation/HomeNavbar.js @@ -1,6 +1,6 @@ import React from 'react' import Navbar from './Navbar' -import './Navbar.css' +import './Navbar.sass' const ScrollNavItem = ({ id, name }) => ( <li className="nav-item"> diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js index b1f1f7ae..164a2309 100644 --- a/frontend/src/components/navigation/Navbar.js +++ b/frontend/src/components/navigation/Navbar.js @@ -5,7 +5,7 @@ import { userIsLoggedIn } from '../../auth/index' import Login from '../../containers/auth/Login' import Logout from '../../containers/auth/Logout' import ProfileName from '../../containers/auth/ProfileName' -import './Navbar.css' +import './Navbar.sass' export const NAVBAR_HEIGHT = 60 diff --git a/frontend/src/components/not-found/BlinkingCursor.js b/frontend/src/components/not-found/BlinkingCursor.js index bc2d2366..dbdba212 100644 --- a/frontend/src/components/not-found/BlinkingCursor.js +++ b/frontend/src/components/not-found/BlinkingCursor.js @@ -1,5 +1,5 @@ import React from 'react' -import './BlinkingCursor.css' +import './BlinkingCursor.sass' const BlinkingCursor = () => <span className="blinking-cursor">_</span> diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js index 6783d6a8..bcc522c9 100644 --- a/frontend/src/components/not-found/CodeBlock.js +++ b/frontend/src/components/not-found/CodeBlock.js @@ -1,5 +1,5 @@ import React from 'react' -import './CodeBlock.css' +import './CodeBlock.sass' const CodeBlock = () => { const textBlock = diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js index 490fd4c7..a25e558a 100644 --- a/frontend/src/components/not-found/TerminalWindow.js +++ b/frontend/src/components/not-found/TerminalWindow.js @@ -2,7 +2,7 @@ import React from 'react' import { Link } from 'react-router-dom' import BlinkingCursor from './BlinkingCursor' import CodeBlock from './CodeBlock' -import './TerminalWindow.css' +import './TerminalWindow.sass' const TerminalWindow = () => ( <div className="terminal-window"> diff --git a/frontend/src/components/projects/FilterPanel.js b/frontend/src/components/projects/FilterPanel.js index 0970f573..2b9795d0 100644 --- a/frontend/src/components/projects/FilterPanel.js +++ b/frontend/src/components/projects/FilterPanel.js @@ -1,6 +1,6 @@ import React from 'react' import FilterLink from '../../containers/projects/FilterLink' -import './FilterPanel.css' +import './FilterPanel.sass' const FilterPanel = () => ( <div className="btn-group filter-panel mb-2"> diff --git a/frontend/src/index.js b/frontend/src/index.js index c49e0b68..0971b1e6 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -2,7 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import { setupSocketConnection } from './api/socket' -import './index.css' +import './index.sass' import Routes from './routes' import configureStore from './store/configure-store' diff --git a/frontend/src/index.sass b/frontend/src/index.sass index efb2bed5..a78f7a19 100644 --- a/frontend/src/index.sass +++ b/frontend/src/index.sass @@ -1,3 +1,5 @@ +@import "~bootstrap/scss/bootstrap" + @import ./style-globals/_mixins.sass @import ./style-globals/_variables.sass diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js index 5000ebfe..6fc940c0 100644 --- a/frontend/src/pages/Home.js +++ b/frontend/src/pages/Home.js @@ -9,7 +9,7 @@ import StakeholderSection from '../components/home/StakeholderSection' import TeamSection from '../components/home/TeamSection' import TechnologiesSection from '../components/home/TechnologiesSection' import HomeNavbar from '../components/navigation/HomeNavbar' -import './Home.css' +import './Home.sass' function Home() { return ( diff --git a/frontend/src/pages/NotFound.js b/frontend/src/pages/NotFound.js index f72c7d01..72be7342 100644 --- a/frontend/src/pages/NotFound.js +++ b/frontend/src/pages/NotFound.js @@ -1,7 +1,7 @@ import React from 'react' import DocumentTitle from 'react-document-title' import TerminalWindow from '../components/not-found/TerminalWindow' -import './NotFound.css' +import './NotFound.sass' const NotFound = () => ( <DocumentTitle title="Page Not Found - OpenDC"> diff --git a/frontend/src/util/jquery.js b/frontend/src/util/jquery.js deleted file mode 100644 index 4976dd7d..00000000 --- a/frontend/src/util/jquery.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Binding of the global jQuery variable for use within React. - * - * This should be used instead of '$', to address ESLint warnings relating to undefined global variables. - */ -const jQuery = window['$'] - -export default jQuery |