Improve usability

clubcapra · Mar 15, 2023 · a498b41 · a498b41
1 parent 28b44f9
commit a498b41
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 39 deletions.
diff --git a/src/renderer/components/common/LabeledInput.tsx b/src/renderer/components/common/LabeledInput.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC } from 'react';
+import React, { ChangeEvent, CSSProperties, FC } from 'react';
 import { Input } from '@/renderer/components/common/Input';
 import { styled } from '@/renderer/globalStyles/styled';
 
@@ -18,17 +18,19 @@ interface LabeledInputProps {
   label: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   type?: 'text' | 'number' | 'password';
+  labelStyle?: CSSProperties;
 }
 
 export const LabeledInput: FC<LabeledInputProps> = ({
   value,
   onChange,
   label,
   type,
+  labelStyle,
 }) => {
   return (
     <StyledDiv>
-      <StyledLabel>{label}</StyledLabel>
+      <StyledLabel style={labelStyle}>{label}</StyledLabel>
       <Input type={type || 'text'} value={value} onChange={onChange} />
     </StyledDiv>
   );

diff --git a/src/renderer/components/pages/Config/pages/ArmPresetsConfig/ArmJointInput.tsx b/src/renderer/components/pages/Config/pages/ArmPresetsConfig/ArmJointInput.tsx
@@ -1,4 +1,5 @@
 import { LabeledInput } from '@/renderer/components/common/LabeledInput';
+import { defaultTheme } from '@/renderer/globalStyles/themes/defaultTheme';
 import React, { useCallback, useState } from 'react';
 
 interface ArmJointInputProps {
@@ -40,12 +41,12 @@ const ArmJointInput = ({
         value={inputValue}
         type="number"
         onChange={onInputChange}
+        labelStyle={
+          error
+            ? { color: defaultTheme.colors.danger }
+            : { color: defaultTheme.colors.fontLight }
+        }
       />
-      {error && (
-        <div>
-          Value must be between {min} and {max}
-        </div>
-      )}
     </div>
   );
 };

diff --git a/src/renderer/components/pages/Config/pages/ArmPresetsConfig/ArmPreset.tsx b/src/renderer/components/pages/Config/pages/ArmPresetsConfig/ArmPreset.tsx
@@ -1,13 +1,13 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   ArmPreset,
   armPresetsSlice,
 } from '@/renderer/store/modules/armPresets';
 import { styled } from '@/renderer/globalStyles/styled';
-import { LabeledInput } from '@/renderer/components/common/LabeledInput';
 import { useDispatch } from 'react-redux';
-import { FaTimes } from 'react-icons/fa';
+import { FaCheck, FaPen, FaTimes } from 'react-icons/fa';
 import ArmJointInput from './ArmJointInput';
+import { Input } from '@/renderer/components/common/Input';
 
 interface ArmPresetProps {
   preset: ArmPreset;
@@ -34,12 +34,11 @@ const Card = styled.div`
   padding: 16px;
   margin: 8px;
   display: flex;
-  min-width: 300px;
+  width: 350px;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-  transition: box-shadow 0.2s ease-in-out;
 `;
 
 const HeaderRow = styled.div`
@@ -50,6 +49,21 @@ const HeaderRow = styled.div`
   width: 100%;
 `;
 
+const InputRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const ButtonRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+`;
+
 const DeleteButton = styled.a`
   border: none;
   border-radius: 4px;
@@ -62,8 +76,21 @@ const DeleteButton = styled.a`
   }
 `;
 
+const EditButton = styled.a`
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  margin-top: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  &:hover {
+    color: ${({ theme }) => theme.colors.success};
+  }
+`;
+
 const ArmPreset = ({ preset }: ArmPresetProps) => {
   const dispatch = useDispatch();
+  const [editMode, setEditMode] = useState(false);
 
   const onJointChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>, id: number) => {
@@ -106,29 +133,43 @@ const ArmPreset = ({ preset }: ArmPresetProps) => {
 
   return (
     <Card>
-      <HeaderRow>
-        <h3>{preset.name}</h3>
-        <DeleteButton onClick={() => onDelete(preset.id)}>
-          <FaTimes />
-        </DeleteButton>
-      </HeaderRow>
-      <LabeledInput
-        label="Preset Name"
-        value={preset.name}
-        type="text"
-        onChange={onNameChange}
-      />
-      {preset.positions.map((joint, index) => (
-        <div key={index}>
-          <ArmJointInput
-            value={joint}
-            id={index}
-            onChange={onJointChange}
-            min={jointBoundaries[index].min}
-            max={jointBoundaries[index].max}
-          />
-        </div>
-      ))}
+      {editMode ? (
+        <>
+          <HeaderRow>
+            <Input value={preset.name} type="text" onChange={onNameChange} />
+            <EditButton onClick={() => setEditMode(!editMode)}>
+              {<FaCheck />}
+            </EditButton>
+          </HeaderRow>
+          <InputRow>
+            {preset.positions.map((joint, index) => (
+              <div key={index}>
+                <ArmJointInput
+                  value={joint}
+                  id={index}
+                  onChange={onJointChange}
+                  min={jointBoundaries[index].min}
+                  max={jointBoundaries[index].max}
+                />
+              </div>
+            ))}
+          </InputRow>
+        </>
+      ) : (
+        <HeaderRow>
+          <h3>{preset.name}</h3>
+          <ButtonRow>
+            <EditButton onClick={() => setEditMode(!editMode)}>
+              {<FaPen />}
+            </EditButton>
+            {!editMode && (
+              <DeleteButton onClick={() => onDelete(preset.id)}>
+                <FaTimes />
+              </DeleteButton>
+            )}
+          </ButtonRow>
+        </HeaderRow>
+      )}
     </Card>
   );
 };

diff --git a/src/renderer/components/pages/Config/pages/ArmPresetsConfig/ArmPresetsConfig.tsx b/src/renderer/components/pages/Config/pages/ArmPresetsConfig/ArmPresetsConfig.tsx
@@ -24,6 +24,14 @@ const PresetsContainer = styled.div`
   flex-wrap: wrap;
 `;
 
+const ButtonRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  fit-content: fit-content;
+`;
+
 const ArmPresetsConfig = () => {
   const armPresets = useSelector(selectAllPresets);
   const selectedPreset = useSelector(selectSelectedPreset);
@@ -40,6 +48,16 @@ const ArmPresetsConfig = () => {
     );
   }, [dispatch]);
 
+  const addPresetWithCurrentPositions = () => {
+    dispatch(
+      armPresetsSlice.actions.addPreset({
+        id: nanoid(),
+        name: 'New Preset',
+        positions: jointPositions,
+      })
+    );
+  };
+
   const onPresetSelect = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       dispatch(armPresetsSlice.actions.selectPreset(e.target.value));
@@ -75,10 +93,20 @@ const ArmPresetsConfig = () => {
         )}
 
         <SectionTitle>Presets</SectionTitle>
-        <Button onClick={addPreset}>
-          <FaPlus />
-          <span style={{ marginLeft: '0.2rem' }}>Add Preset</span>
-        </Button>
+        <ButtonRow>
+          <Button onClick={addPreset}>
+            <FaPlus />
+            <span style={{ marginLeft: '0.2rem' }}>Add Preset</span>
+          </Button>
+          {jointPositions.length > 0 && (
+            <Button onClick={addPresetWithCurrentPositions}>
+              <FaPlus />
+              <span style={{ marginLeft: '0.2rem' }}>
+                Add Preset With Current Positions
+              </span>
+            </Button>
+          )}
+        </ButtonRow>
         <PresetsContainer>
           {armPresets.map((preset) => (
             <ArmPreset key={preset.id} preset={preset} />