ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-04-20 08:20:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

frontend: styling other components

Browse Source
This commit is contained in:
Mose Müller 2023-08-08 16:39:29 +02:00
parent 82a21f1e5d
commit 2951a73883
6 changed files with 44 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.css
View File

@ -1,3 +1,7 @@
body {
min-width: 576px;
max-width: 1200px;
}
input.instantUpdate { input.instantUpdate {
background-color: rgba(255, 0, 0, 0.1); background-color: rgba(255, 0, 0, 0.1);
} }

2
frontend/src/components/AsyncMethodComponent.tsx
View File

@ -72,7 +72,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
return ( return (
<div <div
className="col-5 align-items-center asyncMethodComponent" className="align-items-center asyncMethodComponent"
id={parent_path.concat('.' + name)}> id={parent_path.concat('.' + name)}>
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p> <p>Render count: {renderCount.current}</p>

2
frontend/src/components/EnumComponent.tsx
View File

@ -31,7 +31,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
)} )}
<DocStringComponent docString={docString} /> <DocStringComponent docString={docString} />
<Row> <Row>
<Col className="col-5 d-flex align-items-center"> <Col className="d-flex align-items-center">
<InputGroup.Text>{name}</InputGroup.Text> <InputGroup.Text>{name}</InputGroup.Text>
<Form.Select <Form.Select
aria-label="Default select example" aria-label="Default select example"

2
frontend/src/components/MethodComponent.tsx
View File

@ -54,7 +54,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
return ( return (
<div <div
className="col-5 align-items-center methodComponent" className="align-items-center methodComponent"
id={parent_path.concat('.' + name)}> id={parent_path.concat('.' + name)}>
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p> <p>Render count: {renderCount.current}</p>

50
frontend/src/components/NumberComponent.tsx
View File

@ -245,32 +245,30 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
<p>Render count: {renderCount.current}</p> <p>Render count: {renderCount.current}</p>
)} )}
<DocStringComponent docString={docString} /> <DocStringComponent docString={docString} />
<div className="row"> <div className="d-flex">
<div className="d-flex"> <InputGroup>
<InputGroup> {showName && <InputGroup.Text>{name}</InputGroup.Text>}
{showName && <InputGroup.Text>{name}</InputGroup.Text>} <Form.Control
<Form.Control type="text"
type="text" value={inputString}
value={inputString} disabled={readOnly}
disabled={readOnly} name={parent_path.concat(name)}
name={parent_path.concat(name)} onKeyDown={handleKeyDown}
onKeyDown={handleKeyDown} onBlur={handleBlur}
onBlur={handleBlur} className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''} />
/> {unit && <InputGroup.Text>{unit}</InputGroup.Text>}
{unit && <InputGroup.Text>{unit}</InputGroup.Text>} </InputGroup>
</InputGroup> {!readOnly && (
{!readOnly && ( <div className="d-flex flex-column">
<div className="d-flex flex-column"> <Button className="numberComponentButton" variant="outline-secondary">
<Button className="numberComponentButton" variant="outline-secondary"> +
+ </Button>
</Button> <Button className="numberComponentButton" variant="outline-secondary">
<Button className="numberComponentButton" variant="outline-secondary"> -
- </Button>
</Button> </div>
</div> )}
)}
</div>
</div> </div>
</div> </div>
); );

30
frontend/src/components/StringComponent.tsx
View File

@ -56,23 +56,19 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
<p>Render count: {renderCount.current}</p> <p>Render count: {renderCount.current}</p>
)} )}
<DocStringComponent docString={docString} /> <DocStringComponent docString={docString} />
<div className="row"> <InputGroup>
<div className="col-5 d-flex"> <InputGroup.Text>{name}</InputGroup.Text>
<InputGroup> <Form.Control
<InputGroup.Text>{name}</InputGroup.Text> type="text"
<Form.Control value={inputString}
type="text" disabled={readOnly}
value={inputString} name={name}
disabled={readOnly} onChange={handleChange}
name={name} onKeyDown={handleKeyDown}
onChange={handleChange} onBlur={handleBlur}
onKeyDown={handleKeyDown} className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
onBlur={handleBlur} />
className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''} </InputGroup>
/>
</InputGroup>
</div>
</div>
</div> </div>
); );
}); });