From f1b4c836fef82bacb8d84d559504736e52b72b3c Mon Sep 17 00:00:00 2001 From: camdnnn Date: Thu, 16 Jan 2025 16:38:45 -0500 Subject: [PATCH 01/10] add textfield --- .../textfield/TextField.module.scss | 35 +++++++++++++++++ .../src/components/textfield/TextField.tsx | 39 +++++++++++++++++++ front-end/src/main.ts | 29 -------------- front-end/src/styles/_variables.scss | 2 + 4 files changed, 76 insertions(+), 29 deletions(-) create mode 100644 front-end/src/components/textfield/TextField.module.scss create mode 100644 front-end/src/components/textfield/TextField.tsx diff --git a/front-end/src/components/textfield/TextField.module.scss b/front-end/src/components/textfield/TextField.module.scss new file mode 100644 index 00000000..9c1fb7c2 --- /dev/null +++ b/front-end/src/components/textfield/TextField.module.scss @@ -0,0 +1,35 @@ +@use '@styles/_fonts'; + +.textField { + @include fonts.text-medium; + display: flex; + flex-direction: column; + + .label { + color: var(--light-grey); + margin-bottom: 0.25rem; + font-size: 1rem; + } + + .container { + display: flex; + align-items: center; + background-color: var(--light-grey); + border-radius: 8px; + padding: 0.5rem; + + .title { + color: var(--text-colour); + font-size: 1rem; + } + + .input { + background: none; + border: none; + outline: none; + color: var(--text-colour); + flex-grow: 1; + font-size: 1rem; + } + } +} \ No newline at end of file diff --git a/front-end/src/components/textfield/TextField.tsx b/front-end/src/components/textfield/TextField.tsx new file mode 100644 index 00000000..2666659b --- /dev/null +++ b/front-end/src/components/textfield/TextField.tsx @@ -0,0 +1,39 @@ +import styles from './TextField.module.scss'; +import cx from 'classnames'; + +interface TextFieldProps { + title: string; + label?: string; + placeholder?: string; + textSize?: number; + value?: string; + onChange?: (event: React.ChangeEvent) => void; +} + +const TextField = ({ + title, + label, + placeholder, + value, + onChange, +}: TextFieldProps) => { + return ( +
+ {label &&
{label}
} +
+
+ {title} +
+ +
+
+ ); +}; + +export default TextField; diff --git a/front-end/src/main.ts b/front-end/src/main.ts index fcb5c69b..aa503792 100644 --- a/front-end/src/main.ts +++ b/front-end/src/main.ts @@ -20,17 +20,6 @@ function createWindow() { win.maximize(); - // Development - /* - win.loadFile(path.resolve(resourcePath, '../../build/index.html')); - backend = spawn( - 'java', - ['-jar', path.resolve(resourcePath, '../../../backend/target/backend-1.2.0-runner.jar')], - { env: { ...process.env, RESOURCE_PATH: resourcePath + '/binary_csv/' } } - ); - */ - - // Production win.loadFile(path.resolve(resourcePath, 'build/index.html')); backend = spawn( path.resolve(resourcePath, '../backend/jre/bin/java.exe').toString(), @@ -39,24 +28,6 @@ function createWindow() { env: { ...process.env, RESOURCE_PATH: path.resolve(resourcePath, '../backend').toString() + '/' }, }, ); - - // Conditional file paths - /* - isProduction = app.isPackaged; - const frontendPath = path.resolve(resourcePath, isProduction ? 'build/index.html' : '../../build/index.html'); - const backendPath = path.resolve(resourcePath, isProduction ? '../backend' : '../../../backend/target') - const dllPath = path.resolve(resourcePath, isProduction ? '../backend' : '../../../backend/src/main/java/com/mcmasterbaja/binary_csv').toString() + '/'; - - // Conditional - win.loadFile(frontendPath); - backend = spawn( - path.resolve(backendPath, 'jre/bin/java.exe').toString(), - ['-jar', path.resolve(backendPath, 'backend-1.2.0-runner.jar')], - { - env: { ...process.env, RESOURCE_PATH: dllPath }, - }, - ); - */ win.on('closed', () => win = null); diff --git a/front-end/src/styles/_variables.scss b/front-end/src/styles/_variables.scss index 7342af5a..974dbcbe 100644 --- a/front-end/src/styles/_variables.scss +++ b/front-end/src/styles/_variables.scss @@ -5,6 +5,7 @@ $tertiary: #323232; $background: #222222; $accent: #BB0808; $text-colour: #FFFFFF; +$upload-stroke: #636363; // Baja colour $baja-colour: #75151E; @@ -18,6 +19,7 @@ $baja-colour: #75151E; --accent: #{$accent}; --text-colour: #{$text-colour}; + --light-grey: #{$upload-stroke}; --baja-colour: #{$baja-colour}; } From 6259f62e934bd0aeb918d202f425848bf6b974bc Mon Sep 17 00:00:00 2001 From: Kai Arseneau Date: Sun, 19 Jan 2025 18:51:30 -0500 Subject: [PATCH 02/10] Kai hi --- front-end/src/components/App.tsx | 5 +++++ front-end/src/components/textfield/TextField.module.scss | 7 ++++--- front-end/src/components/textfield/TextField.tsx | 6 +++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/front-end/src/components/App.tsx b/front-end/src/components/App.tsx index 194ac103..d49c450d 100644 --- a/front-end/src/components/App.tsx +++ b/front-end/src/components/App.tsx @@ -13,6 +13,8 @@ import MapChart from './map/MapChart/MapChart'; import cx from 'classnames'; import ModelViewer from './model/ModelViewer'; +import TextField from './textfield/TextField'; + const App = () => { const location = useLocation(); @@ -45,11 +47,14 @@ const App = () => { return () => clearTimeout(timer); }, [successMessage]); + const [value, setValue] = useState('Hi'); + return (
{location.pathname !== '/' && ( )} +
{successMessage.message}
{modal === 'Create' ? ) => void; + onChange?: (event: string) => void; } const TextField = ({ @@ -29,7 +29,7 @@ const TextField = ({ type="text" placeholder={placeholder} value={value} - onChange={onChange} + onChange={(e) => onChange(e.target.value)} />
From a15b899e3571d11ce3f2b91b6f41e9113705b321 Mon Sep 17 00:00:00 2001 From: camdnnn Date: Sun, 19 Jan 2025 20:23:13 -0500 Subject: [PATCH 03/10] updated formatting --- front-end/src/components/App.tsx | 4 ++-- .../src/components/textfield/TextField.module.scss | 13 ++++++++----- front-end/src/components/textfield/TextField.tsx | 11 +++++++---- front-end/src/styles/_variables.scss | 4 ++++ 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/front-end/src/components/App.tsx b/front-end/src/components/App.tsx index d49c450d..75220ba0 100644 --- a/front-end/src/components/App.tsx +++ b/front-end/src/components/App.tsx @@ -47,14 +47,14 @@ const App = () => { return () => clearTimeout(timer); }, [successMessage]); - const [value, setValue] = useState('Hi'); + const [value, setValue] = useState(''); return (
{location.pathname !== '/' && ( )} - +
{successMessage.message}
{modal === 'Create' ? void; + onChange?: (value: string) => void; } const TextField = ({ @@ -17,6 +16,10 @@ const TextField = ({ value, onChange, }: TextFieldProps) => { + const handleOnChange = (e: React.ChangeEvent) => { + if (onChange) onChange(e.target.value); + }; + return (
{label &&
{label}
} @@ -29,7 +32,7 @@ const TextField = ({ type="text" placeholder={placeholder} value={value} - onChange={(e) => onChange(e.target.value)} + onChange={handleOnChange} />
diff --git a/front-end/src/styles/_variables.scss b/front-end/src/styles/_variables.scss index 974dbcbe..85582e03 100644 --- a/front-end/src/styles/_variables.scss +++ b/front-end/src/styles/_variables.scss @@ -6,6 +6,8 @@ $background: #222222; $accent: #BB0808; $text-colour: #FFFFFF; $upload-stroke: #636363; +$faded-grey: #C1C1C1; +$default-tertiary: #B3B3B3; // Baja colour $baja-colour: #75151E; @@ -20,6 +22,8 @@ $baja-colour: #75151E; --text-colour: #{$text-colour}; --light-grey: #{$upload-stroke}; + --tertiary-default: #{$default-tertiary}; + --placeholder-text: #{$faded-grey}; --baja-colour: #{$baja-colour}; } From 7327c4b8acdd4cda82a8eab168efda17368433d3 Mon Sep 17 00:00:00 2001 From: camdnnn Date: Sun, 19 Jan 2025 20:45:35 -0500 Subject: [PATCH 04/10] updated coloring --- front-end/src/components/App.tsx | 1 - front-end/src/components/textfield/TextField.module.scss | 4 ++-- front-end/src/styles/_variables.scss | 6 ++---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/front-end/src/components/App.tsx b/front-end/src/components/App.tsx index 75220ba0..36c2ebe1 100644 --- a/front-end/src/components/App.tsx +++ b/front-end/src/components/App.tsx @@ -54,7 +54,6 @@ const App = () => { {location.pathname !== '/' && ( )} -
{successMessage.message}
{modal === 'Create' ? Date: Mon, 20 Jan 2025 13:52:42 -0500 Subject: [PATCH 05/10] cleanup --- front-end/src/components/App.tsx | 4 ---- front-end/src/components/textfield/TextField.tsx | 15 +++++---------- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/front-end/src/components/App.tsx b/front-end/src/components/App.tsx index 36c2ebe1..194ac103 100644 --- a/front-end/src/components/App.tsx +++ b/front-end/src/components/App.tsx @@ -13,8 +13,6 @@ import MapChart from './map/MapChart/MapChart'; import cx from 'classnames'; import ModelViewer from './model/ModelViewer'; -import TextField from './textfield/TextField'; - const App = () => { const location = useLocation(); @@ -47,8 +45,6 @@ const App = () => { return () => clearTimeout(timer); }, [successMessage]); - const [value, setValue] = useState(''); - return (
{location.pathname !== '/' && ( diff --git a/front-end/src/components/textfield/TextField.tsx b/front-end/src/components/textfield/TextField.tsx index b56a7cc9..47fb9e06 100644 --- a/front-end/src/components/textfield/TextField.tsx +++ b/front-end/src/components/textfield/TextField.tsx @@ -2,24 +2,19 @@ import styles from './TextField.module.scss'; interface TextFieldProps { title: string; + value: string; + setValue: (value: string) => void; label?: string; placeholder?: string; - defaultValue?: string; - value?: string; - onChange?: (value: string) => void; } const TextField = ({ title, + value, + setValue, label, placeholder, - value, - onChange, }: TextFieldProps) => { - const handleOnChange = (e: React.ChangeEvent) => { - if (onChange) onChange(e.target.value); - }; - return (
{label &&
{label}
} @@ -32,7 +27,7 @@ const TextField = ({ type="text" placeholder={placeholder} value={value} - onChange={handleOnChange} + onChange={(e) => setValue(e.target.value)} />
From 6396eb896c7c191bf3f71e2d5bd2b7634d830890 Mon Sep 17 00:00:00 2001 From: camdnnn Date: Mon, 20 Jan 2025 14:06:43 -0500 Subject: [PATCH 06/10] updated alt text --- front-end/src/styles/_variables.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/front-end/src/styles/_variables.scss b/front-end/src/styles/_variables.scss index ee6ea093..4ca89d10 100644 --- a/front-end/src/styles/_variables.scss +++ b/front-end/src/styles/_variables.scss @@ -6,7 +6,7 @@ $background: #222222; $accent: #BB0808; $text-colour: #FFFFFF; $upload-stroke: #636363; -$alternate-text: #B3B3B3; +$alt-text: #B3B3B3; // Baja colour $baja-colour: #75151E; @@ -21,7 +21,7 @@ $baja-colour: #75151E; --text-colour: #{$text-colour}; --light-grey: #{$upload-stroke}; - --alt-text: #{$alternate-text}; + --alt-text: #{$alt-text}; --baja-colour: #{$baja-colour}; } @@ -33,4 +33,5 @@ $baja-colour: #75151E; --background: #FFFFFF; --accent: #BB0808; --text-colour: #000000; + --alt-text: #B3B3B3; } \ No newline at end of file From 1d1dc909c880350eda47b41f6b51d599ecdbfef6 Mon Sep 17 00:00:00 2001 From: camdnnn Date: Mon, 20 Jan 2025 14:25:49 -0500 Subject: [PATCH 07/10] fixed bracket --- front-end/src/styles/_variables.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/front-end/src/styles/_variables.scss b/front-end/src/styles/_variables.scss index 55d6c54e..48fabef1 100644 --- a/front-end/src/styles/_variables.scss +++ b/front-end/src/styles/_variables.scss @@ -36,6 +36,7 @@ $upload-stroke: #636363; --accent: #BB0808; --text-colour: #000000; --alt-text: #B3B3B3; +} // A map of z-index values for different components $z-index: ( From a2114f621497c61ba19940e5d1cfd37be6847fa3 Mon Sep 17 00:00:00 2001 From: Cameron Dunn Date: Tue, 21 Jan 2025 14:29:34 -0500 Subject: [PATCH 08/10] updated formatting --- front-end/src/components/textfield/TextField.module.scss | 6 +++--- front-end/src/components/textfield/TextField.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/front-end/src/components/textfield/TextField.module.scss b/front-end/src/components/textfield/TextField.module.scss index eafd6bcb..1eb1e147 100644 --- a/front-end/src/components/textfield/TextField.module.scss +++ b/front-end/src/components/textfield/TextField.module.scss @@ -2,8 +2,6 @@ .textField { @include fonts.text-medium; - display: flex; - flex-direction: column; .label { color: var(--alt-text); @@ -16,6 +14,7 @@ background-color: var(--light-grey); border-radius: 8px; padding: 0.5rem; + .title { color: var(--text-colour); @@ -29,7 +28,8 @@ color: var(--text-colour); flex-grow: 1; padding-left: 0.5rem; - text-align: center; + text-align: left; + width: 100%; &::placeholder { color: var(--alt-text); diff --git a/front-end/src/components/textfield/TextField.tsx b/front-end/src/components/textfield/TextField.tsx index 47fb9e06..247dcdfa 100644 --- a/front-end/src/components/textfield/TextField.tsx +++ b/front-end/src/components/textfield/TextField.tsx @@ -13,7 +13,7 @@ const TextField = ({ value, setValue, label, - placeholder, + placeholder = 'Value', }: TextFieldProps) => { return (
From f057018a13f4cc73611581571c8380ba4c5c188d Mon Sep 17 00:00:00 2001 From: camdnnn Date: Wed, 22 Jan 2025 20:59:22 -0500 Subject: [PATCH 09/10] increased left padding --- front-end/src/components/textfield/TextField.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front-end/src/components/textfield/TextField.module.scss b/front-end/src/components/textfield/TextField.module.scss index 1eb1e147..7c3130e2 100644 --- a/front-end/src/components/textfield/TextField.module.scss +++ b/front-end/src/components/textfield/TextField.module.scss @@ -13,7 +13,7 @@ align-items: center; background-color: var(--light-grey); border-radius: 8px; - padding: 0.5rem; + padding: 1rem; .title { From c3c294c31a695a0d8f77b592d333e4ff4e985809 Mon Sep 17 00:00:00 2001 From: camdnnn Date: Wed, 22 Jan 2025 21:03:03 -0500 Subject: [PATCH 10/10] increased the correct padding --- front-end/src/components/textfield/TextField.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front-end/src/components/textfield/TextField.module.scss b/front-end/src/components/textfield/TextField.module.scss index 7c3130e2..dc0ae847 100644 --- a/front-end/src/components/textfield/TextField.module.scss +++ b/front-end/src/components/textfield/TextField.module.scss @@ -13,7 +13,7 @@ align-items: center; background-color: var(--light-grey); border-radius: 8px; - padding: 1rem; + padding: 0.5rem; .title { @@ -27,7 +27,7 @@ outline: none; color: var(--text-colour); flex-grow: 1; - padding-left: 0.5rem; + padding-left: 1rem; text-align: left; width: 100%;