From 4e031c7951b93da2fa8684c6d490e1b1353130c9 Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Thu, 1 Aug 2024 16:09:24 +0300
Subject: [PATCH 1/7] #203: Add tabs to UI, move CBA to separate tab, cleanup
empty css rules
---
src/renderer/components/App.css | 6 +-
.../HelmetProject/HelmetProject.css | 41 +++++++++----
.../HelmetProject/HelmetProject.jsx | 58 ++++++++++++-------
src/renderer/index.html | 2 +
4 files changed, 72 insertions(+), 35 deletions(-)
diff --git a/src/renderer/components/App.css b/src/renderer/components/App.css
index 55b9ba43..596d7b0c 100644
--- a/src/renderer/components/App.css
+++ b/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 {
diff --git a/src/renderer/components/HelmetProject/HelmetProject.css b/src/renderer/components/HelmetProject/HelmetProject.css
index 1ac6b1cf..4c9fd86d 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/renderer/components/HelmetProject/HelmetProject.jsx b/src/renderer/components/HelmetProject/HelmetProject.jsx
index 98ebaf58..6d5d43f1 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.jsx
+++ b/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 */}
- _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}
- />
-
+
+
+
+ Scenarios
+
+
+ CBA
+
+
+
+
+ _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}
+ />
+
+
+
+
+
{/* Panel for secondary view(s) and controls */}
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 56fb831b..65af139f 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -27,6 +27,7 @@
+
+
From 2c985e5adecdfa18d16a3a45f64727147a1c8ba2 Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Thu, 1 Aug 2024 16:13:48 +0300
Subject: [PATCH 2/7] Add package files
---
package-lock.json | 69 ++++++++++++++++++++++++++++++++++++++++++++---
package.json | 1 +
2 files changed, 67 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index baadfe4a..06a38092 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,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"
@@ -1578,6 +1579,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -5157,6 +5166,16 @@
"node": ">=10"
}
},
+ "node_modules/prop-types": {
+ "version": "15.8.1",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+ "dependencies": {
+ "loose-envify": "^1.4.0",
+ "object-assign": "^4.1.1",
+ "react-is": "^16.13.1"
+ }
+ },
"node_modules/psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -5280,6 +5299,23 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ },
+ "node_modules/react-tabs": {
+ "version": "6.0.2",
+ "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz",
+ "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==",
+ "dependencies": {
+ "clsx": "^2.0.0",
+ "prop-types": "^15.5.0"
+ },
+ "peerDependencies": {
+ "react": "^18.0.0"
+ }
+ },
"node_modules/react-tooltip": {
"version": "5.15.0",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.15.0.tgz",
@@ -7564,9 +7600,7 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
- "requires": {
- "ajv": "^8.0.0"
- }
+ "requires": {}
},
"ansi-escapes": {
"version": "4.3.2",
@@ -8010,6 +8044,11 @@
"mimic-response": "^1.0.0"
}
},
+ "clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+ },
"code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -10694,6 +10733,16 @@
"retry": "^0.12.0"
}
},
+ "prop-types": {
+ "version": "15.8.1",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+ "requires": {
+ "loose-envify": "^1.4.0",
+ "object-assign": "^4.1.1",
+ "react-is": "^16.13.1"
+ }
+ },
"psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -10773,6 +10822,20 @@
"scheduler": "^0.23.0"
}
},
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ },
+ "react-tabs": {
+ "version": "6.0.2",
+ "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz",
+ "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==",
+ "requires": {
+ "clsx": "^2.0.0",
+ "prop-types": "^15.5.0"
+ }
+ },
"react-tooltip": {
"version": "5.15.0",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.15.0.tgz",
diff --git a/package.json b/package.json
index 9a121b7b..3c60598b 100644
--- a/package.json
+++ b/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"
From 2e76e3645e680d2a1d1881f3e54b0220e2a79c2c Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Tue, 6 Aug 2024 09:40:03 +0300
Subject: [PATCH 3/7] Tweak styling, add padding to settings button
---
src/renderer/components/App.css | 3 +++
.../CostBenefitAnalysis/CostBenefitAnalysis.css | 1 +
.../components/HelmetProject/HelmetProject.css | 13 +++++++++----
.../components/HelmetProject/HelmetProject.jsx | 8 ++++----
4 files changed, 17 insertions(+), 8 deletions(-)
diff --git a/src/renderer/components/App.css b/src/renderer/components/App.css
index 596d7b0c..89233c87 100644
--- a/src/renderer/components/App.css
+++ b/src/renderer/components/App.css
@@ -83,6 +83,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 {
diff --git a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
index 050ed788..2b003809 100644
--- a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
+++ b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
@@ -5,6 +5,7 @@
box-sizing: border-box;
padding: 20px;
margin-bottom: 20px;
+ margin-top: 3rem;
}
.CBA__heading {
diff --git a/src/renderer/components/HelmetProject/HelmetProject.css b/src/renderer/components/HelmetProject/HelmetProject.css
index 4c9fd86d..f070c6b4 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.css
+++ b/src/renderer/components/HelmetProject/HelmetProject.css
@@ -15,6 +15,7 @@
display: flex;
justify-content: flex-start;
list-style: none;
+ list-style-position: inside;
width: 100%;
height: 5rem;
background-color: #F4F4F5;
@@ -22,20 +23,24 @@
.tab-list-item {
width: 12rem;
- height: 2rem;
+ height: 100%;
display: flex;
align-content: center;
justify-content: center;
- color: lightgray;
+ color: #333333;
+ border-radius: 1rem 1rem 0 0;
+ background-color: white;
+ opacity: 0.65;
+ margin-left: 5px;
}
.tab-item-name {
- margin-top: 2rem;
+ padding-top: 2rem;
}
.selected-tab {
background-color: white;
height: 100%;
color: #333333;
- border-radius: 1rem 1rem 0 0;
+ opacity: 1;
}
\ No newline at end of file
diff --git a/src/renderer/components/HelmetProject/HelmetProject.jsx b/src/renderer/components/HelmetProject/HelmetProject.jsx
index 6d5d43f1..12ce9f14 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.jsx
+++ b/src/renderer/components/HelmetProject/HelmetProject.jsx
@@ -386,11 +386,11 @@ const HelmetProject = ({
-
- Scenarios
+
+ Scenarios
-
- CBA
+
+ CBA
From 9b7ba35dd324cebb385c6a044d19b9a9ad40a42d Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Mon, 2 Sep 2024 13:48:02 +0300
Subject: [PATCH 4/7] Tweak tab styling, change tab titles
---
.../components/HelmetProject/HelmetProject.css | 14 ++++++++++++--
.../components/HelmetProject/HelmetProject.jsx | 2 +-
2 files changed, 13 insertions(+), 3 deletions(-)
diff --git a/src/renderer/components/HelmetProject/HelmetProject.css b/src/renderer/components/HelmetProject/HelmetProject.css
index f070c6b4..33d2f717 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.css
+++ b/src/renderer/components/HelmetProject/HelmetProject.css
@@ -23,7 +23,7 @@
.tab-list-item {
width: 12rem;
- height: 100%;
+ height: 60%;
display: flex;
align-content: center;
justify-content: center;
@@ -32,15 +32,25 @@
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: 100%;
+ height: 60%;
color: #333333;
opacity: 1;
+ outline: none;
+}
+
+.selected-tab:hover {
+ border-bottom: 2px solid #3333337e;
}
\ No newline at end of file
diff --git a/src/renderer/components/HelmetProject/HelmetProject.jsx b/src/renderer/components/HelmetProject/HelmetProject.jsx
index 12ce9f14..5a06be50 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.jsx
+++ b/src/renderer/components/HelmetProject/HelmetProject.jsx
@@ -387,7 +387,7 @@ const HelmetProject = ({
- Scenarios
+ Skenaariot
CBA
From ea6b0f0c78ddad150403c5572adffd624e23e927 Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Tue, 17 Sep 2024 13:31:59 +0300
Subject: [PATCH 5/7] Hide X overflow so we don't get a horizontal scroll bar
---
src/renderer/components/App.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/renderer/components/App.css b/src/renderer/components/App.css
index 89233c87..0428867c 100644
--- a/src/renderer/components/App.css
+++ b/src/renderer/components/App.css
@@ -10,6 +10,7 @@ body {
background-color: #F4F4F5;
font-size: 18px;
font-family: gotham_rounded_medium, sans-serif;
+ overflow-x: hidden;
}
button {
From 24e746cd0b8087bbf0c8ca40a98dbe61abfa41c4 Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:19:17 +0300
Subject: [PATCH 6/7] Tweak CBA tab styling
---
.../HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
index 2b003809..39ddff53 100644
--- a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
+++ b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
@@ -1,7 +1,5 @@
.CBA {
- background: #F4F4F5;
- border-top: 1px solid #CCCCCC;
- border-bottom: 1px solid #CCCCCC;
+ background: #FFFFFF;
box-sizing: border-box;
padding: 20px;
margin-bottom: 20px;
From 04e28bf0a5e4ff4c672a1b97850981804b5a8ef4 Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:37:34 +0300
Subject: [PATCH 7/7] Tweak styles, remove empty CSS classes
---
.../CostBenefitAnalysis/CostBenefitAnalysis.css | 5 +----
.../components/HelmetProject/HelmetProject.jsx | 2 +-
.../components/HelmetProject/Runtime/Runtime.css | 12 +-----------
3 files changed, 3 insertions(+), 16 deletions(-)
diff --git a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
index 39ddff53..bc569ee2 100644
--- a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
+++ b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
@@ -3,7 +3,7 @@
box-sizing: border-box;
padding: 20px;
margin-bottom: 20px;
- margin-top: 3rem;
+ margin-top: 1rem;
}
.CBA__heading {
@@ -65,9 +65,6 @@
padding: 0;
}
-.CBA__run {
-}
-
.CBA__run button {
margin-top: 20px;
}
\ No newline at end of file
diff --git a/src/renderer/components/HelmetProject/HelmetProject.jsx b/src/renderer/components/HelmetProject/HelmetProject.jsx
index 5a06be50..5ebe91d0 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.jsx
+++ b/src/renderer/components/HelmetProject/HelmetProject.jsx
@@ -394,7 +394,7 @@ const HelmetProject = ({
-
+
_loadProjectScenarios(projectPath)}
diff --git a/src/renderer/components/HelmetProject/Runtime/Runtime.css b/src/renderer/components/HelmetProject/Runtime/Runtime.css
index 6fddc688..494f0f30 100644
--- a/src/renderer/components/HelmetProject/Runtime/Runtime.css
+++ b/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 {
}
\ No newline at end of file