#203: Add tabs to UI

package.json

@@ -35,6 +35,7 @@
     "react": "^18.1.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.1.0",
+    "react-tabs": "^6.0.2",
     "react-tooltip": "^5.15.0",
     "uuid": "^9.0.0",
     "vex-js": "^4.1.0"

src/renderer/components/App.css

@@ -7,9 +7,10 @@ body {
     margin: 0;
     padding: 0;
     position: relative;
-    background: #ffffff;
+    background-color: #F4F4F5;
     font-size: 18px;
     font-family: gotham_rounded_medium, sans-serif;
+    overflow-x: hidden;
 }
 
 button {
@@ -83,6 +84,9 @@ hr {
     background-color: #ffffff;
     background-image: url('Settings.png');
     background-repeat: no-repeat;
+    background-position: center;
+    padding: 0.5rem;
+    border-radius: 1rem;
 }
 
 .App__header {
@@ -102,14 +106,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/CostBenefitAnalysis/CostBenefitAnalysis.css

@@ -1,10 +1,9 @@
 .CBA {
-    background: #F4F4F5;
-    border-top: 1px solid #CCCCCC;
-    border-bottom: 1px solid #CCCCCC;
+    background: #FFFFFF;
     box-sizing: border-box;
     padding: 20px;
     margin-bottom: 20px;
+    margin-top: 1rem;
 }
 
 .CBA__heading {
@@ -66,9 +65,6 @@
     padding: 0;
 }
 
-.CBA__run {
-}
-
 .CBA__run button {
     margin-top: 20px;
 }

src/renderer/components/HelmetProject/HelmetProject.css

@@ -1,20 +1,56 @@
 .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;
+    list-style-position: inside;
+    width: 100%;
+    height: 5rem;
+    background-color: #F4F4F5;
+}
+
+.tab-list-item {
+    width: 12rem;
+    height: 60%;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    color: #333333;
+    border-radius: 1rem 1rem 0 0;
+    background-color: white;
+    opacity: 0.65;
+    margin-left: 5px;
+    cursor: default;
+}
+
+.tab-item-name {
+    padding-top: 2rem;
+}
+
+.tab-item-name:hover { 
+    border-bottom: 2px solid #333333b5;
+}
+
+.selected-tab {
+    background-color: white;
+    height: 60%;
+    color: #333333;
+    opacity: 1;
+    outline: none;
 }
+
+.selected-tab:hover {
+    border-bottom: 2px solid #3333337e;
+}

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 tab-item-name"> 
+              Skenaariot
+            </Tab>
+            <Tab selectedClassName="selected-tab" className="tab-list-item tab-item-name">
+              CBA
+            </Tab>
+          </TabList>
+
+          <TabPanel className="runtime-tab">
+            <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/components/HelmetProject/Runtime/Runtime.css

@@ -1,6 +1,3 @@
-.Runtime { 
-}
-
 /* Helmet project */
 
 .Runtime__helmet-project-controls {
@@ -67,8 +64,6 @@
     width: 24px !important;
     height: 24px !important;
 }
-.Runtime__scenario-activate-checkbox--active {
-}
 
 .Runtime__scenario-open-config {
     display: inline-block;
@@ -126,15 +121,10 @@
 
 .Runtime__start-stop-controls {
     padding: 20px;
-}
-
-.Runtime__start-stop-description {
+    background-color: #FFFFFF;
 }
 
 .Runtime__start-stop-scenarios {
     color: #00985F;
     font-weight: bold;
-}
-
-.Runtime__start-stop-btn {
 }

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>