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