WEB APP: Панель "Графики проектов" - адаптивная верстка на всю площадь экрана, стили полос прокрутки по-умолчанию

This commit is contained in:
Mikhail Chechnev 2024-09-26 19:27:34 +03:00
parent 97472bec14
commit b490e07d19

View File

@ -9,6 +9,8 @@
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
import { Grid, Box } from "@mui/material"; //Интерфейсные элементы import { Grid, Box } from "@mui/material"; //Интерфейсные элементы
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { ApplicationСtx } from "../../context/application"; //Контекст приложения import { ApplicationСtx } from "../../context/application"; //Контекст приложения
@ -21,7 +23,7 @@ import { dataCellRender, groupCellRender } from "./layouts"; //Дополнит
//Стили //Стили
const STYLES = { const STYLES = {
DATA_GRID_CONTAINER: { minWidth: "95vw", maxWidth: "95vw", minHeight: "87vh", maxHeight: "87vh" } DATA_GRID_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", ...APP_STYLES.SCROLL }
}; };
//----------- //-----------
@ -71,32 +73,30 @@ const PrjGraph = () => {
//Генерация содержимого //Генерация содержимого
return ( return (
<div> <Grid container>
<Grid container spacing={1}> <Grid item xs={12}>
<Grid item xs={12}> <Box display="flex" justifyContent="center" alignItems="center">
<Box pt={1} display="flex" justifyContent="center" alignItems="center"> {dataGrid.dataLoaded ? (
{dataGrid.dataLoaded ? ( <P8PDataGrid
<P8PDataGrid {...P8P_DATA_GRID_CONFIG_PROPS}
{...P8P_DATA_GRID_CONFIG_PROPS} columnsDef={dataGrid.columnsDef}
columnsDef={dataGrid.columnsDef} groups={dataGrid.groups}
groups={dataGrid.groups} rows={dataGrid.rows}
rows={dataGrid.rows} size={P8P_DATA_GRID_SIZE.LARGE}
size={P8P_DATA_GRID_SIZE.LARGE} reloading={dataGrid.reload}
reloading={dataGrid.reload} fixedHeader={dataGrid.fixedHeader}
fixedHeader={dataGrid.fixedHeader} fixedColumns={dataGrid.fixedColumns}
fixedColumns={dataGrid.fixedColumns} dataCellRender={prms => dataCellRender({ ...prms, pOnlineShowDocument })}
dataCellRender={prms => dataCellRender({ ...prms, pOnlineShowDocument })} groupCellRender={prms => groupCellRender({ ...prms, pOnlineShowDocument })}
groupCellRender={prms => groupCellRender({ ...prms, pOnlineShowDocument })} containerComponentProps={{
containerComponentProps={{ elevation: 0,
elevation: 3, sx: STYLES.DATA_GRID_CONTAINER
sx: STYLES.DATA_GRID_CONTAINER }}
}} />
/> ) : null}
) : null} </Box>
</Box>
</Grid>
</Grid> </Grid>
</div> </Grid>
); );
}; };