#203: Add tabs to UI, move CBA to separate tab, cleanup empty css rules

Author: e-halinen

src/renderer/components/App.css

@@ -7,7 +7,7 @@ body {
     margin: 0;
     padding: 0;
     position: relative;
-    background: #ffffff;
+    background-color: #F4F4F5;
     font-size: 18px;
     font-family: gotham_rounded_medium, sans-serif;
 }
@@ -102,14 +102,12 @@ hr {
     letter-spacing: -0.02em;
 }
 
-.App__header-title {
-}
-
 .App__header-version {
     font-size: 60%;
 }
 
 .App__body {
+    height: 920px;
 }
 
 .header-documentation-link {

src/renderer/components/HelmetProject/HelmetProject.css

@@ -1,20 +1,41 @@
 .Project {
     position: relative;
+    background: #ffffff;
+    height: 100%;
 }
- /*
-.Project__runtime {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-}
- */
+
 .Project__selected-details {
     position: absolute;
     top: 130px;
     right: 20px;
     left: 635px;
 }
-.HelmetProject__control-group-separator {
+
+.tab-list {
+    display: flex;
+    justify-content: flex-start;
+    list-style: none;
+    width: 100%;
+    height: 5rem;
+    background-color: #F4F4F5;
+}
+
+.tab-list-item {
+    width: 12rem;
+    height: 2rem;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    color: lightgray;
+}
+
+.tab-item-name {
+    margin-top: 2rem;
 }
+
+.selected-tab {
+    background-color: white;
+    height: 100%;
+    color: #333333;
+    border-radius: 1rem 1rem 0 0;
+}

src/renderer/components/HelmetProject/HelmetProject.jsx

@@ -3,6 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import Store from "electron-store";
 import fs from "fs";
 import path from "path";
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
 const {ipcRenderer} = require('electron');
 
@@ -383,27 +384,42 @@ const HelmetProject = ({
 
       {/* Panel for primary view and controls */}
       <div className="Project__runtime">
-        <Runtime
-          projectPath={projectPath}
-          reloadScenarios={() => _loadProjectScenarios(projectPath)}
-          scenarios={scenarios}
-          scenarioIDsToRun={scenarioIDsToRun}
-          runningScenarioID={runningScenarioID}
-          openScenarioID={openScenarioID}
-          setOpenScenarioID={setOpenScenarioID}
-          deleteScenario={(scenario) => {_deleteScenario(scenario)}}
-          handleClickScenarioToActive={_handleClickScenarioToActive}
-          handleClickNewScenario={_handleClickNewScenario}
-          handleClickStartStop={_handleClickStartStop}
-          logArgs={logArgs}
-          duplicateScenario={duplicateScenario}
-        />
-        <CostBenefitAnalysis
-          resultsPath={resultsPath}
-          cbaOptions={cbaOptions}
-          setCbaOptions={setCbaOptions}
-          runCbaScript={_runCbaScript}
-        />
+        <Tabs className="tab-container">
+          <TabList className="tab-list">
+            <Tab selectedClassName="selected-tab" className="tab-list-item">
+              <h4 className="tab-item-name">Scenarios</h4>
+            </Tab>
+            <Tab selectedClassName="selected-tab" className="tab-list-item">
+              <h4 className="tab-item-name">CBA</h4>
+            </Tab>
+          </TabList>
+
+          <TabPanel>
+            <Runtime
+              projectPath={projectPath}
+              reloadScenarios={() => _loadProjectScenarios(projectPath)}
+              scenarios={scenarios}
+              scenarioIDsToRun={scenarioIDsToRun}
+              runningScenarioID={runningScenarioID}
+              openScenarioID={openScenarioID}
+              setOpenScenarioID={setOpenScenarioID}
+              deleteScenario={(scenario) => {_deleteScenario(scenario)}}
+              handleClickScenarioToActive={_handleClickScenarioToActive}
+              handleClickNewScenario={_handleClickNewScenario}
+              handleClickStartStop={_handleClickStartStop}
+              logArgs={logArgs}
+              duplicateScenario={duplicateScenario}
+            />
+          </TabPanel>
+          <TabPanel>
+            <CostBenefitAnalysis
+              resultsPath={resultsPath}
+              cbaOptions={cbaOptions}
+              setCbaOptions={setCbaOptions}
+              runCbaScript={_runCbaScript}
+            />
+          </TabPanel>
+        </Tabs>
       </div>
 
       {/* Panel for secondary view(s) and controls */}

src/renderer/index.html

@@ -27,6 +27,7 @@
     <link rel="stylesheet" type="text/css" href="components/HelmetProject/RunLog/RunLog.css">
     <script type="text/babel" src="components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.jsx"></script>
     <link rel="stylesheet" type="text/css" href="components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css">
+    <link rel="stylesheet" type="text/css" href="react-tabs/style/react-tabs.css">
     <script type="text/javascript">
         // ipcRenderer is aliased, so that other <script> tag(s) won't crash on startup in "constant-already-set"
         const {webFrame, ipcRenderer: aliasIpcRenderer} = require('electron');
@@ -40,6 +41,7 @@
     <script type="text/babel" src="./icons/DocumentationIcon.jsx"></script>
     <script type="text/babel" src="./icons/ArrowDown.jsx"></script>
     <script type="text/babel" src="./icons/ArrowUp.jsx"></script>
+    <script src="node_modules/electron-tabs/dist/electron-tabs.js"></script>
 </head>
 <body>