ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-11 07:47:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: updating frontend styling

Browse Source 
- forms will have red background colour when "instant  update" is enabled
- button styling is in css file now
This commit is contained in:
Mose Müller
2023-08-02 12:06:23 +02:00
parent c1a250e7e6
commit 5400067c18
20 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/App.css Normal file
View File

@ -0,0 +1,8 @@
input.instantUpdate {
background-color: rgba(255, 0, 0, 0.1);
}
.numberComponentButton {
padding: 0.15em 6px !important;
font-size: 0.70rem !important;
}

2
frontend/src/App.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useReducer, useState } from 'react';
import { Navbar, Button, Form, Nav, Offcanvas, Container } from 'react-bootstrap';
import { Navbar, Form, Offcanvas, Container } from 'react-bootstrap';
import { hostname, port, socket } from './socket';
import {
DataServiceComponent,

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

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

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

@ -27,7 +27,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
};
return (
<div className={'button'} id={parent_path.concat('.' + name)}>
<div className={'buttonComponent'} id={parent_path.concat('.' + name)}>
{process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p>
)}

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

@ -17,7 +17,7 @@ export const DataServiceComponent = React.memo(
const [open, setOpen] = useState(true);
return (
<div className="App">
<div className="dataServiceComponent">
<Card className="mb-3">
<Card.Header
onClick={() => setOpen(!open)}

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

@ -25,7 +25,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
};
return (
<div className={'component boolean'} id={parent_path.concat('.' + name)}>
<div className={'enumComponent'} id={parent_path.concat('.' + name)}>
{process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p>
)}

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

@ -20,7 +20,7 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
const { name, parent_path, value, docString, isInstantUpdate } = props;
return (
<div className={'component list'} id={parent_path.concat(name)}>
<div className={'listComponent'} id={parent_path.concat(name)}>
{process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p>
)}

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

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

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

@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
import { Form, InputGroup, Button } from 'react-bootstrap';
import { emit_update } from '../socket';
import { DocStringComponent } from './DocStringComponent';
import '../App.css';
// TODO: add button functionality
@ -223,7 +224,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
};
return (
<div className={'number component'} id={parent_path.concat(name)}>
<div className={'numberComponent'} id={parent_path.concat(name)}>
{process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p>
)}
@ -239,19 +240,15 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
name={parent_path.concat(name)}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
/>
</InputGroup>
{!readOnly && (
<div className="d-flex flex-column">
<Button
style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
// className="mb-1"
variant="outline-secondary">
<Button className="numberComponentButton" variant="outline-secondary">
+
</Button>
<Button
style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
variant="outline-secondary">
<Button className="numberComponentButton" variant="outline-secondary">
-
</Button>
</div>

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

@ -65,7 +65,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
};
return (
<div className={'slider'} id={parent_path.concat('.' + name)}>
<div className={'sliderComponent'} id={parent_path.concat('.' + name)}>
{process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p>
)}

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

@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
import { Form, InputGroup } from 'react-bootstrap';
import { emit_update } from '../socket';
import { DocStringComponent } from './DocStringComponent';
import '../App.css';
// TODO: add button functionality
@ -50,7 +51,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
};
return (
<div className={'component boolean'} id={parent_path.concat(name)}>
<div className={'stringComponent'} id={parent_path.concat(name)}>
{process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p>
)}
@ -67,6 +68,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
onChange={handleChange}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
/>
</InputGroup>
</div>