First draft of directory selector

kopia · Jan 6, 2024 · 2a888f2 · 2a888f2
1 parent 7812060
commit 2a888f2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/src/components/SetupRepositoryFilesystem.jsx b/src/components/SetupRepositoryFilesystem.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { handleChange, validateRequiredFields } from '../forms';
 import { RequiredDirectory } from '../forms/RequiredDirectory';
+import { Row } from 'react-bootstrap';
 
 export class SetupRepositoryFilesystem extends Component {
     constructor(props) {
@@ -18,7 +19,7 @@ export class SetupRepositoryFilesystem extends Component {
 
     render() {
         return <>
-                {RequiredDirectory(this, "Directory Path", "path", { autoFocus: true, placeholder: "enter directory path where you want to store repository files"})}
+            {RequiredDirectory(this, "Directory Path", "path", { autoFocus: true, placeholder: "enter directory path where you want to store repository files"})}
         </>;
     }
 }
diff --git a/src/css/index.css b/src/css/index.css
@@ -3,8 +3,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 code {

diff --git a/src/forms/RequiredDirectory.jsx b/src/forms/RequiredDirectory.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
+import { Col } from 'react-bootstrap';
 import FormControl from 'react-bootstrap/FormControl';
 import InputGroup from 'react-bootstrap/InputGroup';
 import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
@@ -11,21 +11,28 @@ import { stateProperty } from '.';
 export function RequiredDirectory(component, label, name, props = {}, helpText = null) {
     let { onDirectorySelected, ...inputProps } = props;
     if (!window.kopiaUI) {
-        return <Form.Control name={name} size="sm" isInvalid={stateProperty(component, name, null) === ''}
-        onChange={component.handleChange}
-            value={stateProperty(component, name)}{...inputProps} />
+        return <>
+            <Form.Label className="required">{label}</Form.Label>
+            <InputGroup as={Col}>
+                <Form.Control name={name} size="sm" isInvalid={stateProperty(component, name, null) === ''}
+                    onChange={component.handleChange}
+                    value={stateProperty(component, name)}{...inputProps} /></InputGroup>
+        </>
     }
-    return <InputGroup as={Col}>
-        <Form.Label className="required">{label}</Form.Label>
-        <FormControl name={name} size="sm"
-            isInvalid={stateProperty(component, name, null) === ''}
-            value={stateProperty(component, name)}
-            onChange={component.handleChange}{...inputProps} />
-        <Button size="sm" onClick={() => window.kopiaUI.selectDirectory(onDirectorySelected)}>
-            <FontAwesomeIcon icon={faFolderOpen} />
-        </Button>
+    return <>
+        <Form.Label htmlFor='directoryInput' className="required">{label}</Form.Label>
+        <InputGroup as={Col}>
+            <FormControl name={name} size="sm" id='directoryInput'
+                isInvalid={stateProperty(component, name, null) === ''}
+                value={stateProperty(component, name)}
+                onChange={component.handleChange}{...inputProps}></FormControl>
 
-        {helpText && <Form.Text className="text-muted">{helpText}</Form.Text>}
-        <Form.Control.Feedback type="invalid">Required field</Form.Control.Feedback>
-    </InputGroup>
+            <Button size="sm" onClick={() => window.kopiaUI.selectDirectory(onDirectorySelected)}>
+                <FontAwesomeIcon icon={faFolderOpen} />
+            </Button>
+
+            {helpText && <Form.Text className="text-muted">{helpText}</Form.Text>}
+            <Form.Control.Feedback type="invalid">Required field</Form.Control.Feedback>
+        </InputGroup>
+    </>
 }