Skip to content

Commit

Permalink
Working on layout
Browse files Browse the repository at this point in the history
GermanBluefox committed Jan 5, 2025
1 parent e6018cb commit 647b74e
Showing 17 changed files with 491 additions and 345 deletions.
53 changes: 31 additions & 22 deletions src-editor/src/App.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import React from 'react';
import ReactSplit, { SplitDirection } from '@devbookhq/splitter';
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';

import { DragDropContext, type DropResult } from 'react-beautiful-dnd';
import { DragDropContext, type DropResult, type DragUpdate, DragStart } from 'react-beautiful-dnd';

import { Dialog, DialogTitle, Button, DialogActions, Box } from '@mui/material';

@@ -49,8 +49,6 @@ import type {

const styles: Record<string, any> = {
root: (theme: IobTheme): React.CSSProperties => ({
flexGrow: 1,
display: 'flex',
width: '100%',
height: '100%',
background: theme.palette.background.default,
@@ -769,6 +767,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
this.setState({ autoSave });
}
}}
windowWidth={this.state.menuSizes[1]}
/>
);
}
@@ -834,10 +833,11 @@ class App extends GenericApp<GenericAppProps, AppState> {

onDragEnd = async (result: DropResult): Promise<void> => {
const { source, destination, draggableId } = result;

if (destination && draggableId.includes('***') && source.droppableId === 'Lines') {
// Add new line to preset
const [instance, stateId] = draggableId.split('***');
try {
// Add new line
const obj: ioBroker.StateObject | null | undefined = (await this.socket.getObject(stateId)) as
| ioBroker.StateObject
| null
@@ -891,7 +891,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
this.onError(e, 'Cannot read object');
}
} else if (destination && source.droppableId === destination.droppableId) {
// switch lines order
// switch lines order in the current preset
const presetData: ChartConfigMore = JSON.parse(JSON.stringify(this.state.presetData));

// correct commonYAxis
@@ -999,31 +999,40 @@ class App extends GenericApp<GenericAppProps, AppState> {

let splitter: React.JSX.Element | React.JSX.Element[];
if (this.state.menuOpened) {
// @ts-expect-error idk
splitter = <DragDropContext onDragEnd={this.onDragEnd}>
<ReactSplit
direction={SplitDirection.Horizontal}
initialSizes={this.state.menuSizes}
minWidths={[307, 300]}
onResizeFinished={(_gutterIdx: number, menuSizes: [number, number]): void => {
this.setState({ resizing: false, menuSizes });
window.localStorage.setItem('App.echarts.menuSizes', JSON.stringify(menuSizes));
}}
gutterClassName={this.state.themeType === 'dark' ? 'Dark visGutter' : 'Light visGutter'}
splitter = (
// @ts-expect-error idk
<DragDropContext
onDragEnd={this.onDragEnd}
>
{this.renderMenu()}
{this.renderMain()}
</ReactSplit>
</DragDropContext>;
<ReactSplit
direction={SplitDirection.Horizontal}
initialSizes={this.state.menuSizes}
minWidths={[307, 300]}
onResizeFinished={(_gutterIdx: number, menuSizes: [number, number]): void => {
this.setState({ resizing: false, menuSizes: [menuSizes[0], 100 - menuSizes[0]] });
window.localStorage.setItem('App.echarts.menuSizes', JSON.stringify(menuSizes));
}}
gutterClassName={this.state.themeType === 'dark' ? 'Dark visGutter' : 'Light visGutter'}
>
{this.renderMenu()}
{this.renderMain()}
</ReactSplit>
</DragDropContext>
);
} else {
splitter = this.renderMain();
splitter = splitter = (
// @ts-expect-error idk
<DragDropContext
onDragEnd={this.onDragEnd}
>
{this.renderMain()}
</DragDropContext>);
}

return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={this.state.theme}>
<Box
component="div"
sx={styles.root}
key="divSide"
>
6 changes: 4 additions & 2 deletions src-editor/src/Components/Fields.tsx
Original file line number Diff line number Diff line change
@@ -27,11 +27,13 @@ const styles: Record<string, React.CSSProperties> = {
fontSize: '0.8rem',
whiteSpace: 'break-spaces',
},
objectContainer: { display: 'flex' },
objectContainer: { display: 'flex', alignItems: 'center' },
objectField: { flex: 1 },
objectButton: {
marginTop: 'auto',
paddingLeft: 0,
maxHeight: 29,
height: 29,
},
sliderContainer: {
position: 'relative',
@@ -165,8 +167,8 @@ export const IOTextField = (props: IOTextFieldProps): React.JSX.Element => (
<TextField
variant="standard"
disabled={!!props.disabled}
fullWidth
style={{
width: props.value ? (props.width ? props.width - 30 : 'calc(100% - 30px)') : props.width || '100%',
minWidth: props.minWidth,
}}
label={I18n.t(props.label)}
26 changes: 9 additions & 17 deletions src-editor/src/Components/Line.tsx
Original file line number Diff line number Diff line change
@@ -34,11 +34,11 @@ import type { ChartAggregateType, ChartConfigMore, ChartLineConfigMore, ChartTyp

const WIDTHS = {
instance: 100,
id: 200,
id: 100,
chartType: 120,
dataType: 110,
color: 100,
name: 200,
name: 150,
buttons: 50 + 50 + 16 + 50,
};

@@ -355,10 +355,9 @@ class Line extends React.Component<LineProps, LineState> {
name?: boolean;
} = {};

const windowWidth = this.props.width - 95;
const padding = 8;
const windowWidth = (this.props.width || 1024) - 32 - 40 - 20; // 32 is padding, width of folder icon is 40, 20 is drag handle
const padding = 4;

let idWidth: string;
if (
windowWidth >=
WIDTHS.instance +
@@ -370,7 +369,6 @@ class Line extends React.Component<LineProps, LineState> {
WIDTHS.buttons +
padding * 6
) {
idWidth = `calc(100% - ${WIDTHS.instance + WIDTHS.chartType + WIDTHS.dataType + WIDTHS.color + WIDTHS.name + WIDTHS.buttons + padding * 6}px)`;
visible.chartType = true;
visible.dataType = true;
visible.color = true;
@@ -385,24 +383,17 @@ class Line extends React.Component<LineProps, LineState> {
WIDTHS.buttons +
padding * 5
) {
idWidth = `calc(100% - ${WIDTHS.buttons + WIDTHS.instance + WIDTHS.chartType + WIDTHS.dataType + WIDTHS.color + padding * 5}px)`;
visible.chartType = true;
visible.dataType = true;
visible.color = true;
} else if (
windowWidth >=
WIDTHS.instance + WIDTHS.id + WIDTHS.chartType + WIDTHS.dataType + WIDTHS.buttons + padding * 4
) {
idWidth = `calc(100% - ${WIDTHS.buttons + WIDTHS.instance + WIDTHS.chartType + WIDTHS.dataType + padding * 4}px)`;
visible.chartType = true;
visible.dataType = true;
} else if (windowWidth >= WIDTHS.instance + WIDTHS.id + WIDTHS.chartType + WIDTHS.buttons + padding * 3) {
// nothing visible
idWidth = `calc(100% - ${WIDTHS.buttons + WIDTHS.instance + WIDTHS.chartType + padding * 3}px)`;
visible.chartType = true;
} else {
// nothing visible
idWidth = `calc(100% - ${WIDTHS.buttons + WIDTHS.instance + padding * 2}px)`;
}

const hasBarOrPolar = this.props.presetData.l.find(
@@ -460,7 +451,7 @@ class Line extends React.Component<LineProps, LineState> {
)}
<IOSelect
disabled={!!this.props.onPaste}
value={this.props.line.instance}
value={this.props.line.instance || ''}
updateValue={(value: string): void => {
const line: ChartLineConfigMore = JSON.parse(JSON.stringify(this.props.line));
line.instance = value;
@@ -474,6 +465,9 @@ class Line extends React.Component<LineProps, LineState> {
instance => (result[instance._id] = instance._id.replace('system.adapter.', '')),
);
result.json = 'JSON';
if (!result[this.props.line.instance]) {
result[this.props.line.instance] = this.props.line.instance.replace('system.adapter.', '');
}
return result;
})()}
minWidth={WIDTHS.instance}
@@ -490,7 +484,6 @@ class Line extends React.Component<LineProps, LineState> {
value={this.props.line.id}
updateValue={this.onIdChanged}
theme={this.props.theme}
width={idWidth}
name="id"
label="ID"
customFilter={
@@ -505,7 +498,7 @@ class Line extends React.Component<LineProps, LineState> {
: null
}
styles={{
fieldContainer: { ...styles.shortIdField, ...(this.props.onPaste ? styles.paste : undefined) },
fieldContainer: { ...styles.shortIdField, ...(this.props.onPaste ? styles.paste : undefined), flexGrow: 1 },
}}
socket={this.props.socket}
/>
@@ -594,7 +587,6 @@ class Line extends React.Component<LineProps, LineState> {
}}
/>
) : null}
<div style={{ flexGrow: 1 }} />
{!this.props.onPaste &&
this.props.line.chartType !== 'scatterplot' &&
this.props.line.chartType !== 'bar' &&
Loading

0 comments on commit 647b74e

Please sign in to comment.